Brushing to the Beat
LiveA statically-generated marketing site for a children's book — engineered for perfect Lighthouse scores, WCAG AA accessibility, and first-class search/answer-engine discoverability
Overview
Brushing to the Beat! is a children's picture book by author Dorothy Trestka. The site is its storefront and landing experience: a hero introduction, a preview page, and an order page that funnels readers to eight retailers across three continents (Amazon, Barnes & Noble, Books-A-Million, Strand, plus Bol.com in the Netherlands and Booktopia in Australia).
The premise is deliberately simple, and that's the point. Every route is prerendered to static HTML at build time — there's no server runtime in the request path, nothing to attack, and nothing between the reader and the content. The engineering effort went where it's actually visible to users and crawlers: load performance, accessibility, and structured discoverability. I designed and built it end-to-end as sole developer.
Highlights
- Perfect Lighthouse across the board — 100 Performance / 100 Accessibility / 100 Best Practices / 100 SEO, with a 0.2s Largest Contentful Paint
- WCAG 2.1 AA compliant — audited and remediated for contrast, focus, motion, and semantics
- Rich structured data — page-aware JSON-LD (Book + retailer offers, FAQ, breadcrumbs) driving search and answer-engine results
- Zero-runtime, fully static — all routes prerendered and deployed on Vercel's edge
Tech Stack
Frontend
- Next.js 16 (App Router)
- React 19
- TypeScript
- Tailwind CSS 4
Content & Discoverability
- JSON-LD Structured Data
- Dynamic Sitemap & Robots
- Open Graph / Twitter Cards
Infrastructure
- Vercel
- Static Prerendering
- next/image
Engineering Focus
A small surface area, but every detail that reaches a user or a crawler was treated as an acceptance criterion — performance, accessibility, discoverability, and long-term maintainability.
Performance
Every page is statically generated and served as HTML — the fastest thing a browser can render. The hero cover uses next/image with priority so the LCP element is optimized and preloaded, landing at 0.2 seconds. Decorative animations are CSS-only and gated behind prefers-reduced-motion, so there's effectively no render-blocking JavaScript on first paint. The result is a perfect 100 Performance score with headroom to spare.
Accessibility (WCAG 2.1 AA)
Accessibility was treated as an acceptance criterion, not a checkbox. The brand's signature turquoise fails contrast against white, so I introduced an accessible teal/rose token palette — every button, accent, and focus indicator meets or exceeds 4.5:1. Beyond color: semantic landmark structure and a single logical heading order per page, skip-to-content links, visible focus outlines, prefers-reduced-motion and prefers-contrast support, 44px minimum tap targets, role="img" on decorative/labeled glyphs, and screen-reader “opens in a new tab” announcements on outbound retailer links. Verified at 100 Lighthouse Accessibility.
Discoverability (SEO + AEO)
The site is built to be understood by both search engines and AI answer engines. Each route ships page-specific JSON-LD via a single page-aware component: a Book node with all retailer Offers, WebSite, Person (author), a per-page WebPage with BreadcrumbList, and a FAQPage. The FAQ content is a single source of truth — the same data renders both the visible on-page FAQ and the structured markup, so they can never drift. Rounded out with a dynamic sitemap.xml, robots.txt, canonical URLs, and Open Graph / Twitter cards for clean social previews.
Architecture
Small surface, but built to stay maintainable: retailer data and FAQ content are typed, centralized modules; the footer, FAQ section, and structured-data emitter are reusable components shared across every page. Adding a page or a retailer is a one-line change, and the structured data updates itself. Dependencies are kept patched (currently Next.js 16.2.9).
Links & Resources
Source code is private — this is a live client project