01 · The BriefA chef who cooks, not a chef who templates
Étienne is a private chef in Montréal — intimate dinner parties, market-sourced menus, French technique with local ingredients. His existing online presence was a social media page and a phone number. He needed a website that feels like sitting at his table: unhurried, warm, and unmistakably artisan.
The challenge: build a site that communicates luxury without pretension, showcases food without looking like a stock-photo catalogue, and drives bookings without feeling transactional.
02 · Design SystemThree moods, three voices, one kitchen
The design is built around swappable moods and typographic voices — giving Étienne a site that can shift personality for different seasons or audiences without a redesign:
Rouille — warm rust on cream paper. The default. Cellar — dark mode with candlelight gold on espresso. Linen — pale, monochrome, stone replaces rust. Each palette swaps via CSS custom properties.
Typography pairs Fraunces for display headlines, Cormorant Garamond for editorial body, Inter for UI elements, and JetBrains Mono for metadata — four families orchestrated into three distinct voices.
"A dinner party should feel inevitable — the site should too."Étienne — on the brief
03 · What We BuiltNine sections, one continuous meal
- Preloader — cinematic fade with the chef's mark
- Hero — full-bleed food photography with seasonal tagline and booking CTA
- Scroll marquee — flowing text ribbon with service keywords
- Stats strip — years of experience, guests served, market partnerships
- Cuisine coverflow — swipeable gallery of signature dishes with parallax
- Story & market rail — editorial narrative with horizontal-scroll market-day photography
- Menu flip — seasonal menus with pricing tiers and per-menu booking
- Recipes CTA + modal — curated recipe collection with full-screen overlay
- Voices — client testimonials in editorial layout
- Contact + booking modal — inquiry form that flows into a structured booking dialog
04 · Tech StackReact SPA with cinematic ambition
The entire site runs as a single-page React application with no build toolchain — React and Babel load from CDN, keeping the development workflow zero-config. Theming uses data-mood, data-voice, and data-tempo attributes on the HTML element, swapping 30+ CSS custom properties per combination.
05 · The ResultA website that smells like bread
Chef Étienne's site went from concept to production in two weeks. The photography direction produced 23 original images that feel editorial, not commercial. The three-mood system gives Étienne a living brand that can shift with the seasons — Rouille for autumn warmth, Cellar for winter dinner parties, Linen for summer garden events.
The booking flow converts inquiry to confirmed dinner in a single conversation. The recipe modal turns visitors into return visitors. And the site loads fast despite the visual ambition — no framework build, just smart lazy-loading and CSS-driven animation.
