Authoring components (MDX)
Available in any .mdx file without an import.
Callout
<Callout type="tip" title="Optional title"> Body text with **Markdown**.</Callout>type is one of note (default, accent), tip (green), warning (amber), danger (red). The label gets the same $ prompt as section headings.
Tabs
<Tabs tabs={['npm', 'pnpm']}> <div>first panel</div> <div>second panel</div></Tabs>Children are matched to labels by order. Panels are keyboard-navigable with the arrow keys.
UI primitives (src/components/ui/)
| Component | Purpose |
|---|---|
Icon |
Inline SVG icons — brand marks and UI glyphs; see the icons map for names |
SectionLabel |
Homepage $ title heading with an optional link on the right |
Button |
<a> or <button>; variants primary, secondary, ghost |
Breadcrumbs |
Mono trail (~ › tags › gpu) |
Media |
<img> or <video> by file extension, lazy / autoplay |
Callout |
See above |
Tabs |
See above |
Global utility classes in global.css: .container, .narrow, .kicker (+ .kicker--prompt), .glass, .chip, .chips, .link-row, .page-head, .page-body, .reveal.
Layout (src/components/layout/)
| Component | Purpose |
|---|---|
Header |
Floating pill: name, navigation, optional purchase button, scene menu |
SceneMenu |
Scene popover, the t shortcut, toast, wallpaper warming |
Footer |
Copyright range, resume link, social icons, RSS |
EdgeFades |
Scrims at the viewport edges |
BackToTop |
Floating button revealed after scrolling |
ReadingProgress |
Accent bar at the top of posts |
Content components
| Component | Purpose |
|---|---|
home/Hero |
$ whoami, name, headline, facts, keywords, link row |
home/ExperienceList |
Date · organisation — role · detail rows |
home/OpenSourceList |
Contribution rows with the accent dot |
posts/PostLine |
Title (+ tags) · date row used in every post list |
posts/TagChip |
#tag as bare text or a frosted pill |
posts/SeriesNav |
“in this series” block for posts sharing a series |
posts/PostNav |
Earlier / later cards |
projects/ProjectRow |
Homepage row: name · stack / description |
projects/ProjectCard |
Full card with media, chips, project and source links |
docs/DocsSidebar |
Grouped docs navigation |
docs/TableOfContents |
Sidebar (with scroll-spy) and mobile variants |
Layouts (src/layouts/)
BaseLayout renders <head> (SEO, fonts, scene CSS and the before-paint script), the header, footer, edge fades, back-to-top, and analytics. PostLayout, ProjectLayout, DocsLayout, and PageLayout wrap it for each content type. Pass title, description, image, noindex, or extra jsonLd objects to BaseLayout from any page.
Adding a section
The pattern every section follows: a query in src/lib/content.ts, a component for the row, an _index.astro page under src/pages/<section>/ registered in the sections list in astro.config.ts, a flag in features (checked in src/lib/features.ts), and a navigation entry. The homepage stacks sections in src/pages/index.astro; copy one of the existing blocks and swap the query and row component.