Biryani Tales - A Deliciously Illustrated History

What I Built

Biryani Tales — A Deliciously Illustrated History

For this challenge, I chose one of my favourite comfort foods: biryani.

I built an interactive landing page that takes visitors on a visual journey through the history, regional varieties, and cultural stories behind biryani.

The page includes:

🍚 An illustrated hero section featuring a realistic biryani handi
📜 An interactive timeline exploring the history of biryani
🌶️ Regional biryani varieties from across India
🗺️ A "Biryani Flavour Atlas" highlighting regional styles
🃏 Flip cards containing interesting biryani trivia
🎡 An interactive "Spin the Pot" wheel that randomly picks a biryani
✨ Scroll animations and interactive UI elements
📱 Responsive design for different screen sizes

I wanted the page to feel warm, playful, and food-focused rather than like a traditional informational website.

Demo

[https://delicate-sunburst-b67e2e.netlify.app/]

Repo Link:
[https://github.com/Mahadarshini/briyani]

Journey

The main idea was to turn something as familiar as biryani into a small interactive storytelling experience.

I started with the visual direction first — warm cream, saffron, chilli, and masala-inspired colours — and then built the different sections around the story of biryani.

One of the parts I enjoyed most was creating the biryani handi using CSS, rather than simply using a static image. I experimented with gradients, shadows, layering, rice grains, herbs, meat pieces, metallic textures, steam, and animation to make the pot feel more like a real restaurant-style handi.

I also wanted the page to have small interactions that make people want to explore, so I added the flip-card trivia section and the interactive biryani wheel.

What I learned

This challenge helped me think beyond simply making a page "look good." I focused more on:

Creating a visual hierarchy
Making interactions feel purposeful
Using CSS to create illustrated elements
Building a consistent visual language
Making a storytelling experience through frontend design

I'm particularly proud of how the biryani pot evolved from a simple CSS illustration into a more detailed restaurant-style handi.

What's next?

I'd like to take this further by adding:

More regional biryani stories
Real photographs and recipes
Sound effects and subtle food animations
A recipe section
Better mobile interactions
More interactive storytelling elements

Built with ❤️, CSS, JavaScript, and a lot of biryani cravings.