Refonte en CSS brut : retour sur un portfolio brutaliste

Refondre un portfolio en CSS brut, ce n’est pas simplement retirer quelques ombres et remplacer un dégradé par du jaune électrique. C’est décider que la structure, le texte et le comportement de l’interface peuvent suffire à produire une identité forte.

Le projet présenté ici partait d’un constat simple : l’ancien portfolio était propre, rapide à oublier et parfaitement conforme aux recettes habituelles. Une grille centrée, des cartes régulières, des animations discrètes, un bouton d’appel à l’action bien placé. Tout fonctionnait, mais rien ne résistait. La refonte a donc pris le chemin inverse : moins de composants décoratifs, davantage de hiérarchie visible, des bordures franches et une composition qui accepte ses propres accidents.

Revenir à la matière première

Le CSS brut ne signifie pas travailler sans méthode. Il signifie refuser la couche de vernis qui dissimule les décisions. Chaque bloc devait être justifié par son contenu, sa fonction ou sa tension visuelle. La palette a été réduite à quatre signaux : noir pour la structure, blanc pour la respiration, jaune pour l’alerte et magenta pour la collision.

Le choix typographique a suivi la même logique. Space Mono sert les titres et les marqueurs de navigation ; IBM Plex Mono assure la lecture courante. L’usage d’une seule famille monospace crée une continuité presque industrielle. Les mots ne sont plus une simple légende posée sur une image : ils deviennent des volumes, des séparateurs et parfois des obstacles.

La grille n’est plus une cage

La première étape technique a consisté à abandonner la grille comme système de rangement. Elle reste présente, mais elle devient un outil de friction. Certains projets débordent volontairement de leur colonne, des titres traversent deux zones et les métadonnées se collent aux limites de l’écran. Le positionnement absolu est utilisé avec parcimonie, uniquement lorsqu’il rend perceptible une relation entre deux éléments.

Ce fragment n’a rien de spectaculaire en soi. Son intérêt vient du contexte : un composant qui sort de son emplacement rappelle que la page n’est pas un tableau figé. Le mouvement est léger, presque maladroit, afin de conserver une lecture immédiate. Le brutaliste efficace ne cherche pas à désorienter pour se faire remarquer ; il rend visibles les règles, puis montre l’endroit où elles cèdent.

Performance contre perfection

La refonte a également servi d’audit technique. Les bibliothèques d’interface ont été supprimées lorsqu’elles ne faisaient qu’habiller trois boutons. Les transitions ont été ramenées à quelques propriétés essentielles et les images sont désormais dimensionnées avant leur affichage. Cette sobriété n’est pas une posture nostalgique : chaque kilo-octet évité réduit l’attente, la consommation et la distance entre une intention et son rendu.

Le code reste lisible parce qu’il est organisé autour de rôles clairs : structure, typographie, états et variations. Les classes ne décrivent pas uniquement l’apparence finale ; elles indiquent parfois l’attitude du composant. Un bloc peut être « raw », « warning » ou « offset ». Cette nomenclature encourage l’expérimentation tout en évitant le chaos arbitraire.

L’expérience avant le décor

Le brutalisme numérique est souvent réduit à une esthétique de provocation. Pourtant, le véritable enjeu est ailleurs : remettre l’expérience au centre en supprimant les automatismes visuels. Un lien doit ressembler à un lien. Un titre doit annoncer une section. Une interaction doit signaler son état. La radicalité ne dispense jamais de respecter le clavier, la lisibilité ou les technologies d’assistance.

Cette approche rejoint, de manière inattendue, certaines pratiques de laboratoire : comprendre précisément une matière avant de vouloir la transformer. Dans les métiers de la cosmétologie, une formation et une étude de cosmétologue mêlent observation, formulation et rigueur expérimentale ; la définition du métier ne se résume pas à l’image d’un produit fini. Pour en savoir plus sur le parcours, les compétences et la réalité du travail en laboratoire, il faut regarder les étapes invisibles qui rendent une formule fiable.

Sur le web comme en formulation, le résultat visible n’est donc que la dernière couche. La qualité se construit dans les choix moins photogéniques : documentation, tests, dosage, contraintes et capacité à corriger. C’est précisément ce qui donne au portfolio sa crédibilité, même lorsqu’il adopte une apparence volontairement instable.

Ce que la refonte conserve

Tout n’a pas été cassé. Les parcours principaux restent prévisibles, les informations importantes apparaissent dans un ordre logique et les projets disposent d’un langage commun. Le désordre est localisé. Il agit comme un signal autour d’une information, pas comme un brouillard posé sur toute la page.

La version mobile a été traitée comme un format autonome. Les éléments qui débordent sur grand écran reviennent dans le flux lorsque la largeur diminue. Les titres sont redimensionnés avec clamp(), les contrôles gardent une zone d’activation confortable et aucune information ne dépend d’un effet de survol. La contrainte ne neutralise pas la direction artistique : elle la rend plus précise.

Un portfolio qui assume son code

Cette refonte ne prétend pas fournir une recette universelle. Elle propose plutôt une méthode : partir du contenu, limiter la palette, exposer la structure et réserver l’excès aux endroits où il produit du sens. Le CSS brut devient alors une écriture, pas un simple outil de finition.

Un portfolio brutaliste réussi n’est pas nécessairement laid, inconfortable ou bruyant. Il est décidé. Il montre ses coutures, accepte les angles morts et préfère une personnalité imparfaite à une neutralité impeccable. Pour suivre d’autres expériences autour des interfaces radicales, du code non filtré et de la typographie en mouvement, découvrez notre page d’accueil.