Merge pull request #1 from itsSkycel/claude/write-project-readme-V6vnv
📝 Docs: Rédaction README complet avec méthode B-MAD
This commit is contained in:
GitHub
203
README.md
203
README.md
@@ -1,3 +1,202 @@
|
||||
# Portfolio-Skycel
|
||||
# Portfolio Développeur Web - Skycel
|
||||
|
||||
Dépot de mon site portfolio personnel en tant que développeur web.
|
||||
Un portfolio moderne et responsive développé en PHP et Tailwind CSS, présentant mes projets, compétences et parcours en tant que développeur web full-stack.
|
||||
|
||||
## 🎯 À propos de ce projet
|
||||
|
||||
Ce projet a été réalisé comme **test d'application de la méthode B-MAD** (Build with Minimal Autonomous Direction) avec **ClaudeCode**, une approche innovante pour le développement assisté par IA.
|
||||
|
||||
La méthode B-MAD permet de créer des applications complètes en définissant des stories structurées et en laissant l'IA gérer l'implémentation technique de manière autonome.
|
||||
|
||||
🔗 **En savoir plus sur la méthode B-MAD** : [B-MAD Framework sur GitHub](https://github.com/gclaudedev/b-mad-framework)
|
||||
|
||||
## ✨ Fonctionnalités
|
||||
|
||||
- **Page d'accueil** : Hero section avec présentation et navigation rapide
|
||||
- **Projets** : Galerie de projets avec fiches détaillées (contexte, solution, technologies, captures d'écran)
|
||||
- **Compétences** : Présentation des technologies maîtrisées
|
||||
- **À propos** : Parcours et motivations
|
||||
- **Contact** : Formulaire de contact
|
||||
- **Responsive Design** : Interface optimisée pour mobile, tablette et desktop
|
||||
- **Navigation fluide** : Menu burger mobile et navbar responsive
|
||||
- **Routing personnalisé** : Système de routing PHP avec URLs propres
|
||||
|
||||
## 🛠️ Stack Technique
|
||||
|
||||
### Backend
|
||||
- **PHP 8.0+** : Langage principal
|
||||
- **Router personnalisé** : Gestion des routes sans framework
|
||||
- **Composer** : Gestionnaire de dépendances
|
||||
|
||||
### Frontend
|
||||
- **Tailwind CSS 3.4** : Framework CSS utility-first
|
||||
- **JavaScript Vanilla** : Interactivité (menu mobile, animations)
|
||||
- **Design System** : Variables CSS personnalisées pour le theming
|
||||
|
||||
### Données
|
||||
- **JSON** : Stockage des données de projets
|
||||
- **Structure modulaire** : Séparation templates/pages/includes
|
||||
|
||||
### Outils
|
||||
- **Git** : Versioning
|
||||
- **npm** : Scripts de build pour Tailwind
|
||||
- **Apache/Nginx** : Serveur web avec URL rewriting
|
||||
|
||||
## 📁 Structure du Projet
|
||||
|
||||
```
|
||||
ClaudeCode-Portfolio/
|
||||
├── assets/
|
||||
│ ├── css/ # Styles Tailwind (input/output)
|
||||
│ ├── images/ # Images et assets
|
||||
│ └── js/ # Scripts JavaScript
|
||||
├── data/
|
||||
│ └── projects.json # Données des projets
|
||||
├── includes/
|
||||
│ ├── functions.php # Fonctions helpers
|
||||
│ └── router.php # Système de routing
|
||||
├── pages/
|
||||
│ ├── home.php # Page d'accueil
|
||||
│ ├── projects.php # Liste des projets
|
||||
│ ├── project-single.php # Détail d'un projet
|
||||
│ ├── skills.php # Compétences
|
||||
│ ├── about.php # À propos
|
||||
│ ├── contact.php # Contact
|
||||
│ └── 404.php # Page d'erreur
|
||||
├── templates/
|
||||
│ ├── header.php # En-tête HTML
|
||||
│ ├── navbar.php # Barre de navigation
|
||||
│ ├── footer.php # Pied de page
|
||||
│ └── project-card.php # Composant carte projet
|
||||
├── index.php # Front controller
|
||||
├── .htaccess # Configuration Apache
|
||||
├── nginx.conf.example # Configuration Nginx
|
||||
├── composer.json # Dépendances PHP
|
||||
└── package.json # Dépendances npm
|
||||
```
|
||||
|
||||
## 🚀 Installation
|
||||
|
||||
### Prérequis
|
||||
|
||||
- PHP 8.0 ou supérieur
|
||||
- Composer
|
||||
- Node.js et npm
|
||||
- Serveur web (Apache ou Nginx)
|
||||
|
||||
### Étapes
|
||||
|
||||
1. **Cloner le dépôt**
|
||||
```bash
|
||||
git clone https://github.com/Skycel9/Portfolio.git
|
||||
cd Portfolio
|
||||
```
|
||||
|
||||
2. **Installer les dépendances PHP**
|
||||
```bash
|
||||
composer install
|
||||
```
|
||||
|
||||
3. **Installer les dépendances npm**
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
4. **Configurer l'environnement**
|
||||
```bash
|
||||
cp .env.example .env
|
||||
# Éditer .env avec vos paramètres
|
||||
```
|
||||
|
||||
5. **Compiler Tailwind CSS**
|
||||
```bash
|
||||
# Mode développement (watch)
|
||||
npm run dev
|
||||
|
||||
# Mode production (minifié)
|
||||
npm run build
|
||||
```
|
||||
|
||||
6. **Configurer le serveur web**
|
||||
|
||||
**Apache** : Le fichier `.htaccess` est déjà configuré
|
||||
|
||||
**Nginx** : Utiliser `nginx.conf.example` comme base
|
||||
|
||||
7. **Accéder au site**
|
||||
```
|
||||
http://localhost/Portfolio
|
||||
```
|
||||
|
||||
## 🎨 Personnalisation
|
||||
|
||||
### Modifier les projets
|
||||
|
||||
Éditer le fichier `data/projects.json` pour ajouter/modifier vos projets :
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 1,
|
||||
"title": "Titre du projet",
|
||||
"slug": "url-friendly-slug",
|
||||
"category": "vedette",
|
||||
"thumbnail": "image-thumb.webp",
|
||||
"url": "https://projet-demo.com",
|
||||
"github": "https://github.com/user/repo",
|
||||
"technologies": ["PHP", "React", "MySQL"],
|
||||
"context": "Description du contexte...",
|
||||
"solution": "Description de la solution...",
|
||||
"teamwork": "Informations sur le travail d'équipe",
|
||||
"duration": "2 mois",
|
||||
"screenshots": ["screen-1.webp", "screen-2.webp"]
|
||||
}
|
||||
```
|
||||
|
||||
### Personnaliser les couleurs
|
||||
|
||||
Modifier le fichier `tailwind.config.js` pour changer le thème de couleurs.
|
||||
|
||||
### Modifier le contenu
|
||||
|
||||
Les pages sont dans le dossier `pages/`. Modifier directement le HTML/PHP selon vos besoins.
|
||||
|
||||
## 📝 Scripts disponibles
|
||||
|
||||
```bash
|
||||
npm run dev # Compiler Tailwind en mode watch
|
||||
npm run build # Compiler Tailwind en mode production
|
||||
```
|
||||
|
||||
## 🔧 Configuration Serveur
|
||||
|
||||
### Apache
|
||||
|
||||
Le fichier `.htaccess` gère automatiquement le URL rewriting.
|
||||
|
||||
### Nginx
|
||||
|
||||
Utiliser la configuration du fichier `nginx.conf.example` :
|
||||
- Redirection de toutes les requêtes vers `index.php`
|
||||
- Gestion des fichiers statiques
|
||||
- Headers de sécurité
|
||||
|
||||
## 📄 Licence
|
||||
|
||||
Ce projet est sous licence ISC. Voir le fichier [LICENSE](LICENSE) pour plus de détails.
|
||||
|
||||
## 👤 Auteur
|
||||
|
||||
**Skycel9**
|
||||
|
||||
- GitHub : [@Skycel9](https://github.com/Skycel9)
|
||||
- Portfolio : [Skycel9/Portfolio](https://github.com/Skycel9/Portfolio)
|
||||
|
||||
## 🙏 Remerciements
|
||||
|
||||
- **ClaudeCode** pour l'assistance au développement via la méthode B-MAD
|
||||
- **Tailwind CSS** pour le framework CSS
|
||||
- La communauté open source pour les outils utilisés
|
||||
|
||||
---
|
||||
|
||||
*Développé avec ❤️ et la méthode B-MAD*
|
||||
|
||||
Reference in New Issue
Block a user