This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
What I Built
A love letter to Jollof rice, the dish I cook in Manchester when I need Lagos back for an hour.
It's a single landing page that tells the story of one pot. Where jollof came from, what goes in it layer by layer, the Nigeria vs Ghana argument that will outlive us all, and the five steps to cook it yourself. There isn't a single photograph on the page. Every dish, the top-down pot, the steam, the cross-section, is drawn in CSS.
Three things I cared about most:
- Accessibility first. Semantic landmarks, a working skip link that moves focus, one open accordion pattern with proper aria wiring, a vote result announced through a live region, gold focus rings on everything, and a reduced-motion mode where nothing moves.
- Interaction that earns its place. Open a layer in "Anatomy of the Pot", and the pot cross-section lights up that layer. Vote in the Jollof Wars and the tally stays on your device, because this war needs no central server.
- A visual identity that isn't a food template. Flat editorial poster style, hard-edged shadows, two-tone display type split across the ground. If it looks like a restaurant theme from a template store, I failed.
Demo
Journey
I started with a rule: no photographs. Food sites lean on photography because it's the easy win, and I wanted to see how far layout, type, and flat CSS shapes could carry appetite on their own. The pot became one big orange circle, the rice became hard-stop radial gradients, and the steam became three animated wisps that go still if you prefer reduced motion.
The part I'm proud of is the anatomy section. The accordion drives the illustration, so the page explains the dish the way I'd explain it across a kitchen counter: layer by layer, base to smoke. The part that humbled me was the two-tone headline, which needs the text split to line up with the background split at every viewport width.
And the personal bit, since this challenge is about comfort. I'm Nigerian, I live in Greater Manchester, and jollof is the one dish that resets me when the week has been too much. Building this page was the cheapest therapy I've had all year.
Stack: hand-written HTML, CSS, and about 120 lines of vanilla JS. No frameworks, no images, no dependencies. Built with Claude as my pair, reviewed and argued over by me. MIT licensed.
So, one question before you go: Naija or Ghana? That is, if you had tasted both. If not, why not give it a go? The vote button is waiting.
Top comments (1)
Good Luck!