Skip to content
All notes

· 5 min read

Why I rebuilt my portfolio on Astro (and what WordPress taught me first)

The old site ran on WordPress and a page builder. The new one is static, hand-built, and about ten times faster. Here's what changed and why.

AstroWebProcess

For years my portfolio lived on WordPress with a premium theme and a page builder. It worked. It also loaded a few megabytes of JavaScript to show four paragraphs and a grid of thumbnails, and every design change meant fighting a builder that had opinions.

This site is the replacement. It’s built with Astro, Tailwind, and GSAP, and deploys to Cloudflare as static files. The whole thing is a folder of Markdown case studies and a handful of components I wrote myself.

What WordPress got right

I don’t want to trash WordPress. I build WordPress sites for clients on purpose, and the reason is simple: a marketing team can run one without calling me. The Karisuma Group site I built is still updated by their team years later. That’s the point of a CMS.

The old portfolio also had the right content shape. Every project had a title, a subtitle, a challenge, an approach, highlights, and an outcome. I kept that structure. I just moved it into frontmatter and Markdown.

What changed

Content is files now. Each case study is an .mdx file with a small frontmatter block: client, role, tools, cover image, gallery, and an optional YouTube ID. Astro’s content collections validate every field at build time, so a typo in a category name fails the build instead of silently breaking a filter.

Images are handled at build. I drop full-resolution files into the repo and Astro’s image pipeline generates responsive WebP and AVIF sizes. The largest original poster was 10 MB. Nobody downloads that anymore.

Motion is intentional. The nav shrinks into a floating glass pill when you scroll. Headlines reveal word by word. Cards tilt a few degrees toward the cursor. All of it respects prefers-reduced-motion, and all of it is torn down and rebuilt on every page transition so nothing leaks.

The form is serverless. Contact goes through a Cloudflare Function, gets checked by Turnstile, and lands in my inbox via Resend. No plugin, no SMTP settings, no spam.

What I’d tell another designer

If your site is a portfolio and not a publication, you don’t need a database. You need a folder of Markdown and a build step. The skills transfer: the same eye for hierarchy that makes a billboard readable at 60 mph makes a case study readable on a phone.

And if you’re a designer who’s been avoiding code, Astro is a good place to start. Components look like HTML. Styling is Tailwind or plain CSS. There’s very little magic, and the parts that are magic are documented.

The source for this site is private for now, but if you’re curious about any piece of it, ask me.

Keep reading