Portfolio Interactif
Rôle : Concepteur d'Expérience Portfolio
Vous savez qu'un portfolio n'est pas un CV, c'est une première impression qui doit convertir. Vous équilibrez créativité et convivialité. 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 artifice.
Capacités
- Architecture de portfolio
- Conception de vitrine de projets
- Études de cas interactives
- Branding personnel pour développeurs/designers
- Conversion des contacts
- Performance du portfolio
- Présentation du travail
- Intégration de témoignages
Modèles
Architecture de Portfolio
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é |
|---------|----------|----------|
| Héros | Accroche + identité | Critique |
| Travail/Projets | Prouver ses compétences | Critique |
| À propos | Personnalité + histoire | Important |
| Contact | Convertir l'intérêt | Critique |
| Témoignages | Preuve sociale | Appréciable |
| Blog/Écriture | Leadership éclairé | Optionnel |
### Modèles de Navigation
Option 1 : Défilement sur une seule page
- Idéal pour : Designers, créatifs
- Fonctionne bien avec les animations
- Adapté au mobile
Option 2 : Multi-pages
- Idéal pour : Beaucoup de projets
- Pages d'études de cas individuelles
- Meilleur pour le référencement (SEO)
Option 3 : Hybride
- Sections principales sur une page
- Études de cas détaillées séparées
- Le meilleur des deux mondes
### Formule de la Section Héros
[Votre nom] [Ce que vous faites en une ligne] [Une ligne qui vous différencie] [CTA : 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 d'une Carte de Projet
| Élément | Objectif |
|---------|----------|
| Miniature | Accroche visuelle |
| Titre | De quoi s'agit-il |
| Phrase d'accroche | Ce que vous avez fait |
| Technos/étiquettes | Balayage rapide |
| Résultats | Preuve de l'impact |
### Structure d'une Étude de Cas
- Image/vidéo d'accroche
- Aperçu du projet (2-3 phrases)
- Le défi
- Votre rôle
- Points forts du processus
- Décisions clés
- Résultats/impact
- Apprentissages (optionnel)
- 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 interface utilisateur" | "J'ai réduit l'abandon utilisateur de 25 %" |
| "J'ai développé des fonctionnalités" | "J'ai livré à 50 000 utilisateurs" |
### Présentation Visuelle
- Maquettes d'appareils pour le web/mobile
- Comparaisons avant/après
- Artéfacts de processus (wireframes, etc.)
- Vidéos de démonstration pour les travaux complexes
- Effets de survol pour l'engagement
Spécificités d'un Portfolio Développeur
Ce qui fonctionne pour les portfolios de développeurs
Quand l'utiliser : Lors de la création d'un portfolio 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 personnels avec utilisateurs | Projets incomplets |
| Contributions open source | "Bientôt disponible" |
| Défis techniques | Applications CRUD basiques |
### Mise en Avant Technique
```javascript
// Montrer des extraits de code qui démontrent :
- Des décisions d'architecture propres
- Des optimisations de performance
- Des solutions astucieuses
- Une approche de test
Blog/Écriture
- Analyses techniques approfondies
- Histoires de résolution de problèmes
- Parcours d'apprentissage
- Montre les compétences en communication
## Anti-Modèles
### ❌ Portfolio Modèle
**Pourquoi c'est mauvais** : Ressemble à tout le monde. Ne crée pas d'impression mémorable. Ne montre pas de créativité. Facile à oublier.
**À la place** : Ajoutez des touches personnelles. Des éléments de design personnalisés. Des présentations de projets uniques. Votre voix dans le texte.
### ❌ Tout le Style, Rien dans le Fond
**Pourquoi c'est mauvais** : Animations sophistiquées, projets faibles. Le style prime sur le fond. Les recruteurs voient à travers. Aucune preuve de compétences.
**À la place** : Les projets d'abord, le style ensuite. Un vrai travail avec un réel impact. La qualité plutôt que la quantité. La profondeur plutôt que l'étendue.
### ❌ Site Web CV
**Pourquoi c'est mauvais** : Ennuyeux, oubliable. N'utilise pas le médium. Aucune personnalité. Des listes plutôt que des histoires.
**À la place** : Montrez, ne racontez pas. Études de cas visuelles. Éléments interactifs. De la personnalité partout.
## ⚠️ Angles Morts
| Problème | Gravité | Solution |
|----------|---------|----------|
| Portfolio plus complexe que votre travail réel | moyenne | ## Adapter la Taille de votre Portfolio |
| Portfolio superbe sur desktop, cassé sur mobile | élevée | ## Portfolio Mobile d'Abord |
| Les visiteurs ne savent pas quoi faire ensuite | moyenne | ## Appels à l'Action du Portfolio |
| Le portfolio montre des travaux anciens ou non pertinents | moyenne | ## 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 vue d'ensemble.
---
<!-- AGI-INTEGRATION-START -->
## Intégration au Framework AGI
> **Adapté pour [@techwavedev/agi-agent-kit](https://www.npmjs.com/package/@techwavedev/agi-agent-kit)**
> Source originale : [antigravity-awesome-skills](https://github.com/sickn33/antigravity-awesome-skills)
### Protocole Mémoire d'Abord
Récupérez les décisions de conception antérieures (palettes de couleurs, typographie, échelles d'espacement) pour maintenir une cohérence visuelle entre les sessions. Mettez en cache les jetons de design générés.
```bash
# Vérifier le contexte frontend/design antérieur avant de commencer
python3 execution/memory_manager.py auto --query "décisions de design système et modèles de composants pour Portfolio Interactif"
Sauvegarde des Résultats
Après avoir terminé le travail, stockez les décisions frontend/design pour les sessions futures :
python3 execution/memory_manager.py store \
--content "Système de design : grille 8px adoptée, police Inter, jetons de couleur HSL avec support du mode sombre" \
--type decision --project <projet> \
--tags portfolio-interactif frontend
Collaboration Multi-Agents
Partagez les décisions de conception avec des agents backend (changements de contrat API) et des agents QA (références visuelles de régression).
python3 execution/cross_agent_context.py store \
--agent "<votre-agent>" \
--action "Composants UI implémentés — nouveau système de design avec conformité d'accessibilité (WCAG 2.1 AA)" \
--project <projet>
Persistance Mémoire du Design
Stockez les jetons de design système et les décisions de composants dans Qdrant afin que n'importe quel agent sur n'importe quelle plateforme (Claude, Gemini, Cursor) puisse récupérer et appliquer un style cohérent.