Redesign: Version 7.0: Sidebars, light-dark, and Bluesky

One of my favorite hobbies is tweaking my website. I've updated the design countless times thoughout the decade (!) of this site's existence. Here's a small history of the changes:

Redesign History

• First was version 2.0, a dozen or so layouts I made when this was a WordPress site.
• Then was version 3.0 and 4.0, where I wavered back and forth between busy and minimalist layout.
• I migrated from WordPress to Gatsby at some point.
• Then I decided to make the site look like Visual Studio Code with some custom pixel art and a theme color selector in version 5.0. This was probably my favorite version.
• Once again, I felt like the site was too busy, so I simplified it for version 6.0.

Version 7.0

I had a few days off for Thanksgiving this week, so in-between cooking, prepping, and cleaning for a few events we were hosting, I managed to redesign the site. I'm really happy with how it turned out! It was inspired by Docusaurus.

Organization

I finally settled on a good way to separate my technical articles from personal articles, by having Notes for personal writings and Articles for tutorials, guides, and everything programming related. I also have my open-source Projects highlighted, and even some art. On the front page, I have an "In depth" section on the main page to highlight my long-form articles.

I also decided to add some sidebars to make it easier to explore the site.

Sidebars

In the main sidebar, I picked a few articles I really like and put them in a "Favorites" section, so people can hopefully click around and discover some really cool guides, like this CSS manifesto and this article about how to organize a React app's directory structure, and my ode to Animorphs.

I also have a secondary sidebar on the article pages with the date, tags, and table of contents. It uses the IntersectionObserver API to detect when each section scrolls into view.

Bluesky

The biggest fad right now in developer-based social media is Bluesky, an alternative Twitter clone. I'm moving over to Blueksy in the hopes of interacting with real people again. I made a 🦋 Bluesky Starter Pack of developers I think are pretty cool. A starter pack is a way to quickly add a group of people on the app. If you're not using Bluesky yet, you can click the link to get started. I plan to keep adding to it as I discover new and old friends on the app.

Styling

The entire style of this page was written in one style.css file. I'm not a fan of Tailwind or CSS-in-JSS-type solutions, so I just write plain CSS from scratch. Now that CSS has variables and nesting, there's no need to set up CSS preprocessors anymore.

Making a light and dark theme switch is easier than ever, and I decided to take advantage of the latest CSS spec for that.

On the root pseudo class, you can now use the color-scheme property, and set it to light dark.

:root {
  color-scheme: light dark;
}

This enables the light-dark() function, which allows you to set two values, which will apply to light and dark mode, respectively.

:root {
  --color-background-navbar: light-dark(var(--gray-05), var(--gray-10));
  --color-background-sidebar: light-dark(var(--gray-05), var(--gray-10));
  --color-background-code: light-dark(var(--gray-05), var(--gray-10));
}

All I need to do to switch between the themes is update the color-scheme property.

export const Layout = () => {
  const [theme, setTheme] = useState('dark')

  const handleUpdateTheme = (newTheme) => {
    window.localStorage.setItem('theme', newTheme)
    document.documentElement.style.setProperty('color-scheme', newTheme)

    setTheme(newTheme)
  }
}

The process to have a light/dark mode has evolved a lot over the past few years. First you had to make a separate .dark class and manually update all the colors. Once CSS variables and :root came around, you could just make one set of variables for light and dark. Now, all you need to do is use light-dark and set the color scheme property. I'm glad it's so easy to take advantage of the latest CSS.

New Layout

Main Page

Blog Post

Light theme

Old Layout

Main Page

Blog Post

Light theme

Conclusion

I hope you like the new layout! Let me know what you think. I hope that this layout makes it easier to navigate around the site and explore all the content that was previously hidden behind minimalism.