Oct 15, 2018

Robin Mastromarino - Portfolio Wins Site of the Month September

Robin Mastromarino - Portfolio Wins Site of the Month September

Congratulations to Robin Mastromarino and Patrick Heng for winning SOTM September for Robin Mastromarino - Portfolio. Thanks for all the votes, find the winner of the Pro Plan in our Directory at the end of the article, now let's here about the making of this surprise filled portfolio project.

The main purpose of this site is to show my latest productions because my previous portfolio was outdated and I needed to find a new position. Patrick Heng and I love working with each other, we try to make at least one website per year together. We had several ideas of animations and interactions to explore in WebGL, this portfolio was the perfect occasion to do that.

We had several ideas of animations and interactions to explore in WebGL, this portfolio was the perfect occasion to do that.

We spent a lot of time, in order to find something fun, cool and unexpected effect for the homepage. The home slider was the most important part for us, because it's the first thing the user can interact with on the site. The project took us around a month, working remotely. The design was made in Paris and the whole development in Los Angeles.

The Navigation

Home slider interaction

The home slider is for us the coolest and the most important part of the website. We wanted to surprise the users with an unexpected effect. The displacement and round edges deformations are based on the user’s scroll and drag speed so they can have fun with it. It is on this part of the site that we spent the most time, refining the animations and the interactions so they can have fun with it.

Case study

We have thought a lot about the fluidity of navigation. We have made the page transitions and the animations with this in mind. We also wanted the site to load fast without too much loading between pages. So we have made assets optimizations and we try to load the content at the right time. All the user’s scroll and drag animations are dynamic and depends on the velocity of the interaction so that the users have a real feeling of control over these animations.

About

Technologies

Quark framework

We are using Quark, a modular custom framework. It’s inspired by vue.js and the pages are rendered in PHP. It’s created by Fabien Motte and Patrick Heng (fm_ph). We are still working on it, and hope that we can release it soon.

GSAP

We are using GSAP, for us it’s the most powerful and easy to use animation library for websites.

THREE.JS

Almost all the site is in WebGL, we only have a few DOM elements so we used our favorite WebGL library Three.js.

MM-Packer

In order to optimize the loading time, we have minimized the number of http requests using mm-packer made by Merci-Michel. It’s a tool inspired by magipack that combines multiple files into one. Then we load the packs and unpack them in a webworker for better performance.

Building and optimizations tools

We used Gulp and Webpack for all the build tasks.
And use JPEG Mini and imageoptim to compress the images.

Credits

Robin Mastromarino, Interactive designer - @cherwoood
Patrick Heng, Creative developer - @Pat_Hg

Thanks for all the votes and tweets, @Momciloo please DM us to claim your prize!