The latest articles on DEV Community by Rafia Minhaj (@rafia_minhaj_2659f96470d2). https://dev.to/rafia_minhaj_2659f96470d2 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3691481%2F7b0915ef-66bf-4b81-bf5e-269d9809325e.png https://dev.to/rafia_minhaj_2659f96470d2 en Rafia Minhaj Sun, 09 Aug 2026 19:18:10 +0000 https://dev.to/rafia_minhaj_2659f96470d2/the-jharkhand-kitchen-a-heritage-culinary-landing-page-3b7g https://dev.to/rafia_minhaj_2659f96470d2/the-jharkhand-kitchen-a-heritage-culinary-landing-page-3b7g <h2> What I Built </h2> <p>I built <strong>The Jharkhand Kitchen</strong>, a premium, highly interactive frontend landing page celebrating the rich culinary heritage of Jharkhand, India. The page highlights two legendary regional comfort foods: <strong>Dhuska</strong> (a crispy, golden deep-fried rice &amp; lentil savory bread) and <strong>Litti Chokha</strong> (rustic charcoal-baked whole wheat balls stuffed with spiced sattu, glazed with ghee).</p> <p>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).</p> <h2> Link to Source Code </h2> <p>👉 <a href="https://github.com/Rafiaminhaj/jharkhand-comfort-food" rel="noopener noreferrer">GitHub Repository: Rafiaminhaj/jharkhand-comfort-food</a></p> <h2> Key Features &amp; Tech Stack </h2> <ul> <li> <strong>Pure CSS Art</strong>: 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.</li> <li> <strong>3D Parallax Tilt Effect</strong>: Mouse movement over the food platter and cards calculates the cursor offset in JavaScript to trigger smooth 3D tilting.</li> <li> <strong>The Culinary Duel</strong>: 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.</li> <li> <strong>Web Accessibility</strong>: Focus rings, skip-to-content links, semantic HTML, and an ARIA live region announcer for screen readers to hear vote updates.</li> </ul> <h2> Journey &amp; What I Learned </h2> <p>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!</p> frontendchallenge devchallenge css javascript