# 🌟 Portfolio d'Alexandre Pommier Un portfolio moderne et interactif dĂ©veloppĂ© avec React, TypeScript et shadcn/ui, prĂ©sentant mes projets et compĂ©tences techniques. ## 🚀 Aperçu Ce portfolio prĂ©sente mon parcours d'Ă©tudiant Ă  42 en informatique, avec une sĂ©lection de mes projets techniques les plus significatifs. Il intĂšgre des animations fluides, un design responsive et un support multilingue (français/anglais). ### ✹ FonctionnalitĂ©s - **🌙 Mode sombre/clair** - Changement de thĂšme avec persistance - **🌍 Multilingue** - Support français et anglais - **đŸ“± Responsive** - OptimisĂ© pour tous les appareils - **🎹 Animations** - Interactions fluides avec Framer Motion - **🎯 Navigation intuitive** - Barre de progression et navigation smooth - **⚡ Performance** - Construit avec Vite pour des temps de chargement optimaux ## đŸ› ïž Technologies utilisĂ©es ### Frontend - **React 18** - Interface utilisateur moderne - **TypeScript** - Typage statique pour une meilleure robustesse - **Vite** - Build tool rapide et moderne - **Tailwind CSS** - Framework CSS utilitaire - **shadcn/ui** - Composants UI Ă©lĂ©gants et accessibles ### Librairies & Outils - **Framer Motion** - Animations et transitions - **React Router** - Navigation cĂŽtĂ© client - **Lucide React** - IcĂŽnes modernes - **React Query** - Gestion d'Ă©tat et cache - **React Hook Form** - Gestion des formulaires - **next-themes** - Gestion des thĂšmes ### DĂ©veloppement - **ESLint** - Linting et qualitĂ© du code - **PostCSS** - Traitement CSS - **Bun** - Gestionnaire de paquets rapide ## 📁 Structure du projet ``` pommier-portfolio/ ├── public/ # Assets statiques ├── src/ │ ├── components/ # Composants rĂ©utilisables │ │ ├── sections/ # Sections principales du portfolio │ │ └── ui/ # Composants UI (shadcn/ui) │ ├── contexts/ # Contextes React (Theme, Language) │ ├── hooks/ # Hooks personnalisĂ©s │ ├── lib/ # Utilitaires et configurations │ ├── pages/ # Pages de l'application │ └── utils/ # Fonctions utilitaires et traductions ├── package.json └── README.md ``` ## 🚀 Installation et lancement ### PrĂ©requis - Node.js (version 18 ou supĂ©rieure) - Bun (recommandĂ©) ou npm/yarn ### Installation ```bash # Cloner le repository git clone https://github.com/kinou-p/pommier-portfolio.git cd pommier-portfolio # Installer les dĂ©pendances avec Bun bun install # Ou avec npm npm install ``` ### DĂ©veloppement ```bash # Lancer le serveur de dĂ©veloppement bun dev # Ou avec npm npm run dev ``` L'application sera accessible sur `http://localhost:5173` ### Build pour la production ```bash # Build de production bun run build # PrĂ©visualiser le build bun run preview ``` ## 📋 Scripts disponibles - `bun dev` - Lance le serveur de dĂ©veloppement - `bun build` - Build de production - `bun build:dev` - Build en mode dĂ©veloppement - `bun lint` - VĂ©rification du code avec ESLint - `bun preview` - PrĂ©visualisation du build de production ## 🎹 Personnalisation ### ThĂšmes Le portfolio utilise CSS variables pour les couleurs, configurĂ©es dans `src/index.css`. Les thĂšmes sont gĂ©rĂ©s par `next-themes`. ### Traductions Les traductions sont centralisĂ©es dans `src/utils/translations.ts`. Pour ajouter une nouvelle langue : 1. Ajouter les traductions dans l'objet `translations` 2. Mettre Ă  jour le contexte de langue si nĂ©cessaire ### Contenu - **Projets** : Modifiez `src/components/sections/ProjectsSection.tsx` - **CompĂ©tences** : Modifiez `src/components/sections/SkillsSection.tsx` - **Contact** : Modifiez `src/components/sections/ContactSection.tsx` ## 🌟 Projets prĂ©sentĂ©s 1. **Homemade NAS** - Infrastructure personnelle complĂšte 2. **Ft_Transcendence** - Application web Pong en temps rĂ©el 3. **Cloud-1** - Infrastructure automatisĂ©e avec Docker/Ansible 4. **Minishell** - RĂ©implĂ©mentation d'un shell bash en C 5. **Cube3D** - Moteur 3D RayCaster 6. **etsidemain.com** - Site vitrine pour conseil en transformation rĂ©gĂ©nĂ©rative 7. **avopieces.fr** - Plateforme juridique IA pour procĂ©dures de divorce ## đŸ“± Responsive Design Le portfolio est entiĂšrement responsive avec des breakpoints optimisĂ©s : - Mobile : < 640px - Tablet : 640px - 1024px - Desktop : > 1024px ## đŸ€ Contribution Les contributions sont les bienvenues ! N'hĂ©sitez pas Ă  ouvrir une issue ou proposer une pull request. ## 📄 Licence Ce projet est sous licence MIT. Voir le fichier `LICENSE` pour plus de dĂ©tails. ## 📞 Contact **Alexandre Pommier** - 📧 Email : [alexandre.pommier@example.com](mailto:alexandre.pommier@example.com) - đŸ’Œ GitHub : [@kinou-p](https://github.com/kinou-p) --- *DĂ©veloppĂ© avec ❀ par Alexandre Pommier*