Website Redesign 2023

I’ve had this website since I was college in over 14 years ago. It’s gone through many designs and iterations over the years, but the redesign I’m rolling out today is the first since 2017. There are a few things I wanted to address, including:

• Better display of photographs
• Better portfolio display
• A new visual design

I’ll describe how the redesign came to be. You can also watch the video walkthrough above, where I address most of the same things I do in this post.

I began to look at some experimental designs that I had come up a few months ago for what I imagine personalized operating system could be (think macOS or Windows, but suited to myself particularly). These formed a good basis for what the aesthetics and priorities of what the website could be.

From there I began brainstorming potential layouts with pen and paper. In addition, I started making notes about how I would talk about myself and my experience.

At this point, I opened Figma and began designing all the screens and flows that I would need to begin development. A few elements quickly became consistent:

• Spare monospaced typography. I see my website as a workbench and as such I want it to reflect the tools I use to make it. Whether I am writing in IA Writer and Obsidian, and coding in Nova, the craft of building for the web is something I value, so I wanted that to be reflected in the design.
• With the workbench idea, I wanted a minimal grid that has an ordered character, but lets the content of the site, the writing, photographs, and design portfolio, move forward. You can see that in the grid texture behind the whole site, as well as the ordered grid that sites behind the layout.
• I wanted to turn some content that could quickly become a mind numbing feed into something that invited interaction. So the snippets and work pages would now have a swiping interaction to show a digestible amount of content that was easily comprehensible.

One of the benefits of knowing how to code and implement the site myself is that I can proceed into development without having made every decision. If I’m 65–75% there with a design I feel comfortable jumping into my code editor and making the rest of my decisions while I build. The following images are design options that I explored, but did not ultimately use.

After I began development, I began making the final design decisions as I got to them. I decided how to handle taxonomies in blog posts and portfolio projects. I also decided how to deal with a new search results page. I created the design tokens that worked well between light and dark modes. In addition, since side swiping is a major element in snippets and the portfolio, I decided to implement custom styled scrollbars, which I think add to the overall aesthetic of the site. Here are a few screenshots of the site as it came together.

Implementation is always a time where things change. For example, in the above Photos page. That nice grid where images bunch up and fill all available space is usually accomplished with Javascript. However, that functionality is being built into CSS by the browser makers and will be released in the future. So, for performance reasons, as well as philosophical reasons, I decided to use CSS. For most users right now the Photos page will look different than the screenshot above (that’s Safari’s beta browser which contains future features), but as browsers implement the CSS grid-template-rows: masonry the layout I intended will suddenly work. The web is cool that way.

Below are a couple details, that I’m particularly happy with:

I’m pretty happy with how the website came together. Take a look around, see what you think.