Creating this Portfolio: A Journey

How it all started

When it came time to update my portfolio website, I decided to pay tribute to some of my favorite movies from the 80s and 90s that fall under the cyberpunk genre. Films like Ghost in the Shell (1995), The Matrix (1999), and Akira (1988) have always inspired me with their unique visual styles, so I incorporated elements like bold katakana lettering and a text decoding effect inspired by The Matrix's "Digital rain" into my site. I even included a nod to Ghost in the Shell on my 404 page as a little Easter egg for fans of the film. Overall, I wanted to create a website that captured the aesthetic and atmosphere of these classic cyberpunk movies while still being modern and functional.

The first iteration

I built my portfolio website while I was learning React, and I found that the best way to really understand a new technology is to use it to create something that you can actually use and share. To get up and running quickly, I used Create React App, which is a great tool for setting up a new React project without having to worry about configuration. In addition to React, I also utilized Styled Components, Tween.js, and React Transition Group to add some extra functionality and polish to the site. One of the fun things I experimented with was using Three.js to create some early effects, like the displacement sphere that can still be seen on the homepage. Overall, building my portfolio website was a great opportunity to learn and explore some new tools and technologies while creating something that I'm proud to share.

Since then, I've used this website as a playground for experimenting with new tech and techniques, so over time I've overhauled pretty much everything. A big change along the way was replacing images of my work in static mockups with real-time rendered interactive 3D devices using models.

Migrating to Next.js

When I first built my portfolio website using Create React App, I used a somewhat unreliable and unmaintained package to prerender the site as static HTML using Puppeteer. While this worked okay, I wanted a more robust solution for publishing articles using MDX. I had a partially developed version of this feature in my repository, but it never felt quite ready for release. I considered several options, including Gatsby, Vite, Parcel, and Remix, but ultimately decided that Next.js was the best fit for my needs. Next.js is a powerful framework that makes it easy to create server-rendered React applications, and it offers a lot of features that are particularly useful for creating websites with dynamic content. Overall, I'm glad I made the switch to Next.js, as it has allowed me to easily add new features to my site and publish my articles with confidence.

• The site is now based on Next.js. Is a much better fit than Create React App. For now, I'm just using it to create a static export, but maybe I'll add some server rendered stuff in the future.
• Styling is now vanilla CSS with postcss to add support for the future native CSS nesting and custom media queries features. I'm using CSS modules instead of BEM syntax to avoid style conflicts.
• For generating pages from .mdx files, I'm using Kent C Dodds' mdx-bundler. In combination with Next.js it makes generating pages from .mdx files really quick and simple.
• For animation I've moved from Tween.js and React Transition Group to just Framer Motion.
• 3D effects are still all using Three.js, but I've added three-stdlib as a better maintained replacement for modules from Three's examples.

Not all smooth sailing

For the most part, the migration was pretty straight-forward. The way I has structured the site with React Router lent itself well to conforming with Next.js's file-based routing, and I was already using postcss for styling. I did, however, encounter a couple of problems:

1. Route transitions

There was a bit of a conflict when it came to animated route transitions. Next.js will immediately yank out all of the styles for the previous page when navigating to a new one. This works great when you're not animating between pages because it cleans up any unused styles form hanging around. When you are animating the page transition though, all of a sudden the previous page becomes jarringly completely unstyled as it transitions out. This problem one of the most commented and reacted to issues on the Next.js repo, so hopefully there's a fix soon 🤞🏻

2. Scroll restoration

Somewhat related to the route transitions, I had to opt out of both Next.js's and the native browser's scroll restoration in order to prevent the browser immediately scrolling to the top when the page started transitioning out. Next.js also doesn't appear to handle shifting focus when linking to the id of an element within the page, so I added that in for accessibility.

I look forward to continuing to use this site as a playground, and it'll be interesting to compare the next iteration to where it is today.

In case you want to read more about Startups, Firebase, and Tech in general, feel free to follow me on my social channels: Instagram, Twitter, and LinkedIn.