Realign

I just popped out a realign of the ol’ personal website. I only say realign as I didn’t rethink every single detail of the thing. I’d say probably 40% of the original HTML and CSS are there from old site, 70% of the PHP, and of course 98% of the content.

It won’t stay this way forever, so I figured I’d document a little of it for fun and see what kinda interesting tech is in there, if any.

Roslindale & Pigeonette

The typefaces are Roslindale and Pigeonette. I don’t know if they work together quite perfectly but I like them both individually quite a bit and wanted an excuse to use them. I started out with just Rosalind ale and a dash of system monospace, but I got enough complaints that Roslindale wasn’t cutting it for body copy legibility on some screens, that I fairly quickly tried different stuff, ultimately landing on this.

I find body copy the hardest to pick. I don’t like type that looks too serious for this site, as my writing is generally too casual and it doesn’t fit the vibe. But if you go too silly (like, I dunno, one of the Inkwells) it’s too unserious. So I try to find something in between that has a decent italic and bold.

Circle Motif

I like the idea of a “motif” to help tie a design together. That’s one of the things Erik D. Kennedy talks about in his content and it has stuck with me. I think this design is tied together with the just-two-fonts, very few colors, and the motif of “circles”.

You can see the big circle above on blog posts, which is echoed in the header several times, smaller.

Then I put a big circle (almost!) in the footer as well. It’s a little oblong just so I could spin it around with Scroll-Driven Animations just for fun.

No About Page

I kept the idea that the homepage is the about page. What is the homepage of a personal site unless it is essentially saying about who the site is about? Just feels right to me.

No Contact Page

Despite a chunk of my career building products around good web forms, I don’t really care for the “contact me” form. It’s such an open-ended prospect, just supplying my email address seems perfectly sufficient, which is available in the footer of all pages. I like email, after all.

Speaking of that footer, I’ve got the best “other ways to connect” links down there. I feel like a lot of people redesign their entire website when it’s time to update to the latest list of social networks and I’m no different. Once you touch it you gotta keep going.

Alternate Header Widget

I like the idea of having a photo of myself prominently on the site, so you know who you’re dealing with here. I don’t know where the idea came from exactly, but somehow I wanted to do multiple versions and then use View Transitions to swap between them. So that’s this:

I sized and positioned absolutely everything in there with Container Units so that it would perfectly scale down as needed.

See that little nugget of orange “behind” the header, and how I bail on it at smaller sizes? That was just a quick way to cope with this weird situation in Safari vs. Chrome/Firefox.

It’s Still WordPress

I explored trying to get off WordPress, as I’m still quite turned off by all the drama in that world. I was going to get onto CraftCMS, and this very site was actually used in the latest release of their wp-import tool.

Unfortunately, I just have absolutely zero experience with Craft and while the tool worked to get the content in there, I couldn’t quite get myself properly started. I wanted to do an Astro front-end thing. Maybe someday. My old muscle memory is strong.

WordPress meant my old tactic for having a random page is still there (little ???? icon in the footer). I’m not doing it the Jetpack way, though, as that has seemed to stop working.

My Own AJAX Navigation

Lol AJAX. I just fetch() against a special page I set up that returns only totally unstyled “article blocks” based on the pagination in the URL.

There is also a View Transition on that page title. It’s so silly how easy that is these days. Just a quick CSS opt-in and then two arbitrary elements share the same view-transition-name across page loads.

Anyway. BACK TO WORK.