Archive
Mohamed Abdelwahab
An archive that lets a wedding photographer's work run at different scales instead of sitting in a grid.
- Client
- Mohamed Abdelwahab
- Year
- 2026
- Scope
- Design, build, test, host
- Motion
- GSAP · ScrollTrigger · Lenis
The idea
A wedding photographer's work does not want to sit in a grid of equal squares.
Most photographer portfolios are a uniform masonry grid — every image the same weight, scroll until you stop. That flattens a body of work that has range in it, and it makes the site interchangeable with every other photographer's.
So the archive scrolls horizontally, images vary in scale, and moving between pages is a cream sweep rather than a blank flash. The hero carries film grain. The intent throughout was that it should feel made for this photographer, not generated for a category.
What I built
The screen
- Horizontal archive at varying scale
- Cream-sweep page transitions
- Film-grain hero
The logic
- Next.js App Router
- GSAP ScrollTrigger, Lenis on desktop
- Vitest and Playwright on a production build
The data
- The archive's images, in order
- Self-hosted on a Linux VPS
- GitHub as the source of truth
GSAP with ScrollTrigger drives the reveals; Lenis smooths scrolling on desktop and is disabled on touch, where it fights the platform's own inertia rather than improving on it.
Vitest for units, Playwright against a production build for the flows where a broken transition would strand you on a half-rendered page. Deployed to my own Linux VPS behind Caddy with systemd supervising, from GitHub as the source of truth.
One hard decision
Spend the time on the page transitions
An instant navigation reads as a page break, and on a photographer's archive that makes every wedding feel like a separate document. So the transitions got more of the build than any single page did. A cream sweep between pages turns the archive into one piece you move through rather than a set of documents.
What I'd change now
I'd give Mohamed a way to add a wedding himself. Today a new gallery is a code change and a deploy, which suits me and leaves him waiting on me.
Stack
- Next.js
- React
- TypeScript
- GSAP
- Lenis
- Tailwind
- Vitest
- Playwright