What it is
A wallpaper-and-frosted-glass theme for developer personal sites.
A soft wallpaper sits fixed behind the page. Content scrolls over it on frosted panels, the navigation floats in a capsule that fades in as you scroll, and the voice is a terminal prompt: $ whoami, dashed rules, a mono block of credentials beside your name. Five scenes ship in the box - matte, twilight, indigo, aurora, and a light one called sand - and visitors switch between them from the header or the t key. Ship one scene and the switcher disappears.
Homepage sections, each one optional:
- Hero: your name, a two-line headline, key-value facts (edu, prev, oss, cert), keywords, and a link row.
- Experience: dated rows with organisation, role, and one line of detail.
- Projects: name, stack, description; frosted cards with a screenshot or a short clip on the full page. A project gets its own page only when you write one.
- Open source: merged upstream PRs, with a live count fetched from GitHub at build time.
- Writing: recent posts, grouped by year on the index; tags, series navigation, earlier/later, reading time, a reading-progress bar, RSS.
- Docs: grouped sidebar, on-this-page navigation, prev/next.
- Drop about.md into src/content/pages/ and it is live at /about.
Who it's for
- Platform, DevOps, SRE, and backend engineers: a personal site that reads like a well-kept terminal, with experience, projects, upstream contributions, and build logs in one place.
- Open-source maintainers and indie makers: a project showcase with screenshots or clips, a merged-PR counter, a blog with series and code snippets, and a docs section for the things you ship.
- Students, job seekers, and freelancers: a résumé-shaped homepage with facts, experience, and projects, a /resume short link, and a blog on a fast static site with SEO and RSS built in.
Features
- Scenes: a wallpaper, a base colour, an accent, and a dim strength per scene. Every surface, border, scrim, and the nav capsule is mixed from those four values in CSS, so a new look is a config entry, not a stylesheet. Remembered per visitor, no flash on load.
- Weight: under 5 KB of JavaScript per page, compressed. The font is self-hosted, subset, and preloaded; all CSS is inlined. Reading progress, back-to-top, edge fades, and reveal-on-scroll are CSS scroll-driven animations, not scripts.
- One config file: name, hero facts, socials, navigation, experience, open-source rows, scenes, analytics, feature flags - all of it lives in src/config/site.ts. You should not have to open a component to change your site.
- Accessibility: semantic HTML, keyboard navigation, visible focus states, reduced-motion support, AA contrast on every scene, light and dark.
- SEO: canonical URLs, Open Graph, Twitter cards, JSON-LD (WebSite, Person, BlogPosting, Breadcrumb), sitemap, robots.txt, RSS. Set your URL and forget about it.
The stack
Astro 7 → plain CSS with color-mix() design tokens → MDX + Expressive Code
TypeScript throughout, typed content collections, Node 22.12+.
No backend, no environment variables. It builds to static files and deploys anywhere - a GitHub Pages workflow is included and handles sub-path deployments on its own.
