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 hillarious 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 — 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 — 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