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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.