From Skewer to Screen - A Tandoori Paneer Landing Page

Jogadiya Niyati — Sat, 01 Aug 2026 21:19:44 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built
Welcome to Ember & Spice, a love letter to Tandoori Paneer Tikka built as a fully interactive, deeply Indian-coded landing page for a fictional restaurant. This isn't just a landing page. It's a whole vibe.

Here's everything packed inside:

🎬 Cinematic hero with a full-viewport AI-generated tandoori video, animated smoke wisps, a warm dark veil, and text that fades in like a film title

🔥 Sizzle button that sends 16 spark particles flying across the hero AND the story photo

🪔 Indian design coded into every section - a swaying toran garland in the nav, lotus SVG in the logo, Devanagari watermarks, mehndi dot patterns, Mughal arch line art, gold peacock illustrations, floating lotus petals in the Visit section, and five interactive diya lamps in the footer you can toggle on and off

🌀 Spinning ingredient tray built on bronze drum aesthetics. Drag it, spin it, click a dish, read its story, add it to your tasting plate

🌶️ Spice Dial that actually does something - slide from Mild to Fiery and watch the paneer cubes on your skewer change color in real time to match the marinade heat. Pale wheat at mild. Deep crimson at fiery. Try it

🍢 Skewer Builder where you stack paneer, bell peppers, and onions before sending them into the tandoor

🏺 CSS-art Tandoor Oven that glows, crackles with embers, and roasts your skewer

👨‍👩‍👧‍👦 Gold line-art Indian family dining illustration blended into the recipe section like it was always part of the page

📋 Interactive recipe checklist with a live progress bar

📅 Reservation form with validation (because Ember & Spice is fully booked on weekends, obviously)

Demo
🔗 Live: https://tandoori-paneer.vercel.app/
🐙 GitHub: github.com/jogadiyadipak28-art/tandoori-paneer

Journey
I chose Tandoori Paneer Tikka because it's my favourite dish and it carries so much memory. The smell of charcoal, the bright orange marinade, skewers shared at family gatherings. I wanted the page to feel as warm and alive as the dish itself.

What started as a "just build a landing page" turned into me asking "what would make this feel more desi?" at every step. And the answer kept coming. The toran. The Devanagari watermark. The diya lamps. The gold peacocks. Each element came from thinking about what Indian design actually looks, feels and moves like.

The thing I'm most proud of is the spinning ingredient tray. It took several failed attempts to get drag inertia, pointer capture, counter-rotating labels, keyboard navigation, and mini-plate integration all working together cleanly. When it finally clicked (pun intended) it was deeply satisfying.

The spice dial syncing with the skewer color is the small detail I keep showing people. It's one line of JS connecting two separate interactive panels and it makes the whole kitchen lab feel alive.

What I learned:

Building drag-to-rotate with pointer events, capture, and momentum glide from scratch
mix-blend-mode: multiply for blending illustrations into page backgrounds without a box around them
Why SVG transform-origin in CSS animations is more painful than it looks
Using CSS custom properties as a live bridge between JS state and visual output
Built with zero frameworks, zero build tools. Just HTML, CSS, and about 400 lines of vanilla JavaScript.

Now if you'll excuse me, I need to go eat some tandoori paneer. 🧀🔥

I Built a Real-Time News Aggregator for Citizen Journalists

Jogadiya Niyati — Wed, 22 Jul 2026 13:21:12 +0000

Introducing CitizenPress: The Future of Community-Driven Journalism 🌍

How we are blurring the line between global breaking news and local citizen reporting.

In an era where the news cycle moves faster than ever, staying informed can feel like drinking from a firehose. Between massive media conglomerates and fragmented social media feeds, finding a reliable, unified source of both global breaking news and hyper-local, community-driven stories is a challenge.

That’s why we built CitizenPress.

What is CitizenPress?

CitizenPress is a next-generation news aggregator and publishing platform. It’s designed from the ground up to give you the massive scale of traditional news outlets, while empowering everyday people to report on what’s happening in their own backyards.

📡 Real-Time Global Scale

At its core, CitizenPress leverages the powerful NewsData.io API to fetch live, breaking news from across the globe. The platform automatically organizes this firehose of information into clean, digestible categories: Technology, Business, Sports, and Entertainment.

No more digging through cluttered feeds—you get a premium, magazine-style layout that rivals the world’s top publications.

✍️ Empowering the Citizen Journalist

But we didn't just want to build another news reader. We wanted to build a platform that gives you a voice.

That’s where our Story Builder comes in.

Did you witness an event in your city? Do you have an investigative piece you want to share with the world? The Story Builder allows anyone to draft, format, and instantly publish their own articles.

Once published, your story doesn't get buried in a forum—it gets dynamically injected straight into the Citizen Reports section on our Live News homepage, sitting right alongside breaking stories from major outlets.

🚨 The Main Highlight: Protest Mode at Jantar Mantar

CitizenPress isn't just for casual reporting—it's built for the front lines. One of the core features of the platform is Protest Mode, a dedicated module designed specifically for high-risk and live events.

Built with major demonstrations in mind—like the massive gatherings at Jantar Mantar—Protest Mode equips ground-level activists and journalists with a Rapid Capture Kit. Features include safety-first face blurring, one-tap incident logging, and emergency panic buttons to secure sensitive files. By providing an automatic, chronological timeline of live events complete with GPS tags, CitizenPress ensures that the truth from ground zero is documented safely, securely, and transparently.

Designed for Readability

We believe that reading the news should be an immersive, distraction-free experience.

We threw out the playbook of cluttered ads and overwhelming sidebars. Instead, CitizenPress adopts a sleek, Google-inspired aesthetic. With deep royal purple accents, soft blue gradients, and the crisp readability of the Roboto font family, the platform feels premium, fast, and modern.

The use of translucent glassmorphism design elements ensures that the focus always remains exactly where it should be: on the content.

The Tech Under the Hood

For the developers out there, CitizenPress is built for speed and security:

React 18 & Vite: Ensuring lightning-fast page loads and instant client-side routing.
Client-Side Storage & API Integration: Seamlessly merging live REST API data with local browser storage for a hybrid news feed.
Responsive Grid Architecture: Flawless CSS Grid implementations ensure the magazine layout looks incredible whether you are on a 4K monitor or your smartphone.

Join the Movement

The news isn't just something that happens to us—it's something we all experience, witness, and shape.

CitizenPress is more than just a website; it’s an experiment in democratizing journalism. We invite you to read the world’s stories, and more importantly, to write your own.

Welcome to the new front page.

Follow the development of CitizenPress on GitHub, and join us in shaping the future of news.

DEV Community: Jogadiya Niyati