I have been sitting on the natemoo.re domain for years. I've always had the intention to build a personal website and blog from scratch, but never really found the time.

I wanted to change that in 2019. Today, I’m thrilled to finally launch a personal site to be proud of!

The Stack

The site itself is written with vanilla web components (compiled by Stencil). After building a few other sites with Stencil, I’ve nailed down a solid pattern and site structure that works well. I’m sure I’ll have more to write about that in due time.

To keep things simple, every post is written in Markdown and converted to HTML with a simple node build script. The same build script also generates a posts.json file with some basic metadata about every single post on the site, which powers the /posts page and its search feature.

The build process is executed automatically upon pushing to GitHub, then deployed directly to Firebase. This is a process I’ve outlined in more detail in Deploying to Firebase Hosting with GitHub Actions, but I have to say, it still feels like magic every time. ✨

The Design

I’m using CSS Custom Properties all over the site, but my favorite spot is the little color picker in the upper right corner of the site. Since the whole site is themed using variables, it’s simple to make a global style change on the fly. Give it a try!

Since Adobe Fonts recently lifted their pageview limits, I’m ecstatic to be able to leverage their beautiful fonts without the fear of a surprise triple-digit bill. Specifically, I’m using Proxima Nova (a classic) for most of the site and Zeitung Mono Pro (a new favorite) for accents and code samples. They pair wonderfully together, although the size of Zeitung requires some adjustment due to its tall x-height.

Zeitung Mono Pro has one of the nicest italic variants I’ve seen for a monospace font, at least outside of the excellent (and very expensive) Operator Mono.

Sparingly, I’m using anime.js to power some of the animations on the site. I normally prefer to work with native CSS animations to optimize performance, but anime really simplifies staggering and chaining animations. This seemed like a great opportunity to test drive the library!

The Future

I’m excited to write more in 2019. Having a place where I can publish my work just makes me want to do it even more!

Moving forward, I hope to keep the site up-to-date, tweak some components here and there, and generally keep experimenting with Stencil, Markdown, and Firebase.

Feel free to let me know what you think of the new site! 👉 @n_moore