Ryan Stivers

Portfolio v2

January 1, 2024
GIF showing the interactive text on the index page of my portfolio

The Project

Pretty simple. I hadn't built, updated, or maintained my portfolio since 2018. I needed a new one, using new-ish tech. I needed to be able to update it from a CMS. I wanted it to be clean and simple, but still get to have some fun. (Let's face it, Material Dark is nice and aesthetically pleasing, but its not fun). This would also serve as a, sort of, proof-of-concept for a Drupal->Next decoupled stack I'd like to implement elsewhere.

I'm also not well-versed in TypeScript, and it seems like that's important nowadays, so I might as well get started.

Tech Stack

  • Next.js
  • Drupal 10
  • Three.js + R3F
  • Tailwind CSS
  • Cloudflare Pages

Again, pretty straight forward. I was already pretty set on Drupal and Next, so I ran with it once I got a basic setup working. Three.js is what would be carrying the burden of making the project visually appealing. Tailwind is incredibly easy to set up and allowed for quick, efficient styling without worrying about extensive stylesheets. Ol' faithful Cloudflare for hosting, though in this case I could have just as easily, if not easier, used Vercel.

Notes

For the index page - I shamelessly took from, and repurposed, Ricardo Sanprieto's wonderful codepen example. I didn't need to reinvent the wheel. However, it would still require some work. His example is good for codepen and a particular version of Three, not so much for Next or React in general. It took some time, and a lot of trial and error, but I was able to get it all refactored to work with React Three Fiber and into a component which I am able to lazy load via Next's built in "Dynamic" loading.

Seriously, once the whole thing was shoved into a component (three-canvas), this is all it takes to lazy load. Love it.

const ThreeCanvas = dynamic(() => import("./three-canvas"),
    {
        ssr: false,
    }
)

I was almost content with where it was at, but you know how that goes. Now the remaining pages all have a particle effect available using dodecahedron geometry objects with a very intense point light to make them visible as they spin and drift through space. It's hidden by default, since its probably not the most accessible design ever, but its there in a button stuck in the bottom right corner. I'm also reluctant to give up glassmorphism, but that's neither here nor there...