Case Study

Initially, the purpose of this site was to house a Gumroad overlay for an upcoming documentary. I received a copy of the marketing, the desired typography, and the release date. Matching the style - with responsive CSS - and scaffolding out the landing went smoothly and, after requesting additional content, I made an about page that combined a synopsis and the film credits, and a contact page including 3D branding by leveraging p5js's webGL capabilities. To make the site more dynamic, I included a JS countdown timer and after a successful launch, a press page was added. It was simple, static, and can be viewed here.

Sweat The Small Stuff

As time went on, new press pieces, reviews, and award nominations started to pile passed the point of me being able to gleefully hard-code the additions and rebuild the Netlify-hosted site. While the initial scope of the project was expanding in real-time, the technical debt of not using a CMS could no longer be ignored. So I built out a headless branded content studio, hooked up a Svelte frontend, made everything everywhere a component, added webhooks to automate publishing, imported the style sheet, and basked in all of the diverted responsibility.

In truth, I believe in this project deeply. The film was a gut-punch to the fossil fuel industry, viscerally demonstrating the economic, social, and environmental devastation caused by unfettered resource extraction in rural West Virginia, although it felt more like a blueprint for affected communities worldwide. It was a heartfelt story that highlighted the human effort to right these corporate wrongs and I was compelled to help amplify the spotlight. It was obvious to me that there was more story to tell, so I implemented a blog and overhauled the design to keep users engaged longer than the film's running time. It was a lot of additional work, but the cause, and result, were more than worth the effort.

Tech

html - css - javascript - svelte - sapper - sanity.io - p5js - netlify - git