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! Top comments (0)