diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..f77f303 --- /dev/null +++ b/.env.example @@ -0,0 +1,14 @@ +# Application +APP_ENV=development +APP_DEBUG=true +APP_URL=http://localhost:8000 + +# reCAPTCHA v3 +RECAPTCHA_SITE_KEY=your_site_key_here +RECAPTCHA_SECRET_KEY=your_secret_key_here + +# Contact Email +CONTACT_EMAIL=contact@example.com + +# Securite +APP_SECRET=your_random_secret_key_here \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..15dbe6f --- /dev/null +++ b/.gitignore @@ -0,0 +1,9 @@ +.env +vendor/ +node_modules/ +logs/*.log +assets/css/output.css +.idea/ +.vscode/ +.DS_Store +_bmad/ \ No newline at end of file diff --git a/composer.json b/composer.json new file mode 100644 index 0000000..3d815cc --- /dev/null +++ b/composer.json @@ -0,0 +1,9 @@ +{ + "name": "portfolio/website", + "description": "Portfolio developpeur web", + "type": "project", + "require": { + "php": ">=8.0", + "vlucas/phpdotenv": "^5.6" + } +} \ No newline at end of file diff --git a/docs/brainstorming-session-results.md b/docs/brainstorming-session-results.md new file mode 100644 index 0000000..46dc0e7 --- /dev/null +++ b/docs/brainstorming-session-results.md @@ -0,0 +1,356 @@ +# Brainstorming Session - Portfolio Developpeur + +**Date** : 22 janvier 2026 +**Facilitatrice** : Mary (Business Analyst) +**Technique utilisee** : Premiers Principes (First Principles Thinking) + +--- + +## Executive Summary + +| Element | Detail | +|---------|---------------------------------------------------------------------------| +| **Sujet** | Portfolio developpeur web | +| **Objectifs** | Convaincre recruteurs & clients, inspirer confiance, obtenir des contacts | +| **Contraintes** | HTML/CSS/JS pur, simplicite, optimisation, utilisation de Tailwind CSS | +| **Principe central** | **"Montrer plutot que dire"** | + +### Vision du Portfolio + +Un portfolio qui : +- Permet de connaitre la personne +- Cree une proximite professionnelle +- Met en avant le travail accompli +- Inspire la confiance par des preuves tangibles +- Incite a la prise de contact + +--- + +## Architecture Globale + +``` +PORTFOLIO + ++-- PAGE D'ACCUEIL +| +-- Accroche + navigation claire +| ++-- PROJETS +| +-- 5-10 projets vedettes (pages dediees) +| +-- Liste projets secondaires +| ++-- COMPETENCES & OUTILS +| +-- Technos de dev -> liees aux projets +| +-- Outils demontrables -> liens/preuves +| +-- Outils non demontrables -> liste + contexte +| ++-- ME DECOUVRIR +| +-- Parcours / etudes +| +-- Le "pourquoi" du metier +| +-- Passions hors travail +| ++-- TEMOIGNAGES +| +-- Avis clients / employeurs +| ++-- CONTACT +| +-- Formulaire principal +| +-- Liens secondaires (reseaux) +| ++-- NAVBAR + +-- Bouton "Me contacter" visible +``` + +--- + +## 1. Confiance & Credibilite + +### Principe : L'Authenticite Verifiable + +> "Les mots sont bien pour expliquer mais pour montrer que l'on maitrise, le mieux reste de pouvoir naviguer et interagir avec les projets." + +### Elements de preuve + +| Element | Ce que ca prouve | +|---------|------------------| +| Lien vers le projet en ligne | Le projet existe reellement | +| Projet visitable | Les technos sont verifiables | +| Explication technique | C'est bien vous qui l'avez fait | +| Temoignages clients/employeurs | Professionnalisme confirme par des tiers | + +### Ce qui construit la confiance + +- Projets visitables en ligne +- Technologies utilisees visibles et verifiables +- Explications techniques des fonctionnalites (preuve de paternite) +- Temoignages de clients ou employeurs +- Authenticite totale - pas de mensonges + +### Ce qui detruit la confiance + +- Mensonges sur les projets +- Fausses affirmations sur les technologies +- Promesses sans demonstration + +--- + +## 2. Connexion Humaine + +### Principe : Incarner plutot qu'affirmer + +> "N'importe qui peut ecrire 'Je suis un bon communicant'. Comment le DEMONTRER ?" + +### Comment creer la connexion + +| Qualite | Comment la MONTRER | +|---------|-------------------| +| Communication | Le ton et le style de redaction du portfolio | +| Passions | Mentionner + preuves visuelles (photos d'evenements) | +| Professionnalisme | Section temoignages clients/employeurs | + +### Montrer la passion sans le dire + +Au lieu de dire "Je suis passionne", montrer : +- Projets personnels en plus des projets pro +- Veille tech active sur l'actualite +- 5+ ans dans le domaine (engagement long terme) + +--- + +## 3. Design & UX + +### Principe : Le design au service du message + +| Ce qu'il faut | Ce qu'il faut eviter | +|---------------|---------------------| +| Animations subtiles | Trop d'effets = distraction | +| Se demarquer visuellement | Style au detriment du contenu | +| Design soigne | Impressionner pour impressionner | +| Pages aerees | Paves de texte | +| Ton sympathique | Trop formel ou trop familier | + +--- + +## 4. Competences & Outils + +### Principe : Adapter la preuve a l'outil + +> "Les barres de progression ne repondent pas a la vraie question : 'Peut-il livrer MON projet ?'" + +### Strategie par type + +| Type d'outil | Comment le presenter | +|--------------|---------------------| +| **Technos de dev** (HTML, CSS, JS...) | Liees aux projets (preuves vivantes) | +| **Outils demontrables** (Git, Notion...) | Liens vers preuves concretes (depots, pages) | +| **Outils non demontrables** (IDE...) | Liste + explication de l'usage concret | + +### Exemples concrets + +- **Git** : Liens vers depots open-source +- **Notion** : Page de gestion de projet visible +- **PHPStorm** : Description de l'usage dans l'environnement de travail + +--- + +## 5. Presentation des Projets + +### Structure d'une page projet + +``` +PAGE PROJET + ++-- CONTEXTE +| +-- Quand, pour qui, pourquoi +| +-- Besoins et contraintes +| ++-- SOLUTION TECHNIQUE +| +-- Technologies choisies +| +-- Argumentation des choix +| ++-- TRAVAIL D'EQUIPE (si applicable) +| +-- Votre role / contribution +| +-- Organisation de la communication +| +-- Outils utilises (imposes ou initiative) +| +-- Ce que vous avez simplifie +| ++-- REALISATION +| +-- Duree du projet +| ++-- RESULTATS (optionnel) +| +-- Temoignage client sur les benefices +| ++-- DIFFICULTES (secondaire) +| +-- Problemes rencontres et solutions +| ++-- VOIR LE PROJET + +-- Lien vers le site/demo + +-- Ou captures d'ecran si non disponible +``` + +### Strategie de selection + +| Niveau | Format | Criteres | +|--------|--------|----------| +| **Projets vedettes** (5-10) | Page dediee complete | Fini/en cours, demo dispo, valeur en competences | +| **Projets secondaires** | Liste simple | Petits projets, sujets deja couverts, peu de valeur ajoutee | + +### Criteres pour un projet vedette + +- Projet fini ou en cours actif (pas avorte) +- Demo disponible (idealement) +- A permis de resoudre des problemes concrets +- Ou gestion/organisation interessante +- = Valeur en competences acquises + +--- + +## 6. Page "Me Decouvrir" + +### Equilibre personnel/professionnel + +| OK de partager | Trop personnel | Trop generique | +|----------------|----------------|----------------| +| Passions / hobbies | Localite precise | "Je suis passionne" | +| Ce qui vide la tete | Environnement familial | Phrases bateau | +| Parcours / etudes | | Cliches du metier | +| Le "pourquoi" du metier | | | + +### Structure de la page + +``` +PAGE A PROPOS + ++-- QUI JE SUIS +| +-- Ton sympathique, pas trop formel +| +-- Texte concis et aere +| +-- Grande ville (pas adresse precise) +| ++-- MON PARCOURS +| +-- Etudes / Formation +| +-- Ce qui m'a amene au dev web +| +-- 5+ ans d'experience (longevite) +| ++-- POURQUOI CE METIER +| +-- Histoire personnelle authentique +| +-- Pas de cliches +| ++-- EN DEHORS DU CODE +| +-- Passions / hobbies +| +-- Ce qui me vide la tete +| +-- Preuves visuelles si possible +| ++-- PREUVES DE PASSION (implicites) + +-- Projets perso visibles + +-- Veille tech / actualites + +-- Engagement sur la duree +``` + +--- + +## 7. Contact & Call-to-Action + +### Principe : Zero friction + +> "Ce qui pourrait empecher quelqu'un de convaincu de me contacter sont les limites qui cassent la fluidite." + +### Strategie CTA + +| Element | Implementation | +|---------|----------------| +| **Bouton navbar** | Style rempli, se detache, toujours visible | +| **Page contact** | Dediee (pas modale) pour persistance | +| **Formulaire** | Labels clairs, zero reflexion | +| **Liens secondaires** | LinkedIn, Instagram, GitHub, mailto | + +### Structure du formulaire + +| Champ | Type | Obligatoire | +|-------|------|-------------| +| Nom | Texte | Oui | +| Prenom | Texte | Oui | +| Entreprise | Texte | Non | +| Categorie | Dropdown | Oui | +| Objet | Texte | Oui | +| Message | Zone de texte | Oui | +| Captcha | reCAPTCHA v3 invisible | Auto | + +### Categories de contact + +1. "Je souhaite parler de mon projet" (Client/Freelance) +2. "Je souhaite vous proposer un poste" (Recruteur/Job) +3. "Autre" + +### Points cles + +- Persistance des donnees si le visiteur quitte et revient +- reCAPTCHA invisible (pas de friction) +- Formulaire = primaire, liens reseaux = secondaire + +--- + +## Plan d'Action + +### Priorites Immediates + +| # | Action | +|---|--------| +| 1 | Selectionner 5-10 projets vedettes selon les criteres | +| 2 | Structurer chaque projet (contexte -> solution -> resultat) | +| 3 | Rediger la page "Me decouvrir" avec ton authentique | +| 4 | Creer le formulaire de contact avec persistance des donnees | +| 5 | Integrer le bouton CTA dans la navbar | + +### Developpements Futurs + +| # | Action | +|---|--------| +| 1 | Collecter temoignages clients/employeurs | +| 2 | Documenter les outils demontrables (depots Git public, etc.) | +| 3 | Ajouter preuves visuelles des passions | +| 4 | Creer liste des projets secondaires | + +--- + +## Principes Cles a Retenir + +### 1. MONTRER PLUTOT QUE DIRE +Chaque affirmation doit avoir une preuve tangible. + +### 2. ADAPTER LA PREUVE A L'ELEMENT +- Projets = liens visitables +- Outils = demonstrations concretes +- Soft skills = temoignages tiers + +### 3. ZERO FRICTION +Du premier clic jusqu'au contact, aucun obstacle. + +### 4. AUTHENTICITE VERIFIABLE +Pas de mensonges, tout peut etre verifie par le visiteur. + +### 5. EQUILIBRE PERSONNEL/PROFESSIONNEL +Humain et accessible sans etre intrusif. + +--- + +## Reflexion & Suivi + +### Ce qui a bien fonctionne dans cette session + +- La technique des Premiers Principes a permis de deconstruire chaque aspect +- Le principe "Montrer plutot que dire" est devenu le fil conducteur +- Vision coherente entre tous les elements du portfolio + +### Pistes pour exploration future + +- Tests utilisateurs une fois le portfolio cree +- A/B testing sur les CTA +- Analyse des taux de conversion du formulaire + +### Questions emergentes + +- Comment mesurer l'efficacite du portfolio ? +- Quelle frequence de mise a jour des projets ? +- Comment gerer les projets confidentiels ? + +--- + +*Document genere lors d'une session de brainstorming facilitee par Mary (Business Analyst) - Methode BMAD* diff --git a/docs/front-end-spec.md b/docs/front-end-spec.md new file mode 100644 index 0000000..d37284d --- /dev/null +++ b/docs/front-end-spec.md @@ -0,0 +1,784 @@ +# Portfolio Développeur Web - Spécification UI/UX + +## 1. Introduction + +Ce document définit les objectifs d'expérience utilisateur, l'architecture de l'information, les flux utilisateurs et les spécifications de design visuel pour l'interface utilisateur du **Portfolio Développeur Web**. Il sert de fondation pour le design visuel et le développement frontend, assurant une expérience cohérente et centrée sur l'utilisateur. + +### 1.1 Objectifs UX & Principes de Design + +#### Personas Utilisateurs Cibles + +| Persona | Description | +|---------|-------------| +| **Recruteur** | Professionnel RH ou technique cherchant un candidat fiable, compétent, avec des preuves vérifiables de ses compétences | +| **Client Potentiel** | Entrepreneur ou responsable projet souhaitant évaluer la capacité à livrer un projet freelance, sensible à la qualité et au professionnalisme | +| **Curieux / Pair** | Développeur ou professionnel tech consultant le portfolio par curiosité ou benchmark | + +#### Objectifs d'Utilisabilité + +- **Découverte rapide** : Comprendre en <10 secondes qui est le développeur et ce qu'il propose +- **Navigation intuitive** : Trouver n'importe quelle section en maximum 2 clics +- **Zéro friction** : Aucun obstacle du premier clic jusqu'au formulaire de contact envoyé +- **Preuves accessibles** : Chaque compétence/affirmation liée à une preuve cliquable +- **Mobile-first** : Expérience optimale sur smartphone (prioritaire) + +#### Principes de Design + +1. **Le design au service du message** — L'interface reste au second plan, le contenu prime +2. **Montrer plutôt que dire** — Chaque affirmation soutenue par une preuve tangible +3. **Progressive disclosure** — Projets vedettes en détail, projets secondaires en liste +4. **Feedback immédiat** — Toute action a une réponse visuelle claire +5. **Accessible par défaut** — Contrastes, navigation clavier, structure sémantique + +### 1.2 Journal des modifications + +| Date | Version | Description | Auteur | +|------|---------|-------------|--------| +| 2026-01-22 | 0.1 | Création initiale | Sally (UX Expert) | + +## 2. Architecture de l'Information (IA) + +### 2.1 Site Map / Inventaire des Écrans + +```mermaid +graph TD + A[🏠 Accueil] --> B[📁 Projets] + A --> C[🛠 Compétences] + A --> D[👤 Me Découvrir] + A --> E[✉️ Contact] + + B --> B1[Projets Vedettes] + B --> B2[Projets Secondaires] + B1 --> B3[Page Projet 1] + B1 --> B4[Page Projet 2] + B1 --> B5[Page Projet N...] + + C --> C1[Technologies de Dev] + C --> C2[Outils Démontrables] + C --> C3[Autres Outils] + + D --> D1[Parcours] + D --> D2[Motivations] + D --> D3[Passions] + D --> D4[Témoignages] + + E --> E1[Formulaire] + E --> E2[Liens Secondaires] +``` + +### 2.2 Structure de Navigation + +**Navigation Primaire (Navbar sticky)** : + +| Élément | URL | Notes | +|---------|-----|-------| +| Accueil | `/` | Logo cliquable | +| Projets | `/projets` | Liste vedettes + secondaires | +| Compétences | `/competences` | Technos + outils | +| Me Découvrir | `/a-propos` | Parcours + témoignages | +| **Me Contacter** | `/contact` | **CTA bouton distinct** | + +**Navigation Secondaire** : +- **Footer** : Liens réseaux sociaux (LinkedIn, GitHub), mentions légales +- **Breadcrumbs** : Sur pages projet uniquement (`Accueil > Projets > Nom du projet`) + +**Stratégie de Breadcrumb** : +- Activé uniquement sur les pages projet individuelles +- Format : Texte cliquable pour chaque niveau +- Dernier élément (page actuelle) non cliquable + +## 3. Flux Utilisateurs + +### 3.1 Découverte et Exploration d'un Projet + +**Objectif utilisateur** : Évaluer les compétences du développeur à travers un projet concret + +**Points d'entrée** : +- Page d'accueil (CTA "Découvrir mes projets") +- Navbar (lien "Projets") +- Page Compétences (lien technologie → projets associés) + +**Critères de succès** : L'utilisateur visite le projet en ligne ou consulte les captures d'écran + +```mermaid +graph TD + A[Entrée: Accueil/Navbar] --> B[Page Projets] + B --> C{Choix du projet} + C --> D[Page Projet Détaillée] + D --> E[Lecture: Contexte] + E --> F[Lecture: Solution Technique] + F --> G[Lecture: Réalisation] + G --> H{Projet en ligne?} + H -->|Oui| I[🔗 Visite du projet] + H -->|Non| J[📷 Galerie captures] + I --> K{Convaincu?} + J --> K + K -->|Oui| L[CTA: Me Contacter] + K -->|Non| M[Retour liste projets] + M --> C +``` + +**Edge Cases & Gestion d'erreurs** : +- Projet hors ligne : Afficher "Projet non disponible" + captures d'écran +- Lien externe cassé : Vérification périodique, fallback vers captures +- Projet confidentiel : Mention "Projet sous NDA" + description anonymisée + +--- + +### 3.2 Prise de Contact (Conversion) + +**Objectif utilisateur** : Envoyer un message au développeur + +**Points d'entrée** : +- Bouton CTA navbar (toutes pages) +- Fin de page projet +- Fin de page "Me Découvrir" + +**Critères de succès** : Message envoyé avec confirmation visible + +```mermaid +graph TD + A[CTA: Me Contacter] --> B[Page Contact] + B --> C[Remplissage formulaire] + C --> D{Données persistées?} + D -->|Oui| E[Pré-remplissage auto] + D -->|Non| F[Formulaire vierge] + E --> G[Complétion] + F --> G + G --> H[Validation temps réel] + H --> I{Erreurs?} + I -->|Oui| J[Affichage erreurs inline] + J --> G + I -->|Non| K[Clic Envoyer] + K --> L[Spinner + bouton désactivé] + L --> M{reCAPTCHA OK?} + M -->|Non| N[Erreur discrète, retry] + M -->|Oui| O[Envoi PHP] + O --> P{Succès?} + P -->|Oui| Q[✅ Message de confirmation] + P -->|Non| R[❌ Erreur + données conservées] + Q --> S[localStorage vidé] + R --> G +``` + +**Edge Cases & Gestion d'erreurs** : +- Utilisateur quitte et revient : Données restaurées depuis localStorage +- reCAPTCHA échoue : Dégradation gracieuse, formulaire reste fonctionnel +- Erreur serveur : Message explicite, données préservées pour retry +- Double soumission : Bouton désactivé pendant traitement + +--- + +### 3.3 Vérification des Compétences + +**Objectif utilisateur** : Valider que le développeur maîtrise une technologie spécifique + +**Points d'entrée** : +- Navbar (lien "Compétences") +- Badge technologie sur carte projet + +**Critères de succès** : L'utilisateur trouve la preuve de maîtrise (projet ou lien externe) + +```mermaid +graph TD + A[Page Compétences] --> B{Type de compétence?} + B -->|Techno Dev| C[Liste technologies] + B -->|Outil| D[Liste outils] + C --> E[Clic sur technologie] + E --> F[Voir projets associés] + F --> G[Navigation vers projet] + D --> H{Démontrable?} + H -->|Oui| I[🔗 Lien preuve externe] + H -->|Non| J[📝 Contexte d'utilisation] + I --> K[Visite preuve: GitHub, Notion...] +``` + +**Edge Cases & Gestion d'erreurs** : +- Technologie sans projet associé : Masquer ou afficher avec mention "En apprentissage" +- Lien externe cassé : Vérification régulière, fallback texte descriptif + +## 4. Wireframes & Mockups + +**Approche Design** : Wireframes low-fidelity en description textuelle. Le développement se fera directement en HTML/Tailwind CSS, ce document sert de référence. + +### 4.1 Page d'Accueil + +**Objectif** : Accroche immédiate + orientation vers les sections + +``` +┌─────────────────────────────────────────────────────────────┐ +│ NAVBAR (sticky) │ +│ [Logo] Accueil Projets Compétences À propos [CTA] │ +├─────────────────────────────────────────────────────────────┤ +│ HERO SECTION │ +│ [Photo ou Illustration] │ +│ Prénom NOM │ +│ Développeur Web Full-Stack │ +│ "Phrase d'accroche percutante" │ +│ [ Découvrir mes projets → ] │ +├─────────────────────────────────────────────────────────────┤ +│ SECTIONS RAPIDES │ +│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ +│ │ 📁 │ │ 🛠 │ │ 👤 │ │ +│ │ Projets │ │ Compétences │ │ Me Découvrir│ │ +│ │ [Voir →] │ │ [Voir →] │ │ [Voir →] │ │ +│ └─────────────┘ └─────────────┘ └─────────────┘ │ +├─────────────────────────────────────────────────────────────┤ +│ FOOTER LinkedIn GitHub Email © 2026 │ +└─────────────────────────────────────────────────────────────┘ +``` + +**Interactions** : Fade-in au chargement, hover sur cartes (élévation) + +--- + +### 4.2 Page Projets + +**Objectif** : Présenter les projets vedettes + secondaires + +``` +┌─────────────────────────────────────────────────────────────┐ +│ NAVBAR │ +├─────────────────────────────────────────────────────────────┤ +│ Mes Projets │ +│ Découvrez les réalisations qui illustrent mon travail │ +├─────────────────────────────────────────────────────────────┤ +│ PROJETS VEDETTES │ +│ ┌──────────────────┐ ┌──────────────────┐ │ +│ │ [Thumbnail] │ │ [Thumbnail] │ │ +│ │ Titre Projet │ │ Titre Projet │ │ +│ │ [PHP] [JS] [CSS] │ │ [React] [Node] │ │ +│ └──────────────────┘ └──────────────────┘ │ +├─────────────────────────────────────────────────────────────┤ +│ AUTRES PROJETS │ +│ • Projet A — Description courte — [PHP, JS] │ +│ • Projet B — Description courte — [WordPress] │ +├─────────────────────────────────────────────────────────────┤ +│ FOOTER │ +└─────────────────────────────────────────────────────────────┘ +``` + +**Interactions** : Hover cartes (ombre/élévation), badges cliquables + +--- + +### 4.3 Page Projet Individuelle + +**Objectif** : Détailler un projet avec preuves + +``` +┌─────────────────────────────────────────────────────────────┐ +│ NAVBAR │ +├─────────────────────────────────────────────────────────────┤ +│ Accueil > Projets > Nom du Projet (breadcrumb) │ +├─────────────────────────────────────────────────────────────┤ +│ TITRE DU PROJET │ +│ [PHP] [JavaScript] [Tailwind CSS] │ +│ ┌─────────────────────────────────────────┐ │ +│ │ [Image principale] │ │ +│ └─────────────────────────────────────────┘ │ +│ [ Voir le projet en ligne → ] │ +├─────────────────────────────────────────────────────────────┤ +│ CONTEXTE — Description du projet │ +├─────────────────────────────────────────────────────────────┤ +│ SOLUTION TECHNIQUE — Technologies et argumentation │ +├─────────────────────────────────────────────────────────────┤ +│ TRAVAIL D'ÉQUIPE — Rôle, organisation (si applicable) │ +├─────────────────────────────────────────────────────────────┤ +│ RÉALISATION — Durée + Galerie [img1] [img2] [img3] │ +├─────────────────────────────────────────────────────────────┤ +│ 💬 TÉMOIGNAGE — "Citation..." — Nom, Rôle │ +├─────────────────────────────────────────────────────────────┤ +│ [ ← Retour aux projets ] [ Me contacter → ] │ +├─────────────────────────────────────────────────────────────┤ +│ FOOTER │ +└─────────────────────────────────────────────────────────────┘ +``` + +--- + +### 4.4 Page Contact + +**Objectif** : Conversion sans friction + +``` +┌─────────────────────────────────────────────────────────────┐ +│ NAVBAR │ +├─────────────────────────────────────────────────────────────┤ +│ Me Contacter │ +│ Une question, un projet ? Parlons-en ! │ +├─────────────────────────────────────────────────────────────┤ +│ ┌─────────────────────────────────────────┐ │ +│ │ Nom * Prénom * │ │ +│ │ [_______________] [_______________] │ │ +│ │ Email * Entreprise │ │ +│ │ [_______________] [_______________] │ │ +│ │ Catégorie * [▼ Sélectionner...] │ │ +│ │ Objet * [_____________________] │ │ +│ │ Message * [_____________________] │ │ +│ │ [_____________________] │ │ +│ │ [ Envoyer le message ] │ │ +│ │ [Effacer le formulaire] │ │ +│ └─────────────────────────────────────────┘ │ +├─────────────────────────────────────────────────────────────┤ +│ Retrouvez-moi aussi sur : │ +│ [LinkedIn] [GitHub] [Email direct] │ +├─────────────────────────────────────────────────────────────┤ +│ FOOTER │ +└─────────────────────────────────────────────────────────────┘ +``` + +**Interactions** : Validation temps réel, spinner à l'envoi, message de confirmation + +## 5. Component Library / Design System + +**Stratégie** : Utilisation de Tailwind CSS avec des classes utilitaires. Pas de design system externe. Les composants sont définis comme des patterns HTML/Tailwind réutilisables. + +### 5.1 Bouton Principal (CTA) + +| Propriété | Valeur | +|-----------|--------| +| **Objectif** | Action principale (Contact, Voir projet) | +| **Variantes** | Primary (rempli), Secondary (outline), Ghost (texte) | +| **États** | Default, Hover, Focus, Disabled, Loading | + +``` +Primary: [████████████] → Fond accent, texte blanc +Secondary: [────────────] → Bordure accent, fond transparent +Ghost: [ Texte → ] → Texte accent, pas de bordure +``` + +### 5.2 Carte Projet + +| Propriété | Valeur | +|-----------|--------| +| **Objectif** | Aperçu cliquable d'un projet vedette | +| **Variantes** | Standard (grille), Compact (liste secondaires) | +| **États** | Default, Hover (élévation + ombre) | + +**Structure** : Thumbnail (16:9, lazy loading) → Titre (H3) → Badges technologies (max 4) + +### 5.3 Badge Technologie + +| Propriété | Valeur | +|-----------|--------| +| **Objectif** | Afficher une technologie/outil | +| **Variantes** | Standard (petit), Large (page compétences) | +| **États** | Default, Hover (si cliquable) | + +Exemple : `[PHP] [JavaScript] [Tailwind CSS] [+3]` + +### 5.4 Champ de Formulaire + +| Propriété | Valeur | +|-----------|--------| +| **Objectif** | Saisie utilisateur | +| **Variantes** | Text, Email, Textarea, Select | +| **États** | Default, Focus, Error, Disabled, Filled | + +**Structure** : Label (*) → Input avec bordure → Message d'erreur inline + +### 5.5 Navbar + +| Propriété | Valeur | +|-----------|--------| +| **Objectif** | Navigation globale persistante | +| **Variantes** | Desktop (horizontal), Mobile (hamburger) | +| **États** | Default, Scrolled (ombre), Menu ouvert | + +**Structure** : Logo → Liens navigation (état actif) → Bouton CTA → Hamburger (mobile) + +### 5.6 Section Témoignage + +| Propriété | Valeur | +|-----------|--------| +| **Objectif** | Afficher une citation client/employeur | +| **Variantes** | Inline (page projet), Card (section dédiée) | + +**Structure** : Guillemets → Citation (italique) → Auteur (nom, rôle, entreprise) → Photo (optionnel) + +### 5.7 Breadcrumb + +| Propriété | Valeur | +|-----------|--------| +| **Objectif** | Indiquer la position dans la hiérarchie | +| **Usage** | Pages projet individuelles uniquement | + +Format : `Accueil > Projets > Nom du Projet` (derniers éléments cliquables sauf actuel) + +### 5.8 Footer + +| Propriété | Valeur | +|-----------|--------| +| **Objectif** | Informations secondaires et liens réseaux | + +**Structure** : Icônes réseaux sociaux → Copyright → Mentions légales + +## 6. Branding & Style Guide + +### 6.1 Identité Visuelle + +**Thème** : Sombre (Dark Mode) +**Logo** : Imposé, disponible dans `assets/img/` +**Style** : Moderne, clean, technique mais accessible + +### 6.2 Palette de Couleurs (Thème Sombre) + +| Type | Hex | Tailwind Config | Usage | +|------|-----|-----------------|-------| +| **Primary** | `#FA784F` | `primary` | CTA, liens, éléments d'accent | +| **Primary Hover** | `#FB9570` | `primary-light` | Hover sur primary | +| **Primary Dark** | `#E5623A` | `primary-dark` | Active/pressed | +| **Background** | `#17171F` | `background` | Fond de page principal | +| **Surface** | `#1E1E28` | `surface` | Cartes, navbar, composants | +| **Surface Light** | `#2A2A36` | `surface-light` | Hover cartes, inputs focus | +| **Border** | `#3A3A48` | `border` | Bordures, séparateurs | +| **Text Primary** | `#F5F5F7` | `text-primary` | Titres, texte principal | +| **Text Secondary** | `#A1A1AA` | `text-secondary` | Texte secondaire, labels | +| **Text Muted** | `#71717A` | `text-muted` | Placeholders, désactivé | +| **Success** | `#34D399` | `success` | Confirmations | +| **Warning** | `#FBBF24` | `warning` | Avertissements | +| **Error** | `#F87171` | `error` | Erreurs | +| **Info** | `#60A5FA` | `info` | Informations | + +### 6.3 Configuration Tailwind + +```javascript +// tailwind.config.js +module.exports = { + theme: { + extend: { + colors: { + primary: { + DEFAULT: '#FA784F', + light: '#FB9570', + dark: '#E5623A', + }, + background: '#17171F', + surface: { + DEFAULT: '#1E1E28', + light: '#2A2A36', + }, + border: '#3A3A48', + text: { + primary: '#F5F5F7', + secondary: '#A1A1AA', + muted: '#71717A', + }, + success: '#34D399', + warning: '#FBBF24', + error: '#F87171', + info: '#60A5FA', + }, + }, + }, +} +``` + +### 6.4 Typographie + +| Usage | Police | Fallback | +|-------|--------|----------| +| **Titres & Corps** | Inter | system-ui, sans-serif | +| **Code** | JetBrains Mono | monospace | + +**Échelle Typographique** : + +| Élément | Taille | Poids | Line Height | +|---------|--------|-------|-------------| +| H1 | 2.5rem (40px) | 700 | 1.2 | +| H2 | 2rem (32px) | 600 | 1.3 | +| H3 | 1.5rem (24px) | 600 | 1.4 | +| Body | 1rem (16px) | 400 | 1.6 | +| Small | 0.875rem (14px) | 400 | 1.5 | + +### 6.5 Iconographie + +**Bibliothèque** : Heroicons (outline navigation, solid états actifs) +**Tailles** : 24px (nav), 20px (inline), 16px (badges) +**Couleur** : Hérite du texte parent + +### 6.6 Espacements + +**Système** : Base 4px, classes Tailwind standard + +| Token | Valeur | Usage | +|-------|--------|-------| +| sm | 8px | Entre éléments proches | +| md | 16px | Padding composants | +| lg | 24px | Entre sections | +| xl | 32px | Marges de section | +| 2xl | 48px | Séparation majeure | + +## 7. Exigences d'Accessibilité + +### 7.1 Niveau de Conformité + +**Standard** : WCAG 2.1 Niveau AA (bonnes pratiques, pas de certification formelle) + +### 7.2 Contrastes de Couleurs + +| Élément | Couleurs | Ratio | Conformité | +|---------|----------|-------|------------| +| Texte principal / fond | `#F5F5F7` / `#17171F` | 15.5:1 | AAA | +| Texte secondaire / fond | `#A1A1AA` / `#17171F` | 6.8:1 | AA | +| Primary / fond | `#FA784F` / `#17171F` | 5.2:1 | AA | +| Texte / bouton primary | `#17171F` / `#FA784F` | 5.2:1 | AA | + +### 7.3 Indicateurs de Focus + +- **Style** : `outline: 2px solid #FA784F; outline-offset: 2px;` +- **Visibilité** : Toujours visible, jamais supprimé +- **Cohérence** : Identique sur tous les éléments interactifs + +### 7.4 Navigation Clavier + +| Touche | Action | +|--------|--------| +| `Tab` | Navigation séquentielle | +| `Shift+Tab` | Navigation inverse | +| `Enter` | Activation liens/boutons | +| `Escape` | Fermeture menu mobile | + +**Ordre** : `tabindex` naturel du DOM respecté + +### 7.5 Support Lecteur d'Écran + +- **Landmarks** : `
`, `