Joe Duncko's Blog

# Hello world

Welcome to my new website! Let’s talk about it a bit.

While this site might look almost exactly like my previous one, it is built completely differently.

The old site

The previous site was a hand-spun static site built on Skeleton CSS, a CSS framework that hasn’t been updated since 2014. Back then, mobile responsiveness was considered a feature, not a given.

The site was hosted on Github Pages, which is still just fine for static sites, assuming you don’t need to build anything.

Honestly, the site was holding up just fine. It was fast, mobile and desktop friendly, and I liked how it looked. However, there are a handful of reasons I wanted to do a rewrite:

  • Maintaining a decent amount of unstructured text that just lived in HTML was a pain
  • I wanted to add a blog
  • I wanted my resume to live in JSON, so I could potentially do cool stuff with it
  • I wanted a site that I could be proud to show off
  • I wanted the opportunity to play with technologies I knew I wouldn’t get to play with at work

The new site

This new site is written in Typescript, built with Next.js and Tailwind CSS, and hosted on Vercel.

Why Typescript

Typescript was an obvious choice since I wanted my resume to live in javascript objects, and I wanted those javascript objects to have an enforced structure. The hinting also made it super easy to use the resume data in components.

Why Next.js

Next.js is the most widely used React framework with Server Side Rendering (SSR), which is more or less necessary to get good SEO and use React at the same time.

Because I don’t pull in any data dynamically, I also tap into Next.js’s Static Generation feature, for an extra speed increase.

I could have used Remix if I wanted to be as hip and cool as possible, or Astro if I wanted to reduce the amount of code that is my responsibility (especially the blog), but I decided to go with the most mature project in the space instead.

It definitely helped that there’s an official Next.js w/ static generation + Typescript + Tailwind blog example, which I shamelessly used as a base.

In retrospect, I think I probably should have went with something that managed the blog logic and SEO stuff for me, but that’s frustration for future me.

Why Tailwind

Using Tailwind was a bit of a risk for me, as I have never used it before. I knew that I wanted the website to look very similar to my previous site with minimal work. Using a full-fledged React component framework seemed like overkill and would require a lot of de-styling to get the type of look I wanted.

This awesome article by the creator of Tailwind on separation of concerns in CSS was definitely the thing that convinced me to take the plunge.

Thankfully, Tailwind ended up being the perfect amount of flexibility, allowing me to quickly build out components and abstract styles and layout as I went using component composition.

Why Vercel

This is actually the first site I’ve hosted on Vercel. Typically I use Github Pages and Github Actions, but unfortunately that set up currently forces the developer to place production builds in git somewhere. I don’t like that, and I hope GitHub fixes that soon. Until then, Vercel seems to be an excellent host that takes care of build previews, CI, CD, and production builds automatically.

Conclusion

Overall, this site is definitely over-engineered, but building it was a great learning experience for me. Now to fill it with content…