My personal corner of the web — a retro-themed blog, photo album, and portfolio with a dusk-paper aesthetic. Built as a place to learn Astro and tinker with CSS.
Live at viniths.github.io.
- Astro for static site generation
- Svelte for the few interactive islands
- Three.js for the Ledger's optional galaxy Atlas
- Hand-rolled CSS with per-theme (light/dark) tokens
- Deployed to GitHub Pages via GitHub Actions
npm install
npm run dev # localhost:4321
npm run build # static build to ./dist/Requires Node 22+.
Open Atlas in /ledger/ to explore the writing as a galaxy. Drag or use
arrow keys to rotate, disperse/gather the field, and select a tag to approach
its entries. The star positions retain the weighted tag graph; search provides
another way to navigate. Closing the Atlas keeps the corresponding Ledger filter.
Escape returns from a region, then closes the Atlas.
The Atlas uses one continuous diffused glass pane with quiet floating controls, softly
glowing multicolored stars, and a rotating dithered black hole. Names appear on
hover/focus or in the dispersed view. Curved threads show real connections.
Faint dust clouds are part of the arms; dispersal removes the black hole.
All ambient motion follows Pause and reduced-motion settings.
Search supports spaces or hyphens, highlighted matches, clear, and arrow-key
navigation. Focus it with / or Ctrl/Cmd+K.
/photos/steel-faces/ contains all twenty supplied photographs in a compact,
straight mosaic of nested rectangles with thin equal frames and no captions or
shadows. A justified sheet remains available without JavaScript. Click a photo
to open the viewer; use arrow keys or swipe
between photos and Escape to return. Original files remain available.
The new interaction layer uses the existing Fraunces/Silkscreen typography.
Its visual boundaries are documented in DESIGN.md under Paper and light.
The Asterism reference in the separate pf-website-1 directory is unchanged.
To check a production build on a separate port:
npm run build
npm run preview -- --host 127.0.0.1 --port 4322
# In another terminal:
PLAYWRIGHT_BASE_URL=http://127.0.0.1:4322 npm test
npm run typecheck