A modest redesign for 2021

It had been a minute since I last worked on the design for this site, so I decided to make some changes for 2021. I didn’t want to undertake anything major – just tweak a few things to freshen everything up.

A few of the changes are a return to previous designs: I brought the scroll progress bar (top of the screen) and centered the content. I lightened the default background color and reduced the size of the headings.

There are two new features that I added, and the most notable of which is the light/dark mode toggle in the header. Under the hood, this is a checkbox with a change event listener that persists state in localStorage. The boxes are 100% CSS with ::before and ::after pseudo elements with a small transition. Pretty neat what can be done with CSS and a teeny bit of JavaScript!

The other new feature is a search listbox on /articles. Rather than implement something super complex, I opted for a search input with a datalist of articles. I added an event listener that redirects when an article is selected. You can view the implementation in article-search.js. This is a pattern that I’ve used twice now and might warrant its own article.

Beyond that, I updated some of the copy, changed the links in the header, included a picture to the /about page, and added a new page for my work availability (hey recruiters!).

Overall, I’m pretty happy with how the redesign turned out. We’ll see how long that contentedness lasts!

Happy reading!