Get this theme
docs

~/docs/getting-started

Introduction

What this theme is, what it includes, and how it is organized.

on this page

What is this theme?

Astro Scenery is a theme for developer personal sites. It grew out of a platform engineer’s own site and keeps that site’s voice — a $ whoami hero, dashed-rule lists, a mono manifest of credentials — while packaging everything a stranger needs to make it theirs.

The signature is the scene: a soft wallpaper fixed behind the page, a readability overlay with a whisper of film grain, and a frosted-glass capsule for the navigation that fades in as you scroll. Visitors can switch between the scenes you ship (press t), or you can ship one and the switcher disappears.

Everything is driven by one configuration file, content is typed, and each page carries about three kilobytes of JavaScript — the scene switcher, a scroll listener for the nav, and the copy button on code blocks. Reading progress, back-to-top, edge fades and reveal animations are pure CSS.

What’s included

  • Homepage — hero with facts and keywords, experience, projects, open source (with a live merged-PR count), recent writing. Each section is config, and an empty section hides itself.
  • Posts — Markdown/MDX, tags, series navigation, earlier/later, reading time, figure captions from alt text, external-link posts, drafts, RSS.
  • Projects — homepage rows and full cards with a screenshot or short clip; a project gets its own page only when it has body content.
  • Docs — this section: grouped sidebar, table of contents with scroll-spy, previous/next.
  • Pages — any Markdown file in src/content/pages/ becomes a top-level route (about.md → /about).
  • Scenes — five included (four dark, one light), each a wallpaper plus two colours; everything else is mixed in CSS.
  • SEO — canonical URLs, Open Graph, Twitter cards, JSON-LD (WebSite, Person, BlogPosting, Breadcrumb), sitemap, robots.txt.
  • Snippets — Expressive Code for fenced blocks: titles, terminal frames, line numbers, highlights, diffs, copy button.
  • Authoring components — <Callout> and <Tabs> for MDX.
  • Deploy anywhere — fully static, with a GitHub Pages workflow that handles sub-path deployments automatically.

How it is organized

src/
├── config/site.ts       every setting
├── content/             posts/, projects/, docs/, pages/
├── content.config.ts    collection schemas
├── components/          ui/, layout/, home/, posts/, projects/, docs/
├── layouts/             Base, Post, Project, Docs, Page
├── pages/               file-based routes (+ rss.xml.ts, robots.txt.ts)
├── styles/              global.css (tokens, effects), typography.css (prose)
├── lib/                 content, seo, utils, scenes, markdown-plugins, github
└── assets/fonts/        Space Grotesk (variable, latin)
public/
├── favicon.svg, og.png
└── images/              scenes/, projects/, posts/, avatar.svg

Next: Installation.