This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing.
What I Built
Biryani, With Love is an interactive editorial atlas about the many regional traditions that share the name biryani.
I chose biryani because comfort food is rarely only about flavour. It can hold a city, a family ritual, a migration story, a celebration, and a memory of home in the same pot. The landing page follows that idea from Hyderabad through India and across the Indian Ocean.
The experience includes:
- A research-led map of eight Indian biryani traditions
- A method lab comparing kachchi, pakki, and one-pot cooking sequences
- A guided loop through fourteen traditions across nine countries
- A comparison tool for grain, method, flavour, heat, perfume, tang, and richness
- A historical route connecting language, court kitchens, regional grains, and Indian Ocean migration
- A research shelf that makes the supporting sources visible
The visual system is inspired by a contemporary Deccan pavilion. Saffron, peacock green, pomegranate red, plum, brass, and ivory create the palette. The hero uses CSS-built arches, minarets, jali panels, steam, rice grains, garnish, and an open copper handi.
Demo
Journey
Finding the right metaphor
My first version treated the page like a clean editorial index. It was readable, but it did not carry enough of the warmth, ceremony, and visual richness of the subject.
The breakthrough was to stop treating biryani as a list of recipes and instead design an edible atlas. Each section became a different way to read the same dish: geography, cooking sequence, migration, flavour, and memory.
Researching the architecture
The heritage direction was grounded in specific references rather than a generic ornamental style.
I studied the Charminar architecture described by Hyderabad District, particularly its four-sided arches, minarets, carved rings, and Qutb Shahi lotus details. I also looked at a sixteenth-century Indian jali in The Metropolitan Museum of Art, where stars, hexagons, and interlocking geometry create a play of light and pattern.
Those ideas became solid-color architectural frames, small lattice details, geometric rules, and the central handi illustration. I kept the interface modern by using strong editorial typography, square cards, clear hierarchy, and restrained motion.
Correcting the map
The first map used a simplified world dataset and looked noticeably wrong. I replaced it with the official Survey of India 1:16m outline vector, including the island territories.
The eight city points are projected from geographic coordinates instead of being positioned by eye. The map remains a cultural navigation device, but its outline and locations now have a defensible source.
Building the interactions
The project is a single responsive HTML document with inline CSS and vanilla JavaScript. CodePen separates those same three layers into its HTML, CSS, and JavaScript panels.
JavaScript is used purposefully for:
- Switching regional map stories
- Updating cooking method diagrams
- Running and pausing the global biryani loop
- Filtering traditions by geography
- Comparing two traditions
- Updating the historical route
- Respecting reduced-motion preferences
The page contains no raster food photography. The hero, diagrams, decorative architecture, and interface details are created with HTML, CSS, and inline vector geometry.
Accessibility and usability
I wanted the atlas to remain useful beyond its visual impact. It includes:
- Semantic sections and heading structure
- Keyboard-operable SVG map points
- Visible focus states
- A skip link
- Live regions for changing content
- Reduced-motion support
- Responsive layouts for narrow screens
- Source links for the research claims
- Clear notes where flavour scores are interpretive rather than scientific measurements
What I Am Proud Of
I am most proud that the page does not rank biryanis or declare one authentic winner. It gives each tradition enough context to feel distinct while showing the shared ritual underneath: rice, patience, adaptation, and memory.
The final result feels like a love letter, a research object, and a modern landing page at the same time.
AI Collaboration
I used OpenAI Codex as a collaborative coding, research, and iteration tool. I directed the concept, selected the biryani theme, reviewed each visual pass, identified inaccuracies, and made the final design decisions. The implementation and research sources were checked and refined through that collaboration.
Top comments (0)