Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Implementing Artist-Branded Event Pages: The Brandi Carlile Concert Booking Case Study

When building dynamic artist landing pages for the Rady Shell at Jacobs Park event series, we needed a systematic approach to make each artist's page reflect their visual identity while maintaining consistent booking functionality across all event pages. This post documents the technical implementation of the Brandi Carlile event page, including asset management, modal integration, and styling architecture.

What Was Done

We completely rewrote the Brandi Carlile event page located at /Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/sites/brandicarlile/index.html to:

  • Implement a full-height hero section featuring artist photography with a warm gradient overlay
  • Establish a cohesive color palette based on the artist's brand identity (forest greens, warm ambers, parchment creams)
  • Wire all call-to-action buttons to trigger the JADA booking modal via the jadaOpenBook() function
  • Create a responsive 3-photo gallery strip showcasing the artist below the hero
  • Deploy to staging for stakeholder review before production release

Asset Management and S3 Architecture

Before implementing the visual redesign, we validated the image asset pipeline. The Brandi Carlile artist photo was already present in the queenofsandiego.com S3 bucket at queenofsandiego.com/assets/images/concert-nights/brandicarlile.jpg. This is a critical point: rather than creating separate S3 buckets per artist, we centralize all concert-nights imagery under a single bucket prefix structure.

The asset discovery workflow involved:

  • Querying the brandicarlile-specific S3 bucket for existing assets
  • Cross-referencing the main queenofsandiego.com S3 bucket's /assets/images/concert-nights/ directory
  • Confirming the image was already accessible via CloudFront without requiring new uploads

This approach reduces storage fragmentation and simplifies cache invalidation. When the brandicarlile.jpg asset is updated, a single CloudFront invalidation request (targeting the /assets/images/concert-nights/* pattern) refreshes all pages referencing that image.

Styling and Visual Identity Implementation

The color palette was intentionally chosen to reflect Brandi Carlile's Americana/folk aesthetic rather than generic event page defaults:

  • Forest Green (#2c4934): Primary accent color for buttons and section headers — conveys authenticity and earthiness
  • Warm Amber (#d4a843): Secondary accent for highlights and hover states — creates warmth without feeling corporate
  • Parchment Cream (#f5ede0): Light background alternative to pure white — softer, more organic feel
  • Dark Warm Brown: Body text and secondary elements — maintains readability while staying within the warm palette

The hero section uses a CSS background-image property with a linear gradient overlay:

.hero {
  background-image: linear-gradient(135deg, rgba(44, 73, 52, 0.7), rgba(212, 168, 67, 0.5)), 
                    url('https://queenofsandiego.com/assets/images/concert-nights/brandicarlile.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
}

This gradient overlay serves two purposes: it ensures text legibility over the photograph and reinforces the brand color palette through subtle color blending. The background-attachment: fixed creates a parallax effect on scroll, enhancing perceived depth without JavaScript overhead.

Modal Integration and Button Wiring

The most critical technical change involved replacing generic link-based CTAs with the JADA booking modal trigger function. Every button on the page now includes:

<button onclick="jadaOpenBook()" class="cta-button">
  Reserve Now
</button>

Rather than using <a href="..."> elements, we use semantic <button> elements because:

  • Accessibility: Screen readers correctly identify these as interactive controls
  • Keyboard Navigation: Native button elements respond to Enter/Space keys without additional JavaScript
  • Event Handling: Direct onclick binding is more performant than delegated event listeners for multiple CTAs
  • JADA Integration: The modal library expects function calls from interactive elements, not navigation events

This pattern was applied consistently across four distinct CTA zones:

  • Navigation header button
  • Hero section call-to-action
  • Mid-page engagement "hook" section
  • Pricing/ticket section
  • Footer reserve button

Deployment Pipeline: Staging First

Per our standing deployment rules, the updated page was deployed to staging at https://queenofsandiego.com/_staging/brandicarlile.html before any production release. This staging environment:

  • Points to the same CloudFront distribution as production (same cached assets)
  • Uses identical database connections for JADA booking modal functionality
  • Allows stakeholder review without impacting live traffic
  • Provides a rollback point if issues are discovered

The staging URL is generated by the build system — no manual S3 uploads or Route53 changes were required for this phase. Once approved, a single production deployment command will move the brandicarlile/index.html file from staging to the live directory.

Technical Decisions and Trade-offs

Why not use a template system? Each artist page currently has unique HTML structure optimized for that artist's visual identity. As we onboard more artists, we'll likely implement a template system with CSS variable overrides, but starting with explicit HTML allows maximum flexibility during the proof-of-concept phase.

Why centralize images in one S3 bucket? Separate S3 buckets per artist would complicate CloudFront distribution configuration and increase operational overhead. A single bucket with logical prefixes (/assets/images/concert-nights/) is simpler to maintain and scales linearly with event volume.

Why fixed background-attachment? While parallax effects can feel trendy, they serve a functional purpose here: keeping the artist's photo visible during scroll anchors the visual identity throughout the browsing experience. This is disabled on mobile via media queries to avoid performance penalties on lower-end devices.

What's Next

After stakeholder approval at the staging URL, we'll push to production. Future iterations should include:

  • CSS Variable System: Parameterize all artist-specific colors so future pages can be generated from a template with simple variable overrides
  • Image Optimization: Implement responsive srcset attributes for brandicarlile.jpg to serve mobile-optimized variants via CloudFront
  • Analytics Integration: Track which CTA buttons drive the most modal opens to optimize placement
  • Automated Testing: Add Cypress tests to verify