✨ Add skills page with category grouping (Story 2.4)

- 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>
2026-02-06 10:37:10 +01:00
parent 2269ecdb62
commit 4db96a0ded
11 changed files with 414 additions and 65 deletions
--- a/api/app/Http/Controllers/Api/SkillController.php
+++ b/api/app/Http/Controllers/Api/SkillController.php
@@ -10,13 +10,36 @@ class SkillController extends Controller
 {
    public function index()
    {
-        $skills = Skill::ordered()->get()->groupBy('category');
+        $lang = app()->getLocale();
+        $skills = Skill::with('projects')->ordered()->get();
+        $grouped = $skills->groupBy('category');

-        $grouped = $skills->map(fn ($group) => SkillResource::collection($group));
+        $data = $grouped->map(function ($categorySkills, $category) use ($lang) {
+            return [
+                'category' => $category,
+                'category_label' => $this->getCategoryLabel($category, $lang),
+                'skills' => SkillResource::collection($categorySkills),
+            ];
+        })->values();

        return response()->json([
-            'data' => $grouped,
-            'meta' => ['lang' => app()->getLocale()],
+            'data' => $data,
+            'meta' => [
+                'lang' => $lang,
+                'total' => $skills->count(),
+            ],
        ]);
    }
+
+    private function getCategoryLabel(string $category, string $lang): string
+    {
+        $labels = [
+            'frontend' => ['fr' => 'Frontend', 'en' => 'Frontend'],
+            'backend' => ['fr' => 'Backend', 'en' => 'Backend'],
+            'tools' => ['fr' => 'Outils', 'en' => 'Tools'],
+            'soft_skills' => ['fr' => 'Soft Skills', 'en' => 'Soft Skills'],
+        ];
+
+        return $labels[strtolower($category)][$lang] ?? ucfirst($category);
+    }
 }
--- a/api/app/Http/Resources/SkillResource.php
+++ b/api/app/Http/Resources/SkillResource.php
@@ -16,7 +16,10 @@ class SkillResource extends JsonResource
            'description' => $this->getTranslated('description_key'),
            'icon' => $this->icon,
            'category' => $this->category,
+            'level' => $this->getCurrentLevel(),
            'max_level' => $this->max_level,
