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!

Ecclesiastes 1:9 (SDG)

About the author

My name is Sean McPherson, and I am a software engineer interested in all areas of front-end development. Here I write articles about programming for developers of all levels, and occassionally other topics.

Currently I work for Niche.com and live with my lovely family in Pittsburgh, PA.