Portfolio-Game/docs/prd-gamification.md

Portfolio Gamifié - Product Requirements Document (PRD)

1. Goals and Background Context

1.1 Goals

• Différenciation : Créer un portfolio qui se démarque par une expérience narrative immersive et gamifiée
• Engagement visiteur : Transformer la visite en aventure avec quête principale "Trouver le développeur"
• Respect du temps : Offrir une double entrée (Mode Aventure vs Mode Pressé) pour s'adapter à chaque visiteur
• Rejouabilité : Proposer des chemins multiples (4-8 parcours différents) pour une expérience unique
• Contact optimisé : Transformer le formulaire de contact en récompense narrative plutôt qu'en corvée
• Démonstration technique : Utiliser des animations avancées et interactions comme preuve de compétences
• International : Support FR + EN dès le lancement

1.2 Background Context

Le portfolio actuel utilise une navigation et présentation classiques. L'analyse des besoins de trois personas (recruteur pressé, client potentiel, développeur pair) révèle une opportunité de différenciation majeure : un portfolio qui raconte une histoire plutôt que de lister des informations.

Le concept central retenu est de traiter le portfolio comme une aventure narrative inspirée de Zelda BOTW, avec des PNJ (témoignages sous forme de dialogues), un arbre de compétences RPG, une carte interactive, et des easter eggs. La stack technique validée (Nuxt 3 SSR / Laravel API / MariaDB / TailwindCSS / Konva.js / vis.js) permet de réaliser cette vision avec une architecture moderne offrant SEO optimal, navigation fluide et API maintenable.

1.3 Change Log

Date	Version	Description	Author
2026-01-26	0.1	Création initiale basée sur le brainstorming	John (PM)
2026-01-26	1.0	PRD complet avec 4 epics, 37 stories, checklist validée	John (PM)
2026-01-27	1.1	Migration stack frontend vers Vue 3 + Composition API + Pinia	John (PM)
2026-01-27	1.2	Adoption Nuxt 3 pour SSR + navigation SPA fluide	John (PM)
2026-01-27	1.3	Backend API avec Laravel au lieu de PHP natif	John (PM)

1.4 Out of Scope (MVP)

Les éléments suivants sont explicitement hors du scope MVP :

• Application mobile native (iOS/Android)
• Authentification utilisateur / comptes persistants
• CMS / back-office d'administration du contenu
• Analytics avancées (au-delà de Lighthouse et logs basiques)
• Système de commentaires ou blog
• Intégration réseaux sociaux (partage, login social)
• Mode multijoueur ou classements
• Notifications push
• PWA complète (service worker, offline mode)

1.5 Success Metrics (MVP)

Métrique	Objectif	Méthode de mesure
Taux de complétion parcours aventure	> 60%	LocalStorage progression + logs serveur
Temps moyen sur site	> 3 minutes	Analytics basiques ou logs
Taux d'accès au contact	> 40% des visiteurs	Logs page contact
Score Lighthouse Performance	> 90	Audit Lighthouse
Easter eggs découverts (moyenne)	> 2/visiteur	LocalStorage stats

2. Requirements

2.1 Functional Requirements

