The latest articles on DEV Community by Komal Kaur Dhillon (@komal290106). https://dev.to/komal290106 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%2F3572310%2F74ac38c2-4f5b-47f1-93fb-05a396464141.jpeg https://dev.to/komal290106 en Komal Kaur Dhillon Sun, 02 Aug 2026 18:55:57 +0000 https://dev.to/komal290106/taste-of-punjab-a-css-love-letter-to-comfort-food-1bk2 https://dev.to/komal290106/taste-of-punjab-a-css-love-letter-to-comfort-food-1bk2 <h2> Taste of Punjab </h2> <p>A landing page built entirely with hand-crafted CSS art — no images, no icon libraries - celebrating Punjabi comfort food, family, and hospitality.</p> <p><strong>Submission for:</strong> Perfect Landing: Comfort Food</p> <h3> Live Demo &amp; Repo </h3> <p>Live: <a href="https://taste-of-punjab-cyan.vercel.app/" rel="noopener noreferrer">https://taste-of-punjab-cyan.vercel.app/</a><br> Repo: <a href="https://github.com/Komal290106/Taste_Of_Punjab" rel="noopener noreferrer">https://github.com/Komal290106/Taste_Of_Punjab</a></p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/Komal290106" rel="noopener noreferrer"> Komal290106 </a> / <a href="https://github.com/Komal290106/Taste_Of_Punjab" rel="noopener noreferrer"> Taste_Of_Punjab </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><div class="markdown-heading"> <h1 class="heading-element">Taste of Punjab</h1> </div> <p>Where every meal feels like home - a handcrafted digital celebration of Punjabi hospitality, family traditions, and the warmth of a shared table.</p> <div class="markdown-heading"> <h2 class="heading-element">The Experience</h2> </div> <p>Taste of Punjab is not a restaurant website. It is a warm, immersive digital experience that invites you into a Punjabi home. Every illustration is drawn with pure CSS, every interaction is designed to feel like a personal welcome, and every word is written to make you feel like family.</p> <p>From the golden wheat fields and the mud-house charpai in the hero scene, to the handcrafted dish cards and the story of a meal's journey from farm to family, the entire page is a love letter to Punjabi culture, food, and togetherness.</p> <div class="markdown-heading"> <h2 class="heading-element">Inspiration</h2> </div> <p>This project was created as part of the DEV Frontend Challenge, with the goal of celebrating culture through code.</p> <p>The inspiration comes from:</p> <ul> <li>The warmth of Punjabi homes where…</li> </ul></div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/Komal290106/Taste_Of_Punjab" rel="noopener noreferrer">View on GitHub</a></div> </div> <h3> What it is </h3> <p>From the chulha and charpai in the hero scene to the eight hand-illustrated dish cards and a six-step "farm to family" story timeline, every visual is pure CSS. The goal was to make a visitor feel like they'd stepped into a Punjabi home rather than browsed a restaurant menu.</p> <h3> Features </h3> <ul> <li>Interactive, filterable dish menu with recipe modals</li> <li>Six-step story timeline (Farm → Harvest → Grinding → Cooking → Serving → Family)</li> <li>Reservation modal with validation and a warm confirmation screen</li> <li>Fully responsive, keyboard-accessible, reduced-motion aware</li> <li>Lighthouse: 97 Performance / 100 Accessibility / 100 Best Practices / 100 SEO</li> </ul> <h3> Tech stack </h3> <p>HTML5, CSS3, vanilla JavaScript (ES6), Vite - no frameworks, no external image assets.</p> <p>Thanks for checking it out - would love any feedback! 🙏</p> frontendchallenge webdev css javascript