Headers & display
ChunkFive
Making pages prettier and life easier.
- Weight
- Regular
- Tracking
- 0%
From a janky Figma Site to a hi-fi, whimsical showcase of my work, directed from brief to launch with Claude Code.
PortfolioRevamp
Before & After- My role
- Designer
- Tools
- Figma, Claude Code, Astro, GSAP, Netlify
- Timeline
- September 2026
Same identity, better feel.
My portfolio lived on Figma Sites. It was quick to publish, but heavy, mostly static and hard to push further. I rebuilt it, keeping every part of the original identity (the typography, the colors, the logos and every asset) and adding what Figma Sites couldn’t: motion, real interactions, and pages that load in a fraction of the time.
1.27 MB0.23 MBHomepage, first load
3–4 MB~1 MBEach case study, fully scrolled
Brief → live< 2 days
From first brief to live site
Before & After
Same browser, same scroll speed, same mouse path. Each pair was recorded with an identical script on the old site and the new one, so the only difference is the site.
Organized before it was built.
AI builds fast, but only as well as it’s briefed. Before the first prompt I set up the workspace: one folder per page, assets exported per section, each case study’s own fonts and type specs, and the rules written down. Open a folder to see how it was laid out.
Portfolio Website General Site Files & Assets
- 5 vector files
- 1 image
- 5 font files
The shared brand kit — logo, name mark and the site’s three typefaces — so every page drew from one source.
Portfolio Website nukta-case-study
- 18 vector files
- 6 font files
Everything one case study needed, its own fonts included, so Nukta’s brand never leaked into another page.
Portfolio Website RECx-case-study
- 17 vector files
- 5 images
- 4 font files
Screens, mockups and survey charts exported per section, ready to drop into the page in order.
Portfolio Website wajba-case-study
- 34 images
- 11 vector files
- 3 font files
Every screen named for what it shows, so the hi-fi flow could be rebuilt in its exact sequence.
Portfolio Website Interncept files and assets
- 40 vector files
- 11 PDFs
- 9 docs
- 16 font files
A brand-new project arriving with its product docs, source logos and type family, so its case study was written from facts, not guesses.
Portfolio Website site
- 52 code files
- 188 images
- 19 font files
- 6 videos
The build lives apart from the sources. Web images are regenerated from the originals by script, never edited by hand.
Portfolio Website Resume.pdf
- 1 PDF
One file as the single source of truth for the resume page.
Colors
Primary
Secondary
Accent
Typography
Body copy
Host Grotesk
Making pages prettier and life easier.
- Weight
- Light – Bold
- Tracking
- 0%
Navigation & labels
Crimson Pro
Making pages prettier and life easier.
- Weight
- Regular & Italic
- Tracking
- 0%
Directed, not delegated.
I built this with Claude Code, Anthropic’s AI coding agent. It wrote the code; my job was deciding what good looks like and holding the work to it.
- Brief & rules
Goals, hard constraints and exact definitions, written down before any code.
- Plan
Claude Code proposed a plan; nothing was built until I approved it.
- Build
Claude Code wrote the site: Astro pages, GSAP motion and a script-driven asset pipeline.
- Review
I reviewed every page in rounds, with annotated screenshots and page-by-page notes.
- Ship
Pushed to GitHub, deployed on Netlify. Every later fix runs through the same loop.
The result
The site you’re on: every page rebuilt and a new case study added, lighter, faster and animated, with the original identity intact. It’s also a way of working I can reuse: brief carefully, approve the plan, review every page, then ship.