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

✨ 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

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

2. Installer les dépendances PHP

   composer install
   

3. Installer les dépendances npm

   npm install
   

4. Configurer l'environnement

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

5. Compiler Tailwind CSS

   # 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 :

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