Five years ago I spent three months building a portfolio site. I agonized over gradients, hover effects, and whether my headshot should be black-and-white. The thing never launched. I kept finding reasons to redo the navigation. Then a friend told me to stop designing and start typing. That advice changed how I think about personal websites.
Your site is not a gallery. It is a tool. People land on it for one reason: they want to know if you can solve their problem. They are not counting pixels. They are scanning for proof of competence. The fastest way to deliver that proof is to lead with your work and your reasoning. That is why I now recommend starting with a plain HTML page and adding styling only after the content is solid. For example, melasa us uses a single-column layout that puts the writer’s projects front and center. No animations, no carousels, no three-column grids. The design exists solely to make the text readable.
The hard part is not the CSS. The hard part is deciding what to say. Here is how I do it now, after building and rebuilding my own site four times.
Write your bio as a headline, not a novel
Visitors spend about three seconds on a hero section. They will not read a paragraph that starts with “I am a results-oriented professional with a passion for…” Cut that. Write one sentence that states what you do and who you do it for. “I help early-stage startups design their first dashboard.” That is enough. You can expand later, but the first impression must be immediate. On my current site, the headline is seven words. I rewrote it twenty-seven times over a month. It paid off.
Show work, not tools
A list of software skills tells me nothing. “React, Python, Figma” – so what? Thousands of people know those tools. Instead, show a project and describe the problem you solved. Describe one constraint you faced and how you worked around it. A case study of a single client project, written in plain English, is worth more than a skill bar graphic. I once hired a developer solely because his site had a paragraph about how he reduced API latency by switching cache strategies. No skills list. Just the story.
Pick one typography system and stick with it
I see sites with four different fonts. That is not design, it is confusion. Choose one sans-serif and one serif at most. Better yet, pick a single variable font that looks good at all weights. Set a max line length of 700 pixels. That is the most important design decision you can make. Everything else is decoration. I use a system font stack now. Loads instantly and looks clean on every device. The time I saved on font selection went into writing better project descriptions.
Build the navigation for three pages
Resist the urge to have eight sections. You do not need a blog page, an about page, a portfolio page, a services page, a contact page, a testimonials page, and a press page. You need three things: what you do, examples of it, and a way to reach you. Combine the bio and contact into one page if you want. My navigation has exactly two items: “Work” and “About.” That is enough. Anything more makes the visitor choose, and choice slows decisions.
Write project descriptions that answer one question
When I look at someone’s portfolio, I want to know: “What was the outcome?” Not the process, not the tools, not the client’s industry. The outcome. Did conversion go up? Did the team ship faster? Did the user error rate drop? State the result in the first sentence of the project description. Then use the rest of the space to explain why that happened. I learned this from a designer who put a single number at the top of every case study: “+34% trial signups in two months.” That number made me read the whole thing.
Test your site on a slow connection
Most personal sites are fast in a browser on a developer’s laptop. They are painful on a phone with a weak signal. Open Chrome DevTools, throttle to Slow 3G, and reload. If the page takes more than three seconds to show meaningful content, simplify. Remove one large image. Replace the custom font with a system font. Merge two CSS files. Every millisecond you save reduces the chance of someone hitting the back button. I cut my site’s load time from 4.2 seconds to 1.8 seconds by deleting five images I thought were essential. No visitor complained.
- Write the content first, then style it.
- Limit your navigation to three items or fewer.
- Put a measurable result in every project description.
- Use a single font and a max line length of 700px.
- Remove any image that does not directly support a claim.
- Test on a slow connection before you share the link.
- Rewrite your headline until it fits in a tweet.
I followed these rules when I rebuilt my site last year. The version before had twenty-three CSS custom properties, a dark mode toggle, and an animated background. The new version has no custom properties, no toggle, and a white background. Traffic went up because people could actually read the page. That is the only metric that matters. If your personal website is not helping you get the work you want, strip it down until only the essential content remains. Then start adding back only what makes that content clearer, not what makes it fancier.