Built With

Last Updated:

Back in the day, johnzanussi.com used to be the home of my Tumblr blog. Then, in 2014, I switched it to a single splash page with "Full site coming soon" in the footer. Well, almost eight years later, I've finally built a more elaborate website for myself. Below, I'll document some of my processes, the tools, libraries, and services I used, and what I would like to add in the future.

All the code that powers this website is available on my GitHub.

Screen shot of johnzanussi.com from 2008
Screen shot of johnzanussi.com from 2021

Requirements

  • Uses technology I'm mostly familar with
  • Easy to maintain
  • Easy to deploy
  • Performant
  • Accessible
  • Code that is sharable on GitHub

Tools

  • MacBook Pro
  • Sublime Text
  • Terminal

Libraries

Next.js

Next.js has quickly become my go-to for spinning up project sites. It's easy to use, comes with a good amount of starter projects, and deploys easily.

React

Your only option for Next.js is React, which is fine by me since it's what I'm most comfortable with. I've been writing React regularly since 2016.

Bootstrap

For this project and another personal project, I gave Tailwind a chance. Tailwind is great if you're working in an established design system with a custom component library and just need utility classes. Bootstrap shines compared to Tailwind in the vast array of out-of-the-box components.

Font Awesome

Font Awesome gets an honorable mention here as I used a handful of their icons throughout my site.

A full list of packages can be found in package.json

Services

Vercel

I didn't know much about Vercel until I was ready to deploy my first Next.js project. Out of everything here, I'm most impressed with Vercel. I've never experienced a more seamless out-of-the-box solution for deploying static websites. Best of all, it's free for personal projects.

Fiverr

Since I’m not the best at articulating my thoughts into words, I hired someone on Fiverr to proofread most of these site pages. I’ve used Fiverr in the past for various tasks and have had nothing but great experiences.

Plausible

I'm self hosting Plausible at analytics.johnzanussi.com to collect traffic data from this site. I followed this amazing guide to get the self hosted instance installed and running on DigitalOcean. I'm also using the next-plausible package to send tracking data to the self hosted instance.

To Do

  • Add Lighthouse results to this page
  • Pull YouTube channel names, images, and notification setting from YouTube API
  • Install PropTypes and add prop definitions Convert to TypeScript
  • ✅ Install and configure Prettier 493a49a
  • Create light theme and theme switcher
  • Create a way to embed Thingiverse things
  • Add pagination for Posts page
  • ✅ Create a "More posts" component for the bottom of individual posts 6844b46
  • Add comments on posts