Platform Changelog

Design note

The root crash was four full-app iframes loading simultaneously on mobile. The fix activates only the most-visible demo at a time via IntersectionObserver — so the renderer holds at most two iframes. Three.js never loads on mobile (desktop-only note instead), and YouTube only loads on click. Three independent memory ceilings, all dropped.

Design note

Commands on mobile now scroll horizontally rather than wrapping — the whole row becomes the copy target, the icon disappears. Cleaner than truncating or shrinking the font.

Design note

The closing paragraph in the alpine-sourcing article had to be fully rewritten — it described the current build as "simpler, without PBR splatting, without spatial audio, procedural terrain" when all of that is false. v2 has the real SRTM heightmap, full PBR shader, HRTF spatial audio, and instanced foliage. The trees still float because the CPU and GPU height pipelines produce different Y values from the same heightmap. Accuracy matters most when the article is literally about what failed.

Design note

A smooth circle clip-path felt sterile — a domain expansion should writhe. Swapped CSS transitions for a rAF-driven path() blob with three layered sine frequencies, each at different phase speeds, so the boundary undulates while it grows. The trigger also moved off the chrome bar and onto the iframe's own ThemeToggle — embed-mode detection makes the in-iframe button postMessage `{type, x, y}` to the parent, which translates the coords by the iframe's scale factor and runs the animation from that exact spot. The demo now feels owned by the live homepage inside it, not by a fake browser frame around it.

Design note

Removed the full-screen scroll illusion entirely — the playground now lives as a proper card in the page layout, matching the project/tool card pattern. The 3D canvas stays mounted when expanding to full screen (position:fixed trick), so the scene never resets.

Design note

First-visit quote is SSR-rendered via cookie detection so it is in the initial HTML at full opacity — zero flash possible. Riddle fires via a custom event dispatched before router.push(), matching the same no-flash pattern as the regular quote system. The footer toggle is intentionally unlabelled — hover only — as part of the footnoters joke.

Design note

The fix required intercepting navigation at the link level rather than reacting to pathname changes. TransitionLink fires the overlay on click, then calls router.push two animation frames later — by which point the overlay is already rendering and covers the page mount completely.

Design note

The overlay fires independently of how fast the destination page loads — the 1600ms timer runs regardless. This prevents the subconscious association of "quote = slow page." The destination finishes loading under the overlay; it's revealed when the thought passes.

Design note

Spacing rule formalized this session: title + body = one tight unit (gap-1 to gap-1.5 inside), with a wider gap to the next element. Applied globally across cards, sections, and article pages. Also distinguished nested containers (--bg-subtle, near-white) from top-level containers (--surface, white) to restore visual hierarchy that was lost when bg-subtle was set too dark.

Design note

Iframe section isolation required removing CSS !important injection from the layout inline script — it was hiding sections that had no matching id attribute. Lenis proved to be the real blocker for scroll prevention since it intercepts wheel/touch events before CSS overflow:hidden can act. Both were fixed independently, then ResizeObserver replaced one-shot rAF height reporting so iframes self-size as 3D and animated content settles.

Design note

Blocks grouped into labelled page sections (Home / Sponsors / Creators / Footer) using a SectionDivider component. The divider uses a hairline border + mono uppercase label rather than a full heading — keeps the information density high without competing with the block labels themselves. iframes are now fully interactive: pointer events on, scrolling enabled, so you can click and scroll within each embedded section to see the real responsive behaviour.

Design note

The playground shifted from a passive scroll-diorama to a first-person explorable space. The key decision was keeping weather and time as ambient systems — SnowSystem, CloudDrift, BirdSystem, and TimeOfDay all run silently in the background, not as UI features. They exist to reward players who actually enter alive mode and look around. The 8-minute day cycle length was tuned to feel perceptible without feeling like a clock. Spotify (Step 8) was permanently dropped — it was the right call; the world speaks through atmosphere, not a player.

Design note

The three systems in this session are about making the world feel real without any single obvious trick. Texture splatting means the terrain reads as actual geography — snow caps, rocky slopes, grassy valley floor — without a single UV-painted texture. The audio system is the one detail most visitors won't consciously notice but will feel: HRTF panning means sounds have genuine left/right/behind positioning in 3D space, and orbiting sources create the "8D" movement without any fake stereo tricks. The HUD is invisible until you need it — ghost-mode by design, so the landscape isn't cluttered with controls. The "use headphones" nudge is the one moment of explicit invitation.

Design note

Each toolkit SVG was sourced from Simple Icons, Wikimedia Commons, and official brand assets — no icon library. The goal was pixel-accurate brand marks rather than generic approximations. The first writing post was written before any project case studies shipped deliberately — the systems (changelog pipeline, token architecture, git workflow, content engine) were the actual first work, and documenting them first was honest sequencing, not filler.

Design note

The identity shift from "Design Engineer" to "Product Designer × Builder" was intentional — the portfolio needed copy that reflects the actual shape of the work (designing and building with AI) rather than a job title that implies backend engineering. The bento stats grid was chosen over flat info rows because it lets the page communicate availability, experience, and current focus at a glance without needing the visitor to scroll into the bio.

Design note

The CursorAvatar iconOffset prop solves a recurring problem — optical centering differs by size. The hero needs 2px, the 28px header slot only needs 1px. Making it a prop keeps the component honest rather than hard-coding a compromise.

Design note

The header was redesigned from a full-width sticky bar to a floating pill. Centering it with the same max-w-[640px] mx-auto px-6 wrapper as the page content — rather than a flex justify-center approach — is what keeps it from extending beyond the content column on wide screens. The double-ring treatment (border-strong + outline at outlineOffset 2px) matches the IconBadge chrome, making the header feel like a first-class design system element.