Histoire d'un site #3 - Le portfolio

Histoire d'un site #3 - Le portfolio

Aujourd'hui je vous propose de découvrir comment a été pensé le portfolio. Tout d'abord, un portfolio (ou portefolio pour les puristes) est un endroit où l'on présente les projets que l'on a réalisé, le fruit de son travail. C'est un très bon moyen de se vendre à ses futurs clients / employeurs. Mais ce qui fait la différence, c'est aussi la façon dont on présente notre travail. Est-ce que l'on fait une liste à puce avec un lien vers chaque site ? Ou est-ce que l'on travail aussi notre site pour mettre en avant ce que l'on a produit ? Dans mon cas j'ai voulu réellement mettre en avant ce que j'ai produit, j'ai donc opté pour un grand visuel, et quelques informations qui me semblent essentielles, notamment les outils/frameworks utilisés et le type de la réalisation (intégration, server-side, etc).

Un portfolio dynamique

Comme le reste du site : aucun rechargement de page. J'ai donc souhaité quelque chose de fluide pour la navigation entre les projets. J'avais souvenir de pas mal de portfolio cools en 3D lorsque Flash était à son apogée avec papervision 3D et toute la clique. Connaissant les possibilités de CSS3 avec les rotations et les transformations 3D, j'ai donc imaginé que les projets tournaient autour de nous et que, en tant que visiteur, nous étions dans ce cercle de projets. J'ai tout d'abord commencé par réaliser une maquette sur Photoshop pour m'assurer que mon dessin sur papier (que je n'ai malheureusement plus) pouvait rendre quelque chose de correct.

Organisation visuelle

Chaque projet se voit garni d'une belle image, le cadre reprenant les couleurs de celle-ci. Le fait que le cadre change de couleur permet de séparer réellement les projets et de leur créer une vraie identité parmi les divers éléments du portfolio. Sur le côté (ou en dessous sur tablettes/mobiles) se trouvent les informations relatives au projet. Ne voulant pas surcharger non plus, j'ai opté pour une succession d'informations que je trouve intéressantes à savoir, accompagné d'un petit texte explicatif pour mettre quelques détails et informations sur le site ou le client.

Des projets se déroulent au cours du temps, d'où la ligne du temps en bas. Cela permet également de comprendre pourquoi certains sites sont moins bien faits que d'autre : en effet, je suis comme tout le monde, je progresse avec le temps. Pour garder cet effet de timeline les projets défilent donc avec ce petit effet 3D en cohérence avec la timeline du bas. Ainsi, le défilement (scroll), qui habituellement fait glisser la page à la verticale, fait ici passer d'un projet à un autre, le tout avec de jolis transitions.

Les transitions ne sont pas effectuées en JavaScript mais en CSS pour jouir de l’accélération matérielle qui permet une plus grande fluidité sur les machines qui le permettent. De ce fait, la transition vers un autre projet se fait, côté JavaScript, juste en ajoutant / supprimant une classe sur chacun des trois éléments visibles. C'est peu gourmand en ressources côté JavaScript, et ça va puiser dans le GPU si la machine le peut pour améliorer le rendu.

Comment cela fonctionne-t-il ?

Chaque projet est accessible à partir d'une URL donnée, histoire que ce soit fonctionnel sans JavaScript et aussi pour les moteurs de recherche. Mais, la dynamique de la page étant assez simple (scroll = changement de projet), effectuer une requête pour récupérer les informations de chaque projet me semblait (un peu) lourd. De ce fait, j'ai profité de la souplesse du HTML5 en utilisant les data-* pour indiquer les informations de chaque projet sur sa miniature de la timeline. À partir de là, lorsque la page charge, je vais lire les informations dans ces data-* et je génère les panneaux des projets adjacents. Au final, on a donc un unique chargement de page, et tout est fait côté client pour voir les autres projets. Cette technique permet également de ne pas charger les images lourdes des projets non visibles et ainsi d'optimiser la vitesse de chargement de la page.

Un portfolio responsive

Le portfolio vu sur un smartphone

Un des soucis a été d'adapter cette idée aux supports ayant des écrans plus petits. J'ai dû abandonner l'idée de l'effet 3D sur ceux-ci. En effet, d'une part parce que ça ne rentre pas dans l'écran, mais d'autre part parce que ces appareils n'ont pas une accélération GPU aussi puissante qu'un ordinateur classique. Je suis donc passé sur quelque chose de beaucoup plus plat, tout en gardant l'idée de la timeline mais en la mettant à la verticale.

Responsive design, pas seulement en largeur

Le soucis du responsive c'est que ça n'est pas seulement en largeur, mais également en hauteur que les dimentions varient. Et comme on ne sait jamais trop quels sont les ratios des écrans, il vaut mieux se préparer à toute éventualité. De ce fait, je fais en sorte que si l'écran n'est pas assez haut, aussi large soit-il, cela passe également sur l'apparence "plate" optimisée pour les petits écrans (tablettes / smartphones).

Maintenant que vous en savez un peu plus sur cette page, vous la verrez désormais sous un autre œil. N'hésitez pas à aller la revoir et à regarder le code source (Ctrl + U ou via l'inspecteur de code F12) pour peut-être mieux comprendre le mécanisme. Les codes JavaScript et  CSS ne sont pas obfusqués, comme j'ai pu le lire sur Twitter, mais optimisés et donc compressés le tout en un seul fichier. Il vous est tout à fait possible de les voir de façon décompressés en passant par le processus inverse à la compression.

À demain pour un point sur la page de ce site : la page compétences.

Votre gravatar
Gravatar de prestataire intégration html prestataire intégration html
Le portfolio est le récapitulatif de nos réalisations. C’est par son portfolio que la compétence du candidat sera évaluée. Et même pour certaines entreprises en quête de nouveau client ce genre de support est significatif.
Répondre