Welcome to the journal
For me, it's not just a blog. It's turning my portfolio into a living, breathing documentation of my experience as a product designer in the modern world.
Step insideA monthly snapshot of where my attention is, where I'm heading, and what I'm learning.
I've just spent the last two weeks getting to grips with how AI has completely reshaped my product design workflow. Being in a good contract, sheltered from it all for the last few years, I was shocked at how much had changed when I emerged at the end of last year. So after making some huge updates to my waterproof notebook business, Thrunotes, I decided to dive right in and create this new portfolio site.
The brief
Use a redesign of my portfolio website as an opportunity to learn and understand how modern AI tools sit within my product design workflow.
The process
Deep desk research using Claude helped me understand how I need to position myself in the marketplace with the skills that I have, vs the things I need to learn. AI is great for bringing before out of reach capabilities into my hands, but it's absolutely shite at designing things and writing copy on its own. It gave me a starting point and a scaffold, it gave me strong signals and insights in a matter of hours, not days or weeks. A powerful tool, but the craft and critical thinking have to be utilised or you're just creating more AI slop for people to rot their brains with.
After the desk research I asked Claude to build me a portfolio site just from the synthesis in my Notion alone. The output was brown, serif-y, poorly written, AI slop. But. It was a starting point and I could see where I needed to go.
I started building it static, y'know, one root folder with a bunch of HTML pages, a stylesheet and a .js file. Before I knew it, I hit the ceiling for that structure and the CSS file got to over 15,000 lines, and the JS, well... Let's not go there. So I then got into Plan Mode in Claude and together we defined a workflow and tech stack to get this up and running with tokens and components. My mind was blown at this point.
I didn't touch a single Figma frame, or utilise any prebuilt systems or components for this project, I simply vibed the whole thing to see what it could do. Had I started with designs, wireframes, schematics, libraries and prebuilt React components I reckon I could have built it in 3 or 4 days (only the Claude part) instead of 2 weeks.
The outcome
I wanted to touch upon the critical thinking, how a human powered by an AI workflow could 100x their output, and how important it is now more than ever to create things with a human finish, not just leave it at "one prompt and I'm done..." which is why I chose the hero interaction on the home page. Hover over and check what parts are human and what aren't!
I wanted this site to be accessible and demonstrate all of my skills under one roof, and I feel it does that quite well.
I've used JS animations for all of the critical UI thumbnails, because in an age where now we can build anything, why on earth would I go with just a static image of my designs anymore? There really is no excuse for not taking things that step further, and I'm a fussy bastard, and get a bit obsessed with new toys.
Yes, this website has been built with AI, but it's all come out of my head, the logo is my real signature, I used pencil and paper to draw sketches to show Claude what I wanted. This post on this page and all the copy has been written by me, Claude just gave me the skeleton and made a few suggestions on the structure.
The photo of me is real, the x-ray is not, but that doesn't matter, the idea got executed quickly and to a high standard that fits the context well, AI was just the paintbrush, supercharging me with new capabilities that would have cost me weeks of learning, or thousands to pay a developer to do. Imagine if I had to go and get a real x-ray done to get that shot, or pay a 3D artist to create one that fit my photo?
If I had landed on the brown mess mentioned above, that would have been a cop-out, not true human creative problem solving.
Noticed a bug on this site? Report it
Claude Code:
Other new capabilities:
Other tools I've picked up:
I'll be continuing to add the rest of the case studies to this portfolio, building my blog and also looking into further capabilities with my tech stack /astro, /vercel, /tailwind, /react, /mdx, /playwright. I want this portfolio to be a living, breathing extension to my professional world. I've got a lot to offer, and I love making content, so stay tuned for my YouTube channel, posts and further enhancements to this site.
Next deliverable is the Marlowe case study.
New engagements on an embedded or ad-hoc basis.
One of the largest token distributions in blockchain history
Comments