# Portfolio Développeur Web - Skycel

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*