Ce projet est un portfolio personnel moderne et interactif, conçu pour présenter un parcours professionnel, des compétences et des réalisations. Il est construit avec les dernières technologies web pour offrir une expérience utilisateur fluide, performante et esthétique.
Ce projet repose sur une stack technique robuste et moderne :
- Next.js : Framework React pour le rendu côté serveur et la génération de site statique (App Router).
- TypeScript : Superset typé de JavaScript pour un code plus fiable et maintenable.
- Tailwind CSS : Framework CSS utilitaire pour un design rapide et responsive.
- Framer Motion : Bibliothèque d'animations pour React.
- Radix UI : Composants UI non stylés et accessibles.
- React Hook Form & Zod : Gestion et validation de formulaires performante.
- Lucide React : Bibliothèque d'icônes.
- Magic UI : Composants d'interface utilisateur pour des effets visuels avancés.
- Next Themes : Gestion du mode sombre et clair.
Le portfolio inclut les sections et fonctionnalités suivantes :
- Hero Section : Introduction visuelle impactante.
- À Propos : Présentation personnelle.
- Expérience Professionnelle : Chronologie du parcours pro.
- Éducation : Parcours académique.
- Compétences : Liste des compétences techniques (Skills).
- Projets : Galerie des réalisations avec détails.
- Contact : Formulaire de contact fonctionnel.
- Mode Sombre/Clair : Thème adaptable aux préférences de l'utilisateur.
- Design Responsive : Optimisé pour tous les écrans (mobile, tablette, desktop).
- Animations Fluides : Transitions et interactions soignées.
Pour lancer ce projet localement, suivez ces étapes :
Assurez-vous d'avoir Node.js installé. Ce projet utilise pnpm comme gestionnaire de paquets.
-
Clonez le dépôt :
git clone <votre-url-du-repo> cd <nom-du-dossier>
-
Installez les dépendances :
pnpm install
Pour démarrer le serveur de développement :
pnpm devOuvrez http://localhost:3000 dans votre navigateur pour voir le résultat.
Pour créer une version optimisée pour la production :
pnpm buildPour prévisualiser la version de production localement :
pnpm startVoici un aperçu de l'organisation des fichiers :
app/: Contient les pages et le layout principal (App Router de Next.js).page.tsx: Page d'accueil regroupant toutes les sections.layout.tsx: Layout global (incluant les polices, le thème, etc.).
components/: Composants Réutilisables.ui/: Composants de base (boutons, inputs, cards...) basés sur Radix UI.magicui/: Composants spécifiques pour les effets visuels.hero-section.tsx,about-section.tsx, etc. : Composants spécifiques à chaque section du portfolio.
lib/: Fonctions utilitaires (ex: gestion des classes CSS).public/: Fichiers statiques (images, favicons).
Vous pouvez personnaliser le contenu en modifiant les composants situés dans le dossier components/. Les couleurs et styles globaux peuvent être ajustés dans app/globals.css ou via la configuration Tailwind.
Généré pour un projet v0.