68 lines
2.2 KiB
Vue
68 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
import {Cloud, Code, Database, Server} from 'lucide-vue-next'
|
|
import {SkillGroup} from "@/domain/models/Skill";
|
|
|
|
defineProps<{
|
|
skillGroups: SkillGroup[]
|
|
}>()
|
|
|
|
function getCategoryIcon(category) {
|
|
const icons = {
|
|
frontend: Code,
|
|
backend: Server,
|
|
database: Database,
|
|
devops: Cloud
|
|
}
|
|
return icons[category] || Code
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section id="skills" class="py-20 bg-gray-50 dark:bg-gray-900">
|
|
<div class="container mx-auto px-4">
|
|
<div class="max-w-4xl mx-auto">
|
|
<h2 class="text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">
|
|
Habilidades Técnicas
|
|
</h2>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<div
|
|
v-for="skillGroup in skillGroups"
|
|
:key="skillGroup.name"
|
|
class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg"
|
|
>
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-6 capitalize flex items-center">
|
|
<component :is="skillGroup.icon" class="w-6 h-6 mr-2 text-purple-600"/>
|
|
{{ skillGroup.name }}
|
|
</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div
|
|
v-for="skill in skillGroup.skills"
|
|
:key="skill.name"
|
|
class="space-y-2"
|
|
>
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-medium text-gray-900 dark:text-white">{{ skill.name }}</span>
|
|
<div class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
|
|
<span>{{ skill.years }} años</span>
|
|
<span>{{ skill.level }}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
|
<div
|
|
class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full transition-all duration-1000"
|
|
:style="{ width: `${skill.level}%` }"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|