Hearth & Bowl — Dinner, the Way Home Does It 🍲
frontendchallenge # devchallenge # css # javascript # webdev # accessibility
This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing.
Live demo: heartbowl.vercel.app
Source code: GitHub — frontend-challenge-comfort-food-edition
Demo video: heartbowl.mp4 on Google Drive
Inspiration
Most comfort food isn't famous — it's familiar. The dish that makes you feel at home usually has a name nobody else knows: "Grandma's tonkotsu," "Sunday pancakes," "the pie Auntie June brings in November." I wanted to build a site that feels like that kind of kitchen.
Hearth & Bowl is a fictional neighborhood kitchen. Instead of a slick corporate restaurant template, it presents itself like a stack of handwritten recipe cards lit by the stove — warm paper textures, stitched borders, tilted "plated" stamps, a candle ticker, and real food photography framed in ceramic-style organic crops. The brand voice leans into second-person memory ("dinner, the way home does it" ) because comfort food is about being taken care of, not about food photography.
The visual direction — an "Ember Kitchen" palette of cream paper, espresso ink, terracotta ember, and butter yellow — was a deliberate move away from generic restaurant-site blue. Typography pairs the expressive editorial serif Fraunces with the legible Nunito Sans, and every decorative motif (squiggles, flames, stamps) is hand-authored CSS or inline SVG rather than imported assets.
Demo
Live site: heartbowl.vercel.app
Watch the walkthrough: heartbowl.mp4
Key interactions to try:
| Section | What happens |
|---|---|
| Hero | Food photograph in a ceramic-frame crop, "still steaming" stamp, candle ticker tape that scrolls endlessly on pure CSS |
| Signature Dishes | Rotated, stitched recipe-card frames with hover lift and image scaling |
| Menu | Accessible tabbed menu board ("From the Pot / Off the Griddle / Out of the Oven") switching categories with a React state model |
| Our Story | Narrative section with an asymmetric layout, organic divider, and ember seal |
| Visit | Reservation call-to-action |
Journey
The constraint that shaped everything. Comfort food lands through warmth, not spectacle — so I inverted the usual "flashy demo" approach. The whole site is designed around one question: does this section feel like a kitchen, or a template? That discipline drove decisions like using asymmetric layouts over centered hero stacks, and authoring textures (paper grain, stitched dashed borders, squiggle eyebrow rules) in CSS instead of reaching for a texture library.
What I'm proud of. Three things in particular. First, the design system: every visual motif is defined once as a CSS primitive (stamps, seals, squiggles, dividers) and composed across sections, which keeps the page cohesive without duplication. Second, accessibility was treated as a feature, not an afterthought — semantic landmarks throughout, descriptive alt text on editorial imagery, a keyboard-navigable menu tablist with correct selected-state semantics, visible focus treatment, contrast-checked palette pairings, and all non-essential motion gated behind prefers-reduced-motion. Third, the motion philosophy: animations only touch transform and opacity, respect a fast ease-out curve, and the ticker runs entirely in CSS keyframes with no JavaScript timer.
Tech choices. React 19 + TypeScript for the small interactive surface (menu tabs, scroll reveals via IntersectionObserver), with the visual language living predominantly in the CSS layer — Tailwind utilities only handle layout and spacing. Vite for the build, deployed to Vercel with an explicit vercel.json configuration, images served from stable public URLs so the deployment is fully self-contained.
What I learned. Keeping JavaScript purposeful is harder — and more rewarding — than keeping it minimal. Every reveal, tab, and hover interaction had to justify its existence against the design system. It also taught me how much personality a consistent token set (four colors, two typefaces, six recurring motifs) can carry when applied with conviction.
What's next. A reservation dialog with proper focus trapping, a dedicated dish gallery, and a "How it's made" technical page walking through the CSS techniques.
Thanks for participating! This project was built for the Frontend Challenge: Comfort Food Edition. Food photography sourced through Pexels and Unsplash (see credits in the repository README). Project licensed under MIT.
Top comments (0)