diff --git a/README.md b/README.md index 6131036..ec42fc9 100644 --- a/README.md +++ b/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. \ No newline at end of file +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*