A portfolio you can operate
Why this site is laid out like an application instead of a document, and what you're allowed to change about it.
- design
- next.js
Every portfolio I liked had the same problem: it was a document. You scroll it once, top to bottom, and the only thing left to do is leave. So this one is a surface you operate instead.
Three panes, one window
The layout owes an obvious debt to Discord's profile customization — the good idea there was letting people restyle a profile without letting them edit it. Same split here:
- Left — who I am, and every control that changes how the page looks.
- Centre — the profile card: avatar, status, what I'm listening to right now.
- Right — the actual portfolio, behind tabs.
On a desktop the page itself never scrolls. Each pane scrolls on its own, which is most of what makes it read as software rather than as a page.
Your version, not mine
Accent, background, typeface, nameplate, frame. Press Customize in the left rail and change any of them.
The defaults are the only thing I control. Everything past that is a preference, and preferences belong to whoever is holding the mouse.
That line does real work. Your accent is saved in your browser and nobody else ever sees it — you are not editing my site, you are adjusting your copy of it. The editor that does change what everyone reads is somewhere else entirely, behind a password.
What runs underneath
| Piece | How it works |
|---|---|
| Content | One JSON document, edited through a form, no redeploy |
| Now playing | The Spotify Web API, refreshed on the server |
| Your look | localStorage, read before the first paint |
| This post | Markdown, in that same document |
The look is read before paint on purpose. A theme applied after hydration flashes, and a flash of the wrong accent is worse than offering no customization at all:
// Inlined in <head>, before React exists.
const saved = localStorage.getItem("look");
if (saved) document.documentElement.dataset.look = saved;
Next
Wins have their own tab now, and this is where updates will land. Everything else is back on the profile.
Comments
Subscribe to new posts
Get an email when I publish something new. No spam, unsubscribe anytime.
Or follow the RSS feed — no address required.