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
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.
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.
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!