- Add ZoneCard component for zone display with status indicators
- Add CheminLibre drawer with vertical zone cards and path decoration
- Add BottomBar with Map, Progress, and Settings buttons
- Add ProgressDetail modal showing visited sections
- Add SettingsDrawer with language, consent, and reset options
- Add i18n translations for zone, cheminLibre, bottomBar, settings
- Add --bottom-bar-height CSS variable for spacing
- Modify layouts to include BottomBar on mobile (< 768px)
- Support safe-area-inset for iOS devices
- Touch targets minimum 48x48px for WCAG compliance
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Story 3.6 : Carte interactive desktop (Konva.js)
- Installation de konva et vue-konva
- Configuration nuxt.config.ts pour transpile Konva
- Création mapZones.ts avec 5 zones et connexions
- Composant InteractiveMap.client.vue :
- Canvas Konva avec zones cliquables
- États visuels (visité/non visité/verrouillé)
- Tooltip au hover avec statut
- Marqueur de position animé
- Navigation clavier (Tab + Enter)
- Légende interactive
- Traductions map.* FR/EN
- Lazy-loading client-only (.client.vue)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Story 3.4 : Barre de progression globale (XP bar)
- ProgressBar.vue avec design RPG (bordure, graduations, glow)
- Tooltip au hover avec liste des sections visitées
- Animation fluide avec prefers-reduced-motion
- ProgressIcon.vue pour mobile (cercle SVG + drawer)
- Intégration dans AppHeader (visible si héros choisi)
- Traductions progress.* FR/EN
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Story 3.2 : Implémentation du narrateur-guide "Le Bug"
- Composant NarratorBubble.vue avec effet typewriter
- 5 SVG représentant l'évolution de la mascotte (silhouette à révélation)
- Animation slide-up/fade-out avec prefers-reduced-motion
- Support clavier (Espace/Entrée pour skip, Échap pour fermer)
- Accessibilité (aria-live, role="status", sr-only)
- Responsive (position adaptée mobile avec bottom-bar)
- Traductions narrator.clickToSkip et narrator.bugAlt
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create useIntersectionObserver composable for scroll-triggered animations
- Add TimelineItem component with alternating layout (desktop)
- Implement journey page with i18n-based milestones data
- Add 7 career milestones (2018-2025) in FR and EN
- Gradient timeline line with animated connection points
- Glassmorphism card design with hover effects
- Respect prefers-reduced-motion for all animations
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add testimonials table migration with personality enum
- Create Testimonial model with HasTranslations trait
- Add TestimonialSeeder with 4 test testimonials
- Create TestimonialController and TestimonialResource
- Add useFetchTestimonials composable
- Create TestimonialCard component with personality-based styling
- Add temoignages.vue page with loading/error states
- Add testimonials translations in FR/EN
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add GET /skills/{slug}/projects endpoint with level progression
- Install @headlessui/vue for accessible modal
- Create SkillProjectsModal with Dialog component:
- Focus trap and keyboard navigation (automatic)
- Fade + scale transitions with backdrop blur
- prefers-reduced-motion support
- Create ProjectListItem with thumbnail and level display
- Integrate modal in competences.vue page
- Add translations for related projects UI
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Enhance Skill model with getCurrentLevel() and ordered scope
- Update SkillController to group by category with translated labels
- Add level and project_count to SkillResource
- Create skill.ts types (Skill, SkillCategory, SkillsResponse)
- Create useFetchSkills composable
- Create SkillCard component with animated progress bar
- Implement competences.vue with:
- Responsive grid (2/3/4 columns)
- Category sections with icons
- Stagger animations (respects prefers-reduced-motion)
- Loading/error/empty states
- Placeholder for vis.js skill tree (Epic 3)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Reusable project card with NuxtImg lazy loading, hover overlay with
"Discover" CTA, responsive design, and full accessibility support
including prefers-reduced-motion.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implements useProgressionStore with conditional localStorage persistence
(only after RGPD consent), immersive ConsentBanner with narrator style,
WelcomeBack component for returning visitors, and connects progress bar
in header to store.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Default layout with sticky AppHeader (nav, LanguageSwitcher, mobile hamburger),
AppFooter with social links. Minimal layout for express mode. 7 placeholder pages
with localized EN routes. Page transitions (fade+slide), prefers-reduced-motion
support, custom scroll behavior, error.vue, useSeo composable, SVG favicon.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Nuxt i18n with lazy-loaded JSON files, localized routes, hreflang SEO tags,
LanguageSwitcher component. Laravel SetLocale middleware, HasTranslations trait,
API Resources and Controllers for projects/skills with Accept-Language support.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
