This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
*What I Built:
*
I built Ember & Spice which is an interactive landing page celebrating Tandoori Paneer Tikka, one of North India's most iconic comfort foods. The site is built for a fictional restaurant of the same name and brings the dish to life through immersive visuals and interactive features.
*The page includes:
*
A hero section with an aesthetic AI-generated tandoori video
A sizzle effect — click the Sizzle button and sparks fly across the image
An interactive skewer builder where you stack paneer, peppers, and onions then grill them
A spice dial slider that visually changes the marinade heat from Mild to Fiery
A CSS-art tandoor oven that roasts your built skewer
An ingredient tasting plate — click cards to add items
A recipe checklist with a live progress bar
A reservation form with client-side validation
Fully responsive, mobile-first design with scroll-reveal animations
Demo:
**Live site*: https://tandoori-paneer.vercel.app/
**Github*: https://github.com/jogadiyadipak28-art/tandoori-paneer
*Journey:
*
I chose Tandoori Paneer Tikka because it's the kind of dish that carries memory (PS: It's my favorite dish) the smell of charcoal, the bright orange marinade, skewers shared at family gatherings. I wanted the page to feel as warm and alive as the dish itself.
The most fun part was building the interactive Kitchen Lab, the skewer builder, spice slider, and tandoor oven are all pure vanilla JS and CSS, no libraries. Getting the tandoor CSS art to glow and the skewer pieces to animate onto the rod was deeply satisfying.
I'm particularly proud of the sizzle effect, clicking the button sends 16 spark particles flying across the hero image and story photo, with a brief brightness flash. It's a small touch but it makes the page feel reactive and alive.
What I learned:
How powerful IntersectionObserver is for scroll-reveal without any libraries.
CSS aspect-ratio for keeping the video frame consistent across screen sizes.
How to build expressive micro-interactions with just CSS custom properties and keyframe animations.
Built entirely with semantic HTML5, vanilla CSS, and vanilla JavaScript no frameworks, no build tools.
Top comments (0)