--- 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 `` 7. **Animations** — Toujours vérifier `prefers-reduced-motion` avant d'animer ---