refactor: restructure project to classic MVC pattern

src/components/sections/SkillsSection.vue

@@ -1,3 +1,22 @@
+<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">
@@ -8,18 +27,18 @@
 
         <div class="grid md:grid-cols-2 gap-8">
           <div
-            v-for="(skillGroup, category) in skills"
-            :key="category"
+              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="getCategoryIcon(category)" class="w-6 h-6 mr-2 text-purple-600" />
-              {{ getCategoryName(category) }}
+              <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"
+                  v-for="skill in skillGroup.skills"
                 :key="skill.name"
                 class="space-y-2"
               >
@@ -46,30 +65,3 @@
   </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>