2024-2026

Portfolio Personnel

Ce site. Refonte complète orientée typographie : style suisse, fond papier, un seul accent rouge, Switzer et Fragment Mono. Next.js 15, Tailwind CSS 4, i18n FR/EN, dark mode, zéro librairie d'animation.

Avant / après : la version glassmorphism de 2024 à gauche, la version typographique suisse de 2026 à droite

fig. 01 · 2024 à gauche, 2026 à droite : même contenu, le décor est parti

Ce portfolio a d'abord été construit en 2024 avec une esthétique glassmorphism, puis entièrement repensé en 2026 : la data est restée, le décor est parti. La nouvelle version s'appuie sur le style typographique suisse : grille stricte, blanc généreux, hiérarchie inversée où chaque projet s'ouvre sur son résultat plutôt que sur son nom. Deux familles de caractères (Switzer pour le texte, Fragment Mono pour les métadonnées), un seul accent rouge, aucune librairie d'animation : une seule séquence d'apparition en CSS pur, désactivée si l'utilisateur préfère réduire les animations.

Hiérarchie inversée

Deux lignes du registre de la page d'accueil : 73 000+ interactions puis Démo à la CEO, chacune suivie du nom du projet et de sa description.

fig. 02 · Section Travail sélectionné de la page d'accueil, version 2026

Sur la page d'accueil, chaque projet sélectionné s'ouvre sur son résultat plutôt que sur son nom : le chiffre en grand à gauche, le titre et le détail à droite.

Switzer et Fragment Mono

En-tête de la page d'accueil en mode clair : titre en grandes capitales Switzer, colonne mono Journal de bord à droite, un point rouge de disponibilité.

fig. 03 · En-tête de la page d'accueil, mode clair

Deux familles de caractères seulement : Switzer pour le texte, Fragment Mono pour les métadonnées. Grille stricte, blanc généreux, fond papier et un seul accent rouge.

Mode sombre

fig. 04 · En-tête de la page d'accueil, mode sombre

Le site existe en clair et en sombre : mêmes tokens (papier, encre, un rouge), inversés. Aucune librairie d'animation, une seule séquence d'apparition en CSS pur, désactivée si l'utilisateur préfère réduire les animations.

FR / EN

En-tête de la version anglaise de la page d'accueil : I build production AI systems, end to end, avec la colonne Ship log.

fig. 05 · Version anglaise, yoannabriel.com/en

Le site est bilingue avec next-intl : le français par défaut, l'anglais sous /en, avec le même contenu et la même mise en page.

Technologies

Next.js 15 · TypeScript · Tailwind CSS 4 · next-intl