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