Alpine world goes alive — free camera, weather, and a full day cycle
v1.0.7- —[playground/terrain] fixed transparent floor — DoubleSide material + displacementBias: -3 to prevent camera clipping underground
- —[playground/terrain] added envMapIntensity: 0.15 and base color #5a4a2e to kill glassy HDR washout on the ground
- —[playground/camera] FreeCamera — PointerLockControls + WASD/Space/Shift movement; 1–6 digit keys teleport to zone viewpoints
- —[playground/snow] SnowSystem — 1800 falling particles with horizontal drift; resets above camera, follows player position
- —[playground/road] DirtRoad — ribbon geometry pinned to terrain height along camera spline, dark earthy color
- —[playground/clouds] CloudDrift — 18 puff-sprite clouds (canvas CanvasTexture), slow eastward drift, boundary reset
- —[playground/birds] BirdSystem — 6 flocks × 5 birds, canvas V-wing sprite, sine-wave orbit paths at altitude 16–38
- —[playground/time] TimeOfDay — AmbientLight + DirectionalLight driven by an 8-min day cycle; fog color shifts dawn→noon→dusk→night
- —[playground/hud] alive-mode controls hint added (click to capture / WASD / Esc)
- —[playground/canvas] FreeCamera, SnowSystem, DirtRoad wired into PlaygroundCanvas
- —[playground] Step 8 (Spotify) permanently removed per decision — world atmosphere replaces audio player
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.
Terrain splat, HRTF spatial audio, and ghost HUD for the alpine world
v1.0.6- —[shader] TerrainMesh — MeshStandardMaterial extended via onBeforeCompile; fragment shader blends grass/rock/dirt/snow by normalised height and finite-difference slope; tiling at 32×; snow peaks above h=0.58, rock on steep slopes, dirt at mid-altitude, grass elsewhere
- —[shader] WaterPlane — custom ShaderMaterial at lake zone (x=-2, y=2.2, z=52), 55×40 world units; 2-octave FBM wave function, shore fade via smoothstep edge mask, depth tint, shimmer highlight; uTime updated each frame
- —[shader] Wind foliage — makeWindMaterial() clones MeshStandardMaterial, injects vertex sway proportional to local Y (roots stay planted); applied to Flower_1–5_Clump, Grass_Large, Grass_Large_Extruded via InstancedModel wind prop
- —[audio] AudioEngine class — Web Audio API HRTF PannerNode per source (panningModel: HRTF, distanceModel: inverse); per-zone GainNode crossfade via linearRampToValueAtTime (2s); synthetic reverb from exponentially-decayed noise impulse response
- —[audio] 8D orbiting sources — field birds, insects, forest wind, mountain wind, frogs rotate at 0.2 rad/s around listener XZ at radius 14wu; reverb wet scales 0.10→0.40 with normalised camera altitude
- —[audio] AudioSystem.tsx — R3F component inside Canvas; boots AudioEngine on audioStarted; drives listener pose, orbit tick, zone crossfades, reverb each useFrame
- —[page] AudioPrompt — bottom-left "tap for audio" mono button; sets audioStarted on click or first keydown; respects browser autoplay policy
- —[component] PlaygroundHUD — ghost overlay; Framer Motion fade+slide on mousemove, 3s auto-hide; journey/alive mode toggle, speed slider (0.5–2×), volume slider + mute toggle, Spotify placeholder (greyed, Step 8 deferred)
- —[design] Headphone nudge — "use headphones" appears bottom-right for 4s after first audio unlock, then fades; mono 10px, 0.25 opacity — invites but doesn't demand
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.
Hand-crafted brand icons and a first essay on designing systems
v1.0.5- —[ui] Redesigned the Toolkit section on the about page — switched from text abbreviations to native SVG brand marks, matching the visual pattern of the design system page
- —[ui] Hand-sourced all SVG paths from Simple Icons, Wikimedia Commons, and official brand assets — covers Claude (Anthropic "A" mark), OpenAI (interlocking rings), Gemini (4-pointed star), Figma (5-shape logo), Cursor (hexagon), Photoshop and Lightroom (Adobe app tile), DaVinci Resolve (3-circle mark), Google (G shape), Lovable (L-path), v0 (Vercel wordmark), CapCut (inner cut symbol)
- —[content] Published first writing post at /writing/designing-systems — "On designing systems before they were needed" — covers the four internal systems built for this portfolio: changelog pipeline, design token architecture, git automation, and content engine
- —[content] Writing post includes rich Framer Motion animations — reading progress bar, scroll-triggered section reveals, animated system diagrams (dual-track changelog flow, token cascade, git timeline, content pipeline), pull quotes with animated left-border accent, and animated stat counters
- —[infra] Linked first writing post from about page Writing section; remaining posts stay "Coming soon" until ready
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.
Homepage rebuilt: bio, bento stats, timezone quips, and identity update
v1.0.4- —[content] Rewrote homepage bio from generic copy to experience-grounded copy — 5+ years, fintech/SaaS/cybersecurity context, building with AI as a core practice
- —[identity] Updated title from "Design Engineer" to "Product Designer × Builder" across homepage hero, about page badge, and experience entry — reflects the actual shape of the work
- —[ui] Replaced flat info rows on homepage with a bento-style stats grid — pulsing availability dot, experience count, current role, and live clock with animated hands
- —[ui] Added Starfire as the hero project card on homepage; updated portfolio card gradient to blue; replaced placeholder card with a styled "Something new" entry
- —[ui] Added per-project hover cards on homepage (Divverse Labs inline link with animated tooltip showing company context on hover)
- —[ui] Built timezone quip system — detects visitor's UTC offset vs Abuja (GMT+1) and shows a context-aware typewriter-animated string (e.g. "YOU'RE 6H BEHIND — ALREADY ON TASK 10 :)"), with quips that vary by time of day (morning / evening / night)
- —[ui] Increased homepage top padding from 150px to 186px to give the floating header more breathing room
- —[ui] Added social links section to about page with icon badges, handle labels, and arrow-out affordance
- —[ui] Added info grid to about page (location, experience, current project) matching homepage bento pattern
- —[ui] Added Writing section stub to about page — links to first post, remaining entries show "Coming soon"
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.
Glassmorphism header, animated signature, and homepage polish
v1.0.3- —session: glassmorphism header, animated signature, homepage + changelog polish
Headshot hover, About & Contact pages, homepage depth
v1.0.2- —Built /about page with personal story, 4 How I Work principles, Toolkit grid, Experience timeline, and Currently section
- —Built /contact page with availability badges, service cards, contact form with success state, and FAQ
- —Added avatar hover interaction on hero — cursor icon fades out as headshot photo fades and scales in
- —Extracted CursorIconSkeuo and CursorAvatar to shared component; added iconOffset prop for per-instance optical centering
- —Added "Now" section to homepage (building/learning/reading/thinking rows)
- —Added "Writing" section to homepage with 3 article teasers ready for real content
- —Simplified header: removed ⌘K search, nav text-xs for better pill proportion, theme toggle stays right
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.
Changelog page, floating header, and build pipeline
v1.0.1- —Changelog page built at /changelog — server component reads index.json, client component handles filtering and staggered animations
- —Every changelog entry card gets a permanent CardFooter strip for version, date, tags, and source metadata
- —Changelog build pipeline wired up — prebuild hook runs changelog:build before every next build automatically
- —Draft script updated to auto-generate entry titles from commit messages
- —CLAUDE.md created — documents design system tokens, card patterns, and hands-off changelog workflow
- —Header converted to floating pill with borderRadius 300px, surface fill, and double-ring outline
- —Scroll-triggered avatar added to header — slides in after 20px scroll, links back to home on click
- —Fixed Framer Motion v12 type conflicts in Button, page.tsx, and design-system page
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.
Initial portfolio foundation
v1.0.0- —Next.js + TypeScript project scaffolded with App Router
- —Design system page created at /design-system
- —Core UI component library built: Avatar, Badge, Button, Card, CodeBlock, IconBadge, Input, Separator, Tag, ThemeToggle, Toggle
- —Header component implemented with sticky nav, ⌘K trigger, and theme toggle
- —Global styles, design tokens, and layout established — light and dark mode
- —Homepage built with hero, featured projects, newsletter, and footer sections
- —Changelog infrastructure scaffolded — platform + per-project surfaces