constructed startin with 1x1mm square; last square is 144x144
Published on

Updated and Improved Website

Authors
  • avatar
    Name
    Curtis Mitchell
    Twitter

I've finally completed a major renovation of this website, after starting this work almost 2 years ago. Better late than never! 😅

I hit a few roadblocks in trying to incrementally update my existing website's frontend codebase from a standard React- and TypeScript-based app to a modern Next.js-based application, and more than once I stepped away from this work for a few months. Probably the most difficult challenges included trying to update several Material UI components between major versions of that library, including some API changes that made the site's responsive design break in sometimes subtle ways.

Ultimately I decided to rebuild the site using a blog template I found on the Next.js site. The template includes integrations with the Tailwind CSS framework and some easy configurations for email and site analytics. I also appreciate that the template has built-in support for both dark and light themes, and the usage of the great MDX tool makes writing new posts much easier. On the previous version of the site I was manually encoding the HTML and JSX around the text of each post! Additionally, Vercel and Next.js apps include great performance when it comes to things like page loading and accessibility, as verified by high scores using Google's Lighthouse developer tool, as well as an A+ SSL report from Qualys.

And speaking of making updates easier, I've migrated the cloud hosting platform for this site from DigitalOcean to Vercel (probably not too big of a surprise since Next.js is a Vercel-supported framework). In order to make updates to the previous version of the site, I would have to SSH into my DigitalOcean server, do a git pull on the website repository, and then rebuild new Docker images before launching the containers (I also used Docker's image registry to skip the git pull and image build steps). Using Vercel's serverless architecture and support in Github Actions makes writing a new post much easier; essentially I just need to create a new markdown file (and upload any associated images), and then push these to the deployment branch on Github. Greatly reducing the friction to updating the site will it make that much easier to write new content. One cost of this migration is the Django backend I hosted on DigitalOcean that allowed me to support APIs for my Japanese-English translation and Urdu numeral-recognition systems, but I may try to find a way to restore support for these in the future. As is, they were used very little and their large sizes meant I was paying more than $20 per month in cloud usage fees.

I don't mean for this to sound like a knock on DigitalOcean. On the contrary, it is a great platform that helped me learn some dev ops basics such as setting up and maintaining a Linux box for deploying a web application, as well as some more complicated processes such as configuring NGINX, Let's Encrypt, and other services to enable a modern web application. They also have some of the best online documentation and tutorials for setting up and maintaining cloud applications and dependencies. They'll continue to be one of my top choices for cloud providers in future projects. But it is hard to beat the convenience of a serverless architecture for a personal blog, and especially when that includes Vercel's integrations and support for a Next.js codebase hosted on Github that has a generous free tier for personal projects.

Lastly, I also took some time with this refactor to do a little branding. The golden ratio (φ) is one of my favorite mathematical constants, so I decided to make an SVG of the golden rectangle (a rectangle with side length proportions are equal to the golden ratio) based on an image on Wikimedia that's in the public domain. Relatedly, I thought to give the website a name rather than just “Curt-Mitch.com.” Playing off of the golden ratio idea, I thought “A Marvelous Balance” seemed like a good name. It feels like an elegant title for a website that contains writings on multiple interrelated topics.

In any case, I'm looking forward to writing interesting content about a variety of topics on a more consistent cadence. If you'd like to, check out the repository for this site here: https://github.com/curt-mitch/curt-mitch.com/.

Thank you for reading!