**6 mois. 127 commits. 10+ refactorisations.** Créer un portfolio de développeur en 2025 n'est plus juste une vitrine de projets - c'est un laboratoire technique qui doit prouver votre maîtrise des technologies de pointe. Voici mon retour d'expérience brutalement honnête sur la création de ce site avec Next.js 15, TypeScript et les best practices 2025.
**L'architecture : Passer au peigne fin l'App Router de Next.js 15.** J'ai choisi l'App Router pour ses Server Components natifs et sa génération statique optimisée. Premier défi : migrer ma logique de routage depuis l'ancien système. La structure `app/` révolutionne l'organisation avec `layout.tsx`, `loading.tsx` et `error.tsx` co-localisés. Résultat : 40% de JavaScript client en moins et un Lighthouse score de 98/100.
**Le design system : 47 composants, 3 modes de couleurs, zéro compromis responsive.** Mobile-first obligatoire en 2025 ! J'ai créé un système atomique avec Tailwind CSS : variables CSS custom pour les couleurs, composants polymorphes réutilisables, et une gestion de thème qui persiste côté serveur via cookies. Le mode sombre n'est plus un nice-to-have, c'est un standard. Challenge résolu : éviter le flash de thème au chargement avec `next-themes` et un middleware custom.
**TypeScript strict : Interfaces bulletproof pour 0 bug de typage.** `"strict": true` dans tsconfig.json dès le début ! Chaque projet, article de blog et métadonnée a son interface TypeScript. J'ai poussé jusqu'à créer des types discriminants pour différencier mes projets (Open Source vs Client vs Personnel). Code plus sûr, autocomplétion parfaite, refactoring sans stress. La discipline TypeScript paie à long terme.
**SEO 2025 : Métadonnées dynamiques, sitemap auto-généré, et le secret du Open Graph.** Next.js 15 simplifie le SEO avec `generateMetadata()` pour chaque route. J'ai implémenté : génération automatique d'images Open Graph avec `@vercel/og`, sitemap.xml dynamique basé sur mes projets, structured data JSON-LD pour les articles. Résultat : indexation Google en 48h et rich snippets actifs.
**Micro-interactions : L'art subtil de l'engagement utilisateur.** Les animations font la différence entre 'fonctionnel' et 'mémorable'. Framer Motion pour les transitions de page, CSS transforms pour les hovers, intersection observer pour les reveals au scroll. Mon secret : les animations suivent la courbe d'easing Apple (cubic-bezier(0.25, 0.46, 0.45, 0.94)). Attention : toujours respecter `prefers-reduced-motion` !
**Performance : De 82 à 98 sur Lighthouse, voici comment.** Image optimization avec `next/image` et formats WebP/AVIF automatiques. Code splitting intelligent avec `dynamic()` pour les composants lourds. Bundle analyzer pour traquer chaque KB inutile. Secret technique : Server Actions pour les formulaires = zéro JavaScript côté client pour l'envoi de mails. Edge Functions sur Vercel pour une latence minimale.
**Architecture scalable : 6 dossiers, 0 confusion, croissance infinie.** Structure Next.js 15 optimisée : `app/` pour les routes, `components/` modulaires par feature, `lib/` pour les utilitaires, `types/` pour TypeScript, `content/` pour les données statiques. Convention de nommage stricte : PascalCase pour les composants, kebab-case pour les fichiers. Résultat : codebase lisible même après 6 mois sans y toucher.
**Ce portfolio n'est pas une fin, c'est un laboratoire d'innovation permanent.** Chaque feature est une expérimentation technique. Chaque optimisation repousse les limites du possible. En 2025, votre portfolio doit être votre meilleur argument technique - il prouve que vous maîtrisez les technologies de demain. Le code source est sur GitHub : inspirez-vous, forkez, dépassez-moi ! L'excellence technique se partage. 🚀