Mohamed Abdelwahab
A wedding photographer's work does not want to sit in a grid of equal squares.
At a glance
- Client
- Mohamed Abdelwahab
- Year
- 2026
- Scope
- Design, build, test, host
- Motion
- GSAP · ScrollTrigger · Lenis

Worth knowing
- 01
A horizontal archive at varying scale, not a uniform masonry grid
- 02
Cream-sweep page transitions, so the archive reads as one continuous artifact
- 03
Vitest and Playwright against a production build, not a dev server
01The idea
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.
02Motion as the structure
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.
Page transitions were the piece worth real time. An instant navigation reads as a page break; the sweep makes the archive continuous — one artifact you move through rather than a set of documents.
03Tested and self-hosted
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.
04Stack
- Next.js
- React
- TypeScript
- GSAP
- Lenis
- Tailwind
- Vitest
- Playwright