Responses by Marco Sors.
Design core: The style of the site evokes the dawn of the programming era, the ’70s. Considering that my solo consultant firm has got more than ten years under its belt, I wanted to merge a message of “seniority” and experience with one of technological awareness, represented by the latest front-end techniques used in the development of the site. The purpose felt somehow similar to what Netflix did in Black Mirror's episode “Bandersnatch” with its retro-gaming aesthetics from the ’80s and an experimental narrative engine.
Favorite details: The pictures. I found them on Flickr Commons under the Creative Commons license, and I think they are solid gold. Flickr Commons is full of valuable photos; you can explore it to time travel with your laptop.
Challenges: Combining one parallax with three canvases, many images, a lot of APNGs and 2-D transitions was very challenging. After minification, concatenation, optimization and compression, I was able to reach the desired result with the right scroll fluidity.
I learned that CSS filters don't still play well with every browser. For example, applying the sepia filter to all images caused severe performance issues in Firefox.
Anything else? The combination of CSS masks, APNGs and CSS transforms used to animate elements inside the pictures. Each picture element is composed of five layers: the background color, the image, two animated PNGs, the CSS Mask and the tooltip layer.