WebsiteCrossFitGym & FitnessLocal BusinessBooking IntegrationNext.js2026
HVN CrossFit
A cinematic custom Next.js site for a Port Kennedy CrossFit gym — live class booking, coach profiles, and a scroll-driven mini-game.
Client note
Caleb was amazing from start to finish. Very helpful and patient with our lack of technology understanding! Built our website from the ground up, made any changes we requested and was very thorough! Highly recommend!
Kristy & Bryan
HVN CrossFit
ClientThe HVN (HVN CrossFit) — Kristy & Bryan Barr
LocationPort Kennedy, Western Australia, Australia
TimelineApril–June 2026 (~10 weeks, scaffold to launch)
Budget$5k – $10k
RoleSolo — design, development, SEO, third-party integrations & deployment
01
Overview
The HVN is a community-first CrossFit gym in Port Kennedy, Western Australia, founded by Kristy and Bryan Barr. C4 Studios designed and built their website from the ground up as a fast, SEO-optimised Next.js application that channels the brand's "where the everyday meets the elite" ethos. The build pairs a cinematic video hero, a colour-coded class timetable, coach profiles, and clear membership pricing with real integrations — a Fitbox live-booking embed, a Resend-powered contact backend, and rich local-business structured data. Its signature flourish is the bespoke "Chin Up Championship": a scroll- and touch-driven physics mini-game with a persistent personal-best, turning the homepage into something members actually share. Hardened with a strict Content-Security-Policy, security headers, and accessibility throughout, and deployed on Vercel, it gives a local gym a digital presence that punches well above its weight.
02
Screenshots
03
What I Delivered
- Custom website design & art direction (brand-led teal/charcoal system)
- Full front-end development (Next.js App Router, TypeScript, Tailwind v4)
- 8 pages: Home, About, Classes, Memberships, Book, Contact, Gallery, Shop
- Bespoke interactive "Chin Up Championship" scroll/touch mini-game
- Responsive class timetable system (desktop table ⇆ mobile cards)
- Coach profile system with hover photo swap and graceful placeholders
- Fitbox live-booking integration with HVN-branded surround + QR sign-up
- Serverless contact form backend (Resend) with anti-spam & validation
- Technical SEO: metadata, canonicals, OpenGraph/Twitter, JSON-LD, sitemap, robots
- Dynamic OpenGraph share image (next/og)
- Image & video optimisation and gallery curation (40+ assets)
- Security hardening (CSP + full security-header set)
- Accessibility pass (skip link, focus styles, ARIA, reduced-motion)
- Deployment & hosting setup on Vercel (custom domain, env config)
04
Key Features
- Cinematic full-screen hero with autoplaying muted looping video, poster fallback, accessible play/pause toggle, and reduced-motion static fallback
- "Chin Up Championship" — bespoke scroll- and touch-driven physics mini-game: spring-animated SVG athlete, grip meter with a shrinking safe zone, fatigue scaling, rep counting at the top of each rep, particle bursts, milestone toasts, rotating coaching tips, and a full game-over flow
- Persistent personal-best leaderboard via localStorage, synced across tabs with React useSyncExternalStore
- Dedicated "scroll-past" lane + exit-accumulation + IntersectionObserver so the game never traps the page
- Colour-coded responsive class timetable (table on desktop, cards on mobile) with a compact homepage variant
- Coach profiles: spotlight + grid layout, hover image cross-fade, certification chips, competition/movement/fun-fact sections, build-time founders-photo detection
- Membership pricing tiers (HVN Base / Flexi) with add-ons and FIFO & student options
- Fitbox booking embed wrapped in an HVN-branded frame with a live-availability pulse, ad-blocker fallback, and open-in-new-tab escape hatch
- New-member registration CTA with a scannable QR code
- Serverless contact form: input sanitisation/HTML-escaping, honeypot, body-size limits, email validation, and graceful "not configured"/error states
- Comprehensive SEO: per-route metadata, canonical URLs, OpenGraph + Twitter cards, en-AU locale, keywords, and JSON-LD (WebSite + LocalBusiness / SportsActivityLocation / ExerciseGym)
- Dynamically generated OpenGraph image via next/og
- Fixed navbar that transitions transparent → solid on scroll, with a mobile drawer and body-scroll lock
- Masonry gallery (CSS columns) with eager/lazy loading
- Animated "Designed by C4 Studios" footer credit (GSAP), reduced-motion safe
- Strict Content-Security-Policy and full security-header suite
- Accessibility: skip-to-content link, focus-visible outlines, ARIA labels, keyboard-operable menu & game, site-wide reduced-motion handling
05
Stack & Tooling
- Next.js 16.2.6 (App Router, Turbopack)
- React 19.2.4
- TypeScript 5
- Tailwind CSS v4 (CSS-first @theme tokens, @tailwindcss/postcss)
- Framer Motion 12 (hero, mini-game, coach cards)
- GSAP 3.15 + @gsap/react 2.1 (C4 footer credit)
- next/font (Google: Bebas Neue + Inter)
- next/image (responsive image optimisation)
- next/og (dynamic OpenGraph image)
- ESLint 9 / eslint-config-next
- Node.js 20/22
- Vercel (hosting & CI deploy)
- Stripe SDK (@stripe/stripe-js 9, stripe 22) — scaffolded, not yet wired
06
Integrations & Backend
- Fitbox — live class booking & timetable embed + member registration
- Resend — transactional email for the contact form (/api/contact)
- Google Maps — embedded gym location on the Contact page
- Instagram (@the.hvn, @thehvncrossfit), Linktree, CrossFit affiliate listing
- Vercel — deployment & hosting
- Stripe — payment SDK scaffolded for future shop checkout (not active)
07
Performance / SEO / Accessibility
- All pages statically prerendered (only /api/contact is dynamic)
- next/image responsive sizing with eager/lazy loading (first gallery rows eager, rest lazy)
- Background video served with a poster image and suppressed for reduced-motion users
- Google Fonts via next/font with display:swap (self-hosted, no layout shift)
- Strict CSP, HSTS preload, X-Frame-Options DENY, X-Content-Type-Options nosniff, Referrer-Policy, Permissions-Policy
- Accessibility: skip link, focus-visible outlines, ARIA labelling, semantic landmarks, site-wide prefers-reduced-motion handling, descriptive alt text
08
Challenges & Constraints
- Building the scroll/touch-jacking "Chin Up Championship" without trapping the user — required an escape lane, exit-accumulation thresholds, IntersectionObserver disengage, and body-scroll coordination (a dedicated mobile touch-trapping fix landed in the git history)
- Tuning the mini-game's spring physics and grip-meter difficulty curve so it feels fair and rhythmic rather than random
- Getting the Fitbox booking iframe to load under a strict Content-Security-Policy — widening frame-src to fitbox.iq precisely while keeping the policy tight, plus a branded fallback for ad/content blockers
- SSR-safe interactivity in the App Router: localStorage personal-best via useSyncExternalStore and careful window/document guards
- Monorepo on Vercel — the deployable app lives in frontend/, requiring custom root/install configuration
- Integrating the GSAP-based C4 credit into a React 19 / Next 16 server-rendered footer under a CSP with no unsafe-eval
09
What I'd Improve Next
- Wire up Stripe checkout for the shop (SDK already scaffolded)
- Add a headless CMS for timetable/coaches/classes/memberships (Sanity is already CSP-allow-listed, suggesting it was planned)
- Deeper Fitbox/member-portal integration (account, check-in, schedule sync)
- Add privacy-friendly analytics (none currently present)
- Content/blog layer for local SEO
- Swap the placeholder founders image for the real photo (the build already auto-detects it)