Portfolio BDDev
Ce site, de la maquette Figma à Astro et Preact.
À PROPOS DU PROJET
Le portfolio que vous lisez. Il part d'une maquette Figma : moodboard, typographies Quadrat Serial et Major Mono Display, palette #1E1F1C, #E72964 et #554596, pages Accueil et Portfolio. Trois versions : une première intégration en React, une version React plus lourde, puis la version actuelle en Astro et Preact. Chaque route est pré-rendue au build avec ses balises meta, Open Graph et JSON-LD, le sitemap et le llms.txt sont générés depuis les données projets, les images de partage sont rendues par Chrome headless. Animations en CSS qui respectent prefers-reduced-motion, images en AVIF à la taille d'affichage. Accessible selon le RGAA 4.1 et les WCAG 2.1 AA, avec un panneau de contraste élevé et de polices adaptées.
De la maquette au site
Une maquette Figma de première année : moodboard, typographies Quadrat Serial et Major Mono Display, palette #1E1F1C, #E72964 et #554596. Reconstruite en React 19 et Vite, puis migrée vers Astro et Preact (voir Évolution technique). Chaque route est pré-rendue au build avec ses balises meta, Open Graph et JSON-LD, le sitemap et le llms.txt sont générés depuis les données projets, les images de partage sont rendues par Chrome headless. Interface en français, documents affichés en WebP.
Pourquoi Astro et Preact
Sous React, le JS de l'accueil pesait 543 ko bruts, dont 297 ko pour React seul : le chrome (navigation, palette Ctrl+K, Cody, panneau d'accessibilité) est interactif sur chaque page, donc le runtime partait partout. Le 5 octobre 2026, un passage à Preact en mode compat a ramené l'accueil de 406 ko à 206 ko bruts sans réécrire de composant. Le 12 octobre, migration vers Astro : les pages deviennent statiques, seuls les composants interactifs sont des îlots Preact, et le générateur maison de près de 240 lignes, le routeur JS et le sitemap manuel disparaissent. Mesure du spike (mobile, 4G simulée, un seul run) : accueil 180,8 ko à 168,3 ko de JS (-7 %), LCP de 3,3 s à 1,0 s ; portfolio 197,9 ko à 154,0 ko (-22 %). Le gain de poids sur l'accueil reste modeste : la migration gagne surtout en simplicité de build et de maintenance.
Accessibilité numérique
Site pensé pour le RGAA 4.1 et les WCAG 2.1 AA. Navigation complète au clavier : lien d'évitement, focus visible, focus déplacé sur le titre à chaque changement de page, menu contextuel piloté aux flèches, une seule tabulation par document et les flèches pour tourner les pages. Lecteurs d'écran : hiérarchie de titres, landmarks, textes alternatifs, rôles et états ARIA (dialog, menu, aria-expanded, aria-live), décors masqués. Contrastes AA vérifiés. Un panneau Accessibilité propose un mode contraste élevé noir, blanc et jaune sans dégradé ni animation, activé seul si le système demande plus de contraste, et cinq polices : Geist, Arial, Luciole, Accessible DfA et OpenDyslexic.
La maquette d'origine : moodboard, accueil, portfolio.
Flèches haut et bas pour changer de page, Entrée pour agrandir.
Page 1 sur 3
Problématique
Une maquette de première année à transformer en vitrine durable, lisible par les recruteurs comme par les robots.
Solution
Site statique piloté par les données : une entrée projet génère sa page, ses meta, son image de partage et son entrée sitemap.
Résultat
En ligne sur baptisteledev.fr, chaque page servie en HTML complet pour le référencement et les aperçus de liens.
Évolution technique
v1 - Maquette
mars 2025
Première intégration de la maquette Figma en React : accueil et portfolio, composants shadcn/ui, animations Motion.
v2 - React lourd
2025 - 5 oct. 2026
Visuel existant sur un runtime React complet : traductions FR/EN, animations JS, routeur client. React représente 55 % du JS de l'accueil.
v3 - Astro + Preact
depuis le 12 oct. 2026
Pages statiques Astro, îlots Preact pour le chrome, site en français seul. Retirés depuis la v2 : React, React Router, i18next, Motion, lucide-react, shadcn/ui, tailwindcss-animate, ESLint.