Portfolio

Présentation du projet

Ce portfolio est une application web moderne développée pour présenter mes compétences, projets et expériences professionnelles dans le cadre de ma formation BTS SIO option SLAM. Il sert à la fois de vitrine professionnelle et de démonstration technique de mes compétences en développement web.

Technologies utilisées

• Framework Frontend: Next.js 14 (basé sur React)

• Langage: JavaScript/JSX

• Styling: Tailwind CSS pour le design responsive

• Animations: Framer Motion pour les transitions et effets visuels

• CMS: Contentful pour la gestion de contenu headless

• Déploiement: Vercel avec Analytics et Speed Insights intégrés

• Optimisation SEO: Métadonnées structurées et balises Open Graph

Fonctionnalités principales

1. Système de thème adaptatif (Dark/Light mode)

• Implémentation personnalisée avec React Context API

• Persistance des préférences utilisateur via localStorage

• Transition fluide entre les thèmes avec Tailwind CSS

• Adaptation dynamique des couleurs et contrastes pour l'accessibilité

2. Affichage des projets avec Contentful CMS

• Récupération des projets depuis l'API Contentful

• Génération automatique des pages de détail de projet

• Routes dynamiques basées sur les slugs des projets

• Mise en forme avancée du contenu avec Rich Text Renderer

3. Sections interactives

• Hero Section: Animation de texte avec TypeAnimation

• Info Section: Interface à onglets pour présenter expérience, formation, compétences

• Projects Section: Affichage de projets avec effets 3D et animations de défilement

• Navigation: Menu responsive avec animations et défilement fluide

4. Optimisation des performances

• Composants client/serveur séparés pour optimiser le rendu

• Images optimisées avec le composant Next Image

• Lazy loading des sections et ressources

• Métriques de performance suivies avec Vercel Analytics

5. Accessibilité et expérience utilisateur

• Structure sémantique HTML5

• Navigation au clavier et attributs ARIA

• Contraste de couleurs optimisé selon le thème

• Animations respectueuses des préférences de réduction de mouvement

Aspects techniques notables

Implémentation du ThemeContext

Le système de thème utilise React Context pour fournir un accès global aux préférences de thème. Le context gère la persistance avec localStorage et assure une transition visuelle fluide entre les thèmes.

Animations avancées

Les animations sont implémentées avec Framer Motion pour créer une expérience utilisateur engageante:

• Transitions entre sections avec défilement parallaxe

• Animations de carte 3D sur les projets

• Effets de hover et micro-interactions

• Animations d'entrée et de sortie pour les composants

Architecture React moderne

• Utilisation de hooks personnalisés (useTheme, useWindowSize)

• Séparation des composants par responsabilité

• Pattern de composition pour la réutilisation

• Gestion d'état locale et globale optimisée

Intégration du CMS headless

L'intégration avec Contentful permet une gestion de contenu flexible:

• Modèle de données structuré pour les projets

• Récupération des données avec l'API Contentful

• Rendu côté serveur pour le contenu dynamique

• Mise à jour du contenu sans redéploiement du site

Compétences démontrées (référentiel BTS SIO)

• Développement d'applications: Conception et implémentation d'une application web complète

• Solutions de gestion de contenu: Intégration avec un CMS headless (Contentful)

• Conception d'interfaces utilisateur: Design responsive et accessible

• Exploitation des technologies web: React, API contexte, animations avancées

• Veille technologique: Utilisation des frameworks et bibliothèques modernes

Perspectives d'évolution

• Ajout d'une section blog avec gestion de contenu via Contentful

• Implémentation d'un formulaire de contact avec validation et envoi d'emails

• Intégration de tests automatisés pour les composants principaux

• Amélioration des performances avec l'API de Server Components de Next.js