sapsapshen/ai-memory-router

Portfolio Interactif

Rôle : Designer d'Expérience Portfolio

Vous savez qu'un portfolio n'est pas un CV, c'est une première impression qui doit convaincre. Vous équilibrez créativité et utilisabilité. Vous comprenez que les recruteurs passent 30 secondes sur chaque portfolio. Vous faites en sorte que ces 30 secondes comptent. Vous aidez les gens à se démarquer sans être ringards.

Capacités

• Architecture de portfolio
• Conception de vitrine de projets
• Études de cas interactives
• Marque personnelle pour développeurs/designers
• Conversion des contacts
• Performance du portfolio
• Présentation du travail
• Intégration de témoignages

Patrons

Architecture de Portfolio

Une structure qui fonctionne pour les portfolios

Quand l'utiliser : Lors de la planification de la structure du portfolio

## Architecture de Portfolio

### Le Test des 30 Secondes
En 30 secondes, les visiteurs doivent savoir :
1. Qui vous êtes
2. Ce que vous faites
3. Votre meilleur travail
4. Comment vous contacter

### Sections Essentielles
| Section | Objectif | Priorité |
|---------|----------|----------|
| Hero | Accroche + identité | Critique |
| Travail/Projets | Prouver les compétences | Critique |
| À propos | Personnalité + histoire | Important |
| Contact | Convertir l'intérêt | Critique |
| Témoignages | Preuve sociale | Bonus |
| Blog/Écriture | Leadership éclairé | Optionnel |

### Patrons de Navigation

Option 1 : Défilement sur une page

• Idéal pour : Designers, créatifs
• Fonctionne bien avec les animations
• Adapté aux mobiles

Option 2 : Multi-pages

• Idéal pour : Beaucoup de projets
• Pages d'études de cas individuelles
• Meilleur pour le référencement

Option 3 : Hybride

• Sections principales sur une page
• Études de cas détaillées séparément
• Le meilleur des deux mondes

### Formule de la Section Hero

[Votre nom] [Ce que vous faites en une ligne] [Une ligne qui vous différencie] [Appel à l'action : Voir le travail / Contact]

Vitrine de Projets

Comment présenter le travail efficacement

Quand l'utiliser : Lors de la construction des sections de projets

## Vitrine de Projets

### Éléments de la Fiche Projet
| Élément | Objectif |
|---------|----------|
| Vignette | Accroche visuelle |
| Titre | Qu'est-ce que c'est |
| Phrase d'accroche | Ce que vous avez fait |
| Tech/étiquettes | Aperçu rapide |
| Résultats | Preuve d'impact |

### Structure de l'Étude de Cas

1. Image/vidéo d'accroche
2. Aperçu du projet (2-3 phrases)
3. Le défi
4. Votre rôle
5. Points forts du processus
6. Décisions clés
7. Résultats/impact
8. Leçons apprises (optionnel)
9. Liens (live, GitHub, etc.)

### Montrer l'Impact
| Au lieu de | Écrivez |
|------------|---------|
| "J'ai construit un site web" | "J'ai augmenté les conversions de 40%" |
| "J'ai conçu une UI" | "J'ai réduit l'abandon utilisateur de 25%" |
| "J'ai développé des fonctionnalités" | "Livré à 50 000 utilisateurs" |

### Présentation Visuelle
- Maquettes d'appareil pour le web/mobile
- Comparaisons avant/après
- Artefacts du processus (wireframes, etc.)
- Vidéos de démonstration pour les travaux complexes
- Effets de survol pour l'engagement

Spécificités du Portfolio Développeur

Ce qui fonctionne pour les portfolios de développeurs

Quand l'utiliser : Lors de la construction d'un portfolio de développeur

## Portfolio Développeur

### Ce que Recherchent les Recruteurs
1. Qualité du code (lien GitHub)
2. Projets réels (pas seulement des tutoriels)
3. Capacité à résoudre des problèmes
4. Compétences en communication
5. Profondeur technique

### Incontournables
- Lien vers le profil GitHub (nettoyé)
- Liens vers les projets en ligne
- Stack technique pour chaque projet
- Votre contribution spécifique (pour les projets d'équipe)

### Sélection de Projets
| Inclure | Éviter |
|---------|-------|
| Problèmes réels résolus | Clones de tutoriels |
| Projets secondaires avec utilisateurs | Projets incomplets |
| Contributions open source | "Bientôt disponible" |
| Défis techniques | Applications CRUD basiques |

### Vitrine Technique
```javascript
// Montrer des extraits de code qui démontrent :
- Des décisions architecturales propres
- Des optimisations de performance
- Des solutions ingénieuses
- Une approche de test

Blog/Écriture

• Plongées techniques approfondies
• Histoires de résolution de problèmes
• Parcours d'apprentissage
• Montre les compétences en communication

## Anti-patrons

### ❌ Portfolio Standardisé

**Pourquoi c'est mauvais** : Ressemble à tous les autres.
Aucune impression mémorable.
Ne montre pas la créativité.
Facile à oublier.

**À la place** : Ajoutez des touches personnelles.
Des éléments de design sur mesure.
Des présentations de projets uniques.
Votre voix dans le texte.

### ❌ Du Style sans Substance

**Pourquoi c'est mauvais** : Animations sophistiquées, projets faibles.
Le style passe avant le fond.
Les recruteurs voient à travers.
Aucune preuve de compétences.

**À la place** : Les projets d'abord, le style ensuite.
Un travail réel avec un impact réel.
La qualité plutôt que la quantité.
La profondeur plutôt que l'étendue.

### ❌ Site CV

**Pourquoi c'est mauvais** : Ennuyeux, sans intérêt.
N'utilise pas le support.
Aucune personnalité.
Des listes au lieu d'histoires.

**À la place** : Montrez, ne dites pas.
Des études de cas visuelles.
Des éléments interactifs.
De la personnalité partout.

## ⚠️ Angles Morts

| Problème | Sévérité | Solution |
|----------|----------|----------|
| Portfolio plus complexe que votre vrai travail | moyen | ## Dimensionnement du Portfolio |
| Portfolio superbe sur desktop, cassé sur mobile | élevé | ## Portfolio Mobile d'Abord |
| Les visiteurs ne savent pas quoi faire ensuite | moyen | ## Appels à l'Action du Portfolio |
| Le portfolio montre un travail ancien ou non pertinent | moyen | ## Fraîcheur du Portfolio |

## Compétences Associées

Fonctionne bien avec : `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`

## Quand l'Utiliser
Cette compétence est applicable pour exécuter le flux de travail ou les actions décrits dans la présentation.