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