There are still a few bits to work out, but why wait any longer? The latest version of my site is here and it has been rebuilt from the ground up. I'm feeling pretty good about it and invite you all to celebrate the magic with me! ✨
While playing Super Mario Wonder, I found myself intrigued by the title screen transitions before each level. The skewed text atop its grid background pattern looked sleek yet playful. I began tinkering with some ideas and eventually came up with the blog post heading style seen above. At that point, I decided it was time to go for a full site rebuild.
Some more details
I plan to dive into some site features in future blog posts, but here's a quick list of all the exciting parts. Feel free to dig around the site repo as well.
I rebuilt from scratch. I stuck with 11ty but this time leaned 100% into WebC for templating.
There are some pretty neat (to me!) web components to be discovered in this project. Both of the following were built to progressively enhance the experience.
The <scroll-pen> extends the homepage CodePen collection's keyboard interactions, adds video previews that can be disabled, introduces input range slider control, and the ability to toggle the skew.
The <theme-machine> is what you might guess: A total package for changing the site appearance and adjusting theme colors.
The homepage includes a few dynamic stats about the latest site deployment date, what the weather was like during that time, and the latest track I had been jamming to on Spotify.
I've been messing around with scroll-driven animations in CSS a lot and why not be a little extra? When using a supported browser on a wide enough viewport, notice that a progress timer appears on blog posts. The progress ring fills itself up as the page is scrolled.
It's very early in the morning as I write this. I know I'm forgetting so many of the finer details but I couldn't wait to launch. There is still much for me to clean up and tinker on, but the time feels right to go public. Toot at me on Mastodon and tell me what you think!
..."Toot at me" may not be the best way to word that.