Initial functional version of the portfolio chatbot site

src/components/sections/SkillsSection.vue

@@ -0,0 +1,75 @@
+<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, category) in skills"
+            :key="category"
+            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="getCategoryIcon(category)" class="w-6 h-6 mr-2 text-purple-600" />
+              {{ getCategoryName(category) }}
+            </h3>
+
+            <div class="space-y-4">
+              <div
+                v-for="skill in skillGroup"
+                :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>
+
+<script setup>
+import { Code, Server, Database, Cloud } from 'lucide-vue-next'
+
+defineProps({
+  skills: Object
+})
+
+function getCategoryIcon(category) {
+  const icons = {
+    frontend: Code,
+    backend: Server,
+    database: Database,
+    devops: Cloud
+  }
+  return icons[category] || Code
+}
+
+function getCategoryName(category) {
+  const names = {
+    frontend: 'Frontend',
+    backend: 'Backend',
+    database: 'Base de Datos',
+    devops: 'DevOps'
+  }
+  return names[category] || category
+}
+</script>