Jon Brundage Jr.

This project was an overhaul of an existing prototype built in React and required the addition of Auth0 for user management and authentication. I had to learn how to fire event hooks from Auth0 to keep our user profile data in sync with our Sanity instance.

The original prototype was using Airtable for a backend which isn't scalable in terms of network calls, so I switched it to Sanity for a more robust solution and a client-friendly interface.

Since the site was already established in terms of styling, I made use the existing Material UI components to scale the design system of the site.

For this project, the client wanted us to build a custom visualization, and then incoporate it into their existing Drupal site. I chose Svelte for the build because it is a lightweight framework that would have minimal build size.

We also used Google Sheets as a backend, with an AWS Lambda function to pull the data from the sheet and write out a JSON file in a S3 bucket that the Svelte app could read.

The coolest part of this build was using D3's force simulation to create geometric representations of the world's GDP and population over time and how opinions have changed on China over the last 25 years.

When my CEO asked me to build a new website for our company, I was excited to take on the challenge and honored to be trusted with it.

I wanted to make the site as lean as possible to avoid unnecessary code bloat and dependencies, so I built all the UI components from scratch, with accessibility and performance in mind.

I also wanted to make the site as fast as possible, so I used Nuxt 3's static site generation feature to pre-render all the pages and improve SEO.

To streamline deployment, we use Netlify as our hosting provider. Integrating our repo with Netlify allows us to automatically and easily deploy the site whenever content updates are needed.

This project was for the Bloomberg NEF 2022 conference, which featured multiple live installations of 3D data visualizations.

I was responsible for two animations, one projecting how much Co2 emissions will be captured globally by 2070, and the second analzying how much countries have spent on tech venture capitalism over the last 14 years.

I used a phsyics library in conjunction with Three.js to simulate carbon particles floating up into a container to show how much a given method will capture.

For the VC visualization, I used GSAP to animate distinct towers of six by six bricks falling per country per grid.

The result were two stunning visualizations that made abstract data come to life in a way that was engaging and informative.

This was my first project with Nuxt 3. It was a complete rebuild of a prototype built in Vue 2 so there was quite a challenge in terms of rethinking the architecture.

The project called for site translation, which required setting up localization not only in the frontend, but also in our Sanity instance for images and videos.

Ultimately, the static site generation of NUXT 3 was a great fit for this project as it allowed us to create a fast and SEO-friendly site that could be easily deployed to Firebase.

The project was an update to an on-going report we helped build for the World Bank.

The site uses multiple charts built in D3, and I had to build two new one for this release.

The site relies on Gatsby's static site generation to improve performance and SEO, as well as i18next for localization.