skycel
ec1ae92799
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>
1467 lines
66 KiB
Markdown
1467 lines
66 KiB
Markdown
---
|
|
stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
|
|
lastStep: 14
|
|
inputDocuments:
|
|
- docs/prd-gamification.md
|
|
- docs/brainstorming-gamification-2026-01-26.md
|
|
userPreferences:
|
|
styleComplexity: simple
|
|
visualStyle: illustrative
|
|
assetFormat: SVG
|
|
inspirations:
|
|
- source: Zelda
|
|
applyTo: [narrative, features]
|
|
excludeFrom: [visual-style]
|
|
colorPalette:
|
|
background: black-to-blue
|
|
accent: "#fa784f"
|
|
feel: airy
|
|
heroSystem: true
|
|
narratorEvolution: mysterious-to-playful
|
|
---
|
|
|
|
# UX Design Specification - Skycel (Portfolio Gamifié)
|
|
|
|
**Author:** CĂ©lian
|
|
**Date:** 2026-01-27
|
|
|
|
---
|
|
|
|
## Design Direction (User Input)
|
|
|
|
### Style Preferences
|
|
- **Complexité visuelle :** Simple, pas trop chargé
|
|
- **Direction artistique :** Illustratif avec illustrations custom
|
|
- **Format assets :** SVG (vectoriel, léger, scalable)
|
|
|
|
### Inspirations
|
|
| Source | S'applique Ă | Ne s'applique PAS Ă |
|
|
|--------|--------------|---------------------|
|
|
| **Zelda** | Direction narrative, fonctionnalités gamifiées | Style visuel |
|
|
|
|
### Notes créatives
|
|
> L'inspiration Zelda guide la structure de l'aventure (quĂȘtes, PNJ, exploration) mais le style visuel sera original et illustratif, pas une copie de l'esthĂ©tique Zelda.
|
|
|
|
---
|
|
|
|
## Executive Summary
|
|
|
|
### Project Vision
|
|
|
|
Skycel est un portfolio-aventure oĂč le visiteur ne consulte pas un CV â il part Ă la dĂ©couverte d'un dĂ©veloppeur. L'expĂ©rience s'adapte Ă qui vous ĂȘtes : recruteur, client, ou dĂ©veloppeur pair. Chaque profil a son propre "hĂ©ros", son ton narratif, et ses dĂ©fis adaptĂ©s. Le point d'arrivĂ©e est le mĂȘme pour tous : la rencontre avec le dĂ©veloppeur, prĂ©sentĂ©e comme l'aboutissement d'une quĂȘte.
|
|
|
|
### Target Users
|
|
|
|
#### Persona 1 : Le Recruteur Pressé
|
|
- **Besoin** : Ăvaluer rapidement les compĂ©tences
|
|
- **Temps disponible** : 30 secondes Ă 2 minutes
|
|
- **Entrée privilégiée** : URL directe `/resume` partagée dans candidature
|
|
- **Expérience** : Vouvoiement, ton professionnel, challenges accessibles (culture info + conseils sécu)
|
|
- **Ce qui le convainc** : Maßtrise des outils actuels + portfolio immersif comme preuve de compétence
|
|
|
|
#### Persona 2 : Le Client Potentiel
|
|
- **Besoin** : Ăvaluer la fiabilitĂ© et le professionnalisme
|
|
- **Temps disponible** : 5-10 minutes
|
|
- **Entrée privilégiée** : Landing standard avec choix aventure
|
|
- **ExpĂ©rience** : Tutoiement, narrateur mystĂ©rieuxâcomplice, challenges accessibles
|
|
- **Ce qui le convainc** : Qualité de l'expérience = preuve de qualité du travail
|
|
|
|
#### Persona 3 : Le DĂ©veloppeur Pair
|
|
- **Besoin** : Ătre impressionnĂ© techniquement
|
|
- **Temps disponible** : 10-15 minutes (exploration complĂšte)
|
|
- **Entrée privilégiée** : Landing standard, mode aventure
|
|
- **Expérience** : Tutoiement, challenges techniques (code, quiz stack, analyse output)
|
|
- **Ce qui le convainc** : Prouesses techniques + easter eggs + dialogue entre pairs
|
|
|
|
### Key Design Challenges
|
|
|
|
1. **Personnalisation triple** : Adapter ton, vouvoiement, et challenges selon le héros choisi sans créer 3 sites différents
|
|
2. **Page résumé 30 secondes** : Synthétiser compétences, projets, et personnalité en un écran convaincant
|
|
3. **Ăvolution narrative du ton** : Transition naturelle mystĂ©rieux â complice au fil de la progression
|
|
4. **Challenges adaptatifs** : Différencier la difficulté par profil tout en gardant l'accessibilité
|
|
|
|
### Design Opportunities
|
|
|
|
1. **Expérience mémorable par la personnalisation** : Chaque visiteur a "son" portfolio
|
|
2. **Ăducation comme valeur ajoutĂ©e** : Conseils sĂ©curitĂ© pour non-devs = diffĂ©renciation positive
|
|
3. **Avatar reveal** : La découverte de l'avatar personnalisé comme moment émotionnel fort
|
|
4. **Preuve par l'expĂ©rience** : L'immersion elle-mĂȘme dĂ©montre les compĂ©tences
|
|
|
|
---
|
|
|
|
## Visual Identity
|
|
|
|
### Color Palette
|
|
|
|
| RĂŽle | Couleur | Usage |
|
|
|------|---------|-------|
|
|
| **Background** | Noir tirant vers le bleu | Fond principal, immersion |
|
|
| **Accent** | `#fa784f` (orange chaud) | CTAs, highlights, progression |
|
|
| **Feel** | Aéré | Espacement généreux, respiration visuelle |
|
|
|
|
### Scene Composition
|
|
|
|
```
|
|
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
â FOND DE SCĂNE (formes abstraites = environnement) â
|
|
â âââââââââââââââââââââââââââââââââââââââââââââââââââââââ â
|
|
â â â â
|
|
â â [Assets illustratifs superposĂ©s] â â
|
|
â â â â
|
|
â â âââââââââ â â
|
|
â â â HĂ©ros â â Style illustratif unifiĂ© â â
|
|
â â âââââââââ â â
|
|
â â â â
|
|
â âââââââââââââââââââââââââââââââââââââââââââââââââââââââ â
|
|
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
```
|
|
|
|
### Character Design
|
|
|
|
| Type | Style | Source |
|
|
|------|-------|--------|
|
|
| **Avatar dev (Célian)** | Illustratif personnalisé | Custom |
|
|
| **HĂ©ros jouables** | MĂȘme style illustratif | Custom |
|
|
| **PNJ témoignages** | Photo/image fournie | Authentique (choix du témoin) |
|
|
|
|
---
|
|
|
|
## Hero System
|
|
|
|
### Hero Selection Impact
|
|
|
|
| HĂ©ros | Vouvoiement | Challenges | Narrateur |
|
|
|-------|-------------|------------|-----------|
|
|
| **Recruteur** | Oui | Culture info gĂ©nĂ©rale, conseils sĂ©curitĂ© | Respectueux â Complice |
|
|
| **Client** | Non | Culture info gĂ©nĂ©rale, conseils sĂ©curitĂ© | MystĂ©rieux â Joueur |
|
|
| **DĂ©veloppeur** | Non | Code simple, quiz stack, analyse output | MystĂ©rieux â Joueur |
|
|
|
|
### Narrator Tone Evolution
|
|
|
|
```
|
|
DĂBUT FIN
|
|
â â
|
|
⌠âŒ
|
|
Mystérieux/Distant Complice/Joueur
|
|
"Une silhouette se "Pas mal ! Tu commences
|
|
dessine au loin..." Ă me connaĂźtre..."
|
|
```
|
|
|
|
---
|
|
|
|
## Entry Points Architecture
|
|
|
|
```
|
|
âââââââââââââââââââââââ
|
|
â skycel.dev/resume â â URL pour candidatures
|
|
â (Page RĂ©sumĂ© 30s) â
|
|
ââââââââââââŹâââââââââââ
|
|
â
|
|
[Bouton "Voir l'aventure"]
|
|
â
|
|
âŒ
|
|
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
â skycel.dev â
|
|
â (Landing Page) â
|
|
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ€
|
|
â â
|
|
â âââââââââââââââââââ âââââââââââââââââââ â
|
|
â â "Partir Ă â â "Mode express" â â
|
|
â â l'aventure" â â (visible) â â
|
|
â ââââââââââŹâââââââââ ââââââââââŹâââââââââ â
|
|
â â â â
|
|
â ⌠⌠â
|
|
â âââââââââââââââââââ âââââââââââââââââââ â
|
|
â â Choix du HĂ©ros â â Page RĂ©sumĂ© â â
|
|
â â âââââ âââââ âââââ â (30 secondes) â â
|
|
â â â R â â C â â D â âââââââââââââââââââ â
|
|
â â âââââ âââââ âââââ â
|
|
â âââââââââââââââââââ â
|
|
â â
|
|
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
```
|
|
|
|
---
|
|
|
|
## Core User Experience
|
|
|
|
### Defining Experience
|
|
|
|
**Objectif fondamental :** Chaque Ă©lĂ©ment de l'expĂ©rience doit contribuer Ă un seul but â donner envie au visiteur de contacter CĂ©lian.
|
|
|
|
Le portfolio n'est pas une vitrine passive. C'est une aventure de **dĂ©couverte progressive** oĂč le visiteur construit une relation avec le dĂ©veloppeur avant mĂȘme de le rencontrer. La carte, les projets, les compĂ©tences, les tĂ©moignages â tout raconte l'histoire d'une personne, pas d'un CV.
|
|
|
|
**Core Loop :**
|
|
```
|
|
Explorer â DĂ©couvrir une facette de CĂ©lian â Progresser â Envie d'en savoir plus â ... â Contact
|
|
```
|
|
|
|
### Platform Strategy
|
|
|
|
| Plateforme | Expérience | Immersion |
|
|
|------------|------------|-----------|
|
|
| **Desktop** | ComplĂšte | Carte interactive, animations riches, skill tree complet |
|
|
| **Mobile** | AllĂ©gĂ©e mais immersive | Navigation adaptĂ©e, interactions touch, mĂȘme engagement Ă©motionnel |
|
|
|
|
**Principe clé :** L'allÚgement mobile concerne la complexité technique, jamais l'immersion narrative.
|
|
|
|
### Seamless Interactions
|
|
|
|
**ZĂ©ro friction visible :**
|
|
- Transitions animées entre toutes les zones (pas de chargement apparent)
|
|
- Premier chargement = seul moment d'attente acceptable (avec animation narrative)
|
|
- Navigation fluide = le visiteur ne "quitte" jamais l'univers
|
|
|
|
**Continuité cross-device :**
|
|
- ID unique de session généré au premier accÚs
|
|
- URL partageable avec ID (`skycel.dev?session=abc123`)
|
|
- Reprise exacte de la progression sur n'importe quel appareil
|
|
- "Bienvenue à nouveau, voyageur..." si retour détecté
|
|
|
|
### Critical Success Moments
|
|
|
|
| Moment | Impact | Ce qui doit se passer |
|
|
|--------|--------|----------------------|
|
|
| **Premier Ă©cran** | CuriositĂ© | "C'est quoi ce site ?" â intrigue immĂ©diate |
|
|
| **Choix du hĂ©ros** | Engagement | "C'est MON aventure" â personnalisation |
|
|
| **Premier dialogue PNJ** | Surprise | "Les tĂ©moignages parlent !" â diffĂ©renciation |
|
|
| **Challenge rĂ©ussi** | FiertĂ© | "J'ai mĂ©ritĂ© la suite" â investissement |
|
|
| **RĂ©vĂ©lation finale** | Ămotion | "Je l'ai trouvĂ©" â connexion humaine |
|
|
|
|
### The "Code World" Revelation (Moment Waouh)
|
|
|
|
**Concept narratif :** Le climax de l'aventure se dĂ©roule dans un "monde de code" â un environnement visuel oĂč le code devient paysage. Le hĂ©ros choisi par le visiteur traverse ce monde et dĂ©couvre CĂ©lian, littĂ©ralement perdu/immergĂ© dans son Ă©lĂ©ment naturel.
|
|
|
|
**Impact Ă©motionnel :**
|
|
- Le visiteur "sauve" le dev de son monde de code
|
|
- MĂ©taphore : le contact humain sort le dev de son isolement technique
|
|
- Moment de révélation de l'avatar personnalisé de Célian
|
|
- Transition naturelle vers le formulaire de contact = "Tu m'as trouvé !"
|
|
|
|
### Experience Principles
|
|
|
|
1. **Tout mĂšne au contact** â Chaque interaction construit l'envie de rencontrer la personne derriĂšre le portfolio
|
|
2. **Immersion sans friction** â ZĂ©ro chargement visible, transitions seamless, l'univers ne se "casse" jamais
|
|
3. **Mobile = mĂȘme Ă©motion** â L'allĂšgement technique ne sacrifie jamais l'engagement narratif
|
|
4. **ContinuitĂ© totale** â La progression suit le visiteur partout, cross-device, cross-session
|
|
5. **RĂ©vĂ©lation mĂ©ritĂ©e** â Le moment final rĂ©compense l'investissement du visiteur dans l'aventure
|
|
|
|
---
|
|
|
|
## Desired Emotional Response
|
|
|
|
### Primary Emotional Goals
|
|
|
|
| Ămotion | Description | Ce qui la crĂ©e |
|
|
|---------|-------------|----------------|
|
|
| **Ămerveillement** | "Waouh, c'Ă©tait incroyable" | Immersion narrative, rĂ©vĂ©lation finale, qualitĂ© visuelle |
|
|
| **Amusement** | "C'était fun, j'ai passé un bon moment" | Ton du narrateur, interactions ludiques, surprises |
|
|
|
|
**Combinaison cible :** Le visiteur repart avec l'impression d'avoir vĂ©cu quelque chose d'unique ET d'avoir passĂ© un bon moment â pas juste consultĂ© un portfolio.
|
|
|
|
### Emotional Journey Mapping
|
|
|
|
```
|
|
ARRIVĂE MILIEU FIN
|
|
â â â
|
|
⌠⌠âŒ
|
|
CuriositĂ© â Engagement â DĂ©couverte â Confiance â FiertĂ© â ĂMERVEILLEMENT
|
|
â â â â â
|
|
âââ "C'est âââ "C'est MON âââ Plaisir âââ "J'ai âââ "Waouh !"
|
|
quoi ?" aventure" d'explorer réussi" + Amusé
|
|
```
|
|
|
|
| Ătape | Ămotion visĂ©e | DĂ©clencheur UX |
|
|
|-------|---------------|----------------|
|
|
| **Arrivée** | Curiosité | Design intrigant, pas de portfolio classique |
|
|
| **Choix du héros** | Engagement | Personnalisation = investissement personnel |
|
|
| **Exploration carte** | Découverte + plaisir | Navigation ludique, récompenses visuelles |
|
|
| **Dialogues PNJ** | Confiance + amusement | Témoignages vivants, personnalités variées |
|
|
| **Challenge** | Fierté | Difficulté calibrée, succÚs mérité |
|
|
| **RĂ©vĂ©lation finale** | Ămerveillement + connexion | "Monde de code", avatar reveal |
|
|
| **Contact** | Envie naturelle | Prolonger la relation, pas corvée |
|
|
|
|
### Emotions to Avoid
|
|
|
|
| Ămotion nĂ©gative | Cause potentielle | PrĂ©vention UX |
|
|
|------------------|-------------------|---------------|
|
|
| **Frustration** | Perdu, trop difficile, pas clair | Navigation intuitive, indices progressifs, jamais de blocage |
|
|
| **Ennui** | Trop long, répétitif, pas de surprise | Rythme varié, contenu condensé, moments de surprise réguliers |
|
|
|
|
### Micro-Emotions Design
|
|
|
|
| Micro-Ă©motion positive | OĂč la crĂ©er |
|
|
|------------------------|-------------|
|
|
| **Surprise** | Easter eggs, réactions inattendues du narrateur |
|
|
| **Accomplissement** | Progression visible, badges, "zones découvertes" |
|
|
| **ComplicitĂ©** | Ăvolution du ton du narrateur (mystĂ©rieux â joueur) |
|
|
| **Anticipation** | "Qu'y a-t-il dans cette zone ?" |
|
|
|
|
| Micro-émotion négative | Comment l'éviter |
|
|
|------------------------|------------------|
|
|
| **Confusion** | Carte toujours accessible, narrateur guide, indicateurs clairs |
|
|
| **Impatience** | Pas de chargement visible, contenu dense mais court |
|
|
| **Doute** | Feedback immédiat sur les actions, validation visuelle |
|
|
|
|
### Emotional Design Principles
|
|
|
|
1. **Ămerveillement par les dĂ©tails** â Chaque Ă©cran a un Ă©lĂ©ment "waouh" (animation, illustration, interaction)
|
|
2. **Amusement sans infantiliser** â Ton ludique mais professionnel, humour subtil
|
|
3. **ZĂ©ro frustration** â Si le visiteur est perdu, le narrateur l'aide avant qu'il ne le demande
|
|
4. **Anti-ennui** â Aucune section ne dure plus de 2-3 minutes, toujours une nouveautĂ© Ă dĂ©couvrir
|
|
5. **FiertĂ© accessible** â Les challenges sont rĂ©ussissables par tous, la difficultĂ© = temps, pas blocage
|
|
|
|
---
|
|
|
|
## UX Pattern Analysis & Inspiration
|
|
|
|
### Primary Inspiration: "Livres dont vous ĂȘtes le hĂ©ros"
|
|
|
|
**Concept fondateur :** Le portfolio n'est pas un site web avec des Ă©lĂ©ments de jeu â c'est un **livre interactif** oĂč le visiteur devient le hĂ©ros de sa propre exploration.
|
|
|
|
**Patterns clés à adopter :**
|
|
|
|
| Pattern du livre-jeu | Application Skycel |
|
|
|---------------------|-------------------|
|
|
| "Tu es le héros" | Choix du personnage (Recruteur/Client/Dev) |
|
|
| "Si tu choisis X, va page Y" | Choix binaires créant des chemins différents |
|
|
| Tous les chemins ont une fin | Toutes les routes mĂšnent au contact |
|
|
| Sentiment de contrÎle | Le visiteur décide son parcours |
|
|
| Rejouabilité | Envie de refaire avec d'autres choix |
|
|
|
|
**Ton narratif inspiré :**
|
|
> "Tu arrives devant deux portes. L'une mÚne vers les projets réalisés, l'autre vers l'arbre des compétences. Laquelle choisis-tu ?"
|
|
|
|
### Secondary Inspiration: Zelda BOTW
|
|
|
|
**Patterns extraits :**
|
|
|
|
| ĂlĂ©ment Zelda | Application Skycel |
|
|
|---------------|-------------------|
|
|
| **Liberté d'exploration** | Pas de chemin unique imposé, carte ouverte |
|
|
| **Narration immersive** | Narrateur-guide, dialogues PNJ |
|
|
| **Ănigmes** | Challenges adaptĂ©s au profil du hĂ©ros |
|
|
| **ĂlĂ©ments cachĂ©s** | Easter eggs rĂ©compensant l'exploration |
|
|
| **Chemins multiples â mĂȘme destination** | Tous les parcours mĂšnent au contact |
|
|
|
|
### Transferable UX Patterns
|
|
|
|
#### Navigation Pattern: Carte comme Hub Central
|
|
|
|
```
|
|
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
â CARTE CENTRALE â
|
|
â â
|
|
â Affordance claire : "C'est ICI que je navigue" â
|
|
â â
|
|
â âââââââ âââââââ âââââââ âââââââ â
|
|
â âZone ââââââZone ââââââZone ââââââ ??? â â
|
|
â â A â â B â â C â â â â
|
|
â âââââââ âââââââ âââââââ âââââââ â
|
|
â â â â â â
|
|
â ⌠⌠⌠⌠â
|
|
â Projets Skills Parcours Contact â
|
|
â (locked) â
|
|
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
```
|
|
|
|
**Design requirements :**
|
|
- Visiblement interactive (hover states, curseur personnalisé)
|
|
- Zones clairement identifiables
|
|
- Progression visible (zones visitées vs non visitées)
|
|
- Destination finale visible mais "verrouillée" jusqu'à progression suffisante
|
|
|
|
#### Interaction Pattern: Choix Narratifs Style Livre-Jeu
|
|
|
|
```
|
|
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
â â
|
|
â "Deux chemins s'offrent Ă toi..." â
|
|
â â
|
|
â âââââââââââââââââââââ âââââââââââââââââââââ â
|
|
â â â â â â
|
|
â â đĄïž Explorer â â đ Comprendre â â
|
|
â â les projets â â les compĂ©tences â â
|
|
â â â â â â
|
|
â âââââââââââââââââââââ âââââââââââââââââââââ â
|
|
â â
|
|
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
```
|
|
|
|
#### Loading Pattern: Narration Pendant l'Attente
|
|
|
|
**Si chargement inévitable (premier load) :**
|
|
|
|
```
|
|
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
â â
|
|
â [Barre de progression stylisĂ©e] â
|
|
â â
|
|
â đĄ "Savais-tu que ce portfolio contient 7 easter eggs â
|
|
â cachĂ©s ? Sauras-tu tous les trouver ?" â
|
|
â â
|
|
â ou â
|
|
â â
|
|
â đź "Le dĂ©veloppeur derriĂšre ce site a bu 847 cafĂ©s â
|
|
â pendant sa crĂ©ation. Probablement." â
|
|
â â
|
|
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
```
|
|
|
|
**Types de contenu pendant le chargement :**
|
|
- Tips sur l'exploration Ă venir
|
|
- Fun facts sur le développeur
|
|
- Teasers narratifs
|
|
- Mini-Ă©nigmes visuelles
|
|
|
|
### Anti-Patterns to Avoid
|
|
|
|
| Anti-pattern | Pourquoi l'Ă©viter | Alternative |
|
|
|--------------|-------------------|-------------|
|
|
| **Navigation confuse** | Frustration immédiate | Carte comme ancre visuelle permanente |
|
|
| **Chemin unique imposé** | Contraire à l'esprit livre-jeu | Choix réels avec conséquences visibles |
|
|
| **Chargements visibles sans contenu** | Ennui, abandon | Tips/fun facts/micro-narration |
|
|
| **Surcharge visuelle** | Distraction de l'essentiel | Style aéré, focus sur le contenu |
|
|
| **Animations bloquantes** | Impatience | Animations non-bloquantes, skip possible |
|
|
|
|
### Design Inspiration Strategy
|
|
|
|
**Ă ADOPTER directement :**
|
|
- Structure narrative "livre dont vous ĂȘtes le hĂ©ros"
|
|
- Choix binaires créant des chemins différents
|
|
- Carte comme hub central de navigation
|
|
- ĂlĂ©ments cachĂ©s rĂ©compensant l'exploration
|
|
- Tips/fun facts pendant les chargements
|
|
|
|
**Ă ADAPTER pour Skycel :**
|
|
- Dialogues PNJ Zelda â TĂ©moignages interactifs avec personnalitĂ©s
|
|
- Ănigmes Zelda â Challenges adaptĂ©s au profil (code pour devs, culture info pour autres)
|
|
- Carte Zelda â Carte stylisĂ©e illustrative (pas rĂ©aliste)
|
|
|
|
**Ă ĂVITER absolument :**
|
|
- Navigation classique type "menu burger"
|
|
- Parcours linéaire sans choix
|
|
- Temps morts sans contenu narratif
|
|
- Complexité visuelle excessive
|
|
|
|
---
|
|
|
|
## Design System Foundation
|
|
|
|
### Design System Choice
|
|
|
|
**Approche hybride : TailwindCSS + Headless Components + Custom**
|
|
|
|
| Couche | Technologie | RĂŽle |
|
|
|--------|-------------|------|
|
|
| **Utilitaires CSS** | TailwindCSS | Styling, responsive, animations |
|
|
| **Composants accessibles** | Headless UI / Radix UI | Modals, menus, tooltips, formulaires |
|
|
| **Composants custom** | From scratch | Carte, dialogues PNJ, narrateur, skill tree |
|
|
|
|
### Rationale for Selection
|
|
|
|
1. **UnicitĂ© prĂ©servĂ©e** â Les composants clĂ©s de l'expĂ©rience (carte, PNJ, narrateur) seront 100% custom
|
|
2. **AccessibilitĂ© garantie** â Les interactions standards (modals, dropdowns) bĂ©nĂ©ficient de l'a11y native de Headless/Radix
|
|
3. **FlexibilitĂ© maximale** â Si un composant n'existe pas, crĂ©ation from scratch sans contrainte
|
|
4. **Performance** â Headless = pas de CSS inutile, bundle lĂ©ger
|
|
5. **CohĂ©rence Nuxt 3** â Excellente intĂ©gration avec Vue 3 Composition API
|
|
|
|
### Component Strategy
|
|
|
|
#### Composants Headless (accessibilité gérée)
|
|
|
|
| Composant | Usage Skycel |
|
|
|-----------|--------------|
|
|
| `Dialog/Modal` | DĂ©tails projets, overlays, confirmations |
|
|
| `Menu/Dropdown` | SĂ©lection langue, options |
|
|
| `Tooltip` | Infos au survol sur la carte |
|
|
| `Tabs` | Navigation dans sections (si besoin) |
|
|
| `Switch/Toggle` | ParamĂštres (son, animations) |
|
|
|
|
#### Composants 100% Custom
|
|
|
|
| Composant | Raison |
|
|
|-----------|--------|
|
|
| `InteractiveMap` | Konva.js, navigation unique |
|
|
| `DialoguePNJ` | Typewriter, bulles, avatars |
|
|
| `Narrator` | Ăvolution de ton, positionnement |
|
|
| `SkillTree` | vis.js, visualisation custom |
|
|
| `ProgressBar` | Style RPG gamifié |
|
|
| `HeroSelector` | Choix du personnage illustré |
|
|
| `ChoiceCards` | Choix narratifs style livre-jeu |
|
|
| `CodeWorld` | Révélation finale, effet code |
|
|
|
|
### Design Tokens Strategy
|
|
|
|
```css
|
|
/* tailwind.config.js - tokens custom */
|
|
{
|
|
colors: {
|
|
'sky-dark': /* Noir tirant vers le bleu */,
|
|
'sky-accent': '#fa784f',
|
|
'sky-accent-hover': /* variante hover */,
|
|
'sky-text': /* texte principal */,
|
|
'sky-text-muted': /* texte secondaire */,
|
|
},
|
|
fontFamily: {
|
|
'narrative': /* Police pour le narrateur */,
|
|
'ui': /* Police pour l'interface */,
|
|
},
|
|
animation: {
|
|
'typewriter': /* effet machine Ă Ă©crire */,
|
|
'fade-in': /* apparition douce */,
|
|
'zone-transition': /* changement de zone */,
|
|
}
|
|
}
|
|
```
|
|
|
|
### Implementation Approach
|
|
|
|
1. **Phase 1** â Setup Tailwind + design tokens + composants de base (boutons, inputs)
|
|
2. **Phase 2** â IntĂ©gration Headless UI pour modals/tooltips
|
|
3. **Phase 3** â DĂ©veloppement composants custom (carte, PNJ, narrateur)
|
|
4. **Phase 4** â Polissage animations et transitions
|
|
|
|
### Customization Guidelines
|
|
|
|
**RĂšgle d'or :** Si le composant impacte l'immersion narrative â custom. Si c'est utilitaire â Headless.
|
|
|
|
| Type d'interaction | Approche |
|
|
|-------------------|----------|
|
|
| Navigation carte | Custom (Konva) |
|
|
| Dialogue avec PNJ | Custom (typewriter, bulles) |
|
|
| Fermer une modal | Headless (accessible) |
|
|
| Formulaire contact | Headless + styling custom |
|
|
| Choix narratif | Custom (cartes illustrées) |
|
|
| Tooltip info | Headless + styling custom |
|
|
|
|
---
|
|
|
|
## Defining Experience
|
|
|
|
### The One-Liner
|
|
|
|
**"Choisis ton héros et pars à la découverte d'un développeur perdu dans le code."**
|
|
|
|
C'est ce que les visiteurs raconteront. Pas "j'ai vu un portfolio", mais "j'ai vécu une aventure".
|
|
|
|
### User Mental Model Shift
|
|
|
|
Le visiteur arrive avec un modÚle mental "portfolio classique". Skycel casse cette attente **immédiatement** dÚs la landing page.
|
|
|
|
| ModÚle attendu | Réalité Skycel |
|
|
|-----------------|---------------|
|
|
| "Je vais lire un CV" | "Je suis dans une aventure" |
|
|
| "Menu â Projets" | "Carte â Exploration libre" |
|
|
| "Formulaire contact" | "J'ai trouvé le dev !" |
|
|
| "Je consulte des infos" | "Je fais des choix qui changent mon parcours" |
|
|
|
|
**Rupture immĂ©diate :** La landing page doit communiquer en moins de 3 secondes que ce site n'est pas un portfolio classique â par le design, l'animation d'entrĂ©e, et le ton narratif.
|
|
|
|
### Core Flow: From Landing to Adventure
|
|
|
|
```
|
|
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
â 1. LANDING PAGE â
|
|
â Rupture immĂ©diate : "Ce n'est pas un portfolio classique"â
|
|
â ââââââââââââââââââââ ââââââââââââââââââââ â
|
|
â â Partir Ă â â Mode express â â
|
|
â â l'aventure â â (30 secondes) â â
|
|
â ââââââââââŹââââââââââ ââââââââââŹââââââââââ â
|
|
â â â â
|
|
â ⌠⌠â
|
|
â 2. CHOIX DU HĂROS Page RĂ©sumĂ© â
|
|
â âââââââ âââââââ âââââââ â
|
|
â â đŻ â â đŒ â â đ» â â
|
|
â âRecr.â âCli. â âDev. â â
|
|
â ââââŹâââ ââââŹâââ ââââŹâââ â
|
|
â âââââââââŒââââââââ â
|
|
â ⌠â
|
|
â 3. INTRO NARRATEUR â
|
|
â Ton adaptĂ© au hĂ©ros choisi â
|
|
â Recruteur â vouvoiement, professionnel â
|
|
â Client/Dev â tutoiement, mystĂ©rieux â
|
|
â â â
|
|
â ⌠â
|
|
â 4. CARTE / PREMIER CHOIX â
|
|
â L'aventure commence â
|
|
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
```
|
|
|
|
### Novel UX Patterns
|
|
|
|
**Ce qui est innovant dans Skycel :**
|
|
|
|
| Pattern | Familiarité | Comment on l'enseigne |
|
|
|---------|-------------|----------------------|
|
|
| **Choix du héros** | Familier (jeux vidéo) | Sélection visuelle claire avec descriptions |
|
|
| **Carte comme navigation** | Semi-familier | Affordance Ă©vidente, zones cliquables, hover states |
|
|
| **Choix narratifs livre-jeu** | Familier (concept connu) | Deux options claires, pas de mauvais choix |
|
|
| **Dialogues PNJ** | Familier (jeux) | Bulle de dialogue reconnaissable, clic pour interagir |
|
|
| **Narrateur-guide** | Nouveau pour un portfolio | Apparition naturelle, non bloquant, utile |
|
|
|
|
**Stratégie :** Combiner des patterns **individuellement familiers** (jeux, livres-jeu) dans un contexte **inédit** (portfolio). Le visiteur reconnaßt chaque mécanique mais n'a jamais vu ça dans un portfolio.
|
|
|
|
### Experience Mechanics
|
|
|
|
#### 1. Initiation â Landing Page
|
|
- **Déclencheur :** Arrivée sur le site
|
|
- **Ce que le visiteur voit :** Design immersif, fond noir-bleu, illustrations SVG
|
|
- **Ce qu'il comprend :** "Ce n'est pas un portfolio normal"
|
|
- **Action :** Deux choix visibles (Aventure / Express)
|
|
|
|
#### 2. Engagement â Choix du HĂ©ros
|
|
- **DĂ©clencheur :** Clic "Partir Ă l'aventure"
|
|
- **Ce que le visiteur voit :** 3 personnages illustrés avec descriptions courtes
|
|
- **Ce qu'il comprend :** "Mon expérience sera personnalisée"
|
|
- **Action :** Sélection d'un héros
|
|
- **Feedback :** Animation de sélection, transition vers l'intro
|
|
|
|
#### 3. Immersion â Intro Narrateur
|
|
- **Déclencheur :** Héros sélectionné
|
|
- **Ce que le visiteur voit :** Texte narrateur avec typewriter, adapté au héros
|
|
- **Ce qu'il comprend :** "On me raconte une histoire, JE suis le héros"
|
|
- **Feedback :** Ton adapté (vous/tu), ambiance posée
|
|
- **Durée :** Courte (15-30 secondes max, skippable)
|
|
|
|
#### 4. Exploration â Carte & Choix
|
|
- **DĂ©clencheur :** Fin de l'intro narrateur
|
|
- **Ce que le visiteur voit :** Carte interactive avec zones Ă explorer
|
|
- **Ce qu'il comprend :** "Je choisis oĂč aller, c'est MON parcours"
|
|
- **Feedback :** Zones visitées marquées, progression visible
|
|
|
|
### Success Criteria
|
|
|
|
| CritĂšre | Indicateur |
|
|
|---------|-----------|
|
|
| **Compréhension immédiate** | Le visiteur comprend en < 3s que c'est différent |
|
|
| **Engagement héros** | > 70% des visiteurs choisissent un héros (vs mode express) |
|
|
| **Intro non-skippée** | > 50% regardent l'intro complÚte |
|
|
| **Exploration libre** | Visiteurs visitent les zones dans des ordres différents |
|
|
| **Destination finale** | > 60% atteignent la page contact |
|
|
|
|
---
|
|
|
|
## Visual Design Foundation
|
|
|
|
### Color System
|
|
|
|
#### Core Palette
|
|
|
|
| Token | Couleur | Usage |
|
|
|-------|---------|-------|
|
|
| `sky-bg` | Noir trĂšs sombre tirant vers le bleu | Fond principal |
|
|
| `sky-accent` | `#fa784f` (orange chaud) | CTAs, highlights, progression, éléments interactifs |
|
|
| `sky-text` | Blanc cassé tirant légÚrement vers le jaune | Texte principal |
|
|
| `sky-text-muted` | Variante atténuée du texte | Texte secondaire, labels |
|
|
|
|
#### Zone Colors (Carte Interactive)
|
|
|
|
Chaque zone de la carte a sa propre identité chromatique, tout en restant harmonieuse avec la palette globale :
|
|
|
|
| Zone | Teinte | Ambiance |
|
|
|------|--------|----------|
|
|
| **Projets** | Teinte unique (à définir) | Créativité, réalisation |
|
|
| **Compétences** | Teinte unique (à définir) | Technique, progression |
|
|
| **Parcours** | Teinte unique (à définir) | Temps, évolution |
|
|
| **Témoignages** | Teinte unique (à définir) | Humain, confiance |
|
|
| **Challenge** | Teinte unique (à définir) | MystÚre, défi |
|
|
| **Contact (locked)** | Orange accent `#fa784f` | Destination finale, récompense |
|
|
|
|
#### State Colors
|
|
|
|
Couleurs d'état adaptées à la palette globale (pas les verts/rouges standards purs) :
|
|
|
|
| Ătat | Direction | Usage |
|
|
|------|-----------|-------|
|
|
| **SuccÚs** | Vert harmonisé avec la palette bleu-sombre | Challenge réussi, zone complétée |
|
|
| **Erreur** | Rouge-orangé cohérent avec l'accent | Validation formulaire |
|
|
| **Warning** | Ambre chaud proche de l'accent | Indices, attention |
|
|
| **Info** | Bleu plus clair que le fond | Tips, narrateur |
|
|
|
|
### Typography System
|
|
|
|
#### Font Pairing
|
|
|
|
| RĂŽle | Type | Direction | Usage |
|
|
|------|------|-----------|-------|
|
|
| **Narrateur & PNJ** | Serif élégante | Style livre ancien, classique raffinée | Dialogues, textes narratifs, introductions |
|
|
| **Interface** | Sans-serif | Moderne sans excĂšs, lisible, intemporelle | Navigation, labels, boutons, contenu UI |
|
|
|
|
#### Type Scale
|
|
|
|
| Niveau | Usage | Contexte |
|
|
|--------|-------|----------|
|
|
| **Display** | Titre landing, révélation finale | Serif narrateur, grande taille |
|
|
| **H1** | Titre de zone | Sans-serif UI |
|
|
| **H2** | Sous-sections | Sans-serif UI |
|
|
| **Body** | Contenu principal | Sans-serif UI |
|
|
| **Narrative** | Texte du narrateur, dialogues PNJ | Serif narrateur |
|
|
| **Caption** | Labels, infos secondaires | Sans-serif UI, taille réduite |
|
|
|
|
#### Typography Principles
|
|
|
|
1. **Serif = narration** â Tout texte qui raconte une histoire utilise la police serif
|
|
2. **Sans-serif = interface** â Tout Ă©lĂ©ment fonctionnel utilise la police sans-serif
|
|
3. **Le mĂ©lange crĂ©e le contraste** â La cohabitation des deux polices renforce la dualitĂ© "aventure / portfolio professionnel"
|
|
|
|
### Spacing & Layout Foundation
|
|
|
|
#### Spacing Philosophy
|
|
|
|
**"AĂ©rĂ© mais pas vide"** â Chaque zone respire avec des espaces blancs gĂ©nĂ©reux entre les Ă©lĂ©ments, sans jamais donner l'impression d'une page creuse. Le contenu est condensĂ© mais bien espacĂ©.
|
|
|
|
#### Spacing Scale
|
|
|
|
| Token | Valeur | Usage |
|
|
|-------|--------|-------|
|
|
| `space-xs` | 4px | Espacement intra-composant |
|
|
| `space-sm` | 8px | Espacement éléments proches |
|
|
| `space-md` | 16px | Espacement standard |
|
|
| `space-lg` | 32px | Espacement entre sections |
|
|
| `space-xl` | 64px | Espacement entre zones majeures |
|
|
| `space-2xl` | 128px | Respiration entre grandes sections |
|
|
|
|
#### Layout Principles
|
|
|
|
1. **Contenu centrĂ©** â Largeur max limitĂ©e, marges latĂ©rales gĂ©nĂ©reuses
|
|
2. **Respiration verticale** â Espaces importants entre les blocs de contenu
|
|
3. **DensitĂ© adaptative** â Plus dense dans les zones interactives (carte, skills), plus aĂ©rĂ© dans les zones narratives
|
|
4. **Profondeur par l'espace** â Les Ă©lĂ©ments importants ont plus d'espace autour d'eux
|
|
|
|
#### Zone Density Guidelines
|
|
|
|
| Type de zone | Densité | Espace blanc |
|
|
|--------------|---------|--------------|
|
|
| **Narrative** (intro, transitions) | Faible | Beaucoup â focus sur le texte |
|
|
| **Exploration** (carte, choix) | Moyenne | ĂquilibrĂ© â interactions claires |
|
|
| **Contenu** (projets, skills) | Moyenne-haute | StructurĂ© â cards bien espacĂ©es |
|
|
| **Dialogue** (PNJ) | Faible | Focus sur la bulle de dialogue |
|
|
| **Challenge** | Moyenne | Focus sur le puzzle |
|
|
|
|
### Accessibility Considerations
|
|
|
|
#### Contrast Requirements (WCAG AA)
|
|
|
|
| ĂlĂ©ment | Ratio minimum | Notes |
|
|
|---------|---------------|-------|
|
|
| Texte blanc cassé sur fond sombre | ℠4.5:1 | à valider avec les couleurs exactes |
|
|
| Accent orange sur fond sombre | â„ 3:1 (grands textes) | Boutons, liens |
|
|
| Couleurs de zones sur fond sombre | â„ 3:1 | Labels de carte |
|
|
|
|
#### Motion & Animation
|
|
|
|
- Respect de `prefers-reduced-motion` sur toutes les animations
|
|
- Typewriter effect : option pour afficher le texte directement
|
|
- Transitions de zone : réduites ou supprimées si motion réduite
|
|
- Carte : navigation simplifiée sans animations si motion réduite
|
|
|
|
#### Reading Comfort
|
|
|
|
- Taille de texte minimum : 16px pour le corps
|
|
- Interligne confortable (1.5-1.7 pour le narratif)
|
|
- Largeur de ligne : 60-75 caractĂšres max pour le texte narratif
|
|
|
|
---
|
|
|
|
## Design Direction Decision
|
|
|
|
### Chosen Direction: "L'Explorateur" (Direction B)
|
|
|
|
**Concept :** La carte interactive est l'élément central de navigation. Le monde de Skycel est toujours visible, le visiteur explore librement.
|
|
|
|
### Desktop Experience
|
|
|
|
```
|
|
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
â [Progression: ââââââââ 35%] [FR|EN] [â] â
|
|
â â
|
|
â âââââââââââââââââââââââââââââââââââââââââââââââââââââ â
|
|
â â CARTE â â
|
|
â â (Konva.js, illustrĂ©e SVG) â â
|
|
â â â â
|
|
â â đïž Projets đł CompĂ©tences â â
|
|
â â \ / â â
|
|
â â \ / â â
|
|
â â ââââ đ ââââ â â
|
|
â â / \ â â
|
|
â â / \ â â
|
|
â â đ Parcours đŹ TĂ©moignages â â
|
|
â â â â
|
|
â â đ ??? (Contact) â â
|
|
â â â â
|
|
â â Zones cliquables, hover states, curseur custom â â
|
|
â â Zones visitĂ©es vs non-visitĂ©es visuellement â â
|
|
â â Contact verrouillĂ© jusqu'Ă progression â â
|
|
â âââââââââââââââââââââââââââââââââââââââââââââââââââââ â
|
|
â â
|
|
â âââââââââââââââââââââââââââââââââââââââââââ â
|
|
â â đ Narrateur (adaptĂ© au hĂ©ros choisi) â â
|
|
â âââââââââââââââââââââââââââââââââââââââââââ â
|
|
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
```
|
|
|
|
### Mobile Experience: "Le Chemin Libre"
|
|
|
|
**Concept :** Les zones de la carte deviennent un sentier vertical scrollable. Le chemin est dĂ©coratif â toutes les zones sont accessibles dans n'importe quel ordre.
|
|
|
|
**Composants clés :**
|
|
|
|
| ĂlĂ©ment | Fonction |
|
|
|---------|----------|
|
|
| **Quick-nav** | Barre d'icĂŽnes fixe en haut, tap = scroll vers la zone |
|
|
| **Zones illustrées** | Cards avec illustration, nom, statut (visité/nouveau) |
|
|
| **Chemin décoratif** | Ligne reliant les zones visuellement |
|
|
| **Indicateurs** | â visitĂ© / â nouveau / đ verrouillĂ© |
|
|
| **Narrateur** | Au-dessus de la bottom bar |
|
|
|
|
**Principes :**
|
|
- **LibertĂ© totale** â Tap sur n'importe quelle zone, dans n'importe quel ordre
|
|
- **Quick-nav en haut** â AccĂšs direct sans scroller
|
|
- **Progression visible** â IcĂŽnes colorĂ©es pour zones visitĂ©es
|
|
- **Seul Contact est verrouillĂ©** â Tout le reste est ouvert
|
|
|
|
### Design Rationale
|
|
|
|
1. **Carte = identitĂ© de Skycel** â C'est ce qui diffĂ©rencie ce portfolio de tous les autres
|
|
2. **LibertĂ© d'exploration** â FidĂšle aux inspirations Zelda et livres-jeu
|
|
3. **Desktop : Konva.js** â Immersion spatiale complĂšte, interactions riches
|
|
4. **Mobile : Chemin Libre** â MĂȘme libertĂ©, adaptĂ© au scroll vertical naturel
|
|
5. **ProgressivitĂ©** â Les zones se "dĂ©voilent" visuellement une fois visitĂ©es
|
|
|
|
### Screen Architecture Summary
|
|
|
|
| Ăcran | Desktop | Mobile |
|
|
|-------|---------|--------|
|
|
| **Landing** | Plein Ă©cran, illustration, 2 CTAs | Idem, responsive |
|
|
| **Choix Héros** | 3 cards illustrées cÎte à cÎte | 3 cards empilées |
|
|
| **Intro Narrateur** | Texte centré, typewriter | Idem |
|
|
| **Carte/Navigation** | Konva.js interactive | Chemin Libre vertical |
|
|
| **Zone Projets** | Grille de cards | Cards empilées |
|
|
| **Zone Skills** | vis.js skill tree | Liste groupée par catégorie |
|
|
| **Zone Parcours** | Timeline alternée G/D | Timeline linéaire |
|
|
| **Zone Témoignages** | Dialogues PNJ plein écran | Dialogues adaptés |
|
|
| **Challenge** | Puzzle interactif | Puzzle adapté touch |
|
|
| **Révélation** | "Monde de code" animé | Version allégée |
|
|
| **Contact** | Formulaire + célébration | Idem, responsive |
|
|
|
|
### Common UI Elements
|
|
|
|
| ĂlĂ©ment | Desktop | Mobile |
|
|
|---------|---------|--------|
|
|
| **Barre de progression** | Header (haut) | Header (haut) |
|
|
| **Narrateur** | Bas de l'Ă©cran | Au-dessus de la bottom bar |
|
|
| **AccĂšs carte** | Header | **Bottom bar (thumb zone)** |
|
|
| **Langue** | Header | Header |
|
|
| **ParamĂštres** | Header | Bottom bar |
|
|
|
|
### Mobile Bottom Bar
|
|
|
|
```
|
|
ââââââââââââââââââââââââ
|
|
â â
|
|
â (contenu) â
|
|
â â
|
|
ââââââââââââââââââââââââ€
|
|
â đ Narrateur â â au-dessus de la bar
|
|
ââââââââââââââââââââââââ€
|
|
â đșïž đ âïž â â fixe, toujours accessible
|
|
â Carte Progr. Param. â pouce = accĂšs direct
|
|
ââââââââââââââââââââââââ
|
|
```
|
|
|
|
---
|
|
|
|
## User Journey Flows
|
|
|
|
### Journey 1: Parcours Aventure (Core Journey)
|
|
|
|
**Parcours critique â Le cĆur de l'expĂ©rience Skycel**
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
A[Landing Page] --> B{Choix du visiteur}
|
|
B -->|"Partir Ă l'aventure"| C[Choix du HĂ©ros]
|
|
B -->|"Mode express"| EXPRESS[Page Résumé]
|
|
|
|
C --> D[Intro Narrateur - adapté au héros]
|
|
D --> CARTE[Carte Interactive]
|
|
|
|
CARTE --> Z1[Zone Projets]
|
|
CARTE --> Z2[Zone Compétences]
|
|
CARTE --> Z3[Zone Parcours]
|
|
CARTE --> Z4[Zone TĂ©moignages]
|
|
|
|
Z1 -->|"Narrateur propose choix"| CARTE
|
|
Z2 -->|"Narrateur propose choix"| CARTE
|
|
Z3 -->|"Narrateur propose choix"| CARTE
|
|
Z4 -->|"Narrateur propose choix"| CARTE
|
|
|
|
CARTE -->|"2 zones visitĂ©es"| UNLOCK["đ Contact dĂ©bloquĂ©
|
|
Zone s'illumine + Narrateur annonce"]
|
|
|
|
UNLOCK --> CARTE2[Carte - Contact accessible]
|
|
CARTE2 --> CHALLENGE_OPT{"Challenge final (optionnel)"}
|
|
CARTE2 --> CONTACT[Zone Contact]
|
|
CHALLENGE_OPT -->|"Tenter"| CHALLENGE[Challenge]
|
|
CHALLENGE_OPT -->|"Passer"| CONTACT
|
|
CHALLENGE --> CONTACT
|
|
|
|
CONTACT --> REVEAL["Révélation 'Monde de Code'
|
|
Avatar Célian découvert"]
|
|
REVEAL --> FORM[Formulaire de contact]
|
|
FORM -->|"Envoi"| POST_CHALLENGE["Challenge optionnel
|
|
'En attendant que le dev
|
|
retrouve sa boite mail...'"]
|
|
POST_CHALLENGE --> CONFIRM[Confirmation envoi]
|
|
```
|
|
|
|
#### Détail des interactions clés
|
|
|
|
**Entrée dans une zone :**
|
|
1. Tap/clic sur la zone depuis la carte
|
|
2. Transition animée vers le contenu de la zone
|
|
3. Le visiteur explore le contenu (projets, skills, etc.)
|
|
4. Le narrateur intervient en fin de zone avec un choix :
|
|
|
|
```
|
|
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
â đ Narrateur: â
|
|
â "IntĂ©ressant, n'est-ce pas ? Maintenant..." â
|
|
â â
|
|
â ââââââââââââââââââââââ ââââââââââââââââââââââ â
|
|
â â đł DĂ©couvrir ses â â đșïž Retourner Ă â â
|
|
â â compĂ©tences â â la carte â â
|
|
â ââââââââââââââââââââââ ââââââââââââââââââââââ â
|
|
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
|
|
```
|
|
|
|
**Déblocage du contact (aprÚs 2 zones visitées) :**
|
|
1. Animation : la zone Contact s'illumine sur la carte
|
|
2. Narrateur : *"On dirait que tu as assez exploré pour mériter une rencontre..."*
|
|
3. La zone Contact devient cliquable
|
|
4. Le visiteur peut continuer Ă explorer OU aller au contact
|
|
|
|
**Challenge final (optionnel) :**
|
|
- Apparaßt comme une proposition avant d'accéder au contact
|
|
- Le visiteur peut le tenter ou le passer
|
|
- Ne bloque JAMAIS l'accĂšs au contact
|
|
|
|
**Challenge post-formulaire (optionnel) :**
|
|
- AprĂšs l'envoi du formulaire, au lieu d'un simple "Merci"
|
|
- Message : *"En attendant que le développeur retrouve le chemin vers sa boßte mail, vous pouvez tenter ce challenge !"*
|
|
- Transforme le temps d'attente en moment de jeu
|
|
- Totalement optionnel, le visiteur peut fermer
|
|
|
|
### Journey 2: Parcours Express
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
A[Landing Page] -->|"Mode express"| B[Page Résumé]
|
|
B --> C[Compétences clés]
|
|
B --> D[Projets highlights]
|
|
B --> E[Liens rapides]
|
|
B --> F[Contact direct]
|
|
|
|
B -->|"Voir l'aventure"| G[Choix du HĂ©ros]
|
|
G --> H[Parcours Aventure...]
|
|
```
|
|
|
|
**Durée cible : 30 secondes pour évaluer**
|
|
|
|
| Section | Contenu | Temps |
|
|
|---------|---------|-------|
|
|
| **Hero** | Nom, titre, photo, accroche | 5s |
|
|
| **Compétences** | Stack technique, niveaux | 10s |
|
|
| **Projets** | 3-4 projets clés avec liens | 10s |
|
|
| **Contact** | CTA direct | 5s |
|
|
|
|
**CTA vers l'aventure toujours visible :** Un bouton discret mais présent invite à vivre l'expérience complÚte.
|
|
|
|
### Journey 3: Parcours URL Directe (Candidatures)
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
A["skycel.dev/resume"] --> B[Page Résumé]
|
|
B --> C{Choix du visiteur}
|
|
C -->|"Contacter"| D[Formulaire contact]
|
|
C -->|"Voir l'aventure"| E[Landing â Aventure]
|
|
C -->|"Parcourir"| F[Scroll page résumé]
|
|
```
|
|
|
|
**Contexte :** Célian inclut `skycel.dev/resume` dans ses candidatures. Le recruteur arrive directement sur la page résumé, sans passer par la landing.
|
|
|
|
### Journey 4: Parcours Retour (Visiteur qui revient)
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
A[Arrivée sur le site] --> B{Session existante ?}
|
|
B -->|"Oui"| C["Narrateur: 'Bienvenue Ă nouveau, voyageur...'"]
|
|
C --> D{Reprendre ?}
|
|
D -->|"Oui"| E[Carte avec progression restaurée]
|
|
D -->|"Non, recommencer"| F[Reset â Landing]
|
|
|
|
B -->|"Non"| G[Landing classique]
|
|
|
|
A2["skycel.dev?session=abc123"] --> H[Chargement session cross-device]
|
|
H --> C
|
|
```
|
|
|
|
**DĂ©tection :** Via LocalStorage (mĂȘme appareil) ou ID session dans l'URL (cross-device)
|
|
|
|
### Journey Patterns
|
|
|
|
#### Pattern: Sortie de Zone par Choix Narratif
|
|
|
|
Chaque zone se termine par une intervention du narrateur qui propose un choix entre deux directions. Ce pattern :
|
|
- Maintient l'immersion "livre dont vous ĂȘtes le hĂ©ros"
|
|
- Guide sans imposer
|
|
- Offre toujours le retour Ă la carte comme option
|
|
- Crée une continuité narrative entre les zones
|
|
|
|
#### Pattern: DĂ©blocage Progressif
|
|
|
|
| Zones visitées | Ce qui se débloque |
|
|
|----------------|-------------------|
|
|
| 0 | Toutes les zones sauf Contact |
|
|
| 2 | Contact s'illumine + annonce narrateur |
|
|
| 3+ | Easter eggs supplémentaires |
|
|
| Toutes | Badge "Explorateur complet" |
|
|
|
|
#### Pattern: Challenges Non-Bloquants
|
|
|
|
Tous les challenges sont **optionnels** :
|
|
- Challenge final avant contact â peut ĂȘtre passĂ©
|
|
- Challenge post-formulaire â divertissement pendant l'attente
|
|
- Challenges en zone (quiz, code) â enrichissement, jamais blocage
|
|
|
|
### Flow Optimization Principles
|
|
|
|
1. **2 zones = contact** â L'immersion ne doit JAMAIS freiner le contact
|
|
2. **Choix du narrateur = navigation** â Pas de bouton "retour" froid, le narrateur guide
|
|
3. **Challenges optionnels** â Toujours une porte de sortie, jamais de frustration
|
|
4. **Express accessible partout** â Le mode rĂ©sumĂ© est toujours Ă un clic
|
|
5. **ContinuitĂ© cross-session** â Jamais de progression perdue
|
|
|
|
---
|
|
|
|
## Component Strategy
|
|
|
|
### Design System Components (Headless)
|
|
|
|
| Composant | Lib | Usage Skycel |
|
|
|-----------|-----|-------------|
|
|
| `Dialog/Modal` | Headless UI | DĂ©tails projets, overlays |
|
|
| `Menu/Dropdown` | Headless UI | SĂ©lection langue, options |
|
|
| `Tooltip` | Headless UI | Infos au survol carte |
|
|
| `Tabs` | Headless UI | Navigation intra-zone |
|
|
| `Switch/Toggle` | Headless UI | ParamĂštres (son, animations) |
|
|
|
|
### Custom Components
|
|
|
|
#### đ·ïž NarratorBubble â Le Bug (Narrateur)
|
|
|
|
**Concept :** Le narrateur est un "bug" â un insecte (l'araignĂ©e, mascotte de la micro-entreprise de CĂ©lian). Il est venu chercher le visiteur pour l'aider Ă sortir le dĂ©veloppeur de son monde de code. Au dĂ©but mystĂ©rieux, son identitĂ© se rĂ©vĂšle progressivement.
|
|
|
|
**Arc de révélation du narrateur :**
|
|
|
|
| Progression | Apparence | Ce qu'on sait |
|
|
|-------------|-----------|---------------|
|
|
| **Début** | Silhouette sombre, forme vague | "Une voix mystérieuse..." |
|
|
| **25%** | Forme plus précise, pattes visibles | "Une petite créature..." |
|
|
| **50%** | Araignée reconnaissable, partiellement cachée | "Un insecte... un bug ?" |
|
|
| **75%** | Araignée complÚte, expressive | Le bug se présente |
|
|
| **Révélation** | Mascotte complÚte, identité révélée | Lien avec la micro-entreprise |
|
|
|
|
**Spécification :**
|
|
|
|
| Attribut | DĂ©tail |
|
|
|----------|--------|
|
|
| **Purpose** | Guider le visiteur, raconter l'histoire, proposer des choix |
|
|
| **Position Desktop** | Bas de l'Ă©cran, bulle avec avatar progressif |
|
|
| **Position Mobile** | Au-dessus de la bottom bar |
|
|
| **Ătats** | CachĂ©, Apparition, Parle (typewriter), Attend choix, DisparaĂźt |
|
|
| **Variantes ton** | Vouvoiement (recruteur) / Tutoiement (autres) |
|
|
| **Ăvolution** | MystĂ©rieux â Complice (parallĂšle Ă la rĂ©vĂ©lation visuelle) |
|
|
| **Interaction** | Clic pour accélérer le texte, choix narratifs intégrés |
|
|
| **A11y** | `role="status"`, texte accessible, skip possible |
|
|
|
|
#### đŹ DialoguePNJ â TĂ©moignages Interactifs
|
|
|
|
**Concept :** Les tĂ©moignages sont prĂ©sentĂ©s comme des dialogues de jeu â portrait du PNJ + bulle de dialogue avec effet typewriter.
|
|
|
|
| Attribut | DĂ©tail |
|
|
|----------|--------|
|
|
| **Purpose** | Afficher les témoignages comme des rencontres de PNJ |
|
|
| **Layout** | Portrait (photo/illustration fournie) + bulle de dialogue |
|
|
| **Typewriter** | Texte apparaßt lettre par lettre, clic pour accélérer |
|
|
| **Personnalité** | Chaque PNJ a un style de dialogue (formel, décontracté, enthousiaste) |
|
|
| **Navigation** | Clic/tap pour passer au dialogue suivant |
|
|
| **Source image** | Photo ou illustration fournie par la personne |
|
|
| **A11y** | Texte complet accessible, skip typewriter |
|
|
|
|
#### đșïž InteractiveMap â Carte Hub (Desktop)
|
|
|
|
| Attribut | DĂ©tail |
|
|
|----------|--------|
|
|
| **Purpose** | Navigation centrale, vue d'ensemble de l'aventure |
|
|
| **Tech** | Konva.js + illustrations SVG |
|
|
| **Zones** | Cliquables, hover states, curseur custom |
|
|
| **Ătats zones** | Non visitĂ©e, Hover, VisitĂ©e, Active, VerrouillĂ©e (Contact) |
|
|
| **Progression** | Zones visitées changent d'apparence |
|
|
| **Déblocage** | Contact s'illumine aprÚs 2 zones visitées |
|
|
| **Responsive** | Desktop = Konva.js / Mobile = ZoneCard (Chemin Libre) |
|
|
| **A11y** | Navigation clavier (Tab entre zones), labels ARIA |
|
|
|
|
#### đ± ZoneCard â Carte Mobile (Chemin Libre)
|
|
|
|
| Attribut | DĂ©tail |
|
|
|----------|--------|
|
|
| **Purpose** | Représenter une zone dans le Chemin Libre mobile |
|
|
| **Layout** | Card illustrée avec nom, statut, teinte de zone |
|
|
| **Ătats** | Non visitĂ©e, VisitĂ©e, VerrouillĂ©e |
|
|
| **Interaction** | Tap = entrer dans la zone |
|
|
| **Chemin** | Ligne décorative reliant les cards verticalement |
|
|
| **A11y** | `role="link"`, labels descriptifs |
|
|
|
|
#### đł SkillTree â Arbre de CompĂ©tences
|
|
|
|
| Attribut | DĂ©tail |
|
|
|----------|--------|
|
|
| **Purpose** | Visualiser les compétences comme un arbre connecté |
|
|
| **Tech** | vis.js (graphe de nĆuds connectĂ©s) |
|
|
| **Layout** | NĆuds = compĂ©tences, liens = relations, catĂ©gories par couleur |
|
|
| **Interaction** | Clic sur nĆud = dĂ©tails, zoom/pan |
|
|
| **Mobile** | Liste groupée par catégorie (vis.js trop complexe) |
|
|
| **A11y** | Version alternative accessible (liste structurée) |
|
|
|
|
#### đ HeroSelector â Choix du Personnage
|
|
|
|
| Attribut | DĂ©tail |
|
|
|----------|--------|
|
|
| **Purpose** | Permettre au visiteur de choisir son héros |
|
|
| **Layout** | 3 cards illustrées (Recruteur, Client, Développeur) |
|
|
| **Contenu** | Illustration + nom + courte description |
|
|
| **Interaction** | Hover = preview, Clic = sélection avec animation |
|
|
| **Mobile** | Cards empilées verticalement |
|
|
| **A11y** | `role="radiogroup"`, navigation clavier |
|
|
|
|
#### â ChoiceCards â Choix Narratifs
|
|
|
|
| Attribut | DĂ©tail |
|
|
|----------|--------|
|
|
| **Purpose** | PrĂ©senter les choix style "livre dont vous ĂȘtes le hĂ©ros" |
|
|
| **Layout** | 2 cards cÎte à cÎte (ou empilées mobile) |
|
|
| **Contenu** | IcĂŽne + texte narratif du choix |
|
|
| **Interaction** | Hover = highlight, Clic = transition animée |
|
|
| **Contexte** | Utilisé par le narrateur en fin de zone |
|
|
| **A11y** | `role="radiogroup"`, focus visible |
|
|
|
|
#### đ» CodeWorld â RĂ©vĂ©lation Finale
|
|
|
|
**Concept :** Le paysage final est composé de blocs de code formant un décor style ASCII art. Le visiteur traverse ce monde pour trouver l'avatar de Célian perdu au milieu.
|
|
|
|
| Attribut | DĂ©tail |
|
|
|----------|--------|
|
|
| **Purpose** | Moment waouh â climax narratif |
|
|
| **Visual** | Blocs de code en ASCII art formant un paysage (montagnes, arbres, ville) |
|
|
| **Animations** | Code qui scroll/apparaßt progressivement, avatar qui se révÚle |
|
|
| **Avatar** | Illustration custom de CĂ©lian au centre du monde de code |
|
|
| **Transition** | Vers le formulaire de contact ("Tu m'as trouvé !") |
|
|
| **Mobile** | Version allĂ©gĂ©e mais mĂȘme impact Ă©motionnel |
|
|
| **A11y** | Description alternative du moment, skip possible |
|
|
|
|
#### đź ChallengeEngine â Moteur de Challenges
|
|
|
|
| Attribut | DĂ©tail |
|
|
|----------|--------|
|
|
| **Purpose** | Gérer les challenges adaptés au héros |
|
|
| **Types** | Quiz code (dev), Quiz culture info (autres), Exploration cachée (tous) |
|
|
| **Adaptativité** | Contenu différent selon le héros choisi |
|
|
| **Bloquant** | JAMAIS â toujours un bouton "Passer" |
|
|
| **Post-formulaire** | Mode "en attendant" avec message fun |
|
|
| **A11y** | Formulaires accessibles, feedback clair |
|
|
|
|
#### âł LoadingNarrative â Chargement Narratif
|
|
|
|
| Attribut | DĂ©tail |
|
|
|----------|--------|
|
|
| **Purpose** | Transformer le temps d'attente en moment narratif |
|
|
| **Contenu** | Tips, fun facts, teasers, mini-Ă©nigmes |
|
|
| **Usage** | Premier chargement du site |
|
|
| **Rotation** | Contenu aléatoire à chaque chargement |
|
|
| **A11y** | `role="status"`, pas d'animation bloquante |
|
|
|
|
### Component Implementation Strategy
|
|
|
|
| Phase | Composants | Priorité |
|
|
|-------|-----------|----------|
|
|
| **Phase 1 â Core** | NarratorBubble, HeroSelector, InteractiveMap, ChoiceCards | Critique â sans eux pas d'aventure |
|
|
| **Phase 2 â Zones** | DialoguePNJ, SkillTree, ZoneCard, QuickNav, BottomBar | Important â contenu des zones |
|
|
| **Phase 3 â Climax** | CodeWorld, ChallengeEngine, LoadingNarrative | Impact â moments forts |
|
|
| **Phase 4 â Polish** | SessionBanner, ResumeHero, Easter eggs | Finition â expĂ©rience complĂšte |
|
|
|
|
---
|
|
|
|
## UX Consistency Patterns
|
|
|
|
### RĂšgle Fondamentale : Le Narrateur Est La Voix Unique
|
|
|
|
**Tout feedback passe par le narrateur.** Aucun toast, aucune notification systÚme, aucun message d'erreur générique. Le bug est l'unique interface de communication entre le systÚme et le visiteur.
|
|
|
|
| Situation | Approche classique | Approche Skycel |
|
|
|-----------|-------------------|-----------------|
|
|
| Erreur formulaire | Toast rouge "Champ requis" | đ·ïž "Hmm, il manque quelque chose ici..." |
|
|
| Challenge rĂ©ussi | Badge + animation | đ·ïž "Pas mal du tout ! Tu m'impressionnes..." |
|
|
| Zone complĂ©tĂ©e | Notification "TerminĂ©" | đ·ïž "Un mystĂšre de moins... mais il en reste" |
|
|
| Contact dĂ©bloquĂ© | Badge "DĂ©bloquĂ©" | đ·ïž "On dirait que tu mĂ©rites une rencontre..." |
|
|
| Erreur technique | "Une erreur est survenue" | đ·ïž "Oups, mĂȘme moi je n'ai pas vu ça venir..." |
|
|
| Sauvegarde progression | "Progression sauvegardĂ©e" | đ·ïž "Ne t'inquiĂšte pas, je me souviens de tout" |
|
|
| Retour visiteur | "Bienvenue" | đ·ïž "Te revoilĂ ! Tu m'avais manquĂ©..." |
|
|
|
|
### Action Patterns
|
|
|
|
#### Hiérarchie des Actions
|
|
|
|
| Type | Style | Contexte | Exemple |
|
|
|------|-------|----------|---------|
|
|
| **Action narrative** | ChoiceCards illustrées | Choix dans l'aventure | "Explorer les projets" / "Voir les compétences" |
|
|
| **Action principale** | Bouton accent `#fa784f` | CTA important hors narration | "Envoyer le message" |
|
|
| **Action secondaire** | Bouton outline / ghost | Alternative ou annulation | "Passer le challenge" |
|
|
| **Action discrĂšte** | Lien texte | Navigation utilitaire | "Changer de langue", "Mode express" |
|
|
|
|
#### RĂšgle de contexte
|
|
|
|
```
|
|
DANS L'AVENTURE HORS AVENTURE
|
|
â â
|
|
⌠âŒ
|
|
ChoiceCards Boutons classiques
|
|
(narrateur propose) (UI standard stylée)
|
|
|
|
Ex: fin de zone, Ex: formulaire contact,
|
|
choix de chemin paramĂštres, langue
|
|
```
|
|
|
|
### Feedback Patterns
|
|
|
|
#### Feedback Narratif (tout feedback)
|
|
|
|
**Tonalité du feedback par type :**
|
|
|
|
| Type | Ton narrateur | Exemple |
|
|
|------|--------------|---------|
|
|
| **SuccÚs** | Complice, fier | "Bien joué ! Tu commences à comprendre..." |
|
|
| **Erreur utilisateur** | Bienveillant, guide | "Attends, il manque quelque chose ici..." |
|
|
| **Erreur technique** | Humoristique, rassurant | "MĂȘme les bugs ont des bugs parfois..." |
|
|
| **Information** | Mystérieux, intrigant | "Savais-tu que cette zone cache un secret ?" |
|
|
| **Progression** | Encourageant | "Encore un peu et tu y es presque..." |
|
|
| **Avertissement** | Prudent | "Attention, tu t'aventures en terrain inconnu..." |
|
|
|
|
#### Adaptation au héros
|
|
|
|
**Exemples d'une mĂȘme erreur selon le hĂ©ros :**
|
|
- Recruteur : *"Il semblerait qu'un champ attende votre attention..."*
|
|
- Client : *"Hmm, t'as oublié quelque chose ici..."*
|
|
- Dev : *"TypeError: missing_field is undefined đ Non, je plaisante, il manque juste un champ"*
|
|
|
|
### Navigation Patterns
|
|
|
|
#### Qui navigue quoi
|
|
|
|
| ĂlĂ©ment | RĂŽle navigation | Quand |
|
|
|---------|----------------|-------|
|
|
| **Narrateur (ChoiceCards)** | Navigation entre zones | Fin de zone, transitions narratives |
|
|
| **Carte (Desktop)** | Navigation libre | Depuis la vue carte |
|
|
| **Chemin Libre (Mobile)** | Navigation libre | Depuis la vue chemin |
|
|
| **Bottom Bar (Mobile)** | AccĂšs carte, progression, paramĂštres | Toujours visible |
|
|
| **Header (Desktop)** | Langue, progression, paramĂštres | Toujours visible |
|
|
|
|
#### Pattern de transition entre zones
|
|
|
|
**RĂšgle :** On ne quitte JAMAIS une zone avec un bouton "Retour" froid. Le narrateur accompagne toujours la transition.
|
|
|
|
**Exception :** Le bouton Carte dans la bottom bar mobile et le header desktop permettent un retour direct (le narrateur commente quand mĂȘme : *"Tu veux revoir la carte ? Bonne idĂ©e..."*)
|
|
|
|
### Form Patterns
|
|
|
|
#### Formulaire de Contact
|
|
|
|
| Aspect | Pattern |
|
|
|--------|---------|
|
|
| **Validation** | Temps réel, feedback narrateur |
|
|
| **Erreur champ** | Narrateur indique le problĂšme avec humour |
|
|
| **Soumission** | Bouton accent, narrateur confirme |
|
|
| **SuccĂšs** | Narrateur + transition vers challenge post-formulaire |
|
|
| **Anti-spam** | Honeypot invisible (pas de CAPTCHA qui casse l'immersion) |
|
|
|
|
#### Formulaires de Challenge (quiz)
|
|
|
|
| Aspect | Pattern |
|
|
|--------|---------|
|
|
| **Présentation** | Narrateur introduit le challenge |
|
|
| **Réponse correcte** | Narrateur félicite, effet visuel positif |
|
|
| **RĂ©ponse incorrecte** | Narrateur encourage, indice optionnel |
|
|
| **Skip** | Toujours disponible, narrateur commente |
|
|
|
|
### State Patterns
|
|
|
|
| Ătat | Comportement | Narrateur |
|
|
|------|-------------|-----------|
|
|
| **Chargement initial** | LoadingNarrative (tips, fun facts) | Introduction du bug |
|
|
| **Zone non visitée** | Aspect mystérieux, lueur subtile | "Cette zone t'attend..." |
|
|
| **Zone visitée** | Aspect révélé, couleur pleine | "Tu connais déjà cet endroit" |
|
|
| **Zone verrouillée** | Aspect grisé + cadenas | "Pas encore... explore d'abord" |
|
|
| **Contact débloqué** | Animation illumination | Annonce narrative |
|
|
| **Easter egg trouvé** | Animation surprise | Narrateur réagit avec enthousiasme |
|
|
|
|
**RÚgle : Aucun état vide.** Il n'y a JAMAIS d'état vide dans Skycel. Chaque zone a du contenu, le narrateur comble les silences, et les zones non visitées ont une présentation mystérieuse.
|
|
|
|
---
|
|
|
|
## Responsive Design & Accessibility
|
|
|
|
### Responsive Strategy
|
|
|
|
#### Device Behavior Matrix
|
|
|
|
| Device | Breakpoint | Carte | Layout | Navigation |
|
|
|--------|-----------|-------|--------|------------|
|
|
| **Mobile** | < 768px | Chemin Libre vertical | Empilé | Bottom bar (pouce) |
|
|
| **Tablette** | 768px - 1023px | Konva.js (comme desktop) | Comme desktop | Header |
|
|
| **Desktop** | â„ 1024px | Konva.js interactive | Multi-colonnes | Header |
|
|
|
|
**RÚgle :** Tablette = desktop. Seul mobile a un comportement différent.
|
|
|
|
#### Mobile-Specific Adaptations
|
|
|
|
| Composant | Desktop/Tablette | Mobile |
|
|
|-----------|-----------------|--------|
|
|
| **Carte** | Konva.js interactive | Chemin Libre (ZoneCards) |
|
|
| **SkillTree** | vis.js graphe connecté | Liste groupée par catégorie |
|
|
| **HeroSelector** | 3 cards cÎte à cÎte | 3 cards empilées |
|
|
| **ChoiceCards** | 2 cards cÎte à cÎte | 2 cards empilées |
|
|
| **DialoguePNJ** | Portrait + bulle large | Portrait réduit + bulle pleine largeur |
|
|
| **CodeWorld** | Animation complÚte | Version allégée |
|
|
| **Navigation** | Header fixe | Bottom bar + Quick-nav haut |
|
|
| **Narrateur** | Bulle en bas | Bulle au-dessus de bottom bar |
|
|
|
|
### Breakpoint Strategy
|
|
|
|
```css
|
|
/* Mobile First */
|
|
/* Base: 0 - 767px (mobile) */
|
|
|
|
/* Tablette + Desktop */
|
|
@media (min-width: 768px) {
|
|
/* Carte Konva.js, layouts multi-colonnes */
|
|
/* Header navigation */
|
|
}
|
|
|
|
/* Desktop large */
|
|
@media (min-width: 1280px) {
|
|
/* Espacement supplémentaire */
|
|
/* Contenu max-width limité */
|
|
}
|
|
```
|
|
|
|
**Approche : Mobile First.** Le CSS de base cible mobile, les media queries ajoutent la complexité pour tablette/desktop.
|
|
|
|
### Accessibility Strategy (WCAG AA)
|
|
|
|
#### Compliance Target: WCAG 2.1 Level AA
|
|
|
|
#### Contrast Requirements
|
|
|
|
| ĂlĂ©ment | Ratio requis | Notes |
|
|
|---------|-------------|-------|
|
|
| Texte body (blanc cassé / fond sombre) | ℠4.5:1 | Vérifier avec les couleurs exactes |
|
|
| Grands textes (titres, narrateur) | â„ 3:1 | Display, H1, texte narratif |
|
|
| Accent orange sur fond sombre | â„ 3:1 | Boutons, liens, CTAs |
|
|
| Texte sur couleurs de zone | â„ 4.5:1 | Labels de carte |
|
|
| Focus indicators | â„ 3:1 | Visible sur fond sombre |
|
|
|
|
#### Keyboard Navigation
|
|
|
|
| Contexte | Comportement clavier |
|
|
|----------|---------------------|
|
|
| **Carte (Desktop)** | Tab entre zones, Enter pour entrer |
|
|
| **ChoiceCards** | Tab entre options, Enter pour choisir |
|
|
| **HeroSelector** | FlÚches pour naviguer, Enter pour sélectionner |
|
|
| **DialoguePNJ** | Enter pour avancer, Escape pour fermer |
|
|
| **Narrateur typewriter** | **Espace = accélérer l'animation** |
|
|
| **Challenges** | Tab entre réponses, Enter pour valider |
|
|
|
|
#### Narrateur & Animations Accessibles
|
|
|
|
**Option paramĂštres : "DĂ©sactiver les animations narratives"**
|
|
|
|
| ParamĂštre | Comportement |
|
|
|-----------|-------------|
|
|
| Animations ON (défaut) | Typewriter, transitions, animations de zone |
|
|
| **Animations OFF** | Texte affiché instantanément, transitions immédiates |
|
|
|
|
**Interactions typewriter :**
|
|
|
|
| Action | RĂ©sultat |
|
|
|--------|---------|
|
|
| Ne rien faire | Texte apparaĂźt lettre par lettre |
|
|
| **Appuyer sur Espace** | Animation accélérée (x3-x5) |
|
|
| **Cliquer** | Animation accélérée (x3-x5) |
|
|
| Animations OFF | Texte affiché en entier immédiatement |
|
|
|
|
**Screen reader :**
|
|
- Texte complet toujours disponible via `aria-label`
|
|
- ChoiceCards annoncés comme options avec descriptions
|
|
- Narrateur utilise `role="status"` + `aria-live="polite"`
|
|
|
|
#### `prefers-reduced-motion` Support
|
|
|
|
Respecté automatiquement, indépendamment du paramÚtre utilisateur :
|
|
- Typewriter â texte instantanĂ©
|
|
- Transitions zones â coupes directes
|
|
- Animations carte â navigation sans animation
|
|
- CodeWorld â version statique
|
|
|
|
#### Touch Targets
|
|
|
|
| ĂlĂ©ment | Taille minimum |
|
|
|---------|---------------|
|
|
| Boutons | 44x44px |
|
|
| Zones carte (mobile) | 48x48px |
|
|
| Bottom bar items | 48x48px |
|
|
| ChoiceCards | Pleine largeur |
|
|
| Liens texte | 44px hauteur min |
|
|
|
|
### Screen Reader Experience
|
|
|
|
| Ăcran | Ce que le screen reader annonce |
|
|
|-------|-------------------------------|
|
|
| **Landing** | "Skycel, portfolio de CĂ©lian. Deux options : Partir Ă l'aventure, ou Mode express" |
|
|
| **Choix héros** | "Choisissez votre personnage : Recruteur, Client, ou Développeur" |
|
|
| **Narrateur** | Texte complet immédiat (pas typewriter) |
|
|
| **Carte** | "Carte d'exploration. Zones disponibles : Projets, Compétences, Parcours, Témoignages. Contact : verrouillé" |
|
|
| **CodeWorld** | "Révélation : vous avez trouvé le développeur dans son monde de code" |
|
|
|
|
### Testing Strategy
|
|
|
|
| Type | Outils |
|
|
|------|--------|
|
|
| **Responsive** | Chrome DevTools, Safari, appareils réels (iPhone, Android, iPad) |
|
|
| **Accessibilité auto** | Lighthouse, axe DevTools |
|
|
| **Screen reader** | VoiceOver (macOS/iOS), NVDA (Windows) |
|
|
| **Keyboard** | Navigation sans souris |
|
|
| **Contraste** | Contrast checker sur toutes les combinaisons |
|
|
|
|
### Implementation Guidelines
|
|
|
|
1. **HTML sĂ©mantique** â `nav`, `main`, `section`, `article`, headings hiĂ©rarchiques
|
|
2. **Skip link** â "Aller au contenu principal" en premier Ă©lĂ©ment focusable
|
|
3. **Focus visible** â Outline custom visible sur fond sombre (accent orange ou blanc)
|
|
4. **UnitĂ©s relatives** â `rem` pour le texte, `%` et `vw/vh` pour les layouts
|
|
5. **Images** â `alt` descriptifs sur illustrations, `aria-hidden` sur dĂ©coratifs
|
|
6. **Langue** â `lang="fr"` / `lang="en"` dynamique sur `<html>`
|
|
7. **Animations** â Toujours vĂ©rifier `prefers-reduced-motion` avant d'animer
|
|
|
|
---
|