Rebuilding my site with Astro and a particle field
Why I rebuilt my portfolio with Astro, Three.js, and a git-based CMS — and what I'd do differently.
This is placeholder content. Edit or delete it from the CMS at
/admin.
Every developer rebuilds their personal site roughly once per JavaScript framework cycle. This is mine. The stack this time: Astro for the static bones, Three.js for the atmosphere, and a git-based CMS so that editing a post is a commit, not a database migration.
Why Astro
The pitch that sold me: ship zero JavaScript by default, opt in where it matters. This whole site is static HTML with exactly one script that matters — the background canvas. Blog posts are markdown files in the repo, which means my content has the same lifecycle as my code: branches, diffs, reviews, rollbacks.
The particle field
The background is a few hundred points scattered in a squashed spherical shell, connected by faint lines when they happen to sit near each other. A couple of rules made it feel intentional rather than noisy:
- Rotate slowly. Anything faster than ~0.03 rad/s reads as a screensaver.
- Respect
prefers-reduced-motion. Render one static frame and stop. - Cap the pixel ratio at 2. Nobody can see the difference on a 3x display, but the GPU can feel it.
What I’d do differently
Honestly? Start with the CMS config first. Retrofitting content modeling after you’ve hard-coded a page is the web development equivalent of painting a room after moving the furniture in.