skycel/Portfolio-Game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
99fa61fcaa69df74f27845018861d17a1e4f728d
Portfolio-Game/docs/prd-gamification.md
skycel ec1ae92799 🎉 Init monorepo Nuxt 4 + Laravel 12 (Story 1.1) 
Setup complet de l'infrastructure projet :
- Frontend Nuxt 4 (SSR, TypeScript, i18n, Pinia, TailwindCSS)
- Backend Laravel 12 API-only avec middleware X-API-Key et CORS
- Design tokens (sky-dark, sky-accent, sky-text) et polices (Merriweather, Inter)
- Documentation planning et implementation artifacts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-05 02:08:56 +01:00

942 lines
41 KiB
Markdown
Raw Blame History

# 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.
```
Reference in New Issue View Git Blame Copy Permalink