August 1, 2023
10 min read
After a lot of work and refinement, this site's now live! Saying goodbye to my old site - a mix of stress, tears, and jQuery - feels great. This new site is fresh, modern, and much more stable, and I'm really happy with all I've learned while building it out.
First off, this project's fully open-source, and I spun off several libraries that I developed while building it! Most notably:
- , an Elixir library built for basic interactions with the Sanity API from an Elixir application
- , a util for easily conditionally applying transitions or changing their function on-the-fly
- , for easily creating dynamic layouts using MediaQueryListeners
- , a transformer for easy stripping of test selectors and attributes (e.g.
data-test-route="index") during production builds
My journey building this site started with rethinking the back-end - previously, my site was static, meaning I'd manually create new PHP pages for each route/post I wanted. Yuck. Time-consuming, janky, lots of duplicated code, just a bad solution.
For this project, I opted to use Sanity.io over a traditional SQL-like database for content storage, and it turned out to be a solid choice. As a headless CMS, it's well-tailored for document-centric data, like blogs and primarily-text-content, as this site is. Not much needs to happen in terms of updates or mutations, besides changing page view metrics, so I felt going with a SQL-like solution would've been over-complicated given my minimal requirements of primarily just fetching data. Plus, Sanity's Studio front-end, being a React app, offers a lot of flexibility in extension and customization and saves me from writing my own interface for DB CRUD operations. Here's how I have the UI configured currently:
On the front-end side of things, SvelteKit caught my attention right away and was the initial inspiration I had to rework this site in the first place.
Moving past the tech used, design was also something I spent considerable time on here. My initial sketches took shape in Figma, where I laid out the basic look and components I wanted. I wanted something both visually interesting, but simple enough that it wouldn't be distracting as some portfolio / blog sites I've seen are. TailwindCSS fit about 90% of what I needed to accomplish, and the rest (animations, scoped styles and the like) I used SCSS for.
However, looking forward, I'm considering Facebook's StyleX as a better alternative to Tailwind. It still allows for atomic construction of styles for elements, and isn't bound to any particular JS framework. But, instead of using element class names, it lets you construct 'style' objects within your JS code, then apply those to elements, merge them, and perform other operations. At compile-time, they're optimized to use as few unique classes and selectors as possible, greatly reducing stylesheet sizes. Definitely something I plan to keep my eye on as it matures more.
Another aspect of design I spent a while getting more familiar with was accessibility. It's always been a development topic I've steered away from, not knowing much about it, but for this project I dove in deeper and learned a ton. The site's far from perfect, but having tested it out with a screen reader and navigating around using purely the keyboard, I think it's a massive step-up from my previous website 😅
CI / CD Integration
This project also presented an opportunity to improve my experience in CI/CD services. I kept everything to a single Github monorepo, leveraging Github Actions and runners to build, push, then deploy on GCP and Netlify. This setup streamlined development and made it super simple to iterate over time, while integrating the unit & E2E tests I wrote along the way to ensure I don't accidentally break anything over time.
I hope over the next few months to find some spare time to improve on my writing skills, come up with some interesting blog posts or tutorials, and write about my side projects in more detail. Feel free to if you have any questions, and thanks for stopping by!