The Navigator

The Navigator is an open-source, modular starter theme for a personal website, technical blog, living CV, activity log, and photography portfolio, built with Astro 7.4 and Tailwind CSS v4. It outputs a fully static HTML/CSS site with minimal JavaScript, deployable to Vercel, Netlify, Cloudflare Pages, GitHub/GitLab Pages, or an optional multi-region AWS S3 + CloudFront stack provisioned with Terraform.

What is The Navigator?

The Navigator is a static-site starter template written in Astro 7.4 and styled with Tailwind CSS v4, distributed as a GitLab repository with an MIT-style open-source posture. You feed it Markdown and TypeScript data files (blog posts, status notes, photo entries, page intros, a career timeline) and it builds a complete static website into a ./dist/ folder via npm run build. It is authored by Ed Stuurman and maintains a live demo at the-navigator-sage.vercel.app.

Key Features

• Single-file feature toggles — Every section (home, about, now, blog, photography, log, tags, contact, contact form, RSS, LLM feeds) is switched on or off in src/theme.config.ts; disabling a section skips building its pages and prunes its carousels, nav links, sitemap entries, and feed items.
• Configurable homepage — The defaultHomePage setting (home, blog, about, now, photography, log, tags, or contact) renders that page directly at /.
• Zero-dependency photo gallery — A justified aspect-ratio photo grid with a <dialog> lightbox, WebP optimization, zoom/fullscreen, thumbnail filmstrip, keyboard/swipe navigation, and individual photo pages at /photography/[id]/.
• Rich Markdown pipeline — Mermaid code blocks compile at build time into inline SVGs with a zoom/pan modal; a YouTube facade loads video only on click; src/data/techTerms.ts upgrades technical terms into hover tooltips; GitHub-style alerts and code copy buttons are supported.
• Unified activity log — Status updates, photo rolls, and release notes from CHANGELOG.md merge into one filterable /log/ timeline.
• Living CV — src/data/experiences.ts builds an interactive career timeline that cross-links to related articles, notes, and photos via shared tags.
• Build performance — Warm builds finish in roughly 1.5–2 seconds; the first build generates responsive photos and social cards in about 45–60 seconds and caches them in .cache/.
• Automatic social cards and feeds — Build-time 1200×630 Open Graph images at /og/*.jpg, plus optional RSS (/rss.xml), Atom (/atom.xml), and AI indexes (/llms.txt, /llms-full.txt, /llms.json).

Who is it for?

• Developers wanting a personal site who already write Markdown and want blog, CV, and gallery pages generated from content folders without touching .astro templates.
• Photographers and writers who need a lightbox gallery with WebP output and a filterable stream of short notes alongside longer articles.
• Job seekers or consultants who want a living CV page where each role links to related posts and project photos via shared tags.
• AWS-oriented teams who want an optional Terraform module for S3 + CloudFront hosting with Route 53 and SSL, plus GitLab CI or GitHub Actions pipelines that include a dry-run mode.

Use cases

• Indie developer: configure src/site.config.ts with a name, bio, portrait, and social links, then replace the sample posts in src/content/blog/ and set defaultHomePage: 'blog' to publish a writing-first site.
• Photographer: drop images into src/images/ with Markdown entries in src/content/photography/, and get an optimized gallery with shareable per-photo links (e.g. ?photo=1).
• Self-hoster: run terraform/README.md steps to deploy the built ./dist/ to multi-region S3 + CloudFront, with CI pipelines invalidating the CDN on deploy.

How does The Navigator work?

1. Run npm ci and npx playwright install chromium (Chromium renders Mermaid diagrams to SVG at build time).
2. Edit src/site.config.ts for identity and src/theme.config.ts for features and navigation.
3. Run npm run dev for a live-reload server on port 4321, or npm run build followed by npm run preview to produce and check ./dist/.

FAQ

Does The Navigator require a paid service?

No paid backend is required. A Formspree account is optional for the embedded contact form, and Umami analytics is optional; setting contactForm: false or leaving the endpoint blank falls back to plain email and social links.

Which hosting platforms does The Navigator support?

It builds to a standard static ./dist/ folder deployable to Vercel, Netlify, Cloudflare Pages, or GitHub/GitLab Pages with no AWS setup, or to AWS S3 + CloudFront via the included Terraform templates.

Is CI enabled by default on forks?

Automated CI is disabled on the upstream template repository. On GitLab CI it runs if you rename the repository away from navigator or set ENABLE_CI = "true"; on GitHub Actions you un-comment the push: block in .github/workflows/deploy.yml.

What Node version is needed?

Node.js 20 or newer and npm are required, along with headless Chromium installed through Playwright for build-time diagram rendering.