• FR1: Le système offre une double entrée au visiteur : "Partir à l'aventure" (expérience complète) ou "Je n'ai pas le temps" (mode express avec roadmap)
• FR2: Les transitions entre pages sont animées de manière seamless via Vue/Nuxt transitions, créant une impression de "changement de zone" immersive
• FR3: Un narrateur-guide accompagne le visiteur avec des textes contextuels tout au long de l'expérience
• FR4: Une carte interactive (Konva.js) permet la navigation non-linéaire et affiche la progression du visiteur
• FR5: Un arbre de compétences interactif (vis.js) visualise les skills avec niveaux évoluant selon les projets
• FR6: Les compétences sont cliquables et mènent directement aux projets qui les utilisent
• FR7: Les témoignages s'affichent sous forme de dialogues PNJ style Zelda avec avatar, bulles, effet typewriter et personnalités variées
• FR8: Une barre de progression globale indique l'avancement dans l'exploration du site
• FR9: Le système propose 2-3 choix binaires créant 4-8 parcours narratifs différents, tous menant au contact
• FR10: Un challenge/puzzle accessible doit être résolu pour accéder au formulaire de contact (avec système d'indices)
• FR11: Des easter eggs cachés récompensent l'exploration avec des snippets de code ou anecdotes
• FR12: La progression est sauvegardée automatiquement en LocalStorage pour permettre la reprise
• FR13: Le site supporte deux langues (FR par défaut + EN) avec détection par URL (/en/...)
• FR14: Le formulaire de contact est présenté comme la récompense finale "Tu m'as trouvé !" avec célébration

2.2 Non-Functional Requirements

• NFR1: Le bundle JS total (Nuxt + Konva + vis.js) ne doit pas dépasser 170kb gzippé, avec lazy-loading des composants lourds
• NFR2: Le temps de chargement initial (LCP) doit rester sous 2.5 secondes sur connexion 3G
• NFR3: Le site doit être responsive et offrir une expérience adaptée mobile (carte simplifiée)
• NFR4: Le site doit fonctionner sur les navigateurs modernes (Chrome, Firefox, Safari, Edge - 2 dernières versions)
• NFR5: Les URLs doivent être SEO-friendly et le contenu principal accessible aux crawlers
• NFR6: Les animations doivent respecter prefers-reduced-motion pour l'accessibilité
• NFR7: Le système i18n utilise @nuxtjs/i18n avec fichiers JSON, rendu SSR pour SEO optimal
• NFR8: Les images sont optimisées en WebP avec lazy loading

3. User Interface Design Goals

3.1 Overall UX Vision

L'expérience utilisateur vise à transformer un portfolio classique en aventure narrative immersive. Le visiteur ne consulte pas un CV interactif, il part à la découverte d'un développeur. Chaque interaction est pensée pour créer de la surprise, de l'engagement et de la mémorabilité. L'ambiance s'inspire des jeux d'aventure/RPG (notamment Zelda BOTW) tout en restant professionnelle et accessible.

Mots-clés UX : Immersion, Découverte, Surprise, Fluidité, Personnalisation du parcours.

3.2 Key Interaction Paradigms

Paradigme	Description
Navigation narrative	Pas de menu burger classique - la carte interactive et le narrateur guident le visiteur
Choix binaires	À plusieurs moments clés, le visiteur choisit son chemin
Dialogues interactifs	Clic pour "parler" aux PNJ (témoignages), avec effet typewriter progressif
Progression visible	Barre/indicateur montrant l'avancement dans l'exploration globale
Récompenses cachées	Easter eggs déclenchés par exploration (clics, hover, scroll, Konami code)
Transitions cinématiques	Changements de "zone" animés entre chaque section majeure

3.3 Core Screens and Views

Écran	Description	Rôle narratif
Landing / Choix initial	Double entrée : Aventure vs Mode Pressé	Point de départ de la quête
Intro narrative	Présentation du héros mystérieux	Accroche et intrigue
Carte interactive	Vue globale des zones à explorer, progression visible	Hub de navigation
Zone Projets	Galerie de projets avec previews et détails	Preuves concrètes
Zone Compétences	Arbre de skills interactif avec niveaux	Démonstration technique
Zone Parcours/Timeline	Histoire professionnelle narrative	Contexte et crédibilité
Zone Témoignages	Dialogues PNJ avec personnalités	Validation sociale
Challenge final	Puzzle à résoudre avec système d'indices	Climax de l'aventure
Contact / Récompense	"Tu m'as trouvé !" + formulaire + célébration	Conclusion satisfaisante
Roadmap (Mode Pressé)	Vue condensée avec accès direct aux sections	Alternative rapide

3.4 Accessibility: WCAG AA

• Respect de prefers-reduced-motion : animations désactivées ou réduites
• Contraste suffisant sur tous les textes narratifs
• Navigation au clavier possible (focus visible, skip links)
• Alternative textuelle pour la carte interactive
• Le mode pressé sert aussi de fallback accessible

3.5 Branding

Élément	Direction
Ton visuel	Moderne, légèrement fantaisiste, inspiré RPG mais pas cartoon
Palette	Tons sombres avec accents colorés pour les interactions
Typographie	Sans-serif moderne pour le corps, display font pour titres narratifs
Iconographie	SVG custom ou sprite, style cohérent avec l'univers RPG light
Avatars PNJ	Illustrations stylisées pour les témoignages

3.6 Target Devices and Platforms: Web Responsive

Device	Expérience
Desktop (>1024px)	Expérience complète : carte interactive, animations, skill tree complet
Tablet (768-1024px)	Expérience adaptée : carte simplifiée, interactions touch
Mobile (<768px)	Expérience repensée : navigation linéaire, carte en minimap, skill tree scrollable

4. Technical Assumptions

4.1 Repository Structure: Nouveau Repo Dédié

Projet standalone en monorepo (Nuxt 3 frontend SSR + API PHP) :

portfolio-gamifie/
├── frontend/                   # Application Nuxt 3
│   ├── pages/                  # Routes automatiques (fichier-based)
│   │   ├── index.vue           # / (landing double entrée)
│   │   ├── aventure.vue        # /aventure (intro narrative)
│   │   ├── roadmap.vue         # /roadmap (mode pressé)
│   │   ├── projets/
│   │   │   ├── index.vue       # /projets (galerie)
│   │   │   └── [slug].vue      # /projets/:slug (détail)
│   │   ├── competences.vue     # /competences (skill tree)
│   │   ├── temoignages.vue     # /temoignages (dialogues PNJ)
│   │   ├── parcours.vue        # /parcours (timeline)
│   │   ├── challenge.vue       # /challenge (puzzle)
│   │   └── contact.vue         # /contact (récompense finale)
│   ├── components/             # Auto-importés
│   │   ├── DialoguePNJ.vue
│   │   ├── Narrator.vue
│   │   ├── ProgressBar.vue
│   │   ├── InteractiveMap.client.vue  # Client-only (Konva)
│   │   └── SkillTree.client.vue       # Client-only (vis.js)
│   ├── composables/            # Auto-importés
│   │   ├── useTypewriter.ts
│   │   ├── useNarrator.ts
│   │   └── useEasterEggs.ts
│   ├── stores/                 # Pinia stores
│   │   └── progression.ts
│   ├── layouts/
│   │   ├── default.vue         # Layout avec narrateur + progress bar
│   │   └── minimal.vue         # Layout mode pressé
│   ├── i18n/
│   │   ├── fr.json
│   │   └── en.json
│   ├── assets/
│   ├── public/
│   ├── nuxt.config.ts
│   ├── tailwind.config.js
│   └── package.json
├── api/                        # Backend Laravel API
│   ├── app/
│   │   ├── Http/
│   │   │   ├── Controllers/Api/
│   │   │   │   ├── ProjectController.php
│   │   │   │   ├── SkillController.php
│   │   │   │   ├── TestimonialController.php
│   │   │   │   ├── NarratorController.php
│   │   │   │   └── ContactController.php
│   │   │   ├── Requests/       # Form Request validation
│   │   │   └── Resources/      # API Resources (transformers)
│   │   └── Models/
│   │       ├── Project.php
│   │       ├── Skill.php
│   │       ├── Testimonial.php
│   │       └── NarratorText.php
│   ├── database/
│   │   ├── migrations/
│   │   ├── seeders/
│   │   └── factories/
│   ├── routes/
│   │   └── api.php             # Routes API
│   ├── config/
│   ├── tests/
│   ├── .env.example
│   └── composer.json
└── README.md

4.2 Service Architecture: Nuxt 3 SSR + Laravel API

Composant	Technologie	Justification
Frontend SSR	Nuxt 3	Rendu serveur SEO + hydration SPA
Backend API	Laravel 11	Framework PHP robuste, conventions claires, Eloquent ORM
Base de données	MariaDB	Relationnel adapté aux données structurées (skills, projets)
ORM	Eloquent	Relations fluides (belongsToMany, hasMany), query builder
Routing API	Laravel Router	RESTful, middleware, rate limiting
Validation	Form Requests	Validation déclarative, messages localisés
Mail	Laravel Mail	PHPMailer intégré, templates Blade
Cache	Laravel Cache	Redis ou file driver selon hébergement

4.3 Frontend Stack

Librairie	Version	Poids gzip	Rôle
Nuxt 3	3.x	~50kb	Meta-framework Vue avec SSR natif
Vue 3	3.5+	(inclus)	Framework réactif, Composition API
Pinia	2.x	~1kb	Gestion d'état (progression, choix, easter eggs)
@nuxtjs/i18n	8.x	~5kb	Internationalisation avec SSR
TailwindCSS	3.x	~10kb	Styling, animations CSS
Konva.js	9.x	~50kb	Carte interactive (chargé côté client)
vue-konva	3.x	~2kb	Binding Vue pour Konva
vis-network	9.x	~50kb	Arbre de compétences (chargé côté client)

Total estimé : ~160-170kb gzippé (avec lazy-loading des librairies lourdes)

Justification Nuxt 3

• SSR natif : HTML complet pour les crawlers, SEO optimal sans configuration
• Hydration intelligente : Premier rendu serveur, puis navigation SPA fluide
• Routing fichier-based : pages/projets/[slug].vue → URL /projets/mon-projet automatique
• Transitions de page : <NuxtPage> avec pageTransition configuration native
• Auto-imports : Composables et composants importés automatiquement
• i18n SSR : URLs localisées (/en/projects) avec contenu traduit côté serveur
• Lazy components : <LazyKonvaMap> charge Konva uniquement quand nécessaire

4.4 Testing Requirements: Unit + Integration

Type	Scope	Outils
Unit Tests Laravel	Models, Services, Form Requests	Pest PHP ou PHPUnit
Feature Tests Laravel	API endpoints, middleware	Laravel HTTP Tests
Unit Tests Nuxt	Composants, composables, stores	Vitest + @nuxt/test-utils
E2E Tests	Parcours utilisateur critiques, SSR	Playwright
Tests manuels	UX gamification, animations, transitions	Checklist QA

4.5 Additional Technical Assumptions

• Hébergement :
  • Frontend Nuxt : Node.js (Vercel, Netlify, ou serveur Node)
  • API Laravel : Serveur PHP 8.2+ avec MariaDB (Laravel Forge, shared hosting, VPS)
• Mode SSR : Nuxt en mode ssr: true (défaut), rendu serveur + hydration client
• Versioning : Git, branches feature, main = production
• Build Frontend : Nitro (bundler Nuxt), optimisations automatiques
• Build API : Composer, php artisan optimize en production
• Composants client-only : Konva et vis.js avec suffix .client.vue (pas de SSR)
• Images : <NuxtImg> avec optimisation automatique (nuxt/image)
• État global : Pinia avec persistedState plugin, compatible SSR
• Sécurité Laravel : CORS middleware, Sanctum (si auth future), rate limiting, validation
• Sécurité Nuxt : Headers sécurité via nuxt.config.ts
• SEO : useHead() et useSeoMeta() pour meta tags dynamiques SSR
• Transitions : pageTransition dans nuxt.config.ts + CSS personnalisé
• API Resources : Laravel Resources pour transformer les réponses JSON

5. Epic List

Epic	Titre	Objectif
Epic 1	Setup Projet & Infrastructure i18n	Créer le nouveau repo Nuxt 3, structure projet, schéma BDD MariaDB, système i18n, routing SSR, transitions de page et double entrée (Aventure/Pressé)
Epic 2	Contenu Interactif	Implémenter les compétences cliquables → projets, les témoignages style dialogue PNJ, et la timeline narrative
Epic 3	Gamification & Navigation	Créer la carte interactive (Konva.js), l'arbre de compétences (vis.js), la barre de progression et le narrateur-guide
Epic 4	Expérience Complète & Finalisation	Implémenter les chemins narratifs multiples, le challenge/puzzle final, les easter eggs et la célébration contact

6. Epic Details

Epic 1 : Setup Projet & Infrastructure i18n

Objectif : Créer le nouveau projet Nuxt 3 from scratch avec une infrastructure solide : structure de fichiers, base de données MariaDB, système d'internationalisation SSR (FR/EN), routing avec transitions de pages seamless, et la première fonctionnalité utilisateur visible (double entrée Aventure/Pressé).

Story 1.1 : Initialisation du projet

As a développeur, I want une structure de projet moderne initialisée (Nuxt 3 SSR + Laravel API), so that je peux commencer le développement sur des bases solides.

Acceptance Criteria :

1. Repository Git initialisé avec .gitignore approprié
2. Structure monorepo : /frontend (Nuxt 3) + /api (Laravel)
3. Frontend : npx nuxi@latest init avec TypeScript activé
4. Modules Nuxt installés : @nuxtjs/i18n, @nuxtjs/tailwindcss, @pinia/nuxt
5. Backend : laravel new api ou composer create-project laravel/laravel api
6. Laravel configuré en mode API-only (sans Blade views inutiles)
7. nuxt.config.ts configuré avec SSR activé et pageTransition
8. Fichiers .env.example pour frontend et backend
9. CORS configuré dans Laravel pour autoriser le frontend Nuxt
10. README.md avec instructions d'installation et déploiement

Story 1.2 : Configuration base de données Laravel

As a développeur, I want une connexion MariaDB fonctionnelle avec Eloquent et migrations Laravel, so that je peux créer et versionner le schéma de données.

Acceptance Criteria :

1. Configuration DB dans .env (DB_CONNECTION=mysql, DB_HOST, etc.)
2. config/database.php configuré pour MariaDB
3. Commande php artisan migrate fonctionnelle
4. Commande php artisan db:seed pour données initiales
5. Factories définies pour les tests (ProjectFactory, SkillFactory, etc.)
6. Connexion testée avec php artisan tinker

Story 1.3 : Schéma de données initial (Migrations Laravel)

As a développeur, I want les tables principales créées via migrations Laravel, so that l'application peut stocker projets, compétences et témoignages.

Acceptance Criteria :

1. Migration create_projects_table (id, slug, title, description, image, url, github_url, date_completed, is_featured, timestamps)
2. Migration create_skills_table (id, slug, name, icon, category, max_level, timestamps)
3. Migration create_project_skill_table (pivot avec level_before, level_after)
4. Migration create_testimonials_table (id, name, role, company, avatar, content, personality, project_id, timestamps)
5. Migration create_narrator_texts_table (id, context, content, variant, timestamps)
6. Models Eloquent avec relations : Project->belongsToMany(Skill), Skill->belongsToMany(Project), Testimonial->belongsTo(Project)
7. Seeders : ProjectSeeder, SkillSeeder, TestimonialSeeder avec données de test
8. DatabaseSeeder appelant tous les seeders dans le bon ordre

Story 1.4 : Système d'internationalisation (i18n) frontend

As a visiteur, I want voir le site dans ma langue (FR ou EN), so that je comprends le contenu.

Acceptance Criteria :

1. Fichiers JSON de traduction (i18n/fr.json, i18n/en.json)
2. Composable useI18n() avec t() pour accéder aux traductions
3. Traductions chargées côté serveur (SSR) pour SEO
4. Fallback vers FR si clé manquante en EN
5. Détection de la langue via URL (/en/...) avec prefix_except_default
6. Sélecteur de langue avec switchLocalePath()
7. Traductions de base définies (navigation, boutons, messages)

Story 1.5 : Configuration @nuxtjs/i18n et URLs localisées

As a visiteur, I want des URLs propres et localisées, so that je peux naviguer et partager des liens.

Acceptance Criteria :

1. Module @nuxtjs/i18n configuré avec stratégie prefix_except_default
2. URLs FR par défaut : /, /projets, /competences, /parcours, /contact
3. URLs EN préfixées : /en, /en/projects, /en/skills, /en/journey, /en/contact
4. Fichiers de traduction JSON dans i18n/fr.json et i18n/en.json
5. Composable useI18n() et $t() pour les traductions SSR
6. <NuxtLink> avec localePath() pour liens localisés
7. Page 404 (error.vue) personnalisée bilingue
8. SEO : hreflang automatiques dans le <head>

Story 1.6 : Layout de base et intégration TailwindCSS

As a visiteur, I want une interface visuelle cohérente, so that l'expérience est agréable.

Acceptance Criteria :

1. Layout principal dans src/Views/layouts/main.php
2. TailwindCSS configuré avec thème custom
3. Build CSS via PostCSS avec minification production
4. Police(s) variable font chargée(s)
5. Meta tags SEO dynamiques par page
6. Favicon configuré
7. Classes utilitaires thème sombre avec accents

Story 1.7 : Configuration Nuxt Routing et Transitions de page

As a visiteur, I want des transitions fluides entre les pages sans rechargement visible, so that l'expérience est immersive comme une application native.

Acceptance Criteria :

1. Routing fichier-based Nuxt avec structure pages/ définie
2. pageTransition configuré dans nuxt.config.ts (fade + slide)
3. CSS transitions avec classes page-enter-active, page-leave-active
4. Navigation via <NuxtLink> pour hydration SPA (pas de rechargement)
5. Middleware de navigation pour tracking progression visiteur
6. scrollBehavior personnalisé (smooth, retour position sauvegardée)
7. Respect de prefers-reduced-motion via media query CSS
8. Fallback gracieux si JS désactivé (SSR HTML complet)

Story 1.8 : Landing page - Double entrée

As a visiteur, I want choisir entre explorer l'aventure ou aller à l'essentiel, so that mon temps est respecté.

Acceptance Criteria :

1. Landing page avec deux CTA distincts
2. Bouton "Partir à l'aventure" → intro narrative (placeholder)
3. Bouton "Je n'ai pas le temps..." → roadmap express
4. Animation d'entrée subtile
5. Texte d'accroche intrigant bilingue
6. Design responsive

Story 1.9 : Mode Pressé - Roadmap express

As a visiteur pressé, I want une vue condensée de toutes les sections, so that je trouve rapidement ce que je cherche.

Acceptance Criteria :

1. Page roadmap avec liens directs vers chaque section
2. Affichage en grille avec icônes et descriptions
3. Indication visuelle "Partie sauvée" si progression existante
4. Message humoristique sympathique
5. Lien pour "changer d'avis" et partir à l'aventure
6. Fonctionnel en FR et EN

Epic 2 : Contenu Interactif

Objectif : Enrichir le site avec les contenus principaux de manière interactive : pages projets avec détails, compétences cliquables menant aux projets associés, témoignages présentés comme des dialogues de PNJ style Zelda, et une timeline narrative du parcours professionnel.

Story 2.1 : Page Projets - Galerie

As a visiteur, I want voir la liste des projets réalisés, so that je peux évaluer les compétences du développeur.

Acceptance Criteria :

1. Page /projets (FR) et /en/projects (EN) fonctionnelle
2. Affichage en grille responsive des projets (cards)
3. Chaque card affiche : image, titre, description courte
4. Projets triés par date avec option "featured" en tête
5. Animation d'entrée progressive des cards
6. Hover effect révélant un CTA "Découvrir"
7. Données chargées depuis la table projects

Story 2.2 : Page Projet - Détail

As a visiteur, I want voir les détails d'un projet spécifique, so that je comprends le travail réalisé et les technologies utilisées.

Acceptance Criteria :

1. Page /projets/{slug} dynamique avec routing
2. Affichage : titre, description complète, image(s), date
3. Liste des compétences utilisées avec niveaux
4. Liens externes : URL du projet, repository GitHub
5. Navigation "Projet précédent / suivant"
6. Bouton retour vers la galerie
7. Meta tags SEO dynamiques

Story 2.3 : Page Compétences - Affichage par catégories

As a visiteur, I want voir les compétences du développeur organisées par catégorie, so that je comprends son profil technique.

Acceptance Criteria :

1. Page /competences (FR) et /en/skills (EN) fonctionnelle
2. Compétences groupées par catégorie (Frontend, Backend, Tools, Soft skills)
3. Chaque compétence affiche : icône, nom, niveau actuel
4. Design en grille ou liste selon la catégorie
5. Animation d'entrée des éléments
6. Données chargées depuis la table skills

Story 2.4 : Compétences cliquables → Projets liés

As a visiteur, I want cliquer sur une compétence pour voir les projets qui l'utilisent, so that je peux voir des preuves concrètes.

Acceptance Criteria :

1. Chaque compétence est cliquable
2. Au clic, affichage d'un panneau/modal avec les projets liés
3. Pour chaque projet lié : titre, description courte, lien vers le détail
4. Indication du niveau avant/après chaque projet
5. Animation d'ouverture/fermeture fluide
6. Fermeture par clic extérieur ou bouton close
7. Fonctionne au clavier (accessibilité)

Story 2.5 : Page Témoignages - Structure de base

As a visiteur, I want voir les témoignages des personnes ayant travaillé avec le développeur, so that j'ai une validation sociale de ses compétences.

Acceptance Criteria :

1. Page /temoignages (FR) et /en/testimonials (EN) fonctionnelle
2. Liste des témoignages depuis la table testimonials
3. Chaque témoignage : nom, rôle, entreprise, avatar, texte
4. Design préparé pour le composant dialogue PNJ
5. Lien vers le projet associé si pertinent
6. Ordre d'affichage configurable

Story 2.6 : Composant Dialogue PNJ - Style Zelda

As a visiteur, I want lire les témoignages comme des dialogues de personnages, so that l'expérience est immersive et mémorable.

Acceptance Criteria :

1. Composant réutilisable "DialoguePNJ" avec avatar et bulle
2. Avatar stylisé à gauche, bulle de texte à droite
3. Effet typewriter sur le texte (lettre par lettre)
4. Clic pour accélérer/passer le texte complet
5. Personnalités visuelles selon le champ personality
6. Son optionnel "blip" désactivable
7. Respect de prefers-reduced-motion

Story 2.7 : Carousel de témoignages avec dialogues

As a visiteur, I want naviguer entre les différents témoignages, so that je peux tous les consulter.

Acceptance Criteria :

1. Navigation entre témoignages (précédent/suivant)
2. Transition animée entre les PNJ
3. Indicateur du témoignage actuel
4. Auto-play optionnel avec pause au hover
5. Navigation au clavier (flèches)
6. Mémoire du témoignage consulté

Story 2.8 : Page Parcours - Timeline narrative

As a visiteur, I want découvrir le parcours professionnel du développeur, so that je comprends son évolution et son expérience.

Acceptance Criteria :

1. Page /parcours (FR) et /en/journey (EN) fonctionnelle
2. Timeline verticale avec étapes chronologiques
3. Chaque étape : date, titre, description narrative
4. Alternance gauche/droite sur desktop, linéaire sur mobile
5. Animation d'apparition au scroll
6. Icônes ou images pour les étapes clés
7. Contenu bilingue

Epic 3 : Gamification & Navigation

Objectif : Implémenter les éléments de gamification et la navigation alternative : narrateur-guide accompagnant le visiteur, barre de progression globale, sauvegarde de la progression, arbre de compétences interactif (vis.js), et carte interactive pour la navigation (Konva.js).

Story 3.1 : Table narrator_texts et système narrateur

As a développeur, I want un système de gestion des textes du narrateur, so that le narrateur peut afficher des messages contextuels.

Acceptance Criteria :

1. Table narrator_texts créée (id, context, text_key, variant)
2. Contextes définis : intro, transition_projects, transition_skills, hint, encouragement
3. Support de variantes (sélection aléatoire)
4. Helper PHP getNarratorText($context, $lang)
5. Textes de base insérés en FR et EN
6. Migration SQL ajoutée

Story 3.2 : Composant Narrateur UI

As a visiteur, I want voir un narrateur qui me guide à travers le site, so that je me sens accompagné dans mon exploration.

Acceptance Criteria :

1. Composant UI narrateur fixe (coin bas)
2. Avatar/icône du narrateur identifiable
3. Bulle de texte avec message contextuel
4. Effet typewriter similaire aux dialogues PNJ
5. Apparition/disparition animée non intrusive
6. Bouton pour fermer/minimiser
7. Ne bloque pas la navigation

Story 3.3 : Textes narrateur contextuels

As a visiteur, I want que le narrateur réagisse à mes actions, so that l'expérience est personnalisée.

Acceptance Criteria :

1. Message d'accueil à l'arrivée (mode aventure)
2. Messages de transition entre sections
3. Encouragements lors de la progression (25%, 50%, 75%)
4. Indices si visiteur semble perdu
5. Message spécial première visite vs retour
6. Intégration avec hooks de navigation Nuxt (middleware)

Story 3.4 : Barre de progression globale

As a visiteur, I want voir ma progression dans l'exploration du site, so that je sais combien il me reste à découvrir.

Acceptance Criteria :

1. Barre de progression discrète dans le header
2. Pourcentage calculé selon sections visitées
3. Sections trackées : Projets, Compétences, Témoignages, Parcours
4. Animation fluide lors de la mise à jour
5. Tooltip indiquant sections visitées/restantes
6. Design XP bar style RPG

Story 3.5 : Store Pinia Progression avec persistance LocalStorage

As a visiteur, I want que ma progression soit sauvegardée, so that je peux reprendre mon exploration plus tard.

Acceptance Criteria :

1. Store Pinia useProgressionStore avec état réactif
2. Données : sections visitées (Set), choix narratifs (Array), easter eggs (Array)
3. Getters : pourcentage completion, sections restantes
4. Plugin pinia-plugin-persistedstate pour sync LocalStorage automatique
5. Session ID unique généré au premier accès
6. Détection progression existante → message "Bienvenue à nouveau"
7. Action $reset() pour réinitialiser la progression

Story 3.6 : Table user_progress (sauvegarde cloud optionnelle)

As a visiteur, I want optionnellement sauvegarder ma progression en ligne, so that je peux la retrouver sur un autre appareil.

Acceptance Criteria :

1. Table user_progress créée
2. Formulaire "Sauvegarder ma progression" (email)
3. Endpoint API POST pour sauvegarder
4. Endpoint API GET pour récupérer (lien magique)
5. Validation email basique
6. RGPD : consentement, possibilité suppression

Story 3.7 : Arbre de compétences interactif (vis.js)

As a visiteur, I want voir mes compétences sous forme d'arbre interactif, so that je visualise les connexions et la progression.

Acceptance Criteria :

1. Intégration vis.js Network sur page compétences
2. Nœuds représentant compétences avec icônes
3. Liens entre compétences liées
4. Taille/couleur des nœuds selon le niveau
5. Clic sur nœud → projets liés
6. Zoom et pan pour naviguer
7. Layout esthétique

Story 3.8 : Carte interactive - Design Konva.js

As a visiteur, I want voir une carte du "monde" du portfolio, so that je comprends la structure et ma position.

Acceptance Criteria :

1. Canvas Konva.js dans page/modal dédiée
2. Design de carte stylisé (îles, régions, chemins)
3. Zones : Projets, Compétences, Parcours, Témoignages, Contact
4. Indicateurs visuels zones visitées
5. Position actuelle marquée
6. Style visuel RPG cohérent
7. Assets graphiques SVG/PNG

Story 3.9 : Carte interactive - Navigation

As a visiteur, I want naviguer vers les sections en cliquant sur la carte, so that j'explore librement.

Acceptance Criteria :

1. Zones cliquables sur la carte
2. Clic → navigation vers section
3. Animation de "voyage" optionnelle
4. Hover → nom et statut de la zone
5. Bouton ouvrir/fermer carte depuis toute page
6. Navigation via <NuxtLink> avec transition intégrée

Story 3.10 : Minimap mobile

As a visiteur mobile, I want une version simplifiée de la carte, so that je peux naviguer sur petit écran.

Acceptance Criteria :

1. Minimap compacte sur mobile
2. Mode "liste visuelle" ou carte schématique
3. Indicateurs de progression visibles
4. Touch-friendly
5. Accessible via bouton flottant
6. Performance optimisée (pas Konva lourd)

Epic 4 : Expérience Complète & Finalisation

Objectif : Finaliser l'expérience gamifiée avec les éléments avancés : chemins narratifs multiples, challenge/puzzle final, easter eggs, et célébration de fin avec le formulaire de contact comme récompense narrative.

Story 4.1 : Intro narrative - Mode Aventure

As a visiteur aventurier, I want une introduction narrative captivante, so that je suis immergé dans l'expérience dès le début.

Acceptance Criteria :

1. Page/séquence d'intro après choix "Partir à l'aventure"
2. Présentation du "héros mystérieux" (le développeur)
3. Texte narratif avec effet typewriter
4. Ambiance visuelle immersive
5. Bouton "Continuer" pour avancer
6. Transition fluide vers le premier choix
7. Contenu bilingue FR/EN

Story 4.2 : Système de choix narratifs

As a visiteur, I want faire des choix qui influencent mon parcours, so that mon expérience est unique.

Acceptance Criteria :

1. Structure de données pour les choix (table ou JSON)
2. 2-3 points de choix binaires dans le parcours
3. Chaque choix mène à un chemin différent
4. Choix stockés dans la progression LocalStorage
5. Interface de choix claire (2 options distinctes)
6. Pas de "mauvais" choix - tous mènent au contact

Story 4.3 : Chemins narratifs différenciés

As a visiteur, I want que mes choix aient un impact visible, so that je sens que mon parcours est personnalisé.

Acceptance Criteria :

1. 4-8 parcours possibles selon combinaisons
2. Ordre des sections varie selon le chemin
3. Textes du narrateur adaptés au chemin
4. Transitions contextuelles entre sections
5. Tous les chemins couvrent tout le contenu

Story 4.4 : Page Challenge - Structure

As a visiteur, I want relever un défi avant d'accéder au contact, so that l'accès au développeur est une récompense méritée.

Acceptance Criteria :

1. Page /challenge accessible après exploration minimum
2. Introduction narrative "Une dernière épreuve..."
3. Zone de puzzle/challenge visible
4. Système d'indices (bouton "Besoin d'aide ?")
5. Blocage accès direct contact sans challenge complété

Story 4.5 : Puzzle principal

As a visiteur, I want résoudre un puzzle intéressant mais accessible, so that je me sens intelligent sans être frustré.

Acceptance Criteria :

1. Puzzle logique/code simple (réordonner, compléter, décoder)
2. Difficulté calibrée : 1-3 minutes
3. Validation avec feedback clair
4. Animation de succès
5. 3 niveaux d'indices progressifs
6. Option "Passer" après 3 indices
7. Thématique développement/code

Story 4.6 : Page Contact - Célébration finale

As a visiteur ayant complété le parcours, I want une conclusion mémorable et satisfaisante, so that je me souviens de cette expérience.

Acceptance Criteria :

1. Page /contact accessible après le challenge
2. Animation célébration "Tu m'as trouvé !" (confettis)
3. Message de félicitations avec stats du parcours
4. Formulaire : nom, email, message
5. Validation côté client et serveur
6. Envoi email via PHPMailer

Story 4.7 : Table easter_eggs et système

As a développeur, I want un système pour gérer les easter eggs, so that je peux ajouter des surprises cachées.

Acceptance Criteria :

1. Table easter_eggs (id, slug, location, trigger_type, reward_type, reward_key)
2. Trigger types : click, hover, konami, scroll, sequence
3. Reward types : snippet, anecdote, image, badge
4. Helper checkEasterEgg($slug)
5. Stockage easter eggs trouvés dans progression
6. 5-10 easter eggs définis

Story 4.8 : Easter eggs - Implémentation UI

As a visiteur curieux, I want découvrir des surprises cachées dans le site, so that l'exploration est récompensée.

Acceptance Criteria :

1. Easter eggs placés sur différentes pages
2. Déclencheurs variés selon le type
3. Animation de découverte (popup, effet visuel)
4. Affichage de la récompense
5. Notification "Easter egg trouvé ! (X/Y)"
6. Bouton fermer pour continuer

Story 4.9 : Collection d'easter eggs

As a visiteur, I want voir ma collection d'easter eggs trouvés, so that je sais ce qu'il me reste à découvrir.

Acceptance Criteria :

1. Section "Collection" accessible
2. Grille avec easter eggs trouvés et silhouettes mystère
3. Détails visibles pour les découverts
4. Compteur X/Y trouvés
5. Badge spéciale si 100% trouvés

Story 4.10 : Polissage et optimisations finales

As a visiteur, I want une expérience fluide et sans bugs, so that je profite pleinement du site.

Acceptance Criteria :

1. Audit performance (Lighthouse > 90)
2. Test de tous les parcours narratifs
3. Vérification accessibilité WCAG AA
4. Test responsive sur devices réels
5. Corrections bugs identifiés
6. Optimisation assets
7. Génération sitemap.xml et robots.txt

7. Checklist Results Report

Executive Summary

Critère	Évaluation
Complétude PRD	87%
Scope MVP	Approprié
Prêt pour Architecture	✅ READY

Category Analysis

Category	Status
1. Problem Definition & Context	✅ PASS
2. MVP Scope Definition	✅ PASS
3. User Experience Requirements	✅ PASS
4. Functional Requirements	✅ PASS
5. Non-Functional Requirements	✅ PASS
6. Epic & Story Structure	✅ PASS
7. Technical Guidance	✅ PASS
8. Cross-Functional Requirements	✅ PASS
9. Clarity & Communication	✅ PASS

Notes

• Story 3.6 (sauvegarde cloud) marquée optionnelle - à confirmer post-MVP
• Assets graphiques pour la carte interactive (Story 3.8) nécessitent design
• Puzzle principal (Story 4.5) : type à finaliser avec l'équipe

8. Next Steps

8.1 UX Expert Prompt

Je suis l'UX Expert. J'ai besoin de créer les wireframes et le design system pour le projet "Portfolio Gamifié".

Contexte : Portfolio web transformé en aventure narrative immersive avec :
- Double entrée (Aventure vs Mode Pressé)
- Navigation par carte interactive
- Dialogues PNJ style Zelda pour les témoignages
- Arbre de compétences interactif
- Système de progression gamifié
- Challenge/puzzle avant accès au contact

Documents à consulter :
- PRD : docs/prd-gamification.md
- Brainstorming : docs/brainstorming-gamification-2026-01-26.md

Livrables attendus :
1. Wireframes des écrans principaux (Landing, Carte, Projets, Skills, Témoignages, Challenge, Contact)
2. Design system (couleurs RPG, typographie, composants)
3. Spécifications du composant Dialogue PNJ
4. Maquettes de la carte interactive
5. Guidelines responsive (desktop → mobile)

Contraintes : WCAG AA, prefers-reduced-motion, thème sombre avec accents colorés.

8.2 Architect Prompt

Je suis l'Architecte. J'ai besoin de créer l'architecture technique pour le projet "Portfolio Gamifié".

Contexte : Nouveau projet avec Nuxt 3 SSR et backend Laravel API.

Stack validée :
- Frontend : Nuxt 3 (SSR) / Vue 3 / Pinia / @nuxtjs/i18n / TailwindCSS
- Backend : Laravel 11 / Eloquent ORM / MariaDB
- Librairies : Konva.js (vue-konva, client-only) / vis-network (client-only)
- Build : Nitro (Nuxt) + Composer (Laravel)
- Tests : Pest/PHPUnit (Laravel) + Vitest + @nuxt/test-utils + Playwright (E2E)

Documents à consulter :
- PRD : docs/prd-gamification.md
- Brainstorming (schéma DB détaillé) : docs/brainstorming-gamification-2026-01-26.md

Livrables attendus :
1. Architecture document avec structure monorepo (frontend Nuxt + api Laravel)
2. Schéma de base de données final (migrations Laravel)
3. Design API REST endpoints avec Laravel Resources
4. Configuration nuxt.config.ts (SSR, i18n, transitions, modules)
5. Structure des stores Pinia avec persistedstate (SSR-compatible)
6. Composables réutilisables (useTypewriter, useNarrator, useEasterEggs)
7. Stratégie composants client-only (*.client.vue) pour Konva/vis.js
8. Configuration @nuxtjs/i18n (stratégie prefix_except_default, SEO hreflang)
9. Configuration Laravel : CORS, Form Requests, API Resources, rate limiting
10. Stratégie déploiement (Node.js pour Nuxt SSR + PHP pour Laravel API)
11. Coding standards et conventions (PSR-12 PHP, ESLint/Prettier Vue)

Contraintes : Bundle JS < 170kb gzip, LCP < 2.5s, SSR pour SEO, navigation SPA fluide.