How this site was built.

The site itself is the longest portfolio piece. Open source. Every choice has a reason.


framework
Astro 6 · static + Preact islands
preact
~3KB runtime (only the swarm + constellation islands need it)
styles
Tailwind 4 (CSS-first) + scoped Astro <style> blocks
content
MDX with typed Zod schemas + glob loaders
hosting
Vercel, auto-deploy on push to main
analytics
GA4 + Vercel Web Analytics + Speed Insights
repo
github.com/alectivism/personal-website

JetBrains Mono Bold
alec foster · header · ui chrome
Space Mono Bold
alec foster · display headlines
Inter 400/500/600
All body copy and prose. Variable-weight for legibility.
JetBrains Mono 400
Code, metadata, $ prompts, terminal output.

dark
bg #15172a
card #1c2036
accent #bdf264
rose #f472b6
cyan #67e8f9
light
bg #f7f6ee
card #efede2
accent #4d7c0f
rose #be185d
cyan #0e7490

  • Dark by default. The site identity is dark. Light theme is a respected option, not the marketing version.
  • Crosshair cursor site-wide. Signal: this is a builder's tool, not a brochure.
  • $ prompts everywhere. Every primary CTA reads as a shell command. Builder-tone all the way through.
  • Section labels with underscores. // agents_at_work instead of "Agents at work" — looks like a filename.
  • One canvas island. AgentSwarm is the only Preact island on the homepage. Everything else is server-rendered HTML+CSS for speed.
  • No JS framework lock-in. Astro lets me use Preact where it earns its weight and ship raw HTML where it doesn't.
  • Accessibility intent. Skip link, focus-visible rings, ARIA on canvases, prefers-reduced-motion respected, semantic HTML throughout.
  • Theme-aware everything. Even the canvas-rendered swarm + constellation read CSS vars and re-render on theme change.