How I built this site

Background

This site has run on an outdated stack for a decade (!). Vanilla HTML pages, Bootstrap CSS, server-side includes and manual deployments via FTP to GoDaddy. It worked, but was a pain to maintain and irked me that everything was outdated.

Goals

When I finally got around to the rebuild, I had three goals:

First, a site that would get out of the way of the work it was designed to showcase. I'm tired of typical UX patterns - hero images, slideshows, thumbnail grids, animated reveals. The most beautiful design is one that is truly minimal. No unnecessary visuals or animation, just structured markup and readable content.

Secondly, an architecture that is easier to maintain. A modular structure where changes to shared elements (header, footer, typography, image handling) propagate automatically and a current, lightweight CSS framework that would allow me to move fast.

Finally, a deployment process that didn't involve drag-n-drop, FTP or cPanel — something faster and version-controlled.

The New Stack

The site is now built with the Astro Framework, using Tailwind and hosted on Digital Ocean. Deployment is done via the command-line using Git.

The rebuild happened over a single weekend, something that would have taken far longer in the past. Grok allowed me to speed-run the entire process: from choosing Astro as the framework, setting up Tailwind, structuring layouts and components, to solving specific layout challenges. What used to be hours of trial-and-error became minutes of iterative prompting and refinement.

Vibe Coding

This is my first simple vibe coding project. Depending on who you ask, vibe coding has a negative stigma. But after this experience I can say that vibe coding does not replace skill entirely. When suggestions didn't work, I had to inspect the DOM, understand computed styles on the figure and img elements, identify parent constraints and refine the brief. Without experience in web dev I wouldn't have been able to do this and it was far from a genie in the bottle granting instant wishes.

One of the more interesting challenges was handling images that break out of the narrow text column while remaining centered and responsive. Grok's early attempts with negative margins on the figure element wouldn't sit in the centre. Through inspection of the generated HTML and iterative feedback, the solution settled on the w-screen + left-1/2 + -translate-x-1/2 pattern on the image itself, combined with responsive negative margins on the figure.

But adding presentation classes to each image throughout the project would create a maintenance nightmare, so to avoid this, breakout images were refactored into reusable Astro components (ModerateBreakoutImage, FullBreakoutImage, InlineImage). This single source of truth means any future changes to margins, object-fit, or loading behavior update everywhere at once.

So even though Grok provided solutions (and sometimes solutions that didn't work), it also created new problems. Knowing what to inspect, what questions to ask, and how to evaluate the results is still essential. An interesting comment Grok made about the process was that "AI handles the speed and breadth, while human judgement and technical fluency steer the outcome."

This new site is faster to maintain and more enjoyable to work on than anything I've built before. And this is just the beginning - a clean slate with new tech under the hood. In future I'll be adding more of my design thinking and process. But for now I'm more than pleased with the result and look forward to do more vibe coding in future.