157 lines
4.8 KiB
Markdown
157 lines
4.8 KiB
Markdown
# 🌟 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*
|