Building a Portfolio Site with AI, An Introduction

'Just Build the Stupid Site Already!'

I'd been dragging my feet regarding building myself a portfolio site for quite a while. It's not that I can't build websites, it's that in this case, I'm my own client, and the client can't make up his mind to save his damn life.

First it was gonna be a static site, then something fancier (data visualizations maybe?), then a whole host of platform options were considered, then maybe a web app, or some third party thing to customize, or maybe a return to some wordpress roots but with a headless setup?

Too many options really.

Eventually I started finally taking AI more seriously and decided to dig into it, particularly agentic coding, and that's when it finally clicked and I figured out what I wanted to do. I'd have AI do it for me.

The flow went something like this:

After starting a Udemy course on agentic AI, one of the demos was a prompt to make a website based only on a resume pdf and a simple prompt with minimal art direction. It worked... but if you've spent any time on the internet amongst development tooling offerings and SaaS (Software as a Service) websites, you'll know exactly what this thing looked like
Spent time looking at the site while remembering I had said I wasn't gonna care what it looked like as long as it did it's job
Realize I lied to myself about the previous bullet
Learn about various spec and planning markdown files that can be added to a project to help guide AI
Stare into space, pace around, and generally think about what I wanted
Eventually arrive at a basic concept of an approach

Basic Concept: Build my site while playing the role of creative director, tech team lead, dev ops, and QA while trying to automate most of it. The ideal outcome: never touch design (outside of maybe making a logo?) Never touch the code, and never manually QA (not sure this last bit is possible).

I was messing with a bunch of different AI tools at this time, so I jumped into figma make for a bit and tried to prompt some things... and it did NOT go well. I couldn't legitimately get the tool to improve things past the initial prompt. That said, this felt like a me problem, since I kinda lack the design feedback language needed to adequately creatively direct the tool, and honestly, I wasn't sure how I was gonna use what I was producing here anyways. On the plus side, it did help me start to get an idea of what I was trying to do, so the time didn't feel wasted on this exercise.

I said I wasn't gonna touch the design myself, but the concept isn't legally binding, so I did go a bit analog, and grabbed a pencil and paper, and did a lo-fi wireframe to feel out what I wanted, then I put together a quick figma mood board, then I roughly sketched a couple logo roughs alongside that wireframe. This step was crucial for me to be able to articulate what I was trying to do.

At this point, I'd decided the design direction was to combine brutalist web design with an old school bowling alley aesthetic. To help with this, I decided to figure out the typography. I chose the fonts by googling what fonts the movie 'The Big Lebowski' used in it's credits, then I browsed google fonts to see how close I could get wtih something I didn't need to license that would work on the web. I quickly found something that would work to replace Mesquite, but I was struggling with what to use to replace Magneto, so I asked AI. The first couple choices weren't helpful, but the third one was Orbitron, which I felt did a good job mimicking the stretched nature and the rhythm of magneto while also kinda having a bit of a brutalist vibe that I wanted.

The next part of my plan was to try and spec out the project. For this I decided to use Claude, and I used the desktop app in cowork mode, I pointed it towards an empty 'portfolio' folder and then I said:

This will be a portfolio site and blog for a frontend engineer, and will need to be defined via a spec.md file. The general goal is a multi-page site, built via react/next js, with a contentful headless integration. The site will feature a homepage with multiple overview sections, a section of the site for projects, and a blog section. For the step, please begin a spec.md file.

Honestly, this ended up working better than expected. Claude asked questions off the bat that I would have expected any dev to ask and put together a spec. It then asked more questions and I provided some feedback to evolve the spec for a bit. Mostly minor stuff, then I added basics on creative direction, fonts chosen, and Claude helped me pick a body font that would fit my aesthetic. The only really meaningful change at this point was I had Claude switch out the details about content, because the spec called for rich text content, which normally is fine, but I did not want rich text and html tags cluttering up my content, so I requested markdown instead as the format. Claude pointed out this might cause a probably with inline images that might be an issue, and provided a suggested solution. Eventually, we got spec.md up to v.1 and I was pretty happy with it.

Hopefully at some point I'll have a project post to link to where I can dive into more details on various decisions, pain points, and more technical details about the build, but until then I think I'll just get back to allowing feature scope creep to run wild while I put off writing most of the content I need to write.

I didn't want AI doing that part.