Skip to main content

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!

About the author

Sean McPherson is a software engineer for Khan Academy who specializes in web and mobile app development. He lives with his wife, sons, and dog in Pittsburgh, PA.