Portfolio
Durée
Projet personnel (2025)
Équipe
Projet individuel
Mon Rôle
Développeur & Designer
Technologies Utilisées
Contexte
Ce portfolio est la refonte complète de mon ancien site personnel (HTML/CSS/JS vanilla). L'objectif était de créer une vitrine professionnelle moderne avec des analyses de projets détaillées, répondant aux attentes académiques de mon parcours BUT Informatique.
Le site est développé avec Next.js 15, React et TypeScript, et intègre des fonctionnalités avancées : un système bilingue français/anglais avec context React, des animations fluides avec Framer Motion, un routage dynamique pour les pages de projets, et un design responsive soigné. Chaque projet est documenté en profondeur avec contexte, objectifs, approche technique, architecture, compétences acquises et réflexion personnelle.
Objectifs
- 1.Refonte complète de l'ancien portfolio HTML/CSS en une application Next.js moderne
- 2.Système bilingue FR/EN avec context React et traductions type-safe
- 3.Animations fluides avec Framer Motion (scroll-triggered, staggered)
- 4.Analyses de projets détaillées avec code highlights et réflexions
- 5.Design responsive avec thème sombre et typographie soignée
Approche Technique
Le portfolio est développé avec Next.js 15 (App Router) en TypeScript. L'architecture suit les conventions Next.js avec des composants React modulaires.
- •Système bilingue : Un LanguageContext React fournit une fonction 't(key)' type-safe via 'useCallback' pour les traductions, avec toggle FR/EN. Le contenu des projets utilise des objets '{ fr, en }' pour le bilingue inline.
- •Animations : Framer Motion avec 'whileInView' pour les animations au scroll, et un système de stagger via 'delay: index * 0.1' pour les cartes de projets.
- •Routage dynamique : Les pages de projets utilisent '/projects/[slug]' avec lookup dans le tableau de données.
- •Design : Thème sombre avec variables CSS, typographie serif/sans-serif, et composants réutilisables (ProjectCard, Timeline, etc.).
Architecture
Application Next.js 15 (App Router) :
- •src/app/ : Pages et layout (page d'accueil, pages projets dynamiques)
- •src/components/ : Composants React (ProjectCard, ProjectsSection, Timeline, Header, etc.)
- •src/context/ : LanguageContext pour le système bilingue
- •src/data/ : Données des projets et traductions (TypeScript)
- •public/ : Assets statiques (images, icônes)
- •Déploiement : Vercel
Compétences Développées
Next.js & React avancé
Utilisation de Next.js 15 App Router, composants React modulaires, context API pour la gestion d'état, et routage dynamique avec [slug].
TypeScript
Typage strict des interfaces (Project, Skill, CodeHighlight), des traductions (TranslationKey), et des props de composants pour la fiabilité du code.
Framer Motion
Animations au scroll (whileInView), transitions staggered pour les listes, et animations de page pour une expérience utilisateur fluide.
Extraits de Code
Système bilingue avec Context React
Loading...
Système bilingue avec Context React et useCallback pour les traductions type-safe. Le LanguageProvider enveloppe l'application et fournit la langue courante, la fonction toggle, et la fonction de traduction t(key) à tous les composants.
Résultats & Bilan
Portfolio professionnel moderne et fonctionnel, déployé sur Vercel. Le site présente mes projets avec des analyses détaillées, un système bilingue FR/EN complet, des animations fluides, et un design responsive soigné.
Réflexion & Apprentissages
Ce projet m'a permis de consolider mes compétences en Next.js, React et TypeScript. La mise en place du système bilingue et des animations Framer Motion m'a appris à gérer l'état global et les transitions fluides dans une application React.