Comfort Food: A Visual Journey Through Street Food

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

Comfort Food is an editorial landing page that treats street food like a city ritual — not a menu.

The theme is the comfort food of a Gujarati street-food city: locho, khaman, ghari, khawsa, cold coco, and the plates that show up from morning tea to midnight. Comfort isn’t a recipe — it’s a craving with a time of day.

The page walks you through that day:

• A full-bleed hero with brand-first typography and floating food frames
• A Day on a Plate — sticky scroll that moves from 6:30 AM khaman to 11:30 PM khawsa
• A food wall of soft / spicy / comforting dishes
• An interactive Build your comfort plate picker
• A sweet / savoury / spicy eater quiz
• Food memories you can add yourself
• A playful city map plotted by appetite

Built with vanilla HTML, CSS, and JS — no framework. Type is DM Serif Display + Manrope; the palette is ivory, charcoal, chilli, saffron, and cocoa.

Demo

Live demo: https://magical-madeleine-610bd2.netlify.app/

Journey

I started with one question: what does comfort food feel like when it’s tied to a place? For me that’s locho after college, ghari at Diwali, cold coco on a hot evening — food that doesn’t need explaining.

Design-wise, I wanted an editorial, magazine-like scroll, not a restaurant template. That meant:

1. Brand as the hero — “COMFORT / FOOD” is the first signal, not a tiny nav logo.
2. One job per section — city story, day timeline, wall, interactivity, night, memories, map.
3. Motion with purpose — scroll reveals, light parallax, a horizontal sticky day-rail, and marquee tickers (all respectful of prefers-reduced-motion).
4. Interaction that still feels on-theme — plating foods and picking sweet/savoury/spicy so visitors leave with their comfort plate, not just mine.

Things I’m especially proud of:

• The Day on a Plate sticky horizontal scroll on desktop
• The plate builder — small UX, big personality
• Keeping the whole experience in plain HTML/CSS/JS so it stays fast and portable

What I learned: landing pages get better when you cut. Every section fought for attention; the ones that stayed are the ones that advance the story (morning → midnight → memory).

Next: polish mobile motion for the day-rail, add real stall/map data, and maybe a shareable “your plate” card for social.