The sprucing party continues

A list of tags for this post.

Keeping the momentum of the updated footer going, I’ve also updated the homepage and the Projects page. Party popper emoji! Much like the footer, I’ve wanted to update these for awhile.

The homepage permalink

This is more fine tuning than overhaul. The original spacing and rhythm were too tight, and the Project cards felt like a first draft, mostly because they were.

Original version of the homepage showing tight spacing.
Not a lot of breathing room between the Recent Writing and Featured Projects section. And the project cards are just a bit too much.

A few small updates made a big difference…

  • Removed blurbs under section headings
  • Changed section header color
  • Simplified the Featured Projects cards
The current version of the homepage showing improved spacing.
Better spacing and rhythm with less clutter.

The updated project card is specific to the homepage. The previous version used the same layout as the Projects landing page, allowing a visitor to view the project page or visit the project directly. I left that option on the Projects landing but stripped it out here for simplicity, thinking that if someone is really interested in my projects it might make more sense to scan them all and decide whether to read more or just visit it.

Since I don’t current use a stats package, mostly for mental hygiene, I have no idea if anyone ever went directly to a project from the homepage. A trade off I’m willing to make!

The featured projects cards showing the hover and focus state with a glowing magenta background
This is as close to delight as I get.

If you’ve ever looked around this site you may have noticed I’m a boring designer. My work is frequently devoid of all the little nice touches that put some polish on a UI. The hover and focus state on the Project card is one such detail that could be considered a nice touch, even trending towards delight. The overall approach for the card came from Adrian Roselli’s Block Links, Cards, Clickable Regions, Rows, etc.

Projects landing page permalink

Once I got the Featured Project card done this was a quick update, basically just changing colors and leaving the original structure in place.

The original project card with the text on a dark blue background with light text.
The original cards. View the full page (1.9 MB)
The new project card with the text on a light blue/gray background.
The new cards. View the full page (1.9 MB)

In isolation I liked the original project cards, but a big long page of them was a bit much. The new toned-down design is a bit more boring (hello!) but overall easier to scan. And if ever get around to making a dark mode for this site that design will be coming back!

There are a few unsavory image sizing things that happen as the screen is resized. I’m going to come back and redo most of the images and standardize the sizing or aspect ratio a bit more to help with that.

I also found a bug that’s been out there this whole time. The grid container I used for the cards had the minimum width set at 18rem, which meant that on the smallest screens it was too wide. I fixed that by setting the minimum to 16rem.

What’s next permalink

It’s been a year since I launched this version of the site, and I’ve been doing some thinking about what I’ve learned and what to do next with the site. More on that in a bit.

A list of tags for this post.