#Digital rain overlay update

This works great when you're not animating between pages because it cleans up any unused styles form hanging around. Next.js will immediately yank out all of the styles for the previous page when navigating to a new one. There was a bit of a conflict when it came to animated route transitions. I did, however, encounter a couple of problems: 1. 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. 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.įor the most part, the migration was pretty straight-forward.For animation I've moved from Tween.js and React Transition Group to just Framer Motion.In combination with Next.js it makes generating pages from. mdx files, I'm using Kent C Dodds' mdx-bundler.

I'm using CSS modules instead of BEM syntax to avoid style conflicts.

Styling is now vanilla CSS with postcss to add support for the future native CSS nesting and custom media queries features.

For now I'm just using it to create a static export, but maybe I'll add some server rendered stuff in the future. Is a much better fit than Create React App. I looked at a few options like Gatsby, Vite, and Parcel, and Remix, but Next.js stood out as the most suited to my needs. I had a half baked version of this lying dormant in the repo, but it never felt good enough to publish. This worked okay for the most part, but I wanted a more robust solution for posting articles (like this one you're reading) using MDX. With Create React App I was using a somewhat janky and unmaintained package to prerender the site as static HTML in Puppeteer. A big change along the way was replacing images of my work in static mockups with real-time rendered interactive 3D devices using models I created for the Clay Mockups 3D Figma plugin. 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. I was also playing with some early Three.js effects like the displacement sphere that still resides on the homepage. On top of that, I was using Styled Components, Tween.js, and React Transition Group. It served me well in getting things up and running without having to fuss about with config. The no-brainer choice at the time was Create React App. I've found the best way to learn is by actually making something that you intend to use and ship. I was learning React when I first built this website, and while overkill for a personal portfolio site, it was a great opportunity to learn and experiment with learning it. There's even a nod to Ghost in the Shell on my 404 page. That's where I borrowed few visual motifs like the bold katakana lettering on the homepage and the text decoding effect as a homage to the Matrix's 'Digital rain' effect, which was itself inspired by Ghost in the Shell's opening credits. The genre contains some of my favorite movies like Ghost in the Shell (1995), The Matrix (1999), and Akira (1988). I thought I'd steer away from current trends and build a site that tapped into the 80s and 90s Cyberpunk aesthetic.

#Digital rain overlay update

Back in 2018 I needed to update my portfolio site (as designers are wont to do).