Site portfolio DH

J’ai débuté la création de ce site pour rendre accessibles mes projets et mon parcours sur internet.

Son but principal est de me permettre de partager mon contenu rapidement avec quelqu'un.

Une fois achevé, mon site portfolio devra remplir le rôle d’un support de présentation esthétique et soigné.

Il servira aussi d’exemple concret de mon savoir-faire mis en œuvre.

La première étape a été de choisir entre différents moyens de mettre en avant mon parcours et mes projets.

Réaliser un site portfolio bâti de zéro ? Avoir recours à un template préfabriqué ? Miser uniquement sur les réseaux sociaux ?

Pour la première version de mon site, j’ai imaginé une architecture simple qui répond aux besoins suivants :

• En savoir plus sur moi rapidement et parcourir mon CV
• Voir mes projets passés et la mise en pratique de mes compétences
• Pouvoir me contacter facilement

Sachant que ce projet allait avancer à un rythme variable sur mon temps libre, j’ai dû mettre de côté certaines idées.

Il s’agit d’une situation très fréquente dans le cadre professionnel : savoir prioriser et identifier les tâches nécessaires à la réussite d’un projet.

Je souhaite cependant intégrer ces idées dans une future version du site.

Pour les couleurs de l'identité, j’ai sélectionné un duo rouge clair et vert turquoise, associé à un gris anthracite qui habille l’ensemble des pages.

Pour les textes du site, j’ai testé plusieurs combinaisons avant d’opter pour deux typographies sans-serif rondes et élégantes.

Afin d’apporter une touche de caractère, j’ai aussi inclus une typo plus traditionnelle, réservée aux gros titres.

J’ai utilisé Figma pour créer une maquette interactive haute fidélité.

En parallèle, certains éléments graphiques ont été conçus sur Adobe Illustrator et Photoshop puis importés dans la maquette.

Lorsqu’une page de la maquette est suffisamment aboutie, je la décline sur plusieurs formats.

Ce travail supplémentaire permet d’anticiper les besoins et blocages en terme d’expérience responsive, avant d’entamer la phase de développement.

En arrivant sur le site, l’utilisateur découvre immédiatement mon identité et mes différentes expertises.

Au travers d’animations thématiques, j’ai choisi de renforcer l’impact visuel de chaque élément.

Le reste de la page d’accueil guide l’utilisateur dans son exploration du site et vers d’autres contenus.

Les projets les plus pertinents d’un portfolio sont généralement les derniers en date.

Je souhaite toutefois utiliser cette page en tant qu’archive numérique de mon parcours sur le long terme.

Pour réconcilier ces deux réalités, il sera possible de filtrer les projets sur plusieurs critères. Par défaut, la page affichera les dernières années uniquement.

Cette page liste mes expériences par ordre chronologique, sous la forme de blocs dépliables permettant deux niveaux de lecture :

• Une lecture rapide sans ouvrir le module, qui résume les points clés de la période en question.
• Une lecture plus détaillée en appuyant sur “en savoir plus”, grâce au texte complémentaire placé à l’intérieur du module.

Une fois la maquette du site finalisée, j’ai commencé à rédiger le code source de mon portfolio.

N’ayant pas eu recours à un CMS ou à un template, j’ai principalement codé de zéro sur Visual Studio Code.

J’ai rédigé du code SCSS plutôt que du simple CSS, pour garder mon code organisé et facile à entretenir. Cela m’a permis également d’optimiser le nombre de requêtes envoyées au serveur.

J’ai utilisé JavaScript, JQuery et PHP pour importer mon code de façon modulaire et réagir aux actions de l’utilisateur (notamment sur des éléments interactifs et pour le formulaire de contact).

Les besoins de la V1.0 du site étant simples, j’ai limité le nombre de langages et de bibliothèques utilisés. Inclure des frameworks lourds pour appeler 5% de leurs capacités m’a paru contre-productif.

Je souhaite pouvoir entretenir et améliorer mon site portfolio sur le long terme.

C'est pourquoi j'ai eu recours à Git pour garder en mémoire un historique détaillé de mes avancées sur ce projet et créer du code durable.

Cette démarche me permet aussi de rendre mon code public sur GitHub, pour valoriser davantage mes capacités de développeur front-end.

Au chargement de la page d’accueil, l’utilisateur voit apparaître trois lignes de textes.

Elles mettent chacune en avant l’un de mes domaines d’expertise à l’aide d’une petite animation.

• Le web design est représenté par des balises de codes HTML et des couleurs de formatage typiquement utilisées dans un éditeur de code.
• Le motion design est évoqué par la notion de mouvement perpétuel.
• L’animation du design graphique puise dans les racines typographiques propres à ce métier.

J’ai ajouté mon portrait à la page d’accueil du site pour le rendre plus convivial.

Le fait d’en apprendre plus sur l’auteur d’un portfolio rend l’expérience plus personnelle et mémorable selon moi.

L’animation appliquée sur cet élément le rend plus dynamique et pousse à visiter la page “mon parcours”.

Elle reproduit l'expression d’une parole dans une bulle de texte minimaliste.

Un recruteur ou un proche ne liront pas mon site de la même manière, notamment en ce qui concerne mon parcours.

Pour m’adapter aux besoins du lecteur, j’ai imaginé des modules dépliables, qui permettent d’aller à l’essentiel ou d’obtenir plus de détails.

La frise chronologique centrale s’adapte automatiquement aux changements de tailles des modules pour préserver l’harmonie de la page.

J’ai créé un style unique pour le bouton permettant de télécharger mon CV, afin qu’il se démarque du reste de la page.

Ce bouton existe en trois déclinaisons pour pouvoir proposer une expérience responsive adaptée et mobile friendly.

Puisque les animations de survol sont peu compatibles avec l’usage mobile, j’ai opté pour un design plus classique sur ce support.

Pour des supports plus grands, le bouton devient plus abstrait mais plus dépendant de l’animation d’interaction.

Pour mettre en page les aperçus de mes projets, j’ai opté pour un système de grille, facilement adaptable au nombre croissant d’éléments.

Le visuel représentant chaque projet évoque son identité graphique au travers d’une composition minimaliste.

L’animation de survol complète l’aperçu avec les informations clés du projet.

Sur mobile, j’ai dû compenser l’usage inadapté de l’interaction de survol. Les informations viennent alors se greffer sous la forme d’un cadre rappelant le format d’une photo polaroid.

Le formulaire de préférences des cookies prend la forme d’un élément visuellement plaisant, qui ne perturbe pas la navigation.

Trop de pages web sont devenues pénibles à visiter, à cause des demandes de consentement envahissantes ou volontairement trompeuses.

Je compte maintenir à jour cet élément pour respecter les changements des normes RGPD, mais toujours en veillant au confort des utilisateurs.