2024-2026
Personal Portfolio
This site. A full typography-first redesign: Swiss style, paper background, a single red accent, Switzer and Fragment Mono. Next.js 15, Tailwind CSS 4, FR/EN i18n, dark mode, zero animation libraries.
fig. 01 · 2024 on the left, 2026 on the right: same content, the decor is gone
This portfolio was first built in 2024 with a glassmorphism aesthetic, then fully rethought in 2026: the data stayed, the decoration left. The new version leans on the Swiss typographic style: a strict grid, generous whitespace, and an inverted hierarchy where every project opens with its outcome rather than its name. Two typefaces (Switzer for text, Fragment Mono for metadata), a single red accent, no animation libraries: one CSS-only reveal sequence, disabled when the user prefers reduced motion.
Inverted hierarchy
fig. 02 · Selected work section of the home page, 2026 version
On the home page, every featured project opens with its outcome rather than its name: the figure large on the left, title and detail on the right.
Switzer and Fragment Mono
fig. 03 · Home page hero, light mode
Only two typefaces: Switzer for text, Fragment Mono for metadata. A strict grid, generous whitespace, a paper background and a single red accent.
Dark mode
fig. 04 · Home page hero, dark mode
The site ships light and dark: the same tokens (paper, ink, one red), inverted. No animation libraries, one CSS-only reveal sequence, disabled when the user prefers reduced motion.
FR / EN
fig. 05 · English version, yoannabriel.com/en
The site is bilingual with next-intl: French by default, English under /en, with the same content and the same layout.
Technologies
Next.js 15 · TypeScript · Tailwind CSS 4 · next-intl