North Carolina Youth Orchestra

Client Profile

North Carolina Youth Orchestra (Demo Preview)

Project Summary

The North Carolina Youth Orchestra is a nonprofit youth music institution serving the Charlotte and Lake Norman region, with a complete ladder of ensembles from beginning classes up to a full orchestra and a faculty drawn from the Charlotte Symphony and area conservatories. We rebuilt their site around a concert-hall idea, the lights coming up on a young musician, replacing a slow, dated site with a fast, photo-rich home that finally shows off their own concert photography.

Objectives

• Replace a slow, hard-to-use site (it failed basic accessibility and took seconds to load) with a fast, modern home
• Lead with the orchestra’s own concert photography instead of a sparse, generic template
• Make the ensemble ladder, from beginner strings up to the top orchestra, clear and easy to follow
• Foreground the Musical Pathways Initiative and the free Instrument Discovery Days for elementary students
• Give all-volunteer staff a site they can edit themselves through the Fugue Lab CMS

What We Implemented

• Concert-hall dark theme: a deep stage-indigo canvas with a single concert-gold accent used as punctuation
• Playfair Display paired with Space Grotesk, a cinematic full-bleed spotlight hero, and a program-ladder signature from beginner ensembles up to the top orchestra
• A masonry gallery of their own concert photography (natural-aspect tiles, faces never cropped) harvested from their media library
• Vite + React 18 + Tailwind CSS 4 wired to @gjl/site-kit as a bespoke-but-CMS-editable site
• CMS content seam via useSite() with each block independently falling back to compiled-in static content
• SSR/hydration with per-route static prerendering (SSG) plus generated sitemap, robots, and MusicGroup structured data
• Nine routes: Home, About, Programs, Faculty, Events, Musical Pathways, Support, Contact, and a dedicated gallery

Results

• A 95-to-99 (A) rendered quality score, up from a failing grade on the current site
• Accessibility, SEO, content, and structured data all at 100
• The orchestra’s own concert photography finally shown off across the hero, page headers, and a dedicated gallery
• A CMS-editable platform the volunteer staff can update without touching design or code