Ce projet est un portfolio personnel développé avec React, TypeScript et Vite.
- React 18.2.0
- TypeScript
- Vite 4.4.5
- TailwindCSS 3.4.1
- Framer Motion 10.16.4
- React Router DOM 6.18.0
- Lucide React pour les icônes
- Radix UI pour les composants d'interface
src/
├── components/ # Composants React
│ ├── ui/ # Composants d'interface utilisateur réutilisables
│ └── ... # Autres composants
├── hooks/ # Hooks personnalisés
├── types/ # Définitions de types TypeScript
├── App.tsx # Composant principal
├── main.tsx # Point d'entrée
└── index.css # Styles globaux
- Navigation fluide entre les sections avec défilement automatique
- Gestion du retour en haut de page lors des changements de route
- Menu responsive pour mobile
- Mode sombre/clair avec persistance des préférences
- Animations fluides avec Framer Motion
- Design responsive
- Composants UI réutilisables
- Présentation des projets avec descriptions détaillées
- Intégration de médias (images, vidéos YouTube)
- Filtrage par catégories
- Liens vers les démos et codes sources
- Node.js (version LTS recommandée)
- npm (inclus avec Node.js)
- Clonez le repository
- Naviguez vers le dossier du projet :
cd project - Installez les dépendances :
npm install
npm run dev: Lance le serveur de développement (http://localhost:5173)npm run build: Crée une version de productionnpm run preview: Prévisualise la version de productionnpm run lint: Vérifie le code avec ESLint
Le projet utilise Vite comme outil de build avec la configuration suivante :
- Hot Module Replacement (HMR)
- Support TypeScript
- Optimisation automatique des imports
- Chunking intelligent pour la production
- Simplification de l'architecture du projet
- Retrait de la section blog pour une expérience plus focalisée
- Ajout d'une section dédiée aux projets dans la navigation principale
- Amélioration des transitions entre les sections
- Optimisation du mode sombre/clair
- Mise à jour des animations de navigation
- Intégration des médias sociaux (GitHub, LinkedIn, Twitter)
- Optimisation du chargement des composants avec React.lazy
- Amélioration du chunking pour une meilleure performance de chargement
- Nettoyage des dépendances non utilisées
- Amélioration de l'expérience utilisateur
- Optimisation des performances
- Ajout d'animations supplémentaires
- Intégration de tests automatisés