J’aimerais vous présenter ici quelques points clés du développement de ce site. Ceux-ci sont donc un peu plus détaillés que sur les autres pages de projets mais restent accessibles pour le plus grand nombre. Dans le cas contraire, n’hésitez pas à parcourir mes autres projets !
Pour les plus avertis, n’hésitez pas à me contacter pour avoir plus de détails techniques sur chacun des points abordés sur cette page !
Ce site a été developpé autour de deux frameworks javascript : Express et Nuxt. La partie frontend étant complètement découplée de la partie backend, le site reste cependant modulable pour de futures mises à jour. Pourquoi ne pas changer la partie frontend pour React ou Angular par exemple ? Ou pourquoi ne pas changer la partie backend pour Koa ou Symfony ?
Le site est ce que l’on appelle une “Single Page Application”. Comme son nom l’indique, celui-ci ne contient en fait qu’une seule page où chaque élément apparait ou disparait à la demande, ce qui donne cette impression de parcourir plusieurs pages. C’est en grande partie grâce à ce processus que ce site bénéficie d’une grande réactivité.
Une Single Page Application c’est bien, mais une Single Page Application rendue côté serveur c’est mieux ! Côté référencement, le site est ainsi pleinement optimisé vis à vis des moteurs de recherche. Et, côté performances, le temps de rendu initial du site se voit diminué.
Une Single Page Application rendue côté serveur c’est mieux mais une Progressive Web Application c’est beaucoup plus mieux ! Rien de tel pour bénéficier, entre autre, d’une expérience utilisateur inégalée. Et tout cela grâce à toutes les possibilités qu’offre le Javascript moderne !
J’aime le blanc, j’aime les grands espaces. L’idée était surtout d’allier l’essentiel : mes projets, mes compétences, mon parcours. Que dire d’autre ? Ah oui, toutes les pages que vous parcourez sur ce site ont été designées avec Sketch.
Quels sont les éléments qui prennent le plus de temps à charger sur un site web ? Les images. Il était donc primordial pour moi d’optimiser leur chargement pour conserver toute la vélocité de ce site.
Afin de ne pas charger toutes les images d’une page d’un seul coup, chacune d’entre-elles est chargée à la demande, et ce, généralement un peu avant que celles-ci n’apparaissent à l’écran. Les pages du site s’affichent ainsi plus rapidement et les utilisateurs mobiles, quant à eux, ne dépensent pas leur data inutilement pour des images qu’ils ne verront peut être pas lors de leur navigation.
En attendant le chargement de l’image, une première version très
allégée de celle-ci est d’abord chargée et affichée sur la page. Pour
créer cette vignette, j’ai choisi de vectoriser et de transformer
chaque image en un assemblage de plus ou moins 250 triangles de
couleurs.
Vous bénéficiez ainsi d’une meilleure expérience utilisateur lors de
votre navigation.
Pour les plus curieux, les deux versions de l’image sont chargées en parallèle pour des performances optimales.
Vous est-il déjà arrivé de commencer la lecture d’un article sur un site, et puis, au bout de quelques secondes, les images du site se chargent et viennent se placer dans le document ? Le texte que vous lisiez a brusquement changé de place et il vous faut maintenant le retrouver… Je vous rassure, sur ce site, ça n’arrivera pas ! Au chargement d’une page, l’espace réservé à une image est déjà pris en compte par le site. Vous ne perdrez pas le fil de votre lecture ici !
Pourquoi charger une image ayant une largeur de 2000px pour votre smarpthone de 480px de large ? Sur ce site, chaque image est parfaitement adaptée à la taille de votre écran. Encore une fois, ceci dans le seul but de rendre le site plus rapide et de vous faire économiser de la data.
Pour une seule image, jusqu’à 6 versions différentes peuvent être présentes et chargées à la demande !
Les images ont été développées autour d’une propriété css qui n’est pas forcément supportée par votre navigateur : object-fit. Dans ce cas, l’image est transformée en “background”. Rien ne change pour vous et le design du site reste préservé.
Chacune des vidéos présentes sur le site bénéficie de la plupart des optimisations apportées sur les images : lazy-loading, vignettes etc.
J’ai choisi la librairie GSAP pour la plupart des animations présentes sur ce site : celles présentes en page d’accueil et celles se déroulant à chaque transition de pages.
Afin d’améliorer votre expérience utilisateur, l’animation en page d’accueil ne se déroule complètement qu’une seule fois. Les autres fois, celle-ci sera bien plus courte. Pour ce faire, dès que vous aurez vu l’animation la première fois, un cookie est installé dans votre navigateur. Il s’agit d’ailleurs de l’unique cookie présent sur ce site !
Celles-ci permettent de donner au site un rendu plus réactif et un comportement se rapprochant d’une application mobile.
Vous avez un projet en tête ? Super ! Vous souhaitez m’en faire part, mais vous ne savez pas par où commencer ? J’ai préparé, pour vous, un planificateur de projets. Remplissez chaque champ de cet outil et hop ! Le premier contact est établi !
Tous les effets parallax que vous voyez ici sont rendus par un module Vue.js codé spécifiquement pour le site. Celui-ci a été développé avec un seul objectif en tête : animer chacun des éléments à 60 fps constamment.
Pour atteindre cet objectif, le composant ne prend en charge que 4 valeurs css : transform, opacity, scale, rotate. Pourquoi ? Car ce sont des propriétés qui sont facilement animées par vos navigateurs internet.
Ce composant utilise l’API RequestAnimationFrame pour effectuer ses animations. Aucun écouteur d’évènement basé sur le scroll n’est attaché sur le module. L’animation est ainsi synchronisée à la fréquence de rafraichissement de votre navigateur internet et on obtient les meilleures performances possibles. Aussi, si vous changez d’onglet lors de navigation, une animation lancée avec RequestAnimationFrame s’arrête. Pratique pour économiser la batterie de votre smartphone !
Vous voyez une raison, vous, d’animer un élément qui ne se trouve pas à l’écran ? Moi non plus. Pour obtenir un niveau de performance optimal, le composant n’anime que les éléments présents à l’écran.
Ravi de voir que toutes ces années de formations et d’expériences ont servi à quelque chose ! Je serais heureux de contribuer à votre prochain projet et d’y apporter toute ma passion et toute mon expertise pour le mener à bien.
Je pourrais parler développement web et web design pendant des heures ! si vous désirez en savoir plus sur ce site ou sur le développement web en général. Je suis toujours ravi de partager mon expérience et mes idées !