A portfolio is a strange object. It is a marketing site for one person, a public résumé, a writing sample, and a working code sample all at once. Most portfolios solve one of those well and fail at the others. Here is how I tried to thread the needle on mine, and what I would change if I started today.
01Why I rebuilt it
My previous portfolio was a single HTML page with about 800 lines of jQuery. It worked, but it was getting hard to add new projects. The blog was on Hashnode, the projects were on GitHub, my résumé was in Google Docs. Updating “where I work now” meant editing four places.
The trigger was joining Growthzilla in September 2024. I needed a single source of truth.
02The constraints I gave myself
- One repo. Everything in one place I can update from my phone.
- No JavaScript framework. The site should not need React to read a paragraph. Vanilla HTML + CSS for prose, minimal JS only where it adds value.
- Personality. If a stranger lands here, they should know within 30 seconds whether I would be fun to work with.
- Update friction near zero. Adding a project should be writing a couple of lines, not learning a CMS.
- Lighthouse 95+. If my own portfolio is slow, I have no business auditing yours.
03The tools I picked
Honestly? Less than people expect.
- HTML + CSS for content. The same skills I would want a junior to be confident in.
- Vanilla JS for the custom cursor, magnetic buttons, scroll reveals, marquee, and reading-progress bar.
- React + Babel only for the Tweaks panel (color palette, font, density, motion). Loaded last, lazy.
- Bricolage Grotesque + Geist + Geist Mono — three Google Fonts, paired carefully.
- Hosting: Vercel. Deploys on push, free tier easily covers a portfolio.
04The layout decisions
Cool cobalt monochrome
Most developer portfolios are warm (orange, terracotta) or neutral (black, white). I went cool — a deep ink, cobalt blue, ice paper, mint accent. The whole palette is in the same family, which makes the candy-mint accents pop.
Chunky borders & offset shadows
2px borders and hard offset shadows give the site a deliberate “toy” feeling. It is playful without being childish — closer to a well-designed children’s book than a Saturday morning cartoon.
The polaroid hero
Instead of a perfect avatar in a circle, I went with a polaroid card, slightly tilted, surrounded by sticker badges. It signals: this person makes things by hand.
05One thing I regret
I should have written less copy on the homepage. There is a stats section with five-year experience numbers, a services bento, a stack section, a demo, four work cards, three testimonials, three blog teasers, and a footer. That is a lot for a person who has not met me yet.
If I were starting today I would cut the homepage to: hero, three work cards, contact. Then let the dedicated pages do their job.
06Where it goes next
The redesign currently in progress (the one you are reading) is more confident about its visual identity. Bigger type. More motion. A real about page. Individual blog post pages. A Tweaks panel that lets visitors swap the palette in real time.
The next experiment: a small view-transition between pages, and a tasteful AI feature — maybe a “summarize this case study” button powered by Claude. We will see.
If you are working on your own portfolio: ship the imperfect one. The act of having it live changes everything.