I wanted a portfolio for a while before I built one. The thing that kept stopping me was that every version I imagined looked like everyone else's.
So I started with what I wanted it to feel like, not what I wanted it to contain.
I wrote down my own ideas first
Before looking at a single template I made a list. Not a design, just what I wanted:
- It should be graphical. Not a wall of text with a header.
- It should catch the eye in the first two seconds.
- It should have movement. Animations, things that respond.
- It should be soft. Pastel, a bit girlish. Something that looks like me rather than a generic developer dark theme.
Writing that down first mattered more than I expected. Later, when I was deep in tweaking, that list is what I checked against when I could not tell whether a change was an improvement or just a change.
Then I looked at what other people do
I went through a lot of developer portfolios. Some things I noticed:
What worked: big clear headlines that say what the person does, project cards with actual screenshots, and a visible way to contact them. The best ones told me what the person was good at before I had scrolled.
What did not: long paragraphs about "passion for technology", project lists with no images, and contact buttons that did nothing when clicked. That last one turned up more than you would think, and it is the one mistake that costs you the most.
I also noticed how many portfolios never say what the person actually wants. No mention of whether they are looking for work, freelance, or neither.
Where I started from
I used the initial prompt from careerleap.app to get a base. It gave me a working Next.js site with a sensible structure: home, about, a work section, a blog, and the SEO plumbing already handled.
I want to be straight about this because I think people are weird about it. Starting from a base is not the same as having a site handed to you. What arrived was a placeholder identity with fake projects and a purple theme. Everything that makes it mine came after.
Five rounds of tweaks
It took roughly five passes over about two weeks, and each one had a different focus.
Round one was identity. My name, my real projects, my experience, my email. Getting every trace of the placeholder out, which took longer than it should have because pieces of it hide in places you do not think to look, like the favicon and the blog cover images.
Round two was colour. I tried a teal and terracotta palette first and got quite far with it before deciding it was not me. The pastel version is what I actually wanted from the start.
Round three was making it graphical, which was my original goal. Project cards with real screenshots instead of placeholders, proper icons instead of emoji, the slider, the small animations.
Round four was the details that make it feel finished. The bits that are not strictly necessary and are the reason people remember a site.
Round five was content. Going back over every line and asking whether it said something real.
The content is the part that matters
This is where I spent the most time, and it is the part nobody sees as work.
For each project I tried to say what it actually is, what I built, and what stack it runs on. Not "worked on various features". If a project is live, it links out, because a working link is worth more than any description.
A few decisions I made about content:
- No invented numbers. I do not have impressive metrics from most of these projects, so I describe what was built rather than making up percentages.
- Name the real things. Real clients, real product names, real URLs.
- Say what I want. The site says I am open to full-time and freelance work, because a portfolio that does not say what you want is asking the reader to guess.
What I would tell someone starting theirs
Write down what you want it to feel like before you look at any templates. Look at other portfolios for structure, not to copy the design. Do not wait until your work feels impressive enough, because it will not. And test your contact button, actually click it, because a portfolio that cannot be replied to is just a nice page.
FAQ
What is this site built with?
Next.js and React with Tailwind, animated with Framer Motion. The blog is MDX files in the repo, so posting is just adding a file.
Did you design it from scratch?
No. I started from a base and reshaped it over about five rounds. The palette, the content, the project cards, the animations and the small touches are mine.
How long did it take?
Around two weeks of evenings. The build was not the slow part. Deciding what it should feel like, and then writing honest content, took most of it.
