Terre à l’horizon — TFE

Elie Durieux
4 min readApr 28, 2021
Avancement actuel de mon portfolio génératif

Ce que j’ai fait

Après avoir finalisé le visuel, je me suis attaqué à l’intégration du site. Travaillant en mobile-first, j’ai commencé par la version mobile.

Pour la version desktop, j’ai utilisé des mixins, des medias queries avec afin d’avoir un site responsive.

Exemple de quelques règles CSS

Un portfolio, c’est l’endroit parfait pour montrer ses travaux, ses projets. Ayant déjà quelques projets et pour réfléchir aux prochains projets que j’ajouterais au fur et à mesure, j’ai construit cette partie du site avec un fichier JSON.

Un tableau d’objets JSON

Chaque élément du tableau est un projet. Il y figure son prénom, son lien, sa couleur.

Enfin, avec un fetch qui récupère le fichier JSON ainsi qu’une boucle, chaque entrée génère un bouton en HTML comportant son nom, son lien, etc. Actuellement, le résultat donne ceci.

Chaque projets est un bouton

Depuis le début du projet, je souhaite qu’il y ait aussi des animations, des interactions. Les dernières semaines, j’ai commencé à réaliser une interaction avec le fonds. Étant donné que le visuel de mon site a complètement changé, j’ai décidé de ne pas reprendre ceci. À la place, j’ai ajouté un effet de parallax sur le défilement de la page avec GSAP et le plugin ScrollTrigger. Je n’ai pas réalisé ceci tout seul, je me suis grandement aidé d’un codepen de l’équipe de Greensock (source). Merci à eux !

Effet de parallaxe

Je ne me suis pas arrêté la concernant les animations. Je n’ai toujours pas fini mais j’ai commencé à coder un curseur personnalisé.

Dernièrement, j’ai finalisé le contenu qui figurera sur mon site expliquant pourquoi je suis arrivé à faire un site génératif et quels seraient les bénéfices à adopter cela.

Retours

Cette semaine a été l’occasion d’avoir l’avis de mes professeurs concernant mon projet. J’ai reçu plusieurs commentaires parfois contradictoires, mais tous constructifs. Tout cela me permet aussi de voir plus clair dans mon projet, sa direction. Je me suis rendu compte que j’utilisais l’aléatoire pour obtenir des rendus différents sans l’utiliser pour un réel but. Il faut que je trouve un intérêt à rafraichir la page.

Ici, nous avons deux éléments de contenu qui sont aléatoire, le ‘goiedag’ et ce qui suit ‘trying to’. L’aléatoire n’apporte pas un intérêt, juste une diversité. Là où s’il y avait intérêt, l’aléatoire serait au centre de l’expérience. Rapidement, j’ai trouvés quelque idées exploitables. Un portfolio génératif est l’occasion idéale, à l’aide de l’aléatoire, de se présenter de manière différente à chaque fois. Par exemple, chaque génération comporterait une information à mon propos. Un portfolio classique est fixe, figé, après l’avoir vu une fois, il n’y a plus d’intérêt à le consulter de nouveau. Ce que j’apporte est de la diversité dans le contenu, mais surtout, un intérêt à rafraichir la page. Rafraîchir la page, c’est en savoir un peu plus sur moi grâce à l’aléatoire. Cette réflexion est loin de son stade de maturité. Le style pourrait aussi changer en fonction du contenu affiché.

Concernant le style actuel du site, j’ai reçu quelques commentaires comme quoi il y a peu d’élément qui changent en fin de compte. Je sais toutefois que ma photo de profil aurait tout intérêt à elle aussi être aléatoire. Si le contenu peut être génératif, il faut le faire. Toutefois, tout ne peut pas être aléatoire, sinon cela ne ressemble plus à rien.

Le style et le contenu doivent contenir des éléments fixes pour que l’utilisation d’aléatoire sois faisable. Ce portfolio, c’est montrer qu’il est possible d’inclure de l’aléatoire et casser cette idée qu’un contenu et que son affichage doit être fixe. Le web est un milieu ou tout change, ses utilisations, ses supports, sa propre technologie aussi, alors pourquoi pas le contenu et la forme ?

D’autres commentaires plus annexes, comme le ton utilisé sur mon portfolio, le tri de mes projets, l’importance d’un bouton rafraichissement sont aussi des choses à améliorer d’ici là.

Conclusion

Plus que quelques semaines me séparent de la remise du projet, il faut que je continue dans cette lignée pour m’assurer un travail de qualité. J’ai pu recevoir plusieurs retours. Ces retours étaient nécessaires, ils ont pu me permettre de me rendre compte de plusieurs choses. J’ai aussi pu avoir l’avis d’autres personnes concernant mon projet. Avoir des avis divergents est important. Il est d’autant plus important d’avoir d’autres avis pour savoir défendre son projet.

--

--

Elie Durieux

Probably busy creating unmeaningful design experience…