A New Portfolio Post

Recently, I decided to rebuild my portfolio website using Next.js and Tailwind CSS. In this post, I'll compare the technologies I used in my old portfolio with those in my new one, and explain why I made the switch.

My Old Portfolio

I built my old portfolio using:

• Deno: A modern TypeScript first runtime that uses V8 and is built in Rust.
• Lume: Deno's version of Gatsby. A static site generator that makes it easy to build fast, modern websites.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
• DaisyUI: A Tailwind CSS component library that adds a set of pre-designed components to Tailwind CSS.

I started working on this website last year at a time when I was fed up with npm bloat and the ballooning complexity of modern frameworks. Deno simplifies package management and requires no node_modules folder, which was a breath of fresh air. At this time, Next.js had just introduced their app directory pattern and the adoption of React Server Components was mixed. There had to be an easier way.

From Complexity to Simplicity and Back

Deno and Lume offered a simpler, more streamlined development experience (DX). But this came with a price. The Deno ecosystem was nascent (it still is). While Deno doesn't require the use of node_modules, use of node_modules is still unavoidable. Many packages I wanted to use were not yet on the Javascript Registry (JSR) so I needed to import them from npm anyway.

Lume also had its limitations. All of the user interactions and animations were done with vanilla JavaScript. While this was a good exercise in the basics, it hindered the DX.

My New Portfolio

I rebuilt my portfolio using:

• Next.js: The React fullstack framework.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
• Framer Motion: A production-ready motion library for React.

Why Next.js

Next.js has become the de facto standard for building React applications. With v15 the API and documentation have become more stable and mature. The DX is excellent and deployment is a breeze. Server components make it easy to determine what code runs on the server and what runs on the client.

In Conclusion

Portfolio websites are a great way to experiment with web development technologies. My last portfolio was a great learning experience in a more basic web stack. My current one is bleeding-edge tech but perhaps more bloated than necessary. I'm in a different headspace when it comes to technology choices. Now I prioritize DX and productivity. The end result is the most important thing.