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>
This commit is contained in:
2026-02-06 10:37:10 +01:00
parent 2269ecdb62
commit 4db96a0ded
11 changed files with 414 additions and 65 deletions

View File

@@ -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;
}
}