Dec 17, 2024

Dusting cobwebs

I haven’t touched the design of this website in a few years, and I’ve mostly been content to let it collect a patina of dust and cobwebs. One of my explicit goals with this iteration of my website was to make it re-design resistant after all.

The key word there is mostly. I’d designed the overview of my work around the job of, well, getting a job. But I’ve been gainfully, happily employed for years now. The job changed, so the page needed to change too. And like with real dust and cobwebs, cleaning one spot tends to put everything left untouched in stark relief. Sufficed to say, one thing led to another. Not to a full re-design, but definitely a refresh. A deep spring winter cleaning.

re-designing /work

The original design for /work was focused around a collection of case studies. A reasonable approach when you’re job hunting, but it created two problems:

  1. All of my case studies were password protected, which made for an unsatisfying experience for all but the small number of people who I gave the password to.
  2. Focusing on depth inherently means you’re not focusing on breadth. Cherry-picking from a long career looks more or less the same as showing the entirety of a short career.

This time around, I oriented the design around breadth and range. I talk about how I’m a generalist designer on my front door; this page needs to pay it off. And while it’s doing that, make it clear that I’m operating from a depth of experience.

So instead of running with the typical “only show the work for the job you want” advice that’s perfectly fine when you’re on the hunt, I took the opposite approach. No edits, no omissions. A comprehensive timeline of my career in tech, but from a 30,000ft view.

All in all, it’s a much more enjoyable page for a visitor, and one that gives you a much better sense of my approach and body of work.

Incorporating anchor positioning

I’m a fan of side-quests, so I decided early on that I’d also use this /work redesign as an excuse to play with anchor positioning. And given it’s still early days and I didn’t want to polyfill, the usage couldn’t be core.

Since I was already running with a timeline, I used dialogs and anchor position to make that timeline more interactive and invite you to explore. About half the cards (in browsers that support anchor positioning) have an affordance you can click to get a little popover with more detail about the piece.

At first I thought it was too subtle / not “anchor position-y” enough. But then I realized something; that’s the point. I’d never reach for javascript library for something like this, but a little bit of markup and CSS? Sure.

HSL -> OKLCH

I took some of of what I learned from chasing color and switched the color system from HSL to OKLCH. This was particularly beneficial for the “random” theme option, which previously converted the colors to RGB in order to apply some arcane javascript that I flatly did not understand in order to derive a contrast ratio between two randomly generated colors.

The OKLCH version? 5 lines:

static lightnessDelta(color1, color2) {
  const lightness1 = parseFloat(color1.split('%')[0]);
  const lightness2 = parseFloat(color2.split('%')[0]);
  return Math.abs(lightness1 - lightness2);
}

OKLCH rules.

New themes, new patterns

A big part of how I’m making a re-design resistant design happen is by making change a constant. Patterns change on every page load. There’s a whole range of color themes, and a random option for even more variety. It’s tough to get sick of something that’s constantly changing.

But there are somewhat fixed parts of these systems, so I gave them some attention. I loaded up a new set of theme presets, and made a bunch of subtle tweaks to the pattern system that makes for a nice overall change in the vibe. Just enough changes to stave off re-design-itis for a few more years.

Read more notes