Mondo Robot

2015 – 2019

Mondo Robot is a small digital service agency based in Boulder, CO, offering everything from brand redesigns to developed websites and applications for clients such as Coachella, Retül, and the Michael J. Fox Foundation. As both a full-time and contractual creative developer for MR, I’ve worked on the front-end for many projects, which you’ll find below.

MondoRobot.com (2019)

Page Transition Animations

For the redesign of their company website, I was tasked with working together with in-house designers to research and code dynamic page and menu transitions. Using SVG filters such as feTurbulence and feDisplacementMap in tandem with CSS Masks, I was able to take a vision exported from AfterEffects and convert it into functional Vue code.

This demo video shows a few effects in action: blurring the hero video, using displacement and turbulence to get a wavy effect, and a masked interstitial image when opening the global navigation. The interstitial image of the Flatirons rock formation was created using an animated CSS mask and clever use of CSS property transitions.

Here, the feTurbulence and feDisplacement filters are seen applied to the global navigation page links, including an exit mask animation when navigating to another page.

LiquidDeath.com (2019)

Liquid Death Mountain Water is an extreme canned water brand. I was brought on to create the e-commerce site and “Sell Your Soul” promo functionality. You can read more about the project here.

Shopify was used for the e-commerce piece of the site, paired with custom code to extend functionality for both end users and those who manage the site’s back end.

Custom code was included in the site for the users to sell their soul for a free can of water. My duties included building out the functionality for users to digitally sign a legally-binding “soul contract.”

MondoRobot.com (2015)

For their previous site, I was tasked with creating an interesting 'page fold' transition animation between pages. Using CSS3 transforms (and a bit of math), I was able to create the effect shown above. After building a prototype, I was able to integrate the effect into the site's existing CoffeeScript/Angular codebase.

WhistlerBlackcomb.com (2015)

Mondo Robot was given the opportunity to revamp the iconic ski resort’s outdated website, in which I was given responsibility over the entire front-end codebase. Using Sitecore as a back end, and jQuery in the front end (it was 2015), we developed an entirely new site consisting of CMS-driven pages and API-driven data visualizations for trail status and weather conditions.

Visit an archived copy of the site here.

Homepage as it existed when initially launched.

The M.A.X. Ski Pass (2015)

My first project with Mondo Robot! The M.A.X. Ski Pass offered customers a season ski pass with access to 20+ mountains across North America. Though essentially a single-page site, I was able to integrate some interesting animations and interactions, which was pretty exciting for a junior dev such as myself at the time.

Visit an archived copy of the site here.

An example of an animation I was able to put into the site. This sort of ‘fun’ interaction would become a staple of my front-end development.