Story 1.1: initialisation projet

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*