yazanalsamman.com — Cinematic Portfolio Platform

The portfolio you are reading: a Next.js App Router site whose every word comes from a Payload CMS, with a scroll-driven 3D narrative — the Inference Core, neural graph, actuator and portrait — layered over server-rendered, crawlable HTML.

The 3D experience must never cost the reader: critical JavaScript is budgeted at 170 KB gzip and the lazily-loaded scene at 400 KB; idle and off-screen rendering must be zero; reduced-motion, Save-Data, low-memory and WebGL-less visitors get a complete static experience; Arabic must be first-class RTL but stays unpublished until a human review approves it.

Next.js (App Router, React Server Components) renders every page on the server from a typed content contract: a Payload CMS on PostgreSQL feeds a repository adapter, whose output is validated before any page sees it. The 3D scene is a separate, lazily imported React Three Fiber chunk behind a capability-based quality tier. Production runs as Docker containers behind Nginx with TLS, backups and a rehearsed restore.

Frames are rendered on demand — only while scroll progress changes — and every shader program is compiled in parallel before the first frame, which removed mid-scroll compile stalls. Content that matters is never only in WebGL: the H1, captions and portrait exist in HTML first.

Measured in the project's own verification runs: critical JavaScript about 165 KB gzip on the home page, the 3D scene about 253 KB gzip, zero draws while idle or off-screen, no frame over 33 ms in the scroll harness, zero axe WCAG violations across the audited routes, and an end-to-end suite of 164 passing tests.