Gamifier son portfolio : des easter eggs pour lier mes projets
Cette semaine, j’avais envie de laisser MyMémoires de côté pour continuer mon projet de portfolio. Ce que j’aime dans ce projet, c’est la liberté artistique inhérente à l'exercice.
Adieu la double identité (et les néons Matrix)
Anciennement, mon portfolio était scindé en deux parties faisant la part belle à mon côté Product Manager lié à ma carrière pro, et ma partie Builder avec l’étendue de mes projets perso (dont MyMémoires mais aussi Studio Lamarck et d’autres). J’avais pris le parti de splitter en deux pour vraiment faire ressortir les expérimentations, en donnant un côté futuriste à la The Matrix, où les projets sont encapsulés dans des div fluo sur fond noir, ce qui est finalement assez caricatural des sites faits par IA avec le recul.
J’avais même pour l’occasion créé mon avatar builder, vraiment inspiré des univers néons futuristes.
J’aimais ce portfolio, mais je trouvais que finalement le côté double-face n’était pas si créatif que ça, et même en tentant d’immiscer des effets très modernes à l’ouverture de la page, je n’y trouvais pas mon compte.
Je restais donc frustré de ne pas changer vraiment la DA de mon portfolio, mais j'y ajoutais quand même une section parlant de Studio Lamarck, de son but, de mon engagement dans l’asso. Une card fluo-futuriste du plus bel effet.
Le déclic du scroll horizontal
Dans mes pérégrinations web, je tombe sur le site internet de Join-TheBridge. Le site propose de casser les codes du scroll vertical pour faire découvrir SF avec un magnifique panorama horizontal doté d'un effet de timelapse. Je suis tombé littéralement amoureux du design, et je devais m’en inspirer pour mon propre portfolio.
Bien sûr, l’objectif était de positionner l’action, non pas à San Francisco, mais à Paris 18ème en reprenant quelques éléments immédiatement reconnaissables de la capitale.
J’ai été complètement bluffé par la facilité qu’a eue Claude à refaire mon portfolio en lui pitchant l’idée de design. En quelques allers-retours, en lui donnant la liste des points clés à y faire apparaître et en indiquant la manière d’orchestrer les informations, j’ai pu reconstruire mon portfolio de A à Z avec une DA que je trouve magnifique.
Je vous laisse le dérouler et découvrir tous les clins d'œil à Paris et au 18ème arrondissement : www.thibautsainrat.fr.
Gamification
Comme je suis un inconditionnel d’escape game ou autre chasse au trésor, j’ai décidé d’ajouter des easter eggs dans la page.
Un easter egg (ou « œuf de Pâques ») est un contenu caché, un clin d'œil ou une fonction secrète glissé volontairement par des créateurs dans un programme informatique, un jeu vidéo, un film ou une page web
Ces easter eggs sont donc cachés dans la page, au milieu des décors et des éléments parisiens. Pour ajouter un point de gamification, ils sont numérotés : l'utilisateur qui navigue sur la page peut savoir combien il lui en reste à trouver. Ils servent aussi à donner plus d'informations aux curieux qui veulent creuser un peu.
Tirer la ficelle entre tous mes projets
Aussi, il m'est venu une idée. Certains easter eggs permettront de débloquer des fonctionnalités ou des éléments de contexte pour mes autres projets.
Comme je l'ai expliqué dans mon dernier article de blog, je cherche à implémenter la possibilité d'avoir plusieurs skins et modèles pour l'enregistreur dans MyMémoires. C'est donc naturellement que j'ai caché un easter egg dans mon portfolio qui donne la possibilité de débloquer un nouvel enregistreur dans MyMémoires : un skin en rapport avec la DA de cette page. Un univers un peu pixelisé et très cubique.
Finalement, ce que j'ai appris de cette expérience, c'est de se laisser la possibilité d'ouvrir ses chakras quant à la créativité et de toujours réfléchir à lier les projets les uns aux autres. Ce que j'aimerais, c'est qu'au fil de mes projets, on arrive à tirer comme une ficelle qui permet de tout connecter. Le but, c'est d'essayer de donner envie aux gens de découvrir les écosystèmes auxquels je participe. Et je trouve que disséminer de petits indices comme ça, c'est recréer une vraie chasse au trésor.
Pas encore de commentaire. Soyez le premier !