Booting The Grid: Why I Built This Portfolio

Most portfolios are a résumé with extra steps. I wanted mine to feel like jacking into a terminal — a HUD that boots, a live clock, weather pulled from the sky above wherever you're sitting.

The stack

The whole thing is a single Next.js client component. No CMS, no database — just a typed data file and a lot of CSS custom properties.

export const PORTFOLIO_DATA = {
  identity: { handle: "l4kh4n_j", clearance: "OMEGA" },
  // ...the single source of truth
} as const;

Updating my profile means editing one object. That constraint kept the codebase honest.

Why a HUD?

Three reasons:

1. It's memorable. Recruiters see a hundred white-background portfolios a day.
2. It forced design discipline — every element had to justify its pixels.
3. It was fun, and that energy shows in the result.

The best side projects are the ones where the constraint is "make it feel good," not "ship the feature."

A note on hydration

Anything derived from new Date() initializes as null and gets filled in a useEffect. Otherwise the server timestamp and client timestamp disagree and React throws a hydration mismatch. Small detail, big headache if you miss it.

That's the tour. More posts soon — I'll dig into the GSAP motion layer and the Web Audio synth that powers the click sounds.