Les développeurs ont la mauvaise habitude de construire des couteaux suisses alors qu'ils n'ont besoin que d'une lame bien affûtée. Nous nous tournons vers des frameworks frontend lourds avant même d'avoir écrit la première ligne de HTML. Nous greffons des bibliothèques d'animation, des outils de gestion d'état et des pipelines de build assez puissants pour faire tourner une petite entreprise. Puis nous nous étonnons que nos sites portfolio mettent trois secondes à s'afficher, que la navigation se casse sur mobile, et que les recruteurs quittent la page avant même d'avoir vu les projets sur lesquels nous avons passé des mois.
J'ai pris une direction différente pour mon dernier portfolio. Je me suis éloigné de l'écosystème des dépendances infinies pour construire l'intégralité du site avec du HTML sémantique et du CSS propre. Pas de frameworks JavaScript. Pas d'étapes de build. Pas de moteurs d'animation tiers. Juste la plateforme elle-même, une mise en page gérée par CSS Grid et Flexbox, et une philosophie de conception qui traite la vitesse et la clarté comme des fonctionnalités à part entière plutôt que comme des réflexions après coup.
Le résultat est léger, rapide et professionnel. Voici exactement comment je m'y suis pris.
Commencer par les fondations
La plupart des cas de sur-ingénierie commencent dès les fondations. Un portfolio n'a pas besoin d'être une application monopage (SPA). Il doit afficher votre travail, indiquer comment vous contacter et s'effacer pour laisser place au contenu. J'ai utilisé du HTML sémantique car le navigateur sait déjà comment rendre un nav, un article et un footer. Lorsque vous utilisez le bon élément pour la bonne tâche, vous obtenez l'accessibilité, la visibilité sur les moteurs de recherche et un comportement responsive essentiellement gratuitement. Vous écrivez également moins de code. Un div avec cinq attributs ARIA n'est qu'une imitation verbeuse d'un button. J'ai totalement évité cela.
Pour la mise en page, CSS Grid et Flexbox sont amplement suffisants. Grid gère la structure macro : les sections globales de la page, la galerie de projets, l'alignement des blocs principaux. Flexbox gère les micro-interactions : les liens de navigation dans la capsule, le centrage du texte dans les cartes, le positionnement du footer en bas de la fenêtre d'affichage. Ensemble, ils remplacent toutes les raisons que vous auriez pu avoir d'importer un framework de grille à douze colonnes en 2018. Le code reste lisible. Le fichier CSS reste léger.
Couleur, typographie et retenue
Je voulais que le portfolio dégage un sentiment de calme dès son chargement. L'arrière-plan utilise une base claire avec des dégradés radiaux subtils. Rien d'agressif. Le dégradé est à faible opacité, créant une profondeur douce qui évite à la page de paraître plate sans pour autant réclamer l'attention. Il se charge instantanément car il s'agit de pur CSS. Il n'y a pas d'images hero à compresser, pas de solutions de repli WebP à gérer, pas de bibliothèques de lazy-loading JavaScript à configurer.
La typographie porte la personnalité. J'ai associé Outfit à Ovo. Outfit, une sans-serif géométrique, gère tout le texte de l'interface utilisateur : les labels de navigation, le texte des boutons, le corps du texte, les détails métadonnées. Elle est nette sur les écrans et reste lisible en petite taille. Ovo, une serif à contraste moyen, sert aux en-têtes et aux titres principaux. Cet agencement donne à la page une sensation éditoriale discrète. Elle semble conçue, pas simplement thémée. Plus important encore, les deux polices sont chargées via un seul appel à un service de polices ou via des fichiers auto-hébergés. Il n'y a pas de décalage de mise en page (layout shift), pas de flash de texte non stylisé, pas de script changeant les graisses après le rendu initial.
Le menu capsule flottant
La navigation est l'endroit où les portfolios s'effondrent souvent sous leur propre poids. Menus superposés en plein écran, scripts d'animation décalés et icônes hamburger nécessitant quarante lignes de JavaScript pour basculer une classe. Je ne voulais de rien de tout cela.
J'ai conçu un menu capsule flottant au style glassmorphique. Il s'agit d'un conteneur horizontal unique, aux bords arrondis, positionné en fixed près du haut de la fenêtre d'affichage. Le glassmorphisme provient d'une couleur d'arrière-plan semi-transparente et d'une propriété backdrop-filter: blur(). Il flotte au-dessus du contenu sans l'obscurcir, offre un accès immédiat à chaque section et se replie élégamment sur les petits écrans sans nécessiter une refonte complète. L'effet paraît moderne car c'est le navigateur qui gère la composition, et non une bibliothèque canvas.