Restaurant website 2026
Maynard's Burgers
Website for a burger restaurant in Porto, with a scroll-driven hero where the visitor builds the burger layer by layer.
The project
A marketing site for Maynard's Burgers on Rua de Fernandes Tomás in Porto. It is a single server-rendered page that moves through the featured burgers, the house manifesto, the full menu and the information needed to visit.
The hero is the centre of the project. The eight layers of the Cheddar Supremo start apart and land one by one, bottom up, as the visitor scrolls. At the end the burger locks, the price is stamped on top and the order buttons appear. Every order button leads to the restaurant's official store, so the site needs no basket and no payments.
Menu, prices and opening hours come from data and configuration files, not from the markup. The content exists in four languages. Gabriel Moura collaborated on the project with references, translations and reviews.
Up close.
Visual direction.
The brand runs on a single colour, Maynard's yellow, with black and three warm neutrals. The photography brings the rest. One family, Archivo variable, gives three voices by changing width: wide for the wordmark, regular and heavy for headlines, condensed for the menu and prices. Square corners, thick borders, hard shadows and the diamond as a motif for bullets, stamps and separators.
Typography
- Archivo
Colours
- #FFD200
- #000000
- #111111
- #FFFDF5
- #F2F0E9
Under the hood.
-
01
The burger geometry is declared in configuration as fractions of the container width, so the composition is identical on any screen.
-
02
The animation uses GSAP ScrollTrigger over a CSS sticky track. On every refresh it measures the available space and derives the exploded scale and distances, with no hard-coded pixel values.
-
03
Without JavaScript, or with prefers-reduced-motion, the page shows the assembled burger in a single viewport with the buttons visible.
-
04
The hero layers are alpha WebP in three widths. The buns load with high priority and everything below the fold is lazy.
-
05
Restaurant structured data (JSON-LD) is generated from the same configuration that feeds the page.
-
06
Tests cover the page sections, SEO, structured data, image asset existence, localisation and error pages.
Private project. Happy to walk through it on a call.