- Add BonusQuiz.vue component with 7 randomized questions
- Add challenge-bonus.vue page with intro, quiz, and results
- Redirect to bonus quiz after successful contact form submission
- Add i18n translations for bonus.* (fr/en)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 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.5 : Logique de progression et déblocage contact
Cette story était déjà implémentée par les stories précédentes :
- Store progression avec visitSection(), contactUnlocked (Story 1.6)
- Persistance RGPD avec conditionalStorage (Story 1.6)
- Plugin narrator-transitions avec watcher contactUnlocked (Story 3.3)
- Layout adventure avec useNarrator.showIntro() pour welcome_back (Story 3.3)
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 narrator_texts table migration with context/hero_type indexes
- Add NarratorText model with getRandomText() for variant selection
- Add NarratorTextSeeder with 30+ texts for 11 contexts
- Implement vouvoiement (recruteur) vs tutoiement (client/dev)
- Create NarratorController with GET /api/narrator/{context}
- Add useFetchNarratorText composable for frontend
Contexts: intro, transitions, hints, encouragements, contact_unlocked, welcome_back
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>
- Enhance ProjectController show() with prev/next navigation data
- Create useFetchProject composable with ProjectNavigation type
- Implement [slug].vue with full project details:
- Hero image, title with featured badge, formatted date
- Description, external links (site/GitHub)
- Skills grid with level progression (before → after)
- Prev/next navigation with project titles
- 404 state with spider narrator
- Add dynamic SEO meta tags with og:image from project
- Responsive design: stacked mobile, grid desktop
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create useFetchProjects composable for API integration
- Implement responsive grid layout (1/2/3/4 columns)
- Add stagger fadeInUp animation with prefers-reduced-motion support
- Include loading skeleton, error state with retry, and empty state
- Configure SEO meta tags via useSeo composable
- Update Project model ordered scope for proper sorting
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>
Complete resume page with hero section, skills badges, projects list,
contact CTA and adventure link. Uses minimal layout, loads data from
API with graceful fallbacks, SEO optimized for recruiters.
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>
Setup complet de l'infrastructure projet :
- Frontend Nuxt 4 (SSR, TypeScript, i18n, Pinia, TailwindCSS)
- Backend Laravel 12 API-only avec middleware X-API-Key et CORS
- Design tokens (sky-dark, sky-accent, sky-text) et polices (Merriweather, Inter)
- Documentation planning et implementation artifacts
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
