Skip to main content

Personal website redesign 2022

For a couple years now, I’ve had a similiar-ish theme up on my website: black-and-white pixel art, Space Mono headings, with body copy rendered in Mallory. Pixels are fun, but I needed a change and craved more COLOR! 🌈

Bright colors have been giving me a ton of dopamine lately, and so this redesign swings far on the other side of the color pendulum:

Home page with a tagline, recent work projects, a list of things I'm up to now, recent blog posts. There's a quilt-like shape of geometric, colorful blocks in orangey red, forest green, pink, and beiges.

The blocky, geometric details on this redesign are a nod to the quilting hobby I share with some of my family members: an aesthetic echo of my fiber blog. As a ginger, I’ve gotta incorporate an orangey red in there.

Winter 2020 Version

First, let’s pour one out for the version built in Winter 2020, not long before The Panini. It looked something like this:

A collage of my tagline and recent projects and posts, in a black and white pixel theme with headings in a monospace font
My info page. The bio image is cut out into a pixelated circular shape.
A blog post, where the responses section seems to pop out of the page given its thick black border and hard-edged black shadow.

There are some through-lines I’m keeping in the new design:

  • The Mallory typeface, designed by Tobias Frere-Jones. It’s friendly but well-considered. I am thinking of swapping in a funkier display typeface for headings, but nothing has caught my eye yet.
  • Component-level designs: in many ways, components like cards stay the same.
  • Content is largely the same, though I’ve split work-related projects into a new Product page, and the blog has tag archives now as well.

New Version

Like my previous design, there is a dark theme:

The new home page again, rendered in a dark theme. The quilt blocks are now dark purples, blues, with lilac accents.

Previously I would swap out the theme only according to prefers-color-scheme. Now visitors can choose in the footer whether they’d like auto (follow the system theme), light, or dark.

The masthead shapes are a small source of joy for me:

A zig-zaggy, reddish orange icon at the top of my personal projects page A different geometric icon on the info page. There's also a section detailing my hobbies

They are reflected in the favicon for that part of the site.

Another detail I love is that when you hover over a card, two opposite corners animate to a bubbly corner radius.

Two blog post cards. The one on the left has an aggressive border-radius on the top left and bottom right

I like how this subliminally points the card image up and left: onwards!

This was also a good excuse to try out the has() selector. In these cards, I'm rendering a pseudo element on the link over the image. This way, the visitor can click on top of the image to navigate (as might be expected), but I can separate out img alt text from the link’s accessible name. Because of this, I needed to select for .c-card:has(.c-card__title:hover) to animate the image’s border radius. Given this is just an aesthetic enhancement, it’s a good first place to try this CSS feature out.

Up Next

Most of the things I’d like to do now are content-related:

  • Tag more of my blog posts so they can be found in the right tag categories.
  • Add “Uses” and “Media” pages for some good ol’ fashioned navel-gazing/voyeurism.
  • Develop the Product page more: thought leadership? Do I dare?

While I’ve done visual / accessibility testing in this redesign process, it’s always possible I’ve missed something. Please do let me know if you find anything that seems off!


My blog uses Webmentions. Responses from sites which likewise support Webmentions, such as Twitter or people’s personal sites, will show up here.