Portfolio Next.js immersif de Kévin Bourisville, véritable vitrine digitale combinant hero animé, services détaillés et listing dynamique des dernières réalisations pour exposer son expertise Magento 2, Symfony, PHP et React. L’architecture responsive, les CTA visibles et l’emphase sur l’accessibilité RGAA maximisent la visibilité organique et encouragent la conversion des prospects.
Architecture Full-Stack moderne - Application Next.js 16 avec React 19, Server Components, Prisma ORM et PostgreSQL
Système de gestion de projets complet - Base de données relationnelle avec modèles Project/Tag/ProjectItem, services métier avec cache React, URLs SEO-friendly
Interface utilisateur interactive - Animations Framer Motion, système de filtrage dynamique (recherche, tags, pagination), design responsive avec Tailwind CSS 4
Catégorisation des projets en 3 types - Enum ProjectItemType (WORK, CHALLENGE, SOLUTION) pour documenter réalisations, défis et solutions
Infrastructure professionnelle - Scripts NPM complets, ESLint/TypeScript strict, système de migrations Prisma (4 migrations)
Défis rencontrés
Paramètres asynchrones Next.js 16 - Nouvelle API nécessitant Promise<{}> pour les params avec await params
Évolution du schéma Prisma - 4 migrations successives montrant l'adaptation du schéma (alignment, slugs, couleurs tags, ProjectItems)
Filtrage complexe - Combinaison recherche textuelle + multi-tags + pagination avec gestion optimale de l'état
Optimisation performances - Implémentation de React Cache pour éviter les requêtes redondantes
Personnalisation dynamique - Gestion des couleurs dynamiques pour chaque tag avec styles inline
Solutions apportées
Séparation Server/Client - Directive "server-only" pour services, 'use client' uniquement pour composants interactifs, bundle optimisé
Debouncing recherche - Timer 500ms pour réduire les appels API et améliorer l'UX
Filtrage complexe - Combinaison recherche textuelle + multi-tags + pagination avec gestion optimale de l'état
Prisma Client personnalisé - Output vers lib/generated/prisma, intégration dans le build, isolation du code généré
SEO dynamique - Fonction generateMetadata asynchrone, extraction auto de description, gestion 404 avec notFound()
