Why a blog now?
Give a product designer some AI tools that enable them to build anything and I bet you wouldn’t expect one of the first things they’d build to be a blog within their portfolio website. But for me, it was one of the most obvious things to build first. It requires a tech stack, backend CMS, front-end layout, all bespoke, unique to my needs, to what I want to write. These are all things that were just out of reach to me until very recently.
More importantly, I had to learn some things along the way to make this happen.
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. I have things I want to say, ideas in my head, and a perspective on everything going on around me right now.
I’ve built something I needed from nothing. Something that before, I could only design.
And I’m hopeful you’ll find it interesting to read.
Constraints:
- I’ll never use AI to write the text in any of my articles
- AI may only be used to evaluate what I’ve written and to help with things I haven’t thought of
- Weekly articles cadence
- Monthly Now page cadence
Components
I’ve left all the journal components in this article below for you to browse, and also for me to add to. These will act as a living component library for future articles. I found it hilarious how Claude chose to Rick’roll me, also give the audio player a try, it’s nay bother.
Closing remarks
It’s not as neat and tidy as I want it yet, but that’s the process. Some things are best polished later.
A fourth-level heading
<h4> is for the rare case I want a tighter sub-sub-section.
Inline links and tags
Inline text links use the brand blue and an underline, for example a link to the home page. Tags appear inline like /astro, /vercel and /tailwind, the same shape as the ones on the Now page.
A change note in the body
I sometimes want to drop a dated note into the middle of a piece, the same chip we use in the Now-page change log.
Wired up the new journal section with Keystatic, MDX and Giscus comments.
A code block
export function formatDate(d: Date | string): string {
return new Intl.DateTimeFormat('en-GB', {
day: 'numeric',
month: 'long',
year: 'numeric',
}).format(typeof d === 'string' ? new Date(d) : d);
}A YouTube video
An audio player
For podcast clips or voice notes, with the native player styled to match the body.
A captioned image
Bullet points
- Reuses the page shell from the Now page
- Stays on the existing design tokens, no new fonts, no new colours
- Pulls comments in via Giscus once GitHub Discussions is wired up
- Falls back to a basic share sheet on mobile via
navigator.share
External sources
That’s the lot. Every body element rendered against the live tokens. Future posts won’t need all of these, but it’s handy to see them together while we’re building.
Comments