before and after WordPress website redesign Lou Kozlevcar
Website Design for Professional Services

Before & After: Rebuilding My Own Website (Yes, Really)

When you sell web design, your own site is your most scrutinised portfolio piece. Mine was functional, fast, and fine — but “fine” isn’t what I sell.

This is the story of why I rebuilt it, what I changed, and what those decisions mean for the clients I work with.

The Starting Point

My previous site ran on JointsWP, a WordPress starter theme built on Foundation CSS. It did the job when I set it up, but over time the cracks showed. Foundation CSS leans on JavaScript to power its UI components — dropdowns, toggles, responsive behaviours — things that modern CSS can now handle natively, with less overhead and fewer dependencies.

More importantly, my workflow had drifted into habits that suited me but didn’t showcase my full skill set. I was using the Classic WordPress Editor, leaning heavily on Advanced Custom Fields (ACF) to construct row-and-column layouts, and hardcoding content to get pages looking exactly right. None of that is wrong — it’s a perfectly valid approach for a skilled developer who knows what they’re doing. But it wasn’t a great demonstration of working with the modern WordPress ecosystem.

What I Built Instead

The new site is built on a custom starter theme using Bulma CSS, with PHP template files I developed with the help of Perplexity Computer for the heavy lifting. The theme is designed from the ground up to work with Gutenberg, not around it.

custom WordPress redesign home page - before and after
Before and after of the home page. I thought the pink CTA button was too intense, so I changed it to the green of my brand palette.

Familiar code is a comfortable trap. This rebuild was about proving I don’t need to rely on it.

Gutenberg’s block editor is now mature enough to handle the layout work that ACF was doing before — columns, spacing, content structure. So ACF still has a role, but a leaner, more appropriate one: managing structured data, not constructing page scaffolding.

Replacing Foundation’s JavaScript-driven components with modern CSS equivalents also means less that can break, fewer render-blocking scripts, and a cleaner codebase for anyone who might work on the site in future.

custom WordPress redesign links page - light and dark preferences - mobile phone
This is how my website might look on your phone, depending on whether you have light or dark in your own device’s preferences. My website will respect your preference. 😊

The theme also includes automatic dark mode, switching based on the user’s device preference with no manual toggle required. It sounds like a small detail, but it’s surprisingly difficult to implement cleanly in theme builders like Divi, or closed ecosystems like Squarespace — where you’re working within someone else’s constraints. Building from a custom theme means this kind of feature is just CSS, done right, rather than a workaround.

A Look That Matches the Work

Some of the most noticeable changes are visual, and they were only possible because of what changed under the hood. The old design had a button colour that was too much, typography that felt slightly off-balance, and a reliance on clip-art to fill whitespace — a symptom of working with fixed-width layouts that didn’t give me much flexibility.

The new design fixes all of that. Gentler button colour, more considered typography, and the ability to mix narrow and wide content sections fluidly. On a quick glance, it just looks more modern — and that’s not accidental.

This is the kind of control I bring to client projects too. When your site is built on a flexible, custom foundation, visual decisions stop being workarounds and start being choices. You’re not stuck with a colour because the theme won’t cooperate, or padding out pages with stock imagery because the layout won’t stretch. The design serves the content — not the other way around.

Why This Matters Beyond My Own Site

The decisions I made here are the same decisions I make for clients:

  • Use the platform’s native capabilities before reaching for a plugin or workaround
  • Reduce JavaScript dependencies where CSS can do the same job more reliably
  • Build for maintainability, not just for the immediate outcome
  • Match the toolset to the skill level of whoever comes next — whether that’s a client editing their own content or another developer picking up the project

My old site worked. My new site demonstrates how I work. That’s the difference.

Interested in a Refresh Like This?

If your website is functional but no longer reflects what you’re capable of — or what your business has become — I’d love to hear about it.

Send me an email, or record a quick voice message via VideoAsk telling me about your situation and the outcome you’re looking for. No lengthy briefs required, just a conversation.