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:

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.