The Challenge

UK Director of Photography Rooh Yaseen (Wolf of Watford, Apple TV, commercial filmography) required a digital portfolio that reflected the uncompromising aesthetic quality of cinematic film.

Typical portfolio themes fail on three fronts:

Video embeds (YouTube/Vimeo iframes) destroy Core Web Vitals by downloading 3MB+ of third-party player code before the user clicks play.
High-resolution imagery triggers visible layout shifts (CLS) as files decode.
Heavy animation libraries create micro-stuttering on mobile screens.

Architectural Solutions

[Static Editorial Canvas] ──> [Facade Video Placeholder] ──(Click)──> [Async iframe Stream]
                                         │
                                         ▼
                            [0.00 CLS / 0ms Initial TBT]

1. Facade Pattern for Video Embeds

Implemented a high-performance video facade pattern. Videos render as crisp, pre-compressed WebP poster frames with hardware-accelerated SVG play triggers. The heavy video <iframe> executes only upon explicit user click, saving 4.2MB of payload per page load and keeping Total Blocking Time (TBT) at 0ms.

2. Obsidian OKLCH Color Architecture

Developed a luxury dark color space using OKLCH math (#0A0A0B obsidian canvas, #F4F4F5 crisp chalk text, muted warm zinc borders), completely eliminating noisy neon accents and gradient text tropes.

3. Hardware-Accelerated Kinetic Scrolling

Configured a custom Lenis smooth scroll engine synchronized with Astro View Transitions, delivering smooth 60fps kinetic scrolling without hijacking native browser accessibility.

4. Zero Layout Shift Guarantee (CLS = 0.00)

All dynamic image and video frames declare explicit CSS aspect-ratio containers (16/9, 4/5, 1/1), ensuring fluid responsiveness with zero layout shifts during image hydration.

Rooh Yaseen Editorial Cinematography Showcase

Technologies & Tools