The site you’re on right now
hansmartens.dev is my own website: the place where I show my work, write the blog, present my Astro Rocket theme, and let people reach me. It’s the one project where I’m both the client and the developer — so every decision on it is mine, and every detail is one I chose to live with.
It’s also where more than a personal site came from. Two of the things I’m proudest of — the Astro Rocket theme and a client portal — both started life right here. But the website came first.
Starting from a solid foundation
I didn’t start from a blank page. The site began as a fork of Velocity by Southwell Media — a well-built Astro boilerplate with a proper design system and component library underneath it. That gave me a dependable starting point to build against, and full credit to them for that groundwork.
From there, the site became mine. I built out a complete developer website — a homepage, a projects page, a blog, and a contact page — and later added a dedicated page for the Astro Rocket theme. Everything below is what I designed and shaped on top of that foundation.
The decisions that make it mine
A handful of choices on this site say the most about how I like to work:
- Twelve colour themes, blue by default. I picked blue as the site’s signature colour, then built eleven more themes around it — twelve in total. The whole palette can switch on the fly, so the site isn’t locked to one look.
- A logo that’s mine. An “H” monogram — my first initial — on a brand-blue background. The same mark does double duty as the site’s favicon, so the brand is consistent from the browser tab inward.
- A brand-blue-to-black homepage. The hero opens on a single gradient washing from brand blue down to black — one confident brand statement instead of a busy collage.
- A blog image system I designed. Instead of hunting for a stock photo for every post, I built an SVG cover system: each post gets a generated image in the brand colour, with an icon and the topic’s name, drawn with the same design tokens as the site’s components and backgrounds. Every post looks like it belongs to the same site — and every cover recolours automatically when the theme changes.
- A contact page built to be used. I designed the contact page around a working contact form and a row of contact cards — one for each of my profiles — so getting in touch is never a dead end.
- A stack marquee, two ways. I added a marquee of tech-stack cards and used it in two places: a single scrolling row in the homepage hero, and a fuller, double-row version on the about page.
- A project system that mirrors the blog. I designed the blog and its posts first, then built a projects system on the same model — so a project page works exactly like a blog post, right down to this page you’re reading now.
- A table of contents where it earns its place. Longer blog posts and the single project page get an auto-generated table of contents, so readers can jump straight to what they need.
- A CTA that catches the eye. I built the call-to-action section myself, using a LetterGlitch effect — a little bit of motion to end a page on, without slowing it down.
- Privacy-friendly analytics. I added Umami — cookieless, lightweight web analytics — so I can see what’s working without tracking anyone or needing a cookie banner.
The client portal — a side project of its own
While building the site I also built something bigger than a single component: a client portal wired up to Moneybird, the accounting platform. I built it inside my own website so I could test it against a real integration and get it genuinely working — a private area with a dashboard where a client follows their own projects, updates, and live invoices. It grew into a side project in its own right — you can read about the Client Portal here.
How Astro Rocket was born here
Somewhere along the way I realised the site I was building might be useful to other Astro developers, not just me. So I cloned it, swapped my content for demo content, and turned it into a theme — and that became Astro Rocket. My own site wasn’t even finished at that point; from then on the two grew side by side, and improvements still flow both ways.
Both share Velocity as their original base, but both have travelled a long way from it — and from each other. Astro Rocket is a full theme in its own right now, with a deep feature set. Its internationalisation in particular grew into a genuinely solid multi-language system in the theme — shaped over time by the people using it and the issues they raised. There’s a full project page for Astro Rocket if you want the detail.
Three results, one stretch of work
I’m proud of what came out of this in a short space of time: my own website, the Astro Rocket theme, and the client portal — three finished things, all with the same site at their root. This one, the site you’re reading on, is where it all started — and the one I’m happiest to put my name on.
First came this website. Then it became a theme — and a portal along the way.