The latest articles on DEV Community by Anupriya Jayaraj (@anupriya_jayaraj). https://dev.to/anupriya_jayaraj 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%2F2471341%2F012e7b9d-6d9c-4948-b3df-f2e44dd2e933.jpg https://dev.to/anupriya_jayaraj en Anupriya Jayaraj Fri, 14 Aug 2026 14:54:46 +0000 https://dev.to/anupriya_jayaraj/vaazhai-original-taste-of-tamil-nadu-3a3i https://dev.to/anupriya_jayaraj/vaazhai-original-taste-of-tamil-nadu-3a3i <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2026-07-29">Frontend Challenge - Comfort Food Edition, Perfect Landing</a></em></p> <h2> What I Built </h2> <p><strong>Vaazhai</strong> 🍃 — an animated, single-page tribute to the Tamil Nadu banana-leaf meal, one of the things I admire most about my own Tamil culture and tradition. Instead of a typical landing page with product photos, the entire "hero" is a hand-built CSS illustration of a full banana leaf spread — rice, sambar, rasam, poriyal, kootu, vada, payasam, pickle, curd, papadam, and banana — each dish rendered from gradients, shadows, and clip-paths, no images at all.</p> <p>Beyond the hero, the page shares the history and ritual behind a banana-leaf meal: how it's traditionally served course by course (shown as a scroll-triggered animation), and a full bilingual (Tamil + English) menu.</p> <h2> Demo </h2> <p>Live: <a href="https://anupriya2508.github.io/Vaazhai/" rel="noopener noreferrer">https://anupriya2508.github.io/Vaazhai/</a> </p> <h2> Journey </h2> <p>This project came out of something personal, not an assignment. Growing up, eating off a banana leaf was never just a meal — it's an entire tradition: the order the dishes are placed, the way rice and ghee get mixed at the center, the pickle in the corner, the leaf itself instead of a plate. It's a part of Tamil culture I really admire, and I wanted to build something that captures that feeling and helps pass it on to the next generation, rather than let it just be background nostalgia.</p> <p>The biggest challenge — and the most fun part — was building every dish purely in CSS. Getting the rice to look fluffy, the sambar to look like it's steaming, and the banana leaf itself to have a natural, asymmetric shape (rather than a generic rounded rectangle) took a lot of trial and error with <code>clip-path</code>, layered <code>radial-gradient</code>s, and box-shadows.</p> <p>I'm especially proud of the "How it's Served" section — a scroll-triggered sequence (using <code>IntersectionObserver</code>) that replays the order dishes traditionally land on the leaf, synced with a step list, and replayable on demand.</p> <p>Honestly, this is more than a coding project to me — someday I'd genuinely love to open a hotel like this one, serving meals the traditional way. Building this page was my first small step toward that.</p> devchallenge frontendchallenge webdev javascript