🚀 Astro Rocket — Astro 6 starter theme designed by Hans Martens Dev
Astro Rocket ships as a complete, styled website — Every page is already designed, every feature is already wired together. It is built for designers, freelancers, and developers who want a portfolio or marketing site that genuinely impresses from the moment it launches.
Built on Astro 6 and Tailwind CSS v4, it covers everything a serious site needs: a full design system, 57+ components, 12 live-switchable colour themes, dark mode, a blog with content collections, a projects showcase, full SEO, and a suite of polished interactions that make the site feel alive from day one.
⚡Perfect Lighthouse score
Astro Rocket scores perfect on every Lighthouse category — Performance, Accessibility, Best Practices, and SEO — on the live demo at astrorocket.dev on mobile and on desktop. That is not a stripped benchmark page; it is the full site with animations, a theme switcher, typed headlines, and a contact form. The scores are a side-effect of how the site is built: static-first output, Astro's built-in image pipeline, WCAG-compliant components by default, and a complete SEO layer. Nothing is sacrificed to hit the number — the number reflects how the site is built.
🏗️ Zero JavaScript by Default
Astro's island architecture means every page ships pure HTML unless a component explicitly needs JavaScript. The theme switcher, contact form, typing effect, and scroll indicators hydrate themselves as islands. Everything else — every page, every section, every card — stays static and fast.
🎨 12 Colour Themes — Live in the Header
Twelve colour themes ship directly in the header — Orange, Amber, Lime, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, and Magenta. Click any swatch and every button, badge, logo, and accent on the page updates in a single frame. No file edits, no rebuilds, no deploys. The whole system runs on CSS custom properties scoped to a data-theme attribute on the html element — zero JavaScript required. Once you've settled on a colour, remove the selector from the header with a single prop.
🧩 57+ Components Across Six Categories
The component library is the core of the project. Every component is built for Astro, typed with TypeScript, styled with Tailwind CSS v4, and aware of both dark mode and the active colour theme. The library spans UI components — Badge, Button, Card, Alert, Toast, Tooltip, Dialog, Dropdown, Tabs, Accordion, Progress, and more — alongside composed patterns like a contact form, newsletter form, and stat cards. On top of that sit layout components, blog-specific components, landing page sections, and a complete SEO layer. All components use class-variance-authority for type-safe variant management and are importable via barrel exports from @/components/ui.
🔍 SEO — The Complete Stack
Most starters ship three meta tags and call it SEO. Astro Rocket ships the full implementation. JSON-LD structured data covers WebSite, Organization, and Person schemas on the homepage and BlogPosting on every post — prerequisites for rich results in Google Search. Open Graph and Twitter Card metadata is wired in on every page, with post cover images included automatically. Canonical URLs are constructed from the production domain, correct across staging and preview environments. An auto-generated sitemap covers every page at build time. Per-page robots control is a single prop. Google and Bing Search Console verification codes are set via .env — no template edits needed.
✨ Polished Interactions, Zero Compromise
Every animation in Astro Rocket uses a spring curve — cubic-bezier(0.22, 1.6, 0.36, 1) — a curve that produces a controlled overshoot so elements arrive rather than stop. On page load, the hero content cascades in element by element, badge first, then title, description, and buttons, each 90ms behind the last, while the header drops in from above on its own spring curve.
As you scroll, a 2px brand-coloured progress bar tracks your reading position at the header edge. A progress ring traces clockwise around the back-to-top button. Two stacked chevrons bounce gently at the bottom of the hero and vanish the moment you start scrolling. A typing effect cycles through configurable phrases with a layout-stable width — the width is locked before the animation starts using a hidden off-screen measurer, so the layout never shifts. Scroll reveal covers three modes: single elements, cascading grids with per-item stagger, and per-block long-form pages. All animations respect prefers-reduced-motion automatically.
🌑 Dark Mode — Done Right
Dark mode follows the visitor's operating system preference by default and remembers any explicit override in localStorage. The toggle is rendered as a labelled dropdown menu — System, Light, and Dark each shown side by side with a checkmark on the active one, plus a "Currently dark" / "Currently light" sub-line under System so visitors know what it resolves to on their device. A chevron next to the icon signals "click to open" so the trigger reads as a discoverable control, not a mystery icon. A reader can match the site to their environment without being locked into a default that fights bright sunlight on mobile or a dim room at night.
📝 Built-in Blog with Content Collections
The blog uses Astro's Content Layer API with type-safe schemas validated by Zod. Create a .mdx file in src/content/blog/en/, fill in the frontmatter, and the post appears in the blog index immediately — no rebuilds, no cache clearing. The blog supports authors, tags, related posts, reading time, share buttons, and RSS. An auto-generated sitemap covers every post at build time.
📑 Table of Contents — Reading Anchors for Long Posts
Long-form posts ship with an optional table of contents, auto-generated from MDX headings. Three layouts let you choose what fits your audience: an inline card at the top of the article, a sticky sidebar to the right on desktop, or auto — sidebar on xl+ viewports and inline card on phone and tablet. The article column stays at max-w-4xl in every layout, so reading width never changes when the sidebar appears or disappears. An IntersectionObserver scroll-spy highlights the active section as the reader moves through the post. Off by default; enable with one config flag in site.config.ts. Per-post toc: false in frontmatter hides the TOC on a single post.
💬 Comments on Blog Posts via Giscus
Optional comments at the bottom of every blog post, powered by Giscus and GitHub Discussions — no database, no third-party account, no ads. The script is lazy-loaded with an IntersectionObserver, so readers who don't scroll to the comments section pay zero network cost. A reserved min-height on the placeholder prevents cumulative layout shift. Off by default; enable with one config flag plus four IDs from giscus.app. Per-post comments: false in frontmatter hides comments on a single post.
🧭 Independent Header & Footer Menus
Header and footer navigation are configured separately, so a Privacy or Imprint link can land in the footer without cluttering the main nav. nav.config.ts exports three arrays — navItems for the header, footerNavItems for the footer, and legalLinks for the small legal-style row some footer layouts render in their bottom strip. Defaults mirror the existing nav, so footers on existing sites are unchanged on upgrade.
🚀 From Install to Live in Minutes
Clone the repo, run pnpm install, and the full site is running locally at localhost:4321. Configure your name, description, and social links in src/config/site.config.ts and navigation in nav.config.ts. Pick a colour theme, update the copy, and deploy. Vercel, Netlify, and any static host are supported. Every push to main triggers a new deployment automatically.
🌐 i18n Ready
Native, opt-in internationalization since v1.3.0. Flip on i18n in src/config/i18n.config.ts to get locale-prefixed routes, a LanguageSwitcher in the header and mobile menu, hreflang alternates, and a t() helper backed by JSON dictionaries. English and Dutch ship by default — add more languages by dropping a JSON file into src/i18n/. Zero overhead when disabled.
📦 Open Source — MIT Licence
Astro Rocket is free, open source under the MIT licence. Built and maintained by Hans Martens. Contributions are welcome on GitHub.
