Devlog #1

Every personal site I’ve ever started died the same way: I open an empty folder, reach for a dark background and a glassy blur, and end up with the same neon-on-black card grid everyone else already shipped. So this time, I gave myself one rule — no dashboard. Lodestar had to look like something you could print.

That constraint decided everything. Instead of a control panel, I built a spec sheet: warm paper, a faint graph-paper grid, one ink-red accent, and a hard black offset shadow. The moment it landed on screen, it stopped feeling like a website and started feeling like paper no.01.

The layout and the grid

The graph-paper background is just two hairline gradients tiled every 24 pixels — no image, no extra request. Combined with Fraunces for the display type and IBM Plex Mono for everything structural, it immediately sets the “engineering worksheet” tone.

Stat bars that aren’t bars

For the stats section, the obvious approach was a standard progress bar. But a smooth gradient bar is a dashboard element. Instead, the meters are text: a row of filled and empty block characters, so each skill reads like a terminal readout rather than a loading bar. They fill up on scroll, and the script cleanly respects prefers-reduced-motion to keep the animation accessible.

Putting it all together

The rest of the sheet came together quickly. I added a live KST clock in the masthead, built out the loadout, quest log, and outbound links, and kept the CSS entirely custom with no frameworks. It’s fully responsive, but keeps the rigid, printable document feel even on mobile.

Where Lodestar stands

• Editorial spec-sheet layout: paper + graph grid + one ink-red accent.
• Five sections completed — Identity / Stats / Loadout / Quest log / Signals.
• Text-block stat meters that fill smoothly on scroll.
• Live KST clock in the masthead.
• Successfully deployed on GitHub Pages.