Contexte du projet
ExceptionNet est mon site vitrine personnel développé pour présenter mes compétences, mon portfolio et mes services de développement web. L'objectif était de créer une vitrine moderne, performante et optimisée SEO utilisant les dernières technologies du monde React.
Ce projet devait démontrer ma maîtrise des frameworks JavaScript modernes tout en offrant une expérience utilisateur exceptionnelle et des performances maximales.
Technologies utilisées
Framework & Langage
- Next.js 13 avec App Router (architecture moderne)
- TypeScript pour la robustesse du code
- React Server Components pour les performances optimales
Styling & Design
- Tailwind CSS pour un design utility-first
- shadcn/ui pour les composants réutilisables
- Framer Motion pour les animations fluides
- Lucide Icons pour l'iconographie moderne
Contenu & SEO
- Markdown pour la gestion du contenu portfolio
- gray-matter pour le parsing du frontmatter YAML
- next-seo pour l'optimisation SEO avancée
- next-sitemap pour la génération automatique du sitemap
Performance & Déploiement
- Vercel pour l'hébergement et déploiement continu
- next/image pour l'optimisation automatique des images
- ISR (Incremental Static Regeneration) pour les contenus
- Edge Functions pour la réactivité maximale
Fonctionnalités principales
Design moderne et responsive
- Interface épurée avec design glassmorphism
- Animations fluides avec Framer Motion
- Mode sombre/clair avec préférence système
- Responsive sur tous les devices (mobile-first)
- Typographie soignée avec Inter font
Portfolio dynamique
- Projets gérés via fichiers Markdown
- Filtrage par technologie et catégorie
- Images optimisées avec WebP automatique
- Lazy loading pour les performances
- Pagination et navigation intuitive
Page d'accueil conversion
- Hero section impactante avec CTA
- Présentation des services clés
- Témoignages clients
- Technologies maîtrisées avec icônes
- Formulaire de contact avec validation
SEO & Performance
- Meta tags dynamiques par page
- Structured data (Schema.org)
- Sitemap XML généré automatiquement
- Robots.txt optimisé
- Open Graph et Twitter Cards
Contact & Lead Generation
- Formulaire de contact avec validation TypeScript
- Intégration API pour l'envoi d'emails
- Rate limiting anti-spam
- Confirmation visuelle des envois
- Tracking des conversions
Résultats
Performances techniques
- Score Lighthouse : 100/100 (Performance, Accessibility, Best Practices, SEO)
- First Contentful Paint : < 0.8s
- Time to Interactive : < 1.2s
- Cumulative Layout Shift : 0 (aucun décalage)
- Largest Contentful Paint : < 1.5s
SEO & Visibilité
- Indexation Google : 100% des pages en 48h
- Core Web Vitals : Tous au vert
- Structured Data : Validation sans erreur
- Mobile-Friendly Test : 100%
Trafic & Conversion
- +350% de trafic organique vs ancien site
- Taux de rebond réduit de 65% à 28%
- Temps de session moyen : 3min 45s
- Taux de conversion contact : 12% (vs 3% avant)
Feedback technique
- Bundle JavaScript 40% plus léger qu'une SPA React classique
- Images optimisées : poids divisé par 3 grâce à next/image
- Cache edge : temps de réponse < 50ms partout dans le monde
Défis techniques
Migration vers Next.js 13 App Router
Le principal défi était d'adopter la nouvelle architecture App Router de Next.js 13 qui était encore récente :
Solutions implémentées :
- Migration progressive des Pages Router vers App Router
- Utilisation des Server Components pour le contenu statique
- Client Components uniquement pour l'interactivité (formulaires, animations)
- Gestion du loading.tsx et error.tsx pour l'UX
Optimisation des performances images
Avec un portfolio riche en visuels :
- Utilisation de next/image avec lazy loading automatique
- Génération de multiples résolutions (responsive images)
- Conversion automatique en WebP/AVIF
- Placeholder blur pour éviter les CLS
- Priority loading pour les images above-the-fold
Gestion du contenu Markdown
Pour maintenir la flexibilité du contenu :
- Parsing des fichiers Markdown avec gray-matter
- Conversion en HTML avec remark et rehype
- Syntax highlighting pour les blocs de code
- Métadonnées extraites du frontmatter YAML
- ISR pour regénérer le contenu toutes les 60s
SEO dynamique par page
Pour maximiser le référencement :
- Metadata API de Next.js 13 pour les meta tags
- Structured Data JSON-LD par type de page
- Canonical URLs automatiques
- Sitemap XML généré au build
- robots.txt avec directives spécifiques
Dark mode sans flash
Éviter le flash de changement de thème :
- Cookie de préférence utilisateur
- Script inline avant le render React
- Classes CSS appliquées côté serveur
- Transition fluide entre thèmes
- Respect de la préférence système (
prefers-color-scheme)
Architecture technique
Next.js 13 App Router:
├── app/
│ ├── layout.tsx (Layout global)
│ ├── page.tsx (Homepage)
│ ├── portfolio/
│ │ ├── page.tsx (Liste)
│ │ └── [slug]/
│ │ └── page.tsx (Détail)
│ ├── services/
│ ├── contact/
│ └── api/
│ └── contact/
│ └── route.ts (API endpoint)
├── components/
│ ├── ui/ (shadcn/ui)
│ ├── Hero.tsx
│ ├── PortfolioCard.tsx
│ └── ContactForm.tsx
├── lib/
│ ├── portfolio.ts (Markdown parser)
│ └── utils.ts
└── content/
└── portfolio/
├── project-1.md
├── project-2.md
└── ...
Stack détaillée
Frontend:
├── Next.js 13 (App Router)
├── React 18 (Server Components)
├── TypeScript 5
├── Tailwind CSS 3
├── Framer Motion (animations)
├── shadcn/ui (composants)
└── Lucide Icons
Content:
├── Markdown + YAML frontmatter
├── gray-matter (parsing)
├── remark (Markdown → HTML)
└── rehype (HTML processing)
SEO:
├── next-seo
├── next-sitemap
└── Schema.org JSON-LD
Hosting:
├── Vercel (déploiement)
├── Edge Network (CDN)
├── ISR (régénération)
└── Serverless Functions (API)
Ce que j'ai appris
Next.js 13 moderne
Maîtrise approfondie du nouveau paradigme Next.js :
- App Router vs Pages Router
- Server Components et leur impact sur les performances
- Streaming avec Suspense
- Route Handlers pour les API
- Metadata API pour le SEO
Performance web avancée
Optimisations poussées :
- Core Web Vitals et leur impact SEO
- TTFB (Time To First Byte) avec Edge Functions
- Code splitting automatique
- Prefetching intelligent des routes
- Image optimization avec formats modernes
TypeScript en production
Utilisation professionnelle de TypeScript :
- Type safety sur toute l'application
- Interfaces pour les données Markdown
- Generics pour les composants réutilisables
- Validation avec Zod pour les formulaires
- Type inference pour réduire la verbosité
Modern CSS avec Tailwind
Maîtrise de Tailwind CSS :
- Utility-first approach
- Custom design system via tailwind.config
- Dark mode avec variants
- Responsive design mobile-first
- Components réutilisables avec @apply
Architecture jamstack
Compréhension de l'architecture moderne :
- Static Generation pour la performance
- ISR pour le contenu dynamique
- API Routes serverless
- Edge deployment mondial
- Git-based workflow
Ce projet vitrine démontre ma capacité à utiliser les technologies web les plus modernes pour créer des sites performants, accessibles et optimisés SEO. Il représente ma vision du développement web frontend en 2022-2023.