Taste of Home: The Story Behind Sombe

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

What I Built

Taste of Home — a landing page telling the story of Sombe, one of the most beloved comfort foods of the Democratic Republic of the Congo. Sombe is made from cassava leaves, pounded fine and simmered for hours with palm oil, peanut paste, and aromatics until they turn soft and deeply savoury.

Rather than building a restaurant-style promo page, I wanted the site to work like a piece of editorial storytelling — closer to a food culture feature than an ad. It walks through:

• The Story — what the dish means beyond the ingredients
• Why It Feels Like Home — family, tradition, and community
• Ingredients — flip cards (torn-leaf shaped, not generic rectangles, as a nod to how cassava leaves are hand-torn and pounded)
• Preparation — a five-step scroll-animated timeline from harvest to serving
• Gallery — a masonry layout with a keyboard-accessible lightbox
• Cultural Importance & Regional Variations — how the dish shifts across the country
• A closing prompt: "Every culture has a comfort food. What's yours?"

Built entirely with HTML5, CSS3, and vanilla JavaScript — no frameworks, no UI libraries. Bonus features include a dark mode toggle, scroll progress indicator, a print-recipe button, and a back-to-top button.

Demo

🔗 Live site: https://alexandrebayanza-maker.github.io/tastehome/
💻 Source code: https://github.com/alexandrebayanza-maker/tastehome

alexandrebayanza-maker.github.io

Journey

I wanted to move away from the "restaurant menu" instinct that comfort-food landing pages usually default to, and instead treat the page like a short documentary — the food as a way into a family and a culture, not a product to sell.

A few things I'm proud of:

• The torn-leaf clip-path used on the ingredient cards instead of standard rounded rectangles — a small detail, but it ties the visual language back to the actual dish (cassava leaves are torn and pounded by hand, not neatly cut).
• The preparation timeline fills in sync with scroll position, echoing the slow, unhurried nature of the cooking process itself.
• Keeping everything accessible by default: semantic landmarks, visible focus states, full keyboard support in the gallery lightbox, and complete prefers-reduced-motion support — built in from the start rather than bolted on.

What I'd do next: swap in a short audio clip or field recording to give the "Culture" section more texture.

Thanks for running this challenge — it was a genuinely nice excuse to write about food that means something rather than just design another landing page!