About this site
A short tour of how this site is built — the stack, the pipeline, and the small details that add up to a cinematic feel.
Stack
Build pipeline
A stylized 3D render that anchors the visual brand across the site (used in About).
AI-generated motion video, used full-screen as the hero with ambient blur fallback.
Next.js + Framer Motion + GSAP. Designed for performance: ~170 KB First Load JS, every route prerendered as static HTML.
Under the hood
Terminal-style boot sequence streams lines with pitched synth ticks. Curtain wipes up with a boot sweep + chime, signalling the hero video to start.
Foreground video plays once with audio after the preloader, then pauses on its final frame. A blurred ambient duplicate keeps drifting silently behind for atmosphere.
A center dot tracks 1:1 while a soft trailing ring eases with spring physics. Mix-blend-mode keeps it visible on light or dark surfaces. Auto-disabled on touch devices.
Click, hover, success, tick, and boot voices are oscillator-based. The whole engine is ~120 lines of JS. No mp3s, no licensing.
A floating launcher offers three quick games — Stack Memory, Reaction, Word Scramble — without ever leaving the portfolio. Modal lifts with Framer Motion.
Each work card has a hand-drawn animated SVG that visualizes what the project does — agent graphs, microservice mesh, browser cursor sweeps, eval bars.
The toolbox section runs a canvas particle system that connects nearby nodes and reacts to the cursor. Pure 2D canvas, no Three.js.
Every transition uses the same easing curve (cubic-bezier 0.22, 0.61, 0.36, 1) and slow durations. The vibe is intentional, not bouncy.