Redesigning my website with Gatsby

The Past:

This website has been through several iterations since I created it in 2014. I was only a sophomore in high school at the time, so it was rife with questionable design decisions. For better or worse, it has been preserved by, but the archived copy only seems to work in Chrome.

Not satisfied with the way it turned out, only about a month later, rebuilt the site. I had grand plans of turning it into a blog, so I decided to build the new design with Jekyll since I was already using GitHub Pages for hosting. This round, the design turned out fairly well given my limited experience and still feels somewhat fresh. Due to my limited knowledge of Javascript at the time, I used WOW.js for subtle just-add-water animations. Formspree let me include a contact form on an otherwise static site.

Because I was satisfied with the end result, I ended up letting my website languish. The biggest changes since the first version have been updating the copyright year and removing links to websites I did as a freelancer because they no longer accurately represent my skill level.

The Present:

Needless to say, my site was overdue for an update. I no longer do freelance web design/marketing and it did not reflect my current knowledge. To be honest, my primary motivation was stemming the tide of email inquiries. I spent my winter break learning the modern React ecosystem (GraphQL, Apollo, Redux, React-Router, etc) and chose Gatsby as a gentle introduction to building things with the concepts that I've been learning. The gatsby-advanced-starter fork by @Kageetai on GitHub served as a perfect starting point for this site. Many hours in Sketch later, I had a design in mind and built the site you see today.

Gatsby sets itself apart from other static site generators with lightning fast load-times after the initial page load and powerful features I have yet to see anywhere else. For example, it can create traced images to create lightweight SVG placeholders while the real asset loads. Gatsby comes with a great environment that automates many pain points and expedites development.

Currently, it's far from finished. I just added the into animations on the main page, using the react-anime module, which wraps the crazy cool engine Anime.JS. Couple that with a few simple :hover animations, and the web page feels much more interactive than it did just yesterday.

I'm deploying my website to Netlify, which is a quantum leap forward from GitHub Pages, while offering the same level of convenience and performance. Netlify automatically rebuilds and deploys my website every time I push my commits. It lets me preview different versions of the site and rollback to any previous versions without changing the code on my repo. It handles forms for me, without any need to use a service like Formspree on my old site. Most importantly, I finally have SSL, which is a must for any website in 2018.