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.
A few small updates made a big difference…
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!
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.
Once I got the Featured Project card done this was a quick update, basically just changing colors and leaving the original structure in place.
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.
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.
Back to top