Highlands Ranch Champ

Signature site for an independent musical artist publishing original music, parody tracks, and a companion series of illustrated children's books. The brief was to build a media platform — not a brochure — with first-class audio playback and a real reading experience for the books.

Two custom media systems carry the project:

• Persistent music player. The naive approach mounts an <audio> element on the page that hosts the player; the moment a visitor clicks any other link, the route component unmounts and playback dies. The fix lifts the audio subsystem above the routing layer — the <audio> element mounts once in the root layout, player state lives in a Zustand store, and a floating mini-player stays visible on every route. Start an album on Albums, browse to Books, open a chapter — same DOM audio node, no interruption.

• In-browser book reader with synced narration. Built around react-pageflip for a two-page hardcover layout with dynamic pagination that re-measures on resize. Each chapter ships with multiple ElevenLabs TTS voice variants and a per-word timing manifest; a binary-search active-word lookup drives karaoke-style highlighting of the current word as audio plays. Narration and the global music player are separate <audio> instances but coordinate through the same store — only one is active at a time.

Content model & deployment:

• All content lives in MDX under content/, read at build time. Album and book routes are statically generated via generateStaticParams — no CMS, no client-side fetches for catalog content.
• A companion import pipeline pulls highest-version lyric files from an external studio repository using slug-normalized matching with Levenshtein fallback.
• Self-hosted on AWS EC2 — Apache reverse proxy fronts a PM2-managed Node process; the build script rsyncs the Next.js output: "standalone" bundle to the host and reloads the worker. Not Vercel.