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