yusufsaitdirektas.com

Problem

Portfolio sites all look alike: a hero, three cards, a form. The skill list says "I know React" but the site itself never proves it. The goal was an experience where every pixel is living proof of what I've learned — a demonstration, not a shop window.

Solution

This site wears its own code. On load a terminal compiles itself, the portrait materializes glyph by glyph from real repository code, and every piece of text "decodes" onto the screen. A single persistent WebGL Canvas lives across the whole page; scrolling becomes a camera journey and each section is a stop in the scene.

Approach

• One-Canvas architecture: the R3F Canvas mounts once at layout level; sections swap scene content based on scroll state. No per-page Canvas.
• A two-layer decode language: a handwritten scramble engine in the DOM (accessibility and SEO intact), and a shader family sharing a single glyph atlas in WebGL.
• Choreography as data: camera stops, scroll windows and shader targets aren't baked into components; they live as configuration in lib/choreography.ts.
• Performance is non-negotiable: the particle budget adapts to the device, zero allocations inside useFrame, and under prefers-reduced-motion the site stays fully static and usable.
• Two languages: TR/EN via next-intl; all visible text comes from the messages files.