Portfolio

Building this website by talking

How this website was built using casual conversation with AI.

  • 10commits in the code review
  • ~4 hrsreview, start to finish
  • 38 to 74 hrssame fixes without AI

Why I did it

I was trying freelancing for the first time, and I wanted a place of my own on the internet to keep everything and meet potential clients.

The "easy website builders" weren't very appealing, and I'm always looking for fun projects to build things with AI, so this website was the perfect excuse.

The tools

The first draft was built almost entirely with Gemini, working inside VS Code with a live HTML preview. Claude built a few specific things, like the hidden Flappy Bird game (click the Case Studies headline in the case studies screen!). Lately DeepSeek has been used for just about everything.

For this type of project the LLM doesn't seem to matter so much, HTML is something they perform really well with..

The method

The original idea came from loose conversations while walking the dog or exercising: asking what's possible, what are the constraints, how do websites actually work? From that conversation, I asked for a detailed prompt we could hand over to a new agent to generate the HTML. In VS Code it is easy to preview HTML live, describe what doesn't look or feel right, then iteratively work back and forth until you're happy.

The style eventually gets locked in for the home page, then that becomes the style guide for any new pages that get created.

It was shocking to me how easy it was to produce something real.. I am still not over the days of GeoCities, customisable Neopets pages or MySpace, so it was quite thrilling to start carving out my own domain again..

The fun bits

I have always admired people who can code, or create things on the computer, so it is still incredible to me that AI lets me take an abstract idea and make it real. So we took some of those ideas and scattered them as easter eggs around the website, like a headline that glitches apart when you click it, and a secret terminal page with a mini puzzle and secret commands.

I hid them because I didn't want to distract from the point of the website, and it was amusing to me that if anyone did ever find them, they'd be appreciated more than if they're just laid out on the home page.

Little flourishes like the contact form that types like a terminal, you just get an idea and tell the AI what you're after, describing how it should feel, then after a few rounds of testing it's there.

The cost

The first draft, which included the home page and contact form, took about four to six hours and cost nothing. Simply by using free credits and waiting for tokens to refresh.

It took more days than necessary, but I am a bit of a cheapskate, you could do it for well under $5 with DeepSeek, or around $20 with Claude Sonnet.

The hard part

Surprisingly, building things was incredibly easy. The harder parts are coming up with original ideas (asking an AI for fun/original ideas to stand out and you'll get things everyone has spoken about online already). Harder than that is getting people to actually visit the website.

The best thing is learning, there are so many challenges, errors and concepts to explore when throwing yourself at a project like this. There are so many things that are obvious to so many people, but when I started out I was manually dragging and dropping the folder into Cloudflare every time I wanted to update the website. Then I kept hearing about GitHub, asked AI about it, and the auto deploy pipeline became the natural next step. That's the real benefit of working this way: you keep encountering things you'd never normally come across. You might not learn to code exactly, but you become a reasonable generalist with a broad, useful knowledge.

Bringing in a second opinion

Once the site was live and doing its job, I wanted more than "does this look right". I wanted someone to go through it the way a senior engineer would on their first day at a new company: read everything, question the choices, and tell me what's actually wrong rather than what's merely ugly.

So I handed Claude the whole codebase with one instruction: be critical, and don't spare my feelings. What came back wasn't a design opinion, it was a list of real problems, several I would never have found just by clicking around, because the whole point of them is that they're invisible until something breaks.

What it actually found

A few of the more interesting ones:

  • A bug where pressing the spacebar anywhere on the case studies page silently broke scrolling for every visitor, left over from the hidden Flappy Bird game. You don't find that by looking at the page, only by actually simulating a keypress and checking what the browser does with it.
  • The mobile nav was broken on a huge chunk of phones. The menu was clipped and the logo sat off the edge of the screen entirely. Nobody had reported it, because nobody reports "your website looks a bit off", they just leave.
  • Two of the heaviest pages were shipping several megabytes of images that could be cut by more than 80% without changing a single visible pixel, proven with an automated pixel by pixel comparison rather than just eyeballed.
  • A caching bug on Cloudflare that was silently ignoring a fix that had already been shipped. It took directly querying the live server to prove the setting wasn't doing what it claimed, then fixing it a completely different way.
  • An animation loop in the Flappy Bird game that kept redrawing the screen forever in the background, even after you'd stopped playing and scrolled away to read something else.
  • Text contrast that failed recognised accessibility guidelines in several places. Fixed, then locked in place so it can't quietly slip back in a future edit.
  • A whole automated test suite that now runs on every single change I push to the site: broken links, accessibility rules, a performance budget per page, and a visual comparison that catches anything that changed by accident.

Some of it was genuinely humbling. I'd shipped a site with a scrolling bug, a caching bug and a broken mobile menu and had no idea, because none of it looks broken. It just quietly is.

How long would that have taken me?

Take the numbers with a pinch of salt, but here's roughly what a competent developer would need to find and fix the same list, working alone.

WorkEstimated hours
Finding the spacebar bug, which means deliberately testing keyboard behaviour on every page rather than just clicking around2 to 4
Working out why the Cloudflare cache fix wasn't actually applying, including the false confidence of thinking it already was3 to 6
Rebuilding the mobile menu properly, with focus handling and keyboard support3 to 6
Optimising every image on the site and proving nothing visually changed3 to 6
A full accessibility pass against a recognised standard: keyboard focus, screen reader labels, colour contrast, reduced motion6 to 12
Building an automated test suite from nothing and wiring it into GitHub so it runs on every push16 to 30
Security headers, self hosted fonts, dead code cleanup, and the smaller fixes along the way5 to 10
Total38 to 74 hours

Call it one to two working weeks for someone doing nothing else, or the best part of a month around a regular job.

What it took with Claude: ten commits, in one sitting, about four hours start to finish. My own time in that was reading what it found, asking questions, and deciding what to do about the two or three things worth a judgement call rather than a straight fix.

The honest caveat: some of that time didn't disappear, it moved. I still had to understand every change well enough to explain it here. What I didn't have to do was find the caching bug myself, or know what a pixel by pixel visual regression test even is.

The lesson

If you have an idea for a website, or even a small thing that would sit on a web page, just go for it! You can start for practically free: download VS Code, plug in whatever AI you like, get our robot friend a few HTML files, and preview them locally. No domain or hosting, just pure experimentation.

Build little things, build an old app or game that's useful to you but with your own spin on it. Be as weird as you like: an ARG, a choose your own adventure, whatever. It feels more and more like the old school, hand crafted internet, and it's a wonderful way to get comfortable with what AI is capable of producing.

If you've been wondering whether this is possible and want to get started, please take this as a sign to take the first steps.

If you want to build something of your own or have any ideas you want to share, I'd love to hear about it! [email protected].