Building My Portfolio From Scratch: A Step-by-Step Walkthrough

I put off building my own portfolio for almost a year because "portfolio" made it sound like a big design project, and I didn't have the energy for another big design project. What actually got it shipped was breaking it into six small steps I could each finish in under an hour. If you're stuck the same way — more overwhelmed by the idea of it than by any individual piece — this is the walkthrough I wish I'd had.

Step 1: Pick the Projects Before Touching Any Design

This is the step people skip, and it's the one that matters most. Open a blank note and list every project you could include. Then cut it down to three to six. I originally had eleven and kept the page unfinished for months because I was trying to design a layout flexible enough to hold all of them — the moment I cut to five, the layout basically designed itself. Fewer entries also meant every project needed to earn its place, which forced a level of honesty about which ones were actually strong rather than just familiar.

Step 2: Write One Sentence Per Project First

Before any HTML, I wrote a single sentence for each project: what it was, what I did, what happened. Not polished copy — just enough to prove I understood my own work well enough to explain it. If I couldn't write that sentence quickly, it usually meant the project wasn't strong enough to include, which saved me from designing a case study I'd have had to abandon later.

This step also caught something I didn't expect: two of my "strong" projects turned out to have almost the same one-sentence summary once I wrote them down side by side. Both were "redesigned a dashboard to reduce clicks for a common task." Keeping both would have made the portfolio feel repetitive without me noticing until a visitor pointed it out. I dropped the weaker of the two and swapped in something that actually demonstrated a different skill — which the grid alone never would have revealed.

Step 3: Build the Project Grid

A simple CSS grid handles this without a framework. Auto-fill with a minimum column width means it reflows from a single column on mobile to three or four on desktop with zero media queries:

<div class="work-grid">
  <a href="/work/project-one" class="work-card">
    <img src="/img/project-one.jpg" alt="Project One" loading="lazy">
    <h3>Project One</h3>
    <p>Short one-line description</p>
  </a>
  <!-- repeat for each project -->
</div>

<style>
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .2s ease;
}
.work-card:hover { transform: translateY(-4px); }
.work-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
</style>

loading="lazy" matters more here than it looks — a five-project grid with full-resolution images can easily add two seconds to first load if every image fetches eagerly.

Step 4: Add the About Section Last, Not First

I originally tried writing my "about" section before anything else, on the theory that it should set the tone for the rest of the page. It didn't work — I ended up writing generic career-summary copy because I had nothing concrete to react to yet. Writing it after the project grid was done meant I could reference the actual work ("the process behind these came from three years doing X") instead of describing myself in the abstract.

Step 5: Choose Where It Lives

I hosted mine on Cloudflare Pages, mainly because deployment is a single git push and the free tier includes a custom domain with no bandwidth cap that would ever realistically matter for a portfolio. GitHub Pages and Netlify are both fine alternatives if you're already in that ecosystem — the differences between them matter far less than actually shipping.

One thing I didn't anticipate: connecting a custom domain took longer than the rest of the deploy combined, purely because DNS propagation isn't instant. I registered the domain, pointed the nameservers, and then waited close to an hour before it actually resolved — which felt like a long stretch when everything else in this process had taken minutes. If your timeline is tight (showing someone the site same-day, for instance), buy and connect the domain a day ahead rather than at the last minute, and use the free subdomain in the meantime so you're never blocked on DNS.

Step 6: Publish It Before It's Perfect

The version I launched had four projects, no dark mode toggle, and a contact form that just mailto-linked instead of actually submitting anywhere. I've iterated on all three since. None of that stopped it from doing its job — a client found it within the first month. Waiting for "done" is usually just waiting, dressed up as a standard.

What I'd Do Differently Starting Over

Looking back, the biggest time sink wasn't any of the six steps — it was the two months before step one, spent thinking about the portfolio instead of listing the projects. If I were starting again, I'd set a hard timer for step one: fifteen minutes to write the list, no editing allowed, just get every candidate project down before judging any of them. Judging while listing is what stretched the "which projects" decision into weeks instead of the twenty minutes it actually deserved.

I'd also take my own photos of finished work earlier. Two of my projects didn't have good visuals because I hadn't planned to need them, and quickly-taken screenshots months later never looked as sharp as they would have right after launch. If you're mid-project right now and thinking about a future portfolio at all, grab clean screenshots the week you ship — future you will not have access to the original files, the right browser zoom level, or the motivation to recreate them.