Quel est le soucis avec le carré Contact en haut à droite ?

Y’a pas de gros enjeu sur ce site, alors autant s’amuser tant qu’on y est, histoire de rendre l’expérience plus mémorable.

Passez la souris 4 fois sur le bouton Contact en haut à droite, sans cliquer

Si vous ne voyez pas ce que c’est, mais que vous êtes sur un Ordinateur, essayez de passer la souris plusieurs fois sur le carré Contact en haut à droite de la page. Désolé pour mes très cheres visiteurs sur mobiles, tablettes et téléphones. Cette fonctionnalité n’est disponible qu’avec une souris qui puisse déclanger l’évenement “hover”. Pas de souris, pas d’animation rigolote 😔.

Pour des raisons d’accessibilité, si vous avez désactivé les animations des sites dans les options de votre système ou de votre navigateur, vous n’aurez aucune animation, cette page ne contient pas d’autre animation, hormis les simples transitions de couleurs en cas de hover (liens, boutons de navigation, icones de tags)

D’où m’est venu l’idée

Pour construire ce nouveau portfolio, il me fallait reprendre de zéro, et me poser les bonnes question :

• Pourquoi créer un portfolio ?
• A qui s’adresse-t-il ?
• Qu’est-ce que ses gens chercherais donc ?
• Comment me démarquer ?
• Comme tous les canaux/réseaux, quels sont les codes ?

Certaines de ces question sont assez évidentes:

Pourquoi un portfolio ? Pour rentrer plus en détails dans le travail que j’ai réalisé, et travailler sur ma visibilité personnel/mon personal branding. Pour qui ? Recruteurs, Développeurs, Futur paternaires commerciaux, possibles clients currieux, ou prospects.

Qu’est-ce qu’il chercherais ? pour chacun ça dépendras de leurs objectifs,

On ne va plus jamais par hasard sur les sites perso/blog et portfolio, ils faut donc s’adapter et savoir diriger les utilisateurs vers ce qu’ils recherchent.

Ce n’est pas simple à faire sans utilisateurs, alors en soit, il me faudra que je pense vous le demander, en fonction de vos profils

• un RH pourrait vouloir sauter sur la page /about-me;
• un dev pourrait scroller mes projets, et mes retours d’XP sur ces derniers;
• un prospect pourrait vouloir voir mes réalisations et vitrines disponibles;
• etc

Comment me démarquer ?

C’est la que ça devient compliqué, pour ce faire, il a fallu être franc et regarder l’existant dans le monde de l’informatique.

Concernant les portfolios frontend, beaucoup font de l’extravagant, des animations qui partent dans tous les sens, des custom cursor, des paillettes pleins les yeux… Ont ils des résultats pour autant ? Pourrait-on émmettre l’hypothèse que ces portfolio sont trop animé pour mettre en avant les compétences ? Que les utilisateurs vont juste fuir car trop s’animes ? Peut être regarder des personnes avec plus de reconnaissances ?

Parmis les developpeurs plus échelonnées, j’observe alors des CV plus sobres et plus orientés résultat, orientés business et SEO/UX de qualité, l’important pour ces gens c’est avant tout de faire un hub de leur comptes de réseaux, ensuite certains ont deployé des services en lignes comme un repo git self-hosted afin de mettre en avant certaines de leurs créations sans les contraintes liées à l’usage de GitHub.

Je pense qu’être un bon developpeur frontend, ne se démontre pas en transformant un site en feu d’artifice, mais en restant factuel sobre, et en accord avec une UX réfléchie, et adaptée au visiteurs.

Ici les utilisateurs veulent probablement plus quelque chose d’explorable. D’ou l’idée d’etre pragmatique dans le design global, mais je ne voulais pas non plus paraître comme le dev back-end qui a subi le besoin d’un portfolio, donc je pourrais m’amuser.

Les codes des portfolio ?

Voici ce que les portfolio ont comme pratiques répandues, et stéréotypées:

• une page ‘à propos’ (about page): elle doit représenter l’expérience et les compétences d’un professionnel, au même titre qu’un CV, mais avec un format plus libre, autant se l’approprier ?
• Un portfolio parles d’experiences personnelles: Comme dans un CV, mais ici, aucune limite de caractères ou de nombre de page, tout les moyens sont bon pour montrer les compétences aquises, on peut agir en plus sourcer, illustrer, chiffrer plus en détail, vraiment Contextualiser, et ça bien plus qu’en entretient ou dans une seule page.
• Un portfolio permet de mettre en réseau les comptes sociaux et les créations: On va plutôt chercher à optimiser la navigation entre les sujets, ce qui permettra alors d’adapter la densité d’informations souhaitée aux différentes personnes, a eux de voir jusqu’à où recherche à besoin d’aller.
• Affirmer sa présence humaine dans le monde de l’IA: en 2022 est sortie un article de Google adressé au professionnel du référencement en ligne et SEO, présentant les intention de Google pour présenter leur souhaits à mettre en avant les contenus dont l’autorité est humaine et vérifiable.

Ici un des sujets phare pour les visiteurs, c’est de comprendre qui l’on est, alors autant personnaliser, et montrer qui l’ont est en laissant sa créativité s’exprimer ?

Le fameux bouton Contact

Bon, vous avez pu jouer un peu avec j’espère ?

Le bouton fonctionne de la façon suivante

• En mode “calme”:
  • le bouton compte le nombre de fois que vous passez la souris au-dessus, pas besoin de cliquer juste hover;
  • à chaque hover quand le bouton est encore “calme” on fait une animation classique de grow;
  • une fois que le compteur atteint 3 => passage en mode “boudeur”;
  • si le bouton n’as pas été hover pendant 10 secondes, le compte est remis à zero;
• En mode “boudeur”:
  • le bouton se grise, on diminue ça taille un peu;
  • on ne souhaite pas pour autant empecher les utilisateurs de faire l’action souhaité, le bouton est toujours capable de faire l’interaction souhaitée, même si il ne semble pas vouloir;
  • à chaque hover, le bouton va faire une autre animation, l’apparition et la disparition de l’emoji;
  • une fois le mode boudeur à atteint les 6 secondes activé, alors on repasse en mode “calme”;

Quel effet cela peut avoir

• Avant tout, c’est pour rendre l’interaction, et donc le passage sur le site, mémorable. On se souviendra plus facilement d’un bouton qui à décider de “refuser” de fonctionner.
• Ça met en avant mes capacités frontend concernant des fonctionnalité, ainsi que ma façon d’approcher certains sujets, on comprendra que j’aime bien explorer, experimenter, et décortiquer divers sujets.
• Certains penserais que je suis comme ça en vrai ? 🥹 Vraiment ? j’ai surtout trouver cette idée amusante, et sans trop d’arriere pensé je l’ai implémenté. Je doute que ça soit l’image que ça renvois…

Le developpement de la fonctionnalité ne m’a pris que 2 heures, j’ai utilisé Vue, Tailwind, et GSAP. Si vous souhaitez avoir accès au code source, vous pouvez prendre contacte, et me le demander par mail, sans vexer le bouton. Sinon vous pouvez aussi passer par le bas de page, si vous n’avez vraiment pas envie de vous y frotter.

Mais bon, ça reste qu’un bouton soupe-au-lait 😅, rien de plus.

Conclusion

Cette animation permet de rendre chaque page un minimum plus dynamique, les techniques utilisés permettent de mettre en avant mes capacités en tant que développeur frontend. Mais avant tout c’était une idée qui m’était venu comme ça… Un peu comme un Easter Egg ?