195 lines
6.3 KiB
Markdown
195 lines
6.3 KiB
Markdown
# 🌟 Portfolio d'Alexandre Pommier
|
||
|
||
Un portfolio moderne et interactif développé avec React, TypeScript et shadcn/ui, présentant m## 🛡️ Sécurité
|
||
|
||
Ce portfolio implémente des pratiques de sécurité avancées pour protéger contre les vulnérabilités web courantes :
|
||
|
||
- **Content Security Policy (CSP)** - Protection contre XSS
|
||
- **HSTS** - Forçage HTTPS avec preload
|
||
- **COOP/CORP/COEP** - Isolation cross-origin
|
||
- **X-Frame-Options** - Protection contre le clickjacking
|
||
- **Permissions Policy** - Contrôle des fonctionnalités du navigateur
|
||
|
||
Pour plus de détails, consultez [SECURITY.md](./SECURITY.md).
|
||
|
||
## ⚡ Performance
|
||
|
||
Optimisations avancées pour des Core Web Vitals excellents :
|
||
|
||
- **CSS Critique Inliné** - Élimination du blocage de rendu
|
||
- **Lazy Loading** - Chargement à la demande des composants et images
|
||
- **Code Splitting** - Bundles optimisés et chunking intelligent
|
||
- **Resource Hints** - Preconnect et DNS prefetch
|
||
- **Image Optimization** - WebP avec thumbnails générés automatiquement
|
||
|
||
**Scores Lighthouse cibles** : Performance 95+, Accessibilité 95+, Best Practices 95+, SEO 100
|
||
|
||
Pour plus de détails, consultez [PERFORMANCE.md](./PERFORMANCE.md).
|
||
|
||
## 📱 Responsive Design 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
|
||
|
||
## <20>️ Sécurité
|
||
|
||
Ce portfolio implémente des pratiques de sécurité avancées pour protéger contre les vulnérabilités web courantes :
|
||
|
||
- **Content Security Policy (CSP)** - Protection contre XSS
|
||
- **HSTS** - Forçage HTTPS avec preload
|
||
- **COOP/CORP/COEP** - Isolation cross-origin
|
||
- **X-Frame-Options** - Protection contre le clickjacking
|
||
- **Permissions Policy** - Contrôle des fonctionnalités du navigateur
|
||
|
||
Pour plus de détails, consultez [SECURITY.md](./SECURITY.md).
|
||
|
||
## <20>📱 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*
|