✨ Add skill projects modal with Headless UI (Story 2.5)
- 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>
This commit is contained in:
@@ -66,6 +66,13 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill projects modal -->
|
||||
<FeatureSkillProjectsModal
|
||||
:is-open="isModalOpen"
|
||||
:skill="selectedSkill"
|
||||
@close="closeModal"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -99,10 +106,21 @@ function getCategoryIcon(category: string): string {
|
||||
return categoryIcons[category.toLowerCase()] ?? '📚'
|
||||
}
|
||||
|
||||
// Handle skill click (preparation for Story 2.5)
|
||||
// Modal state
|
||||
const isModalOpen = ref(false)
|
||||
const selectedSkill = ref<Skill | null>(null)
|
||||
|
||||
function handleSkillClick(skill: Skill) {
|
||||
// Will be implemented in Story 2.5 - modal with related projects
|
||||
console.log('Skill clicked:', skill.slug)
|
||||
selectedSkill.value = skill
|
||||
isModalOpen.value = true
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
isModalOpen.value = false
|
||||
// Keep selectedSkill for close animation
|
||||
setTimeout(() => {
|
||||
selectedSkill.value = null
|
||||
}, 300)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
Reference in New Issue
Block a user