Serving a portfolio in courses

The client & the brief

Efua Mensah (fictional) is a chef cooking modern Ghanaian tasting menus from a 24-seat room in Osu, Accra. Her food re-stages street and home cooking — waakye, kelewele, nkatenkwan, sobolo — with fine-dining discipline and obsessive sourcing. Her imagined ask: a personal portfolio that works like her food does. Not a booking platform, not a food blog — a first impression that tastes like the restaurant.

Two audiences: diners deciding whether to give her a whole evening, and journalists, residency programs and private-event clients deciding whether she has a point of view. Both are served by the same thing — a site with the confidence to be a single, authored experience.

The problem

Chef websites are a genre in crisis: a full-bleed photo of hands plating microgreens, an Instagram grid, a PDF menu, a reservation widget. Interchangeable for any restaurant on any continent. Worse for this brief: the collection this site belongs to forbids photography entirely — every visual must be drawn in code.

So the real design question became: can a restaurant site make you hungry without a single photograph? If yes, the constraint stops being a handicap and becomes the most memorable thing about the site.

The direction chosen

The portfolio is the tasting menu. The page is structured as one seating: an amuse-bouche hero, seven courses served in order as scroll scenes, then the chef, private dining, notices, reservations. Each course plates itself as it enters — plate, sauce sweep, protein, garnish, steam — because watching a dish come together is the closest a screen gets to the theatre of the pass. Menu typography (Garamond italics, small-caps numerals, dot leaders) carries the fine-dining register; the plates carry the appetite.

This direction won because it collapses three problems into one solution: it structures the content (a menu is already perfect information architecture), it showcases the food without photos (plating diagrams are how chefs think anyway), and it gives the site a signature interaction no template can have.

Directions rejected

• The classic photo-editorial site, illustrated. Recreate the genre — hero image, story, gallery — but with illustrations standing in for photos. Rejected: illustration used as a photo substitute reads as a budget compromise. The drawings needed a native format, not a borrowed one.
• The recipe archive. A journal of dishes with essays and technique notes. Rejected: it positions her as a writer, not a cook you book. It also has no dramaturgy — a tasting menu has an order, and order is the whole point of her cooking.
• The cinematic dark reel. A heavy, video-like scroll experience with kitchen ambience and sound. Rejected: sound requires opt-in, "cinematic" is the most imitated register in hospitality web design, and the weight budget was better spent on seven bespoke plate illustrations than on atmosphere.

Key decisions & trade-offs

• Seven pinned scenes vs. reader patience. Each course costs about one viewport of scrolling to plate. That is a real toll, so two escape hatches exist: the menu card at the top anchor-links to any course, and a fixed rail of numerals I–VII tracks progress and jumps anywhere. The scroll is an experience, never a cage.
• Appetizing abstraction, calibrated. Too literal and the SVG plates become clip-art; too abstract and they stop being food. The rule that held: real plating geometry (a mound, a sweep, a crescent tuile), food-true colours, and no faces, no outlines, no cartoon highlights. The first pass failed this twice — a sauce arc that smiled, a tuile that read as hair — and the critique loop caught both.
• One dark theme, committed. Charcoal is the room at night; the plates get to be the brightest objects on screen, which is exactly the hierarchy of a dining room. A light theme would have flattened the plates into diagrams.
• Steam as semantics, not decoration. Wisps appear only over courses served hot; the granita gets frost glints instead. Tiny system honesty like this is what makes an invented restaurant feel run by a real chef.
• Honest fiction. The chef's bio, the residencies and all three press quotes are labeled as invented, on the page, in plain language — not buried here. Credibility is Hannah's product; a portfolio that fakes credentials for a fictional chef would poison it.
• Reduced motion as first-class service. The assembly is the signature, but the dish is the content: under prefers-reduced-motion every plate arrives fully composed and nothing moves. Same menu, quieter room.

Intended impact

Framed as design goals, since no real business exists to measure: make a visitor hungry within two courses; make the no-photography constraint read as a creative signature rather than an absence; demonstrate that scroll-driven storytelling can be lightweight (no libraries, transform/opacity only) and accessible; and give the reservation ask a conversion-shaped path — every course ends one scroll closer to the form, and the rail's last stop is VII, one viewport above it.

For Hannah's portfolio, the demonstrated capability is specific: narrative scrollytelling, SVG illustration systems with animation grammars, typographic systems built from a single component (the dot leader), and restraint — an interaction-heavy site with a 40-line scroll engine and zero dependencies.