so, the whole thing
I've been posting these one piece at a time as I built them, the mountain, the birds, the sidebar, the night sky, all of it dribbled out over the last week or so as separate little devlogs. Figured it's worth one post that just steps back and looks at the whole push, because from the inside it didn't feel like a list of features. It felt like one idea that kept growing arms and legs until it was basically a small ecosystem living in my header bar.
Short version: the old site looked like a Bootstrap default with my name on it. Fine, readable, completely generic. Could've been anyone's blog. I wanted it to look like mine, and specifically like here, Lovund, the island I actually live on. So I gave it a color and a font and then spent way longer than planned drawing birds.
green, and a font that isn't Helvetica
Palette first. Went with green because I like green (no deep reasoning there, just true), landed on two moods, a lighter "coastal day" for light mode and a darker "north-sea night" for dark mode. All the tokens live in one CSS file so I'm not hunting hex codes across twelve components when I inevitably change my mind about a shade:
--color-bg: #ecf3ee;
--color-surface: #e3eee4;
--color-fg: #141c18;
--color-accent-500: #2f6b45;
--color-accent-600: #275a3a;
--color-sea: #256d80;
--color-rock: #7e8f84;Dark mode flips most of these around a swapped base, sea and rock stay legible against a near-black background instead of just inverting blindly, which is its own small fight I'll get to.
Font is Literata, a serif. Wanted something that reads a little more like a printed page and a little less like every SaaS landing page ever, since this is a personal blog and not a product. Small thing but it changes the whole feel of the page more than I expected going in.
the actual idea: close up is pixels, far away is smooth
This is the bit that everything else hangs off. I wanted two visual registers in the same scene: things up close render as crisp pixel art, hard edges, blocky, and things in the far background render smooth and atmospheric, like they're actually far away and slightly out of focus. Header and footer strips are the pixel layer. The mountain sitting behind everything is the smooth layer.
Once I had that rule it made every other decision easier, because I could just ask "is this thing close or far" and know how to draw it.
drawing lovundfjellet, twice
The mountain behind the scene is Lovundfjellet, the actual summit here, traced from a photo I took off the ferry. First pass I drew it too pointy, more alpine spike than the real thing, which is more of a long humped ridge. Went back to the photo, actually measured the slope angles instead of drawing from memory, and redid it. Obvious mistake in hindsight, I know what the mountain looks like, I see it most days, but drawing from "vibes" instead of the reference photo got me a shape that was wrong in a way I didn't notice until I put it next to the real skyline.
Made a little BMK logo to go with it too, initials with a tiny mountain worked into the lettering. Didn't want a generic monogram, wanted the same landmark showing up twice.
nav went to the side
Moved navigation into a left sidebar instead of a top bar, each section gets a small icon instead of just text, archive gets a little treasure chest which is probably my favorite dumb detail in the whole redesign. No deep UX theory here, I just like sidebars and wanted a spot for tiny icons.
then it got a little out of hand (in a good way)
This is the part that ran away from the original plan. Once the mountain and the header strip existed I kept looking at the empty sky and empty water and thinking "that needs something in it." Lovund has a genuinely enormous puffin colony, so puffins went in first. Then seagulls felt obvious once puffins existed. Then a lone sea eagle because we actually get them here. Then an oystercatcher, a tern, a cormorant, fish moving around in the sea layer, and finally a tiny pixel version of me standing on the summit with my arms up, because if I'm drawing this island I might as well put myself on top of it.
Had to set myself some rules once the guest list got long or the header was going to look like a Where's Waldo panel:
- never more than a handful of birds on screen at once
- everything stays in its zone: birds in the sky, fish in the sea, people on land, nobody swaps lanes
Keeps it feeling alive instead of cluttered, which was the actual risk once I started adding wildlife with no plan.
the scene remembers where it left off
Wanted coming back to the site within a few minutes to feel continuous instead of re-rolling a totally new arrangement of birds every single page load. So the current scene, positions, timing, all of it, gets saved with a timestamp, and a fresh visit inside five minutes advances it forward by however long you were gone instead of throwing it away.
First cut just saved the phase each bird was at and put it back exactly there on the next load. Technically "remembered" the scene, in the most useless way possible:
// first attempt: just restore, no idea how long the tab was gone
function restoreScene(saved: ScenePhases): ScenePhases {
return saved;
}Left the tab in the background for two minutes and came back to birds frozen in the exact spot they were in when I looked away, because nothing was accounting for the time that actually passed. Fixed it by advancing every saved phase forward by the real elapsed time, wrapped around each bird's own cycle:
export function advancePhases(
phases: ScenePhases,
cycles: Record<string, number>,
elapsedMs: number
): ScenePhases {
const elapsedS = Math.max(0, elapsedMs) / 1000;
const advanced: ScenePhases = {};
for (const [key, value] of Object.entries(phases)) {
const cycle = cycles[key];
if (!cycle || cycle <= 0 || !Number.isFinite(value)) {
advanced[key] = value;
continue;
}
advanced[key] = (((value + elapsedS) % cycle) + cycle) % cycle;
}
return advanced;
}Past five minutes it just rolls a new one. Simple rule, took a few tries to land on, everything else I tried felt either too sticky or too random.
night sky, and the fight with light mode
Dark mode turned out to be the easy half. Swap the mountain for a soft-edged night version, drop in the Big Dipper and Cassiopeia at roughly their actual positions around the North Star, let them rotate slowly, and it just reads as a night over water. Barely had to fight it.
Light mode was the opposite. Getting the background mountain to actually show up against a pale sky without it turning into visual noise behind the text took several passes at the wash and shadow colors, too strong and it fights the reading experience, too weak and you can't tell there's a mountain there at all. Landed on something with a soft color-mixed wash over the base background that's there if you look but doesn't get in the way of reading a post about, say, a half marathon.
where it's at
That's the redesign, more or less all of it in one place. It's not finished-finished, I don't think a personal site is ever really finished, and I'm still poking at spacing and bird timing and whatever else bugs me when I look at it too long. But it feels like mine now instead of a template with my name slapped on it, and that was the whole point. Good enough for tonight.