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

✨ 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

Cloner le dépôt

git clone https://github.com/Skycel9/Portfolio.git
cd Portfolio

Installer les dépendances PHP
```
composer install
```
Installer les dépendances npm
```
npm install
```

Configurer l'environnement

cp .env.example .env
# Éditer .env avec vos paramètres

Compiler Tailwind CSS

# Mode développement (watch)
npm run dev

# Mode production (minifié)
npm run build

Configurer le serveur web

Apache : Le fichier .htaccess est déjà configuré

Nginx : Utiliser nginx.conf.example comme base
Accéder au site
```
http://localhost/Portfolio
```

🎨 Personnalisation

Modifier les projets

Éditer le fichier data/projects.json pour ajouter/modifier vos projets :

{
  "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

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 pour plus de détails.

👤 Auteur

Skycel9

GitHub : @Skycel9
Portfolio : 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