Skip to content
H Hans Martens
All posts

Blog

Articles on Astro, web performance, design systems, and building with Astro Rocket.

Featured

Why I Build Every Website with Astro

Why Astro is the only web framework I reach for. What it is, how it works, and why it quietly changed how I think about building fast, calm, well-made websites.

H Hans Martens
2 min read
astro web-development framework performance wordpress

Hi, I'm Hans Martens — Web Designer & Developer in Veghel

Hans Martens — web designer & developer in Veghel. Sixteen years from Windows 3.1 to building Astro sites with Claude. The longer story.

H Hans Martens
2 min read
about introduction web-designer web-developer veghel astro

All posts

Add a LetterGlitch Effect to Your Astro 6 Site

A step-by-step guide to dropping a brand-tinted LetterGlitch canvas effect into an Astro 6 project — with the full component, an Astro wrapper, and the small details that make it production-ready.

H Hans Martens
2 min read
astro react canvas tailwind tutorial

What the Lighthouse Score Actually Means — and Why hansmartens.dev Hits 100

A plain-language guide to the Google Lighthouse report: what the four scores measure, how to run one yourself, and what 100/100/100/100 says about hansmartens.dev and astrorocket.dev.

H Hans Martens
2 min read
lighthouse performance accessibility seo web-vitals

Getting Started with Astro Rocket — From Install to Live in Minutes

How to install, configure, and deploy Astro Rocket — covering site.config.ts, brand colours, navigation, writing posts, and deploying to Vercel.

H Hans Martens
1 min read
astro-rocket getting-started configuration vercel

Astro Rocket Configuration — Every Toggle, Theme, and Layout Option Explained

A complete walkthrough of Astro Rocket's configuration options: 12 colour themes, OKLCH colours, typography, radius and shadow tokens, header styles, dark mode, and more.

H Hans Martens
2 min read
astro-rocket configuration customization themes

Animations in Astro Rocket — How the Premium Motion Design Works

A deep dive into every animation layer in Astro Rocket: the spring-curve hero entrance, staggered cascades, scroll-reveal, and how it all stays smooth without a JS animation library.

H Hans Martens
2 min read
astro-rocket animation css ux performance

57 Components Ready to Use — Astro Rocket's Full UI Library

Astro Rocket ships with 57 production-ready components from the Velocity library — buttons, cards, dialogs, forms, data display, and full page-structure components. All accessible, all themed.

H Hans Martens
2 min read
astro-rocket components ui velocity

Hero Scroll Indicator — Desktop-Only, Hides on Scroll

Astro Rocket's hero has an animated scroll indicator: two bouncing chevrons that fade in after the hero animation and disappear the moment you start scrolling. Here's how every part of it works.

H Hans Martens
2 min read
astro-rocket features ux animation

Scroll Progress Ring — A Circular Indicator on the Back-to-Top Button

Astro Rocket's back-to-top button now has a circular SVG progress ring that fills as you scroll. It's brand-coloured, theme-aware, and runs entirely in CSS and a small inline script.

H Hans Martens
2 min read
astro-rocket features ux animation

Contact Form Setup: Resend, Vercel, and GoDaddy Step by Step

Astro Rocket's contact form is wired up but needs three things to actually deliver email: a Resend account, a verified domain, and one environment variable on Vercel.

H Hans Martens
2 min read
astro-rocket tutorial email vercel deployment

Scroll Progress Bar — Reading Progress at a Glance

Astro Rocket now has a scroll progress bar: a thin brand-coloured line that fills as you scroll. Here's how it works, where it lives, and how to enable it on any page.

H Hans Martens
2 min read
astro-rocket features header ux

SEO in Astro Rocket: What's Built In and How to Configure It

Astro Rocket handles structured data, Open Graph, canonical URLs, sitemaps, and more out of the box. Here's exactly what ships and where to configure it.

H Hans Martens
2 min read
astro-rocket seo structured-data tutorial configuration

How Astro Rocket's Design System Works — Tokens, Colors, and Dark Mode

Astro Rocket uses a three-tier token architecture with OKLCH colors. Change one value and the entire site updates. Here's how it works and how to make it yours.

H Hans Martens
2 min read
astro-rocket design-system tailwind customization tutorial

The Hero Typing Effect in Astro Rocket — How It Works and How to Tune It

Astro Rocket's hero headline cycles through words with a typing animation. Learn how it works, how to tune every speed and pause, and how to disable it entirely.

H Hans Martens
2 min read
astro-rocket components customization tutorial javascript

Follow along

Stay in the loop — new articles, thoughts, and updates.

RSS Feed GitHub X / Twitter Instagram Bluesky Email