While on co-op at Ronik, I worked on a team to develop a single-page static marketing website for Matisia, a Seattle-based business strategy and management consulting firm. We developed a fixed-width desktop and a mobile version. This was one of the most challenging front-end projects I had at Ronik because the website featured a looping background video, dozens of individual videos, scrolling animations, and atypical layouts.

Each section of the site has a different background video loop. Instead of loading as many videos as there are sections, we combined all sections into a single video. I set up the background video with Ronik's Drive-in video library, and used Waypoints to skip to and loop through different sections of the video depending on what section the user is in.

For individual videos, I used HTML5 Video tags and created custom video controls, buffers, and spinners. For performance reasons, I made it so that a video only starts loading once it is clicked on, and all other videos are unloaded when a video is played.

I also used Waypoints for navigation, and delayed the loading of images and video previews not within view using Lazyload.

The website won one Horizon Interactive Award and one W3 Award.