This is my current portfolio, with the intend to showcase my latest design and coding work, plus how these 2 capabilities support my daily work as project manager.

The source code is available on my GitHub.

    1. ThreeJS & WebGL

    2. VueJS for reactivity

    3. TweenJS for animations

    4. Webpack 4, SASS, Gulp

Graphical elements and mechanisms indeed largely inspired by video games. Menus, controls, interactions, tutorials...

Since my website is heavy and requires many JS libraries, I spent lot of time optimizing in order to reduce download time and latency. I ran many performance tests, with the Chrome DevTool (CSS and JS Coverage), Lighthouse, Stat.js and many other tools.

Performance was a big concern, on 2 different levels:

    1. Page speed: loading the assets

    2. Animation smoothness and reactivity

First Meaningful Paint & Time to Interactive are two important metrics that measure how quickly users can interact with content.

In addition to regular CSS and JS files (respectively with SASS and JS bundle), I embedded Critical CSS and early JS script (in <style> and <script> tags), to load and display enough content from the very first bits of data - without waiting for the full collection of assets to get loaded.

JS critical path: the main JS scripts are bundled; but there's also a smaller script directly embedded in the HTML file for animating small parts while the main script is still loading.

CSS critical path to display relevant and readable content as soon as the first bits load - without waiting for all the assets to load.

Moreover, thanks to VueJS, projects images are loaded on-demand (when opening up a project page)

I used SVGstore to concat all SVG as one big file (≈34 SVG for 71KB), allowing then to display them with <symbol> elements and reducing dozens of HTTP requests.

Webpack resolves import and requires, minifies and eliminates dead-code ("tree shaking").

I set up an image pipeline with Gulp to convert images to JP2000 and Webp (next-gen compression formats), and serving different sizes depending on user's screen size.

Finally, I set up the cache control and gzip compression to reduce new and unnecessary reloads.

I started with a different concept although it was based on ThreeJS. It was a 3D scene; a metaphor between frontend/banckend and a computer (front and back of the monitor). I eventually focused on projects and timeline, easier to navigate with.

Thanks for watching. See it in action at richebois.fr/