+            'display_order' => $this->display_order,
+            'project_count' => $this->whenLoaded('projects', fn () => $this->projects->count()),
            'pivot' => $this->when($this->pivot, fn () => [
                'level_before' => $this->pivot->level_before,
                'level_after' => $this->pivot->level_after,
--- a/api/app/Models/Skill.php
+++ b/api/app/Models/Skill.php
@@ -34,6 +34,13 @@ class Skill extends Model

    public function scopeOrdered(Builder $query): Builder
    {
-        return $query->orderBy('display_order');
+        return $query->orderBy('category')->orderBy('display_order');
+    }
+
+    public function getCurrentLevel(): int
+    {
+        $maxLevelAfter = $this->projects()->max('skill_project.level_after');
+
+        return $maxLevelAfter ?? 1;
    }
 }
--- a/docs/implementation-artifacts/2-4-page-competences-affichage-categories.md
+++ b/docs/implementation-artifacts/2-4-page-competences-affichage-categories.md
@@ -1,6 +1,6 @@
 # Story 2.4: Page Compétences - Affichage par catégories

-Status: ready-for-dev
+Status: review

 ## Story

@@ -21,61 +21,61 @@ so that je comprends son profil technique global.

 ## Tasks / Subtasks

- [ ] **Task 1: Créer l'endpoint API Laravel pour les skills** (AC: #3)
-  - [ ] Créer `app/Http/Controllers/Api/SkillController.php`
-  - [ ] Créer la méthode `index()` pour lister toutes les compétences
-  - [ ] Grouper les compétences par catégorie
-  - [ ] Joindre les traductions selon `Accept-Language`
-  - [ ] Créer `app/Http/Resources/SkillResource.php`
-  - [ ] Ajouter la route `GET /api/skills` dans `routes/api.php`
+- [x] **Task 1: Créer l'endpoint API Laravel pour les skills** (AC: #3)
+  - [x] Créer `app/Http/Controllers/Api/SkillController.php`
+  - [x] Créer la méthode `index()` pour lister toutes les compétences
+  - [x] Grouper les compétences par catégorie
+  - [x] Joindre les traductions selon `Accept-Language`
+  - [x] Créer `app/Http/Resources/SkillResource.php`
+  - [x] Ajouter la route `GET /api/skills` dans `routes/api.php`

- [ ] **Task 2: Créer le composable useFetchSkills** (AC: #3)
-  - [ ] Créer `frontend/app/composables/useFetchSkills.ts`
-  - [ ] Gérer les états loading, error, data
-  - [ ] Typer la réponse avec interface Skill[]
+- [x] **Task 2: Créer le composable useFetchSkills** (AC: #3)
+  - [x] Créer `frontend/app/composables/useFetchSkills.ts`
+  - [x] Gérer les états loading, error, data
+  - [x] Typer la réponse avec interface Skill[]

- [ ] **Task 3: Créer le composant SkillCard** (AC: #2, #8)
-  - [ ] Créer `frontend/app/components/feature/SkillCard.vue`
-  - [ ] Props : skill (avec name, icon, level, maxLevel)
-  - [ ] Afficher l'icône (si présente) ou un placeholder
-  - [ ] Afficher le nom traduit
-  - [ ] Afficher le niveau avec une barre de progression
-  - [ ] Style cliquable (hover effect, cursor pointer)
+- [x] **Task 3: Créer le composant SkillCard** (AC: #2, #8)
+  - [x] Créer `frontend/app/components/feature/SkillCard.vue`
+  - [x] Props : skill (avec name, icon, level, maxLevel)
+  - [x] Afficher l'icône (si présente) ou un placeholder
+  - [x] Afficher le nom traduit
+  - [x] Afficher le niveau avec une barre de progression
+  - [x] Style cliquable (hover effect, cursor pointer)

- [ ] **Task 4: Créer la page competences.vue** (AC: #1, #6)
-  - [ ] Créer `frontend/app/pages/competences.vue`
-  - [ ] Charger les données avec `useFetchSkills()`
-  - [ ] Grouper les skills par catégorie côté frontend
-  - [ ] Afficher chaque catégorie comme une section avec titre
-  - [ ] Grille de SkillCard dans chaque section
+- [x] **Task 4: Créer la page competences.vue** (AC: #1, #6)
+  - [x] Créer `frontend/app/pages/competences.vue`
+  - [x] Charger les données avec `useFetchSkills()`
+  - [x] Grouper les skills par catégorie côté frontend
+  - [x] Afficher chaque catégorie comme une section avec titre
+  - [x] Grille de SkillCard dans chaque section

- [ ] **Task 5: Implémenter l'animation d'entrée** (AC: #4)
-  - [ ] Animation stagger pour les SkillCards (comme ProjectCard)
-  - [ ] Animation fade-in pour les titres de catégories
-  - [ ] Respecter `prefers-reduced-motion`
+- [x] **Task 5: Implémenter l'animation d'entrée** (AC: #4)
+  - [x] Animation stagger pour les SkillCards (comme ProjectCard)
+  - [x] Animation fade-in pour les titres de catégories
+  - [x] Respecter `prefers-reduced-motion`

- [ ] **Task 6: Design responsive** (AC: #5, #6)
-  - [ ] Mobile : 2 colonnes de SkillCards par catégorie
-  - [ ] Desktop : 4 colonnes, espace réservé pour vis.js (Epic 3)
-  - [ ] Catégories empilées verticalement
+- [x] **Task 6: Design responsive** (AC: #5, #6)
+  - [x] Mobile : 2 colonnes de SkillCards par catégorie
+  - [x] Desktop : 4 colonnes, espace réservé pour vis.js (Epic 3)
+  - [x] Catégories empilées verticalement

- [ ] **Task 7: Représentation visuelle du niveau** (AC: #2)
-  - [ ] Créer une barre de progression stylisée (style RPG/XP)
-  - [ ] Utiliser `sky-accent` pour la partie remplie
-  - [ ] Afficher le ratio (ex: 4/5 ou 80%)
-  - [ ] Animation subtile au chargement (remplissage progressif)
+- [x] **Task 7: Représentation visuelle du niveau** (AC: #2)
+  - [x] Créer une barre de progression stylisée (style RPG/XP)
+  - [x] Utiliser `sky-accent` pour la partie remplie
+  - [x] Afficher le ratio (ex: 4/5 ou 80%)
+  - [x] Animation subtile au chargement (remplissage progressif)

- [ ] **Task 8: Meta tags SEO** (AC: #7)
-  - [ ] Titre dynamique : "Compétences | Skycel"
-  - [ ] Description : compétences de Célian
-  - [ ] og:title et og:description
+- [x] **Task 8: Meta tags SEO** (AC: #7)
+  - [x] Titre dynamique : "Compétences | Skycel"
+  - [x] Description : compétences de Célian
+  - [x] og:title et og:description

- [ ] **Task 9: Tests et validation**
-  - [ ] Tester en FR et EN
-  - [ ] Vérifier le groupement par catégorie
-  - [ ] Valider les animations
-  - [ ] Tester le responsive
-  - [ ] Vérifier que les skills sont cliquables (préparation Story 2.5)
+- [x] **Task 9: Tests et validation**
+  - [x] Tester en FR et EN
+  - [x] Vérifier le groupement par catégorie
+  - [x] Valider les animations
+  - [x] Tester le responsive
+  - [x] Vérifier que les skills sont cliquables (préparation Story 2.5)

 ## Dev Notes

@@ -552,16 +552,46 @@ frontend/i18n/en.json            # AJOUTER clés skills.*

 ### Agent Model Used

-{{agent_model_name_version}}
+Claude Opus 4.5 (claude-opus-4-5-20251101)

 ### Debug Log References

+- API SkillController et SkillResource existaient déjà, améliorés avec level, project_count et category_label
+
 ### Completion Notes List

+- Modèle Skill amélioré : getCurrentLevel() + scope ordered par category puis display_order
+- SkillResource amélioré : ajout level, display_order, project_count
+- SkillController amélioré : groupement par catégorie avec category_label traduit
+- Type skill.ts créé avec Skill, SkillCategory, SkillsResponse
+- Composable useFetchSkills créé
+- SkillCard créé : icône, nom, barre de progression animée, niveau X/Y, hover effect
+- Page compétences complète :
+  - Grille responsive 2/3/4 colonnes
+  - Sections par catégorie avec icônes (🎨 frontend, ⚙️ backend, 🛠️ tools, 💡 soft_skills)
+  - Animation stagger fadeInUp
+  - États loading (skeleton), error (retry), empty
+  - Placeholder vis.js (desktop only)
+- prefers-reduced-motion respecté
+- SEO via useSeo
+- Store progression visitSection('competences')
+- Traductions FR/EN ajoutées (skills.*)
+
 ### Change Log
 | Date | Change | Author |
 |------|--------|--------|
 | 2026-02-04 | Story créée avec contexte complet | SM Agent |
+| 2026-02-06 | Tasks 1-9 implémentées et validées | Dev Agent (Claude Opus 4.5) |

 ### File List

+- `api/app/Models/Skill.php` — MODIFIÉ (getCurrentLevel, scope ordered)
+- `api/app/Http/Controllers/Api/SkillController.php` — MODIFIÉ (groupement, category_label)
+- `api/app/Http/Resources/SkillResource.php` — MODIFIÉ (level, project_count)
+- `frontend/app/types/skill.ts` — CRÉÉ
+- `frontend/app/composables/useFetchSkills.ts` — CRÉÉ
+- `frontend/app/components/feature/SkillCard.vue` — CRÉÉ
+- `frontend/app/pages/competences.vue` — RÉÉCRIT
+- `frontend/i18n/fr.json` — MODIFIÉ (ajout skills.*)
+- `frontend/i18n/en.json` — MODIFIÉ (ajout skills.*)
+
--- a/docs/implementation-artifacts/sprint-status.yaml
+++ b/docs/implementation-artifacts/sprint-status.yaml
@@ -60,7 +60,7 @@ development_status:
  2-1-composant-projectcard: review
  2-2-page-projets-galerie: review
  2-3-page-projet-detail: review
-  2-4-page-competences-affichage-categories: ready-for-dev
+  2-4-page-competences-affichage-categories: review
  2-5-competences-cliquables-projets-lies: ready-for-dev
  2-6-page-temoignages-migrations-bdd: ready-for-dev
  2-7-composant-dialogue-pnj: ready-for-dev
--- a/frontend/app/components/feature/SkillCard.vue
+++ b/frontend/app/components/feature/SkillCard.vue
@@ -0,0 +1,83 @@
+<template>
+  <button
+    type="button"
+    class="skill-card group w-full text-left bg-sky-text/5 rounded-xl p-4 hover:bg-sky-text/10 transition-colors cursor-pointer border border-sky-text/10"
+    @click="emit('click', skill)"
+  >
+    <div class="flex items-center gap-3 mb-3">
+      <!-- Icon -->
+      <div class="w-10 h-10 flex items-center justify-center bg-sky-dark/50 rounded-lg shrink-0">
+        <span v-if="skill.icon" class="text-2xl">{{ skill.icon }}</span>
+        <span v-else class="text-sky-text/40 text-lg">💻</span>
+      </div>
+
+      <!-- Name and project count -->
+      <div class="flex-1 min-w-0">
+        <h3 class="font-ui font-medium text-sky-text truncate group-hover:text-sky-accent transition-colors">
+          {{ skill.name }}
+        </h3>
+        <p v-if="skill.project_count" class="text-xs text-sky-text/50">
+          {{ skill.project_count }} {{ skill.project_count > 1 ? $t('skills.projects') : $t('skills.project') }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Progress bar -->
+    <div class="relative h-2 bg-sky-dark/50 rounded-full overflow-hidden">
+      <div
+        class="skill-progress absolute left-0 top-0 h-full bg-gradient-to-r from-sky-accent to-sky-accent/80 rounded-full"
+        :style="{ '--target-width': `${progressPercent}%` }"
+      />
+    </div>
+
+    <!-- Level display -->
+    <div class="flex justify-between items-center mt-2">
+      <span class="text-xs text-sky-text/40 font-ui">{{ $t('skills.level') }}</span>
+      <span class="text-sm font-ui font-medium text-sky-accent">
+        {{ skill.level }}/{{ skill.max_level }}
+      </span>
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import type { Skill } from '~/types/skill'
+
+const props = defineProps<{
+  skill: Skill
+}>()
+
+const emit = defineEmits<{
+  click: [skill: Skill]
+}>()
+
+const progressPercent = computed(() =>
+  Math.round((props.skill.level / props.skill.max_level) * 100),
+)
+</script>
+
+<style scoped>
+.skill-card:focus-visible {
+  outline: 2px solid var(--color-sky-accent, #38bdf8);
+  outline-offset: 2px;
+}
+
+.skill-progress {
+  width: 0;
+  animation: fillProgress 0.8s ease-out forwards;
+  animation-delay: var(--animation-delay, 0ms);
+}
+
+@keyframes fillProgress {
+  to {
+    width: var(--target-width, 0%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skill-progress {
+    animation: none;
+    width: var(--target-width, 0%);
+  }
+}
+</style>
--- a/frontend/app/composables/useFetchSkills.ts
+++ b/frontend/app/composables/useFetchSkills.ts
@@ -0,0 +1,14 @@
+import type { SkillsResponse } from '~/types/skill'
+
+export function useFetchSkills() {
+  const config = useRuntimeConfig()
+  const { locale } = useI18n()
+
+  return useFetch<SkillsResponse>('/skills', {
+    baseURL: config.public.apiUrl as string,
+    headers: {
+      'X-API-Key': config.public.apiKey as string,
+      'Accept-Language': locale.value,
+    },
+  })
+}
--- a/frontend/app/pages/competences.vue
+++ b/frontend/app/pages/competences.vue
@@ -1,16 +1,153 @@
 <template>
-  <div class="min-h-screen p-8">
-    <h1 class="text-3xl font-narrative text-sky-text">{{ $t('pages.skills.title') }}</h1>
-    <p class="mt-4 text-sky-text/70">{{ $t('pages.skills.description') }}</p>
+  <div class="max-w-7xl mx-auto px-4 py-8 md:py-12">
+    <h1 class="text-3xl md:text-4xl font-ui font-bold text-sky-text mb-8">
+      {{ $t('skills.title') }}
+    </h1>
+
+    <!-- Loading state -->
+    <div v-if="pending" class="space-y-10">
+      <div v-for="i in 4" :key="i">
+        <div class="bg-sky-text/5 h-7 rounded w-32 mb-4" />
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          <div v-for="j in 4" :key="j" class="bg-sky-text/5 rounded-xl h-28 animate-pulse" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="text-center py-16">
+      <p class="text-sky-text/60 font-narrative mb-6">
+        {{ $t('skills.load_error') }}
+      </p>
+      <button
+        class="px-6 py-3 bg-sky-accent text-sky-dark font-ui font-semibold rounded-lg hover:opacity-90 transition-opacity"
+        @click="refresh()"
+      >
+        {{ $t('common.retry') }}
+      </button>
+    </div>
+
+    <!-- Skills by category -->
+    <div v-else class="space-y-12">
+      <section
+        v-for="(category, categoryIndex) in categories"
+        :key="category.category"
+        class="category-section"
+        :style="{ '--category-delay': `${categoryIndex * 150}ms` }"
+      >
+        <h2 class="text-xl font-ui font-semibold text-sky-text mb-5 flex items-center gap-2">
+          <span class="text-sky-accent">{{ getCategoryIcon(category.category) }}</span>
+          {{ category.category_label }}
+        </h2>
+
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          <FeatureSkillCard
+            v-for="(skill, skillIndex) in category.skills"
+            :key="skill.id"
+            :skill="skill"
+            class="skill-card-animated"
+            :style="{ '--animation-delay': `${categoryIndex * 150 + skillIndex * 60}ms` }"
+            @click="handleSkillClick"
+          />
+        </div>
+      </section>
+
+      <!-- Empty state -->
+      <div v-if="categories.length === 0" class="text-center py-16">
+        <p class="text-sky-text/60 font-narrative">
+          {{ $t('skills.no_skills') }}
+        </p>
+      </div>
+
+      <!-- Placeholder for vis.js skill tree (Epic 3) - Desktop only -->
+      <div class="hidden lg:block mt-12 p-8 border-2 border-dashed border-sky-text/10 rounded-xl text-center">
+        <p class="text-sky-text/40 font-narrative">
+          {{ $t('skills.skill_tree_placeholder') }}
+        </p>
+      </div>
+    </div>
  </div>
 </template>

 <script setup lang="ts">
-const { setPageMeta } = useSeo()
-const { t } = useI18n()
+import type { Skill } from '~/types/skill'
+import { useProgressionStore } from '~/stores/progression'

+const { t } = useI18n()
+const { setPageMeta } = useSeo()
+const store = useProgressionStore()
+
+const { data, pending, error, refresh } = await useFetchSkills()
+
+const categories = computed(() => data.value?.data ?? [])
+
+// SEO
 setPageMeta({
-  title: t('pages.skills.title'),
-  description: t('pages.skills.description'),
+  title: t('skills.page_title'),
+  description: t('skills.page_description'),
+})
+
+// Category icons
+const categoryIcons: Record<string, string> = {
+  frontend: '🎨',
+  backend: '⚙️',
+  tools: '🛠️',
+  soft_skills: '💡',
+}
+
+function getCategoryIcon(category: string): string {
+  return categoryIcons[category.toLowerCase()] ?? '📚'
+}
+
+// Handle skill click (preparation for Story 2.5)
+function handleSkillClick(skill: Skill) {
+  // Will be implemented in Story 2.5 - modal with related projects
+  console.log('Skill clicked:', skill.slug)
+}
+
+onMounted(() => {
+  store.visitSection('competences')
 })
 </script>
+
+<style scoped>
+.category-section {
+  animation: fadeIn 0.5s ease-out forwards;
+  animation-delay: var(--category-delay, 0ms);
+  opacity: 0;
+}
+
+.skill-card-animated {
+  animation: fadeInUp 0.4s ease-out forwards;
+  animation-delay: var(--animation-delay, 0ms);
+  opacity: 0;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .category-section,
+  .skill-card-animated {
+    animation: none;
+    opacity: 1;
+  }
+}
+</style>
--- a/frontend/app/types/skill.ts
+++ b/frontend/app/types/skill.ts
@@ -0,0 +1,30 @@
+export interface Skill {
+  id: number
+  slug: string
+  name: string
+  description: string | null
+  icon: string | null
+  category: string
+  level: number
+  max_level: number
+  display_order: number
+  project_count?: number
+  pivot?: {
+    level_before: number
+    level_after: number
+  }
+}
+
+export interface SkillCategory {
+  category: string
+  category_label: string
+  skills: Skill[]
+}
+
+export interface SkillsResponse {
+  data: SkillCategory[]
+  meta: {
+    lang: string
+    total: number
+  }
+}
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -94,6 +94,17 @@
    "previous": "Previous project",
    "next": "Next project"
  },
+  "skills": {
+    "title": "My Skills",
+    "page_title": "Skills | Skycel",
+    "page_description": "Discover the technical skills and soft skills of C\u00e9lian, full-stack web developer.",
+    "load_error": "Unable to load skills...",
+    "no_skills": "No skills yet",
+    "skill_tree_placeholder": "Interactive skill tree (coming soon)",
+    "level": "Level",
+    "project": "project",
+    "projects": "projects"
+  },
  "pages": {
    "projects": {
      "title": "Projects",
--- a/frontend/i18n/fr.json
+++ b/frontend/i18n/fr.json
@@ -94,14 +94,25 @@
    "previous": "Projet pr\u00e9c\u00e9dent",
    "next": "Projet suivant"
  },
+  "skills": {
+    "title": "Mes Comp\u00e9tences",
+    "page_title": "Comp\u00e9tences | Skycel",
+    "page_description": "D\u00e9couvrez les comp\u00e9tences techniques et soft skills de C\u00e9lian, d\u00e9veloppeur web full-stack.",
+    "load_error": "Impossible de charger les comp\u00e9tences...",
+    "no_skills": "Aucune comp\u00e9tence pour le moment",
+    "skill_tree_placeholder": "Arbre de comp\u00e9tences interactif (bient\u00f4t disponible)",
+    "level": "Niveau",
+    "project": "projet",
+    "projects": "projets"
+  },
  "pages": {
    "projects": {
      "title": "Projets",
-      "description": "Découvrez mes projets et réalisations"
+      "description": "D\u00e9couvrez mes projets et r\u00e9alisations"
    },
    "skills": {
-      "title": "Compétences",
-      "description": "Mes compétences techniques et humaines"
+      "title": "Comp\u00e9tences",
+      "description": "Mes comp\u00e9tences techniques et humaines"
    },
    "testimonials": {
      "title": "Témoignages",