Un projet centré sur la technique
Pour ce projet réalisé sur deux semaines, les choix de design ont émergé des échanges en continu avec le développeur qui avait à la fois besoin de mettre en avant ses qualités techniques et sa maîtrise de l’intégration web, tout en allant à l’essentiel dans le contenu et sans oublier d’exprimer sa personnalité.
Nos pistes: la versatilité, le responsive, l’optimisation des assets. La ligne (de code ou de dessin) qui permet d’écrire, décrire, départager, jauger…
Des éléments SVG
Le contenu, au premier plan, est constitué de textes et de dessins au trait. Les formes géométriques se dessinent à l’écran grâce à l’animation de leurs propriétés stroke. Leur palette de couleur dans la section Compétences représente ensuite la catégorie dans la section Projets.
Chaque compétence flotte au bout d’une ligne dont la longueur représente sa maîtrise, permettant ainsi de comparer visuellement les domaines de prédilection du développeur. Une animation légère suggère la notion mouvante d’un savoir toujours en évolution, en progression.
Un arrière-plan multi-calques
On retrouve à l’arrière-plan les mêmes dessins que dans le contenu, mais en version 3D, sans contour. Quatre motifs répétables en nid d’abeille d’échelle identique mais utilisant l’hexagone pour représenter des volumes différents se superposent et deviennent visibles en fonction de la section grâce à la propriété background-attachment:fixed.
Des dégradés d’opacités variables sur toute la hauteur du contenu permettent à la fois de mettre les motifs en valeur et de les masquer pour laisser place à la lisibilité dans les zones accueillant plus de contenu.
Robin signe son travail dans le footer de son site où ses 3 axes majeurs de compétences s’assemblent en une seule composition animée.