portfolio redesign
rebuilt my own portfolio from scratch using claude code and vibe coding. the entire site was designed and built through ai-assisted development. no figma, no mockups. just prompts, iterations, and live code.
01 — the approach
design in the browser, not in figma
vibe coding flips the traditional design workflow. instead of wireframes → mockups → handoff → build, the entire process collapses into one loop: prompt → live code → review → prompt again. there's no translation layer between design intent and implementation because they happen in the same place at the same time.
claude code was used to scaffold every section from scratch: structure, layout, typography, interactions, and then iterated on directly in the browser. decisions that would normally require a figma file and a development sprint happened in minutes. a hover state, a spacing adjustment, a new section, all driven by conversation rather than tools.
the constraint was deliberate: no design tools, no mockups, no prototypes. every design decision had to be made in real code, which meant the gap between thinking and seeing was almost zero. that speed changes how you think about the work.
02 — technology
small stack, deliberate choices
the stack was kept intentionally minimal. no frameworks, no build tools, no dependencies. the goal was a site that loads instantly, costs nothing to host, and can be understood by reading a single file.
03 — design decisions
constraints as a design system
every visual decision was a constraint. lowercase throughout. it removes formality and creates a consistent voice without needing a brand guide. a single typeface in multiple weights does all the hierarchy work that would normally require colour, size, and weight variation across a family of fonts.
no images. no icons. the portfolio is entirely text and space. that isn't minimalism for its own sake. it's a deliberate test of whether the work and the writing can carry the page on their own. generous whitespace forces each line to earn its place. if a section feels empty, the copy needs to be better, not filled with visuals.
lowercase throughout
removes formality, creates a consistent voice, and means every typographic hierarchy decision is made through weight and size rather than capitalisation.
single typeface
matter in weights 300 to 600 handles everything: headings, body, labels, captions. no secondary typeface needed. the system is legible and scalable.
no images, no icons
text and space carry the page. if a section feels weak without a visual, the writing needs work, not a placeholder image or a decorative icon.
hover states only where earned
interactions are reserved for elements that respond to them meaningfully: nav links, case cards, skill rows. nothing animates by default unless it communicates something.
04 — what i learned
how ai changes the design workflow
building entirely through prompts surfaces things about your own design thinking that are easy to miss when using traditional tools.
speed removes the fear of throwing things away
when a section takes 10 seconds to scaffold instead of an hour to design, you become much more willing to delete it and start over. the low cost of iteration makes the output better because you're not precious about what you've built.
prompting well is a design skill
a vague prompt produces vague output. the clearer and more specific the brief: the aesthetic reference, the spacing logic, the exact behaviour, the more useful the result. writing a good prompt and writing a good design brief require exactly the same skill.
know when to stop prompting and just write
claude code is fast at structure and layout but slower at nuance. fine-grained spacing adjustments, copy edits, and subtle motion decisions are often faster to write by hand. the workflow is not "prompt everything". it's knowing which decisions belong to the ai and which belong to you.
the design tool is now the conversation
figma externalises thinking onto a canvas. vibe coding externalises it into language. both require clarity about what you want, but prompting forces you to articulate decisions in words rather than gestures, which produces a different and often more considered kind of design rationale.