Portfolio-Game/docs/planning-artifacts/ux-design-specification.md

stepsCompleted, lastStep, inputDocuments, userPreferences

stepsCompleted	lastStep	inputDocuments	userPreferences
1 2 3 4 5 6 7 8 9 10 11 12 13 14	14	docs/prd-gamification.md docs/brainstorming-gamification-2026-01-26.md	styleComplexity visualStyle assetFormat inspirations colorPalette heroSystem narratorEvolution simple illustrative SVG source applyTo excludeFrom Zelda narrative features visual-style background accent feel black-to-blue #fa784f airy true 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

/* 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

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

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)

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)

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

/* 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

---