For 2023 I decided to revamp my professional portfolio website to better focus on my core skillset and offerings, while also making a new home to showcase recent creative programming projects. My old website focused on my full-stack capabilities - and while extensive, it didn’t highlight some of the creative front end work that I enjoyed the most.

As a Vue developer, I decided to use Nuxt 3 (an extensive framework for Vue development) as the backbone of the project - which was just coming out of beta at the time. The improvements in performance, hot-reloading and SSR, along with ease-of-use features for working with Vue 3 made for a solid DX.

Early in the process I decided I wanted to use a WebGL hero section, so that I could have it be visually intriguing while also maintaining a consistently high frame rate. I started working on this using ShaderToy, to quickly visualize the flowing effect I was going for. After tinkering with different ideas for some time, I landed on something that felt like it would make for a solid new brand.

Once I had the hero visualization locked in, I started work within Adobe XD to mock-up every state of the website, including transition states and interactions, and responsive states for mobile.

I wanted the clean flowing WebGL element to feel like a facade, intending to break that forth wall in certain scenarios. When moving to either /about or /contact the WebGL zooms out to feel like just another component on the page, bounded by IDE-style line numbers and layered behind code snippets and technical iconography - as if you’re looking behind-the-scenes.

For the portfolio I wanted to show video snippets of the work in action if possible, considering so much of what I do involves motion. Each case study features a 30-second video of the project, which are delivered to the browser in both WebM and MP4 format, with only the selected project autoplaying to reduce CPU load.

The slider was built from scratch to be accessible by scroll wheel, touch, drag-and-drop (with inertial physics) and arrow keys. Reactive logic is used to ensure it works well and looks good at each breakpoint, all the way down to mobile devices.

A database within Notion makes editing content fast and predictable, and passes along user-defined sort order. I can literally write case studies with drag-and-drop multimedia as easily as if I were writing a blog post or an email.

The one downside with Notion is that the API performance wasn’t great when reading in multiple case studies in bulk - so I stood up my own API service at api.marchantweb.com on Heroku to act as a middleware layer. This approach protected my Notion API keys, cached content in-memory for millisecond-level responses, and served the content from my own domain to achieve all the benefits of the DNS layer.

To ensure that images and video load at lightning fast speeds, they are automatically downloaded from the Notion API and transcoded/resized by Cloudinary to fit the exact usage on the site. Those requests are then proxied through an API endpoint on the api.marchantweb.com domain. CloudFlare Cache Reserve and Tiered Cache help reduce round-trips to the origin (and ergo, to Cloudinary) and efficient long-term browser and edge caching policies ensure that media is served as close to the end user at possible.

Speaking of CloudFlare, Argo Smart Routing is deployed on the domain to further decrease loading times of all assets (including the Nuxt components requested by the client after page load), and other settings were fine-tuned to increase performance and security further. Considering the website features an extensive WebGL and high-resolution video experience, I couldn’t be happier with the fact that it loads instantly and doesn’t require a preloader.