The Jharkhand Kitchen — A Heritage Culinary Landing Page

What I Built

I built The Jharkhand Kitchen, a premium, highly interactive frontend landing page celebrating the rich culinary heritage of Jharkhand, India. The page highlights two legendary regional comfort foods: Dhuska (a crispy, golden deep-fried rice & lentil savory bread) and Litti Chokha (rustic charcoal-baked whole wheat balls stuffed with spiced sattu, glazed with ghee).

The highlight of the project is a detailed concentric bronze plate containing the dishes, crafted entirely using pure CSS Art (gradients, box-shadows, and keyframe animations for steam).

Link to Source Code

👉 GitHub Repository: Rafiaminhaj/jharkhand-comfort-food

Key Features & Tech Stack

• Pure CSS Art: No external images or SVGs were used to render the bronze plate, Dhuskas, Litti, clay bowls, or steam. Everything is styled using layered gradients, border-radius manipulation, and CSS animations.
• 3D Parallax Tilt Effect: Mouse movement over the food platter and cards calculates the cursor offset in JavaScript to trigger smooth 3D tilting.
• The Culinary Duel: An interactive voting system that lets users vote for Team Dhuska or Team Litti Chokha, complete with LocalStorage persistence and coordinate-based custom particle confetti explosions.
• Web Accessibility: Focus rings, skip-to-content links, semantic HTML, and an ARIA live region announcer for screen readers to hear vote updates.

Journey & What I Learned

Through this challenge, I pushed my CSS styling skills to the absolute limit. Designing the organic texture of fried Dhuskas and the smoky, charcoal-burned details on the Litti using only CSS gradients and box-shadows was a huge learning experience. Implementing coordinate-based particle math in vanilla JavaScript to make confetti explode from the exact button click location was highly rewarding!