diff --git a/README.md b/README.md
index 3c901da..5ab6b50 100644
--- a/README.md
+++ b/README.md
@@ -77,9 +77,9 @@ npm run deploy
 
 ## ⚙️ Personalización
 
-### 1. Información Personal
+### 1. Información Profile
 
-Edita `src/composables/useKnowledgeBase.js`:
+Edita `src/composables/useKnowledgeBase.ts`:
 
 \`\`\`javascript
 const knowledgeBase = ref({
@@ -148,10 +148,10 @@ ai-portfolio-chat/
 │   │   ├── TechStack.vue
 │   │   └── AppFooter.vue
 │   ├── composables/         # Lógica reutilizable
-│   │   ├── useKnowledgeBase.js
-│   │   └── useChat.js
+│ │ ├── useKnowledgeBase.ts
+│ │ └── useChat.ts
 │   ├── App.vue             # Componente principal
-│   ├── main.js             # Punto de entrada
+│ ├── main.ts # Punto de entrada
 │   └── style.css           # Estilos globales
 ├── public/                 # Archivos estáticos
 ├── .github/workflows/      # GitHub Actions
diff --git a/app.vue b/app.vue
deleted file mode 100644
index a561885..0000000
--- a/app.vue
+++ /dev/null
@@ -1,475 +0,0 @@
-<template>
-  <div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white">
-    <!-- Header -->
-    <header class="border-b border-white/10 backdrop-blur-sm bg-black/20">
-      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
-        <div class="flex items-center space-x-3">
-          <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
-            <span class="text-lg font-bold">AI</span>
-          </div>
-          <div>
-            <h1 class="text-xl font-bold">Portfolio Assistant</h1>
-            <p class="text-sm text-gray-300">Powered by Advanced AI</p>
-          </div>
-        </div>
-        <button 
-          @click="toggleTheme"
-          class="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
-        >
-          <component :is="isDark ? 'Sun' : 'Moon'" class="w-5 h-5" />
-        </button>
-      </div>
-    </header>
-
-    <div class="container mx-auto px-4 py-8 max-w-4xl">
-      <!-- Welcome Section -->
-      <div v-if="messages.length === 0" class="text-center mb-8">
-        <div class="mb-6">
-          <div class="w-24 h-24 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full mx-auto mb-4 flex items-center justify-center">
-            <Bot class="w-12 h-12" />
-          </div>
-          <h2 class="text-3xl font-bold mb-2">¡Hola! Soy tu Asistente de Portfolio</h2>
-          <p class="text-gray-300 text-lg">Pregúntame sobre experiencia, habilidades, proyectos o cualquier cosa técnica</p>
-        </div>
-        
-        <!-- Quick Actions -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
-          <button 
-            v-for="suggestion in quickSuggestions" 
-            :key="suggestion.text"
-            @click="sendMessage(suggestion.text)"
-            class="p-4 bg-white/5 hover:bg-white/10 rounded-xl border border-white/10 transition-all hover:scale-105 text-left"
-          >
-            <component :is="suggestion.icon" class="w-6 h-6 mb-2 text-purple-400" />
-            <h3 class="font-semibold mb-1">{{ suggestion.title }}</h3>
-            <p class="text-sm text-gray-400">{{ suggestion.text }}</p>
-          </button>
-        </div>
-      </div>
-
-      <!-- Chat Messages -->
-      <div class="space-y-4 mb-6" ref="messagesContainer">
-        <div 
-          v-for="message in messages" 
-          :key="message.id"
-          class="flex items-start space-x-3"
-          :class="message.role === 'user' ? 'flex-row-reverse space-x-reverse' : ''"
-        >
-          <div class="flex-shrink-0">
-            <div 
-              class="w-8 h-8 rounded-full flex items-center justify-center"
-              :class="message.role === 'user' 
-                ? 'bg-gradient-to-r from-blue-500 to-cyan-500' 
-                : 'bg-gradient-to-r from-purple-500 to-pink-500'"
-            >
-              <component :is="message.role === 'user' ? 'User' : 'Bot'" class="w-4 h-4" />
-            </div>
-          </div>
-          <div 
-            class="max-w-xs lg:max-w-md px-4 py-2 rounded-2xl"
-            :class="message.role === 'user' 
-              ? 'bg-gradient-to-r from-blue-500 to-cyan-500 text-white' 
-              : 'bg-white/10 backdrop-blur-sm border border-white/20'"
-          >
-            <div v-if="message.role === 'assistant' && message.typing" class="flex space-x-1">
-              <div class="w-2 h-2 bg-purple-400 rounded-full animate-bounce"></div>
-              <div class="w-2 h-2 bg-purple-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
-              <div class="w-2 h-2 bg-purple-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
-            </div>
-            <div v-else v-html="formatMessage(message.content)"></div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Input Form -->
-      <form @submit.prevent="handleSubmit" class="relative">
-        <div class="flex space-x-2">
-          <input
-            v-model="input"
-            :disabled="isLoading"
-            placeholder="Pregúntame sobre mi experiencia, habilidades, proyectos..."
-            class="flex-1 px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent placeholder-gray-400"
-          />
-          <button
-            type="submit"
-            :disabled="isLoading || !input.trim()"
-            class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl font-semibold disabled:opacity-50 disabled:cursor-not-allowed hover:from-purple-600 hover:to-pink-600 transition-all"
-          >
-            <Send class="w-5 h-5" />
-          </button>
-        </div>
-      </form>
-
-      <!-- Tech Stack Display -->
-      <div class="mt-8 p-6 bg-white/5 backdrop-blur-sm rounded-xl border border-white/10">
-        <h3 class="text-lg font-semibold mb-4 flex items-center">
-          <Code class="w-5 h-5 mr-2 text-purple-400" />
-          Stack Tecnológico Principal
-        </h3>
-        <div class="flex flex-wrap gap-2">
-          <span v-for="tech in techStack" :key="tech" 
-                class="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-sm border border-purple-500/30">
-            {{ tech }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, nextTick, onMounted } from 'vue'
-import { Bot, User, Send, Sun, Moon, Code, Briefcase, Award, Rocket } from 'lucide-vue-next'
-
-const messages = ref([])
-const input = ref('')
-const isLoading = ref(false)
-const isDark = ref(true)
-const messagesContainer = ref(null)
-
-const techStack = [
-  'Vue.js', 'React', 'Node.js', 'TypeScript', 'Python', 'Docker', 
-  'AWS', 'MongoDB', 'PostgreSQL', 'Git', 'CI/CD', 'Microservicios'
-]
-
-const quickSuggestions = [
-  {
-    icon: 'Briefcase',
-    title: 'Experiencia',
-    text: '¿Cuál es tu experiencia laboral?'
-  },
-  {
-    icon: 'Code',
-    title: 'Habilidades',
-    text: '¿Qué tecnologías dominas?'
-  },
-  {
-    icon: 'Rocket',
-    title: 'Proyectos',
-    text: 'Cuéntame sobre tus proyectos destacados'
-  }
-]
-
-// Base de conocimiento pre-programada
-const knowledgeBase = {
-  experiencia: {
-    keywords: ['experiencia', 'trabajo', 'laboral', 'años', 'empresa', 'puesto'],
-    response: `
-      <strong>💼 Experiencia Profesional</strong><br><br>
-      
-      <strong>Senior Full Stack Developer</strong> (2021 - Presente)<br>
-      • Liderazgo de equipo de 5 desarrolladores<br>
-      • Arquitectura de microservicios con Node.js y Docker<br>
-      • Implementación de CI/CD reduciendo deploys en 80%<br><br>
-      
-      <strong>Frontend Developer</strong> (2019 - 2021)<br>
-      • Desarrollo de SPAs con Vue.js y React<br>
-      • Optimización de performance (Core Web Vitals)<br>
-      • Colaboración con equipos UX/UI<br><br>
-      
-      <strong>Junior Developer</strong> (2018 - 2019)<br>
-      • Desarrollo de APIs REST con Express.js<br>
-      • Integración con bases de datos SQL y NoSQL<br>
-      • Metodologías ágiles (Scrum/Kanban)
-    `
-  },
-  
-  habilidades: {
-    keywords: ['habilidades', 'tecnologías', 'stack', 'lenguajes', 'frameworks', 'dominas'],
-    response: `
-      <strong>🚀 Stack Tecnológico</strong><br><br>
-      
-      <strong>Frontend:</strong><br>
-      • Vue.js 3 (Composition API, Pinia) - Avanzado<br>
-      • React (Hooks, Context, Redux) - Avanzado<br>
-      • TypeScript - Avanzado<br>
-      • Tailwind CSS, SCSS - Avanzado<br><br>
-      
-      <strong>Backend:</strong><br>
-      • Node.js (Express, Fastify) - Avanzado<br>
-      • Python (Django, FastAPI) - Intermedio<br>
-      • Bases de datos: PostgreSQL, MongoDB - Avanzado<br><br>
-      
-      <strong>DevOps & Cloud:</strong><br>
-      • Docker, Kubernetes - Intermedio<br>
-      • AWS (EC2, S3, Lambda) - Intermedio<br>
-      • CI/CD (GitHub Actions, Jenkins) - Avanzado
-    `
-  },
-  
-  proyectos: {
-    keywords: ['proyectos', 'desarrollado', 'creado', 'portfolio', 'destacados'],
-    response: `
-      <strong>🎯 Proyectos Destacados</strong><br><br>
-      
-      <strong>E-commerce Platform</strong><br>
-      • Plataforma completa con Vue.js + Node.js<br>
-      • +50,000 usuarios activos mensuales<br>
-      • Integración con Stripe y PayPal<br>
-      • <em>Tech:</em> Vue 3, Express, PostgreSQL, Redis<br><br>
-      
-      <strong>Real-time Analytics Dashboard</strong><br>
-      • Dashboard en tiempo real con WebSockets<br>
-      • Procesamiento de +1M eventos/día<br>
-      • Visualizaciones interactivas con D3.js<br>
-      • <em>Tech:</em> React, Socket.io, InfluxDB<br><br>
-      
-      <strong>Microservices Architecture</strong><br>
-      • Migración de monolito a microservicios<br>
-      • Reducción de latencia en 60%<br>
-      • Implementación con Docker y Kubernetes<br>
-      • <em>Tech:</em> Node.js, Docker, AWS EKS
-    `
-  },
-  
-  educacion: {
-    keywords: ['educación', 'estudios', 'universidad', 'carrera', 'certificaciones'],
-    response: `
-      <strong>🎓 Formación Académica</strong><br><br>
-      
-      <strong>Ingeniería en Sistemas</strong><br>
-      Universidad Tecnológica Nacional (2014-2018)<br>
-      • Especialización en Desarrollo de Software<br>
-      • Proyecto final: Sistema de gestión hospitalaria<br><br>
-      
-      <strong>Certificaciones:</strong><br>
-      • AWS Certified Developer Associate (2022)<br>
-      • MongoDB Certified Developer (2021)<br>
-      • Scrum Master Certified (2020)<br><br>
-      
-      <strong>Formación Continua:</strong><br>
-      • Cursos especializados en arquitectura de software<br>
-      • Participación en conferencias tech (JSConf, VueConf)<br>
-      • Contribuciones a proyectos open source
-    `
-  },
-  
-  contacto: {
-    keywords: ['contacto', 'email', 'linkedin', 'github', 'cv'],
-    response: `
-      <strong>📞 Información de Contacto</strong><br><br>
-      
-      <strong>Email:</strong> tu.email@ejemplo.com<br>
-      <strong>LinkedIn:</strong> linkedin.com/in/tu-perfil<br>
-      <strong>GitHub:</strong> github.com/tu-usuario<br>
-      <strong>Portfolio:</strong> tu-portfolio.com<br><br>
-      
-      <strong>Disponibilidad:</strong><br>
-      • Disponible para nuevas oportunidades<br>
-      • Modalidad: Remoto/Híbrido/Presencial<br>
-      • Ubicación: Ciudad, País<br><br>
-      
-      <em>¡No dudes en contactarme para discutir oportunidades!</em>
-    `
-  },
-  
-  salario: {
-    keywords: ['salario', 'sueldo', 'pretensiones', 'económicas', 'remuneración'],
-    response: `
-      <strong>💰 Expectativas Salariales</strong><br><br>
-      
-      Mis expectativas salariales son competitivas y están alineadas con:<br><br>
-      
-      • Mi experiencia de +5 años en desarrollo<br>
-      • El mercado actual para Senior Developers<br>
-      • La complejidad y responsabilidades del rol<br>
-      • Los beneficios adicionales ofrecidos<br><br>
-      
-      <em>Estoy abierto a discutir una propuesta integral que incluya salario base, beneficios y oportunidades de crecimiento.</em><br><br>
-      
-      <strong>Factores importantes para mí:</strong><br>
-      • Crecimiento profesional<br>
-      • Ambiente de trabajo colaborativo<br>
-      • Flexibilidad horaria<br>
-      • Proyectos desafiantes
-    `
-  }
-}
-
-const defaultResponses = [
-  "Esa es una excelente pregunta. Como desarrollador senior, siempre busco mantenerme actualizado con las últimas tecnologías y mejores prácticas.",
-  "Interesante punto. En mi experiencia, he encontrado que la clave está en encontrar el equilibrio entre innovación y estabilidad.",
-  "Desde mi perspectiva técnica, considero que es fundamental evaluar cada herramienta en función del contexto específico del proyecto.",
-  "Basándome en mi experiencia en proyectos enterprise, puedo decir que la escalabilidad y mantenibilidad son aspectos cruciales.",
-  "Como alguien que ha trabajado tanto en startups como en empresas grandes, he aprendido a adaptar mi enfoque según las necesidades del negocio."
-]
-
-function findBestResponse(message) {
-  const lowerMessage = message.toLowerCase()
-  
-  for (const [category, data] of Object.entries(knowledgeBase)) {
-    if (data.keywords.some(keyword => lowerMessage.includes(keyword))) {
-      return data.response
-    }
-  }
-  
-  // Respuestas contextuales adicionales
-  if (lowerMessage.includes('react') || lowerMessage.includes('vue')) {
-    return `
-      <strong>⚛️ React vs Vue.js</strong><br><br>
-      
-      Tengo experiencia sólida con ambos frameworks:<br><br>
-      
-      <strong>React:</strong><br>
-      • Excelente ecosistema y comunidad<br>
-      • Hooks y Context API para gestión de estado<br>
-      • Ideal para aplicaciones complejas<br><br>
-      
-      <strong>Vue.js:</strong><br>
-      • Curva de aprendizaje más suave<br>
-      • Composition API muy potente<br>
-      • Excelente para desarrollo rápido<br><br>
-      
-      <em>La elección depende del proyecto, equipo y requisitos específicos.</em>
-    `
-  }
-  
-  if (lowerMessage.includes('node') || lowerMessage.includes('backend')) {
-    return `
-      <strong>🔧 Desarrollo Backend</strong><br><br>
-      
-      Mi experiencia en backend incluye:<br><br>
-      
-      • <strong>Node.js:</strong> Express, Fastify, NestJS<br>
-      • <strong>APIs:</strong> REST, GraphQL, WebSockets<br>
-      • <strong>Bases de datos:</strong> PostgreSQL, MongoDB, Redis<br>
-      • <strong>Arquitectura:</strong> Microservicios, Event-driven<br>
-      • <strong>Testing:</strong> Jest, Mocha, Supertest<br><br>
-      
-      <em>Siempre enfocado en código limpio, escalable y bien documentado.</em>
-    `
-  }
-  
-  // Respuesta por defecto
-  return defaultResponses[Math.floor(Math.random() * defaultResponses.length)]
-}
-
-function formatMessage(content) {
-  return content.replace(/\n/g, '<br>')
-}
-
-async function sendMessage(text = null) {
-  const messageText = text || input.value.trim()
-  if (!messageText) return
-  
-  // Agregar mensaje del usuario
-  const userMessage = {
-    id: Date.now(),
-    role: 'user',
-    content: messageText
-  }
-  messages.value.push(userMessage)
-  
-  // Limpiar input
-  input.value = ''
-  isLoading.value = true
-  
-  // Scroll to bottom
-  await nextTick()
-  scrollToBottom()
-  
-  // Agregar mensaje de typing
-  const typingMessage = {
-    id: Date.now() + 1,
-    role: 'assistant',
-    content: '',
-    typing: true
-  }
-  messages.value.push(typingMessage)
-  
-  await nextTick()
-  scrollToBottom()
-  
-  // Simular delay de respuesta
-  setTimeout(() => {
-    // Remover mensaje de typing
-    messages.value.pop()
-    
-    // Agregar respuesta real
-    const response = findBestResponse(messageText)
-    const assistantMessage = {
-      id: Date.now() + 2,
-      role: 'assistant',
-      content: response
-    }
-    messages.value.push(assistantMessage)
-    
-    isLoading.value = false
-    nextTick(() => scrollToBottom())
-  }, 1500 + Math.random() * 1000) // Delay variable para mayor realismo
-}
-
-function handleSubmit() {
-  sendMessage()
-}
-
-function scrollToBottom() {
-  if (messagesContainer.value) {
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
-  }
-}
-
-function toggleTheme() {
-  isDark.value = !isDark.value
-}
-
-onMounted(() => {
-  // Mensaje de bienvenida después de un momento
-  setTimeout(() => {
-    const welcomeMessage = {
-      id: Date.now(),
-      role: 'assistant',
-      content: `
-        ¡Hola! 👋 Soy tu asistente de portfolio inteligente.<br><br>
-        
-        Puedo contarte sobre:<br>
-        • 💼 Mi experiencia profesional<br>
-        • 🚀 Habilidades técnicas<br>
-        • 🎯 Proyectos destacados<br>
-        • 🎓 Formación académica<br>
-        • 📞 Información de contacto<br><br>
-        
-        <em>¿Qué te gustaría saber?</em>
-      `
-    }
-    messages.value.push(welcomeMessage)
-    nextTick(() => scrollToBottom())
-  }, 1000)
-})
-</script>
-
-<style scoped>
-@keyframes bounce {
-  0%, 80%, 100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-10px);
-  }
-}
-
-.animate-bounce {
-  animation: bounce 1s infinite;
-}
-
-/* Scrollbar personalizado */
-::-webkit-scrollbar {
-  width: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb {
-  /*background: rgba(147, 51, 234, 0.5);*/
-  background: rgba(59, 130, 246, 0.5); /* Blue-500 */
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  /*background: rgba(147, 51, 234, 0.7);*7
-  background: rgba(59, 130, 246, 0.7); /* Blue-500 */
-}
-</style>
diff --git a/index.html b/index.html
index 594c82b..dc9f0f6 100644
--- a/index.html
+++ b/index.html
@@ -2,30 +2,25 @@
 <html lang="es">
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link href="/avatar-bot.png" rel="icon" type="image/png"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="Portfolio tecnológico interactivo con asistente de IA - Desarrollador Full Stack especializado en Vue.js, React y Node.js" />
+    <meta content="Portfolio de Pablo de la Torre" name="description"/>
   <meta name="keywords" content="desarrollador, full stack, vue.js, react, node.js, portfolio, programador" />
-  <meta name="author" content="Tu Nombre" />
-  
+    <meta content="Pablo de la Torre" name="author"/>
+    <link href="/manifest.json" rel="manifest"/>
+    <meta content="#3b1070" name="theme-color"/>
+    <meta content="#3b1070" name="background-color"/>
+    <meta content="#3b1070" name="apple-mobile-web-app-status-bar-style">
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://tu-usuario.github.io/ai-portfolio-chat/" />
-  <meta property="og:title" content="Portfolio AI Chat - Desarrollador Full Stack" />
-  <meta property="og:description" content="Portfolio tecnológico interactivo con asistente de IA" />
-  <meta property="og:image" content="/og-image.jpg" />
+    <meta content="https://pablotj.com" property="og:url"/>
+    <meta content="Portfolio | Pablot TJ" property="og:title"/>
+    <meta content="Portfolio de Pablo de la Torre" property="og:description"/>
 
-  <!-- Twitter -->
-  <meta property="twitter:card" content="summary_large_image" />
-  <meta property="twitter:url" content="https://tu-usuario.github.io/ai-portfolio-chat/" />
-  <meta property="twitter:title" content="Portfolio AI Chat - Desarrollador Full Stack" />
-  <meta property="twitter:description" content="Portfolio tecnológico interactivo con asistente de IA" />
-  <meta property="twitter:image" content="/og-image.jpg" />
-
-  <title>Portfolio AI Chat - Desarrollador Full Stack</title>
+    <title>Portfolio | Pablot TJ</title>
 </head>
 <body>
   <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
+  <script src="/src/main.ts" type="module"></script>
 </body>
 </html>
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..fcd2c37
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,11 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1e7c522..a844b24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,11 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "vue": "^3.4.21"
+        "vue": "^3.4.21",
+        "vue-loading-overlay": "^6.0.6",
+        "vue-preloader": "^1.1.4",
+        "vue-typer": "^1.2.0",
+        "vue3-typer": "^1.0.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
@@ -1855,6 +1859,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/lodash.split": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.split/-/lodash.split-4.4.2.tgz",
+      "integrity": "sha512-kn1IDX0aHfg0FsnPIyxCHTamZXt3YK3aExRH1LW8YhzP6+sCldTm8+E4aIg+nSmM6R4eqdWGrXWtfYI961bwIw==",
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -2929,6 +2939,52 @@
         }
       }
     },
+    "node_modules/vue-loading-overlay": {
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-6.0.6.tgz",
+      "integrity": "sha512-ZPrWawjCoNKGbCG9z4nePgbs/K9KXPa1j1oAJXP6T8FQho3NO+/chhjx4MLYFzfpwr+xkiQ8SNrV1kUG1bZPAw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue-preloader": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/vue-preloader/-/vue-preloader-1.1.4.tgz",
+      "integrity": "sha512-XvBS4rzhPDJ/Ya+FOMVfkMK4maZuEn6/CED/Y94NTJiKnU/ASikixB2dYGgHfYhosRPdAVXIZJfetWnPbHgdJA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3.3.4"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/vue-typer": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vue-typer/-/vue-typer-1.2.0.tgz",
+      "integrity": "sha512-o0n2F9yOnbdQak1OiPFbZonIzysL5jiS1OPgaEX0KnMlKqXRKi808QHRdoMuqw44oYQM/vtxCt3AaNb9OzKH1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.split": "^4.4.2"
+      }
+    },
+    "node_modules/vue3-typer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue3-typer/-/vue3-typer-1.0.0.tgz",
+      "integrity": "sha512-XliYAfNxPdu3D2zgiKzzr6I7TJR/Qs4tqmn5RbPxvn8Me3AjAabX90U1oizGlFrH/9qNEsyX0NMyDB0Z/NkqPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.split": "^4.4.2",
+        "vue": "^3.2.37"
+      },
+      "peerDependencies": {
+        "vue": "^3.2"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 5d3d55d..865ae91 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,11 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "vue": "^3.4.21"
+    "vue": "^3.4.21",
+    "vue-loading-overlay": "^6.0.6",
+    "vue-preloader": "^1.1.4",
+    "vue-typer": "^1.2.0",
+    "vue3-typer": "^1.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
diff --git a/public/avatar-bot.png b/public/avatar-bot.png
new file mode 100644
index 0000000..615a8a3
Binary files /dev/null and b/public/avatar-bot.png differ
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..d4f47ad
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "Pablo TJ",
+  "name": "Pablot TJ",
+  "icons": [
+    {
+      "src": "avatar-bot.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "avatar-bot.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "avatar-bot.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#3b1070",
+  "background_color": "#3b1070"
+}
diff --git a/src/App.vue b/src/App.vue
index 0bb5722..17bcf6a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,69 +1,10 @@
-<template>
-  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
-    <!-- Navigation -->
-    <AppNavigation
-      :sections="navigationSections"
-      @navigate="scrollToSection"
-    />
-
-    <!-- Main Content -->
-    <main>
-      <!-- Hero Section -->
-      <HeroSection
-        id="hero"
-        :personal="portfolioData.personal"
-      />
-
-      <!-- About Section -->
-      <AboutSection
-        id="about"
-        :personal="portfolioData.personal"
-      />
-
-      <!-- Experience Section -->
-      <ExperienceSection
-        id="experience"
-        :experience="portfolioData.experience"
-      />
-
-      <!-- Projects Section -->
-      <ProjectsSection
-        id="projects"
-        :projects="portfolioData.projects"
-      />
-
-      <!-- Skills Section -->
-      <SkillsSection
-        id="skills"
-        :skills="portfolioData.skills"
-      />
-
-      <!-- Contact Section -->
-      <ContactSection
-        id="contact"
-        :personal="portfolioData.personal"
-      />
-    </main>
-
-    <!-- Footer -->
-    <AppFooter :personal="portfolioData.personal" />
-
-    <!-- Floating Chat Button -->
-    <ChatFloatingButton @toggle-chat="toggleChat" />
-
-    <!-- Chat Popup -->
-    <ChatPopup
-      v-if="isChatOpen"
-      :chatConfig="portfolioData.chatbot"
-      @close="toggleChat"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { usePortfolioData } from '@/composables/usePortfolioData'
-import { useNavigation } from '@/composables/useNavigation'
+<script lang="ts" setup>
+import {ref} from "vue";
+import {useProfile} from '@/composables/useProfile.ts'
+import {useNavigation} from '@/composables/useNavigation.ts'
+import {VuePreloader} from 'vue-preloader';
+import '../node_modules/vue-preloader/dist/style.css'
+import avatarBot from '@/assets/avatar-bot.png'
 
 // Components
 import AppNavigation from '@/components/layout/AppNavigation.vue'
@@ -76,28 +17,161 @@ import SkillsSection from '@/components/sections/SkillsSection.vue'
 import ContactSection from '@/components/sections/ContactSection.vue'
 import ChatFloatingButton from '@/components/chat/ChatFloatingButton.vue'
 import ChatPopup from '@/components/chat/ChatPopup.vue'
+import EducationSection from "@/components/sections/EducationSection.vue";
+import CertificationsSection from "@/components/sections/CertificationSection.vue";
+
+import config from "@/config";
 
 // Composables
-const { portfolioData, loadPortfolioData } = usePortfolioData()
-const { scrollToSection } = useNavigation()
+const {profile, loading} = useProfile()
+const {scrollToSection} = useNavigation()
 
 // State
 const isChatOpen = ref(false)
 
 const navigationSections = [
-  { id: 'hero', label: 'Inicio' },
-  { id: 'about', label: 'Sobre mí' },
-  { id: 'experience', label: 'Experiencia' },
-  { id: 'projects', label: 'Proyectos' },
-  { id: 'skills', label: 'Habilidades' },
-  { id: 'contact', label: 'Contacto' }
+  {id: 'hero', label: 'Inicio', enabled: config.sections.heroEnabled},
+  {id: 'about', label: 'Sobre mí', enabled: config.sections.aboutEnabled},
+  {id: 'experience', label: 'Experiencia', enabled: config.sections.experienceEnabled},
+  {id: 'projects', label: 'Proyectos', enabled: config.sections.projectsEnabled},
+  {id: 'skills', label: 'Habilidades', enabled: config.sections.skillsEnabled},
+  {id: 'education', label: 'Educación', enabled: config.sections.educationEnabled},
+  {id: 'certification', label: 'Certificaciones', enabled: config.sections.certificationsEnabled},
+  {id: 'contact', label: 'Contacto', enabled: config.sections.contactEnabled}
 ]
 
 function toggleChat() {
   isChatOpen.value = !isChatOpen.value
 }
 
-onMounted(async () => {
-  await loadPortfolioData()
-})
 </script>
+<template>
+
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
+
+    <VuePreloader
+        :loading-speed="25"
+        :transition-speed="1400"
+        background-color="#091a28"
+        color="#ffffff"
+        transition-type="fade-up"
+        @loading-is-over="loading"
+        @transition-is-over="loading"
+    >
+      <div class="preloader-content">
+        <img :src="avatarBot" alt="Logo" class="logo rounded-full"/>
+        <p>Preparando el Porfolio ... ✨</p>
+      </div>
+    </VuePreloader>
+
+    <!-- Navigation -->
+    <AppNavigation
+      :sections="navigationSections"
+      :profile="profile?.profile"
+      @navigate="scrollToSection"
+    />
+
+    <!-- Main Content -->
+    <main>
+      <!-- Hero Section -->
+      <HeroSection v-if="config.sections.heroEnabled"
+        id="hero"
+                   :profile="profile?.profile"
+      />
+
+      <!-- About Section -->
+      <AboutSection v-if="config.sections.aboutEnabled"
+        id="about"
+                    :profile="profile?.profile"
+      />
+
+      <!-- Experience Section -->
+      <ExperienceSection v-if="config.sections.experienceEnabled"
+        id="experience"
+                         :experience="profile?.experience"
+      />
+
+      <!-- Projects Section -->
+      <ProjectsSection v-if="config.sections.projectsEnabled"
+        id="projects"
+                       :projects="profile?.projects"
+      />
+
+      <!-- Skills Section -->
+      <SkillsSection v-if="config.sections.skillsEnabled"
+        id="skills"
+                     :skillGroups="profile?.skills"
+      />
+
+      <!-- Education Section -->
+      <EducationSection v-if="config.sections.educationEnabled"
+                        id="education"
+                        :education="profile?.education"
+      />
+
+      <!-- Education Section -->
+      <CertificationsSection v-if="config.sections.certificationsEnabled"
+                             id="certification"
+                             :certification="profile?.certifications"
+      />
+
+      <!-- Contact Section -->
+      <ContactSection v-if="config.sections.contactEnabled"
+        id="contact"
+                      :profile="profile?.profile"
+      />
+    </main>
+
+    <!-- Footer -->
+    <AppFooter :profile="profile?.profile"/>
+
+    <!-- Floating Chat Button -->
+    <ChatFloatingButton v-if="config.sections.chatEnabled" @toggle-chat="toggleChat"/>
+
+    <!-- Chat Popup -->
+    <ChatPopup
+      v-if="isChatOpen"
+      :chatConfig="profile?.chatbot"
+      @close="toggleChat"
+    />
+  </div>
+</template>
+
+<style scoped>
+.preloader-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #fff;
+  text-align: center;
+}
+
+.logo {
+  width: 100px;
+  height: 100px;
+  margin-bottom: 1rem;
+  animation: bounce 2s infinite;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  font-size: 1.1rem;
+  opacity: 0.8;
+  margin-bottom: 2rem;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
deleted file mode 100644
index 30e1874..0000000
--- a/src/components/AppFooter.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <footer class="mt-12 pt-8 border-t border-white/10 text-center text-gray-400">
-    <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
-      <div class="flex items-center space-x-4">
-        <a 
-          href="https://github.com/tu-usuario" 
-          target="_blank"
-          class="hover:text-white transition-colors"
-        >
-          <Github class="w-5 h-5" />
-        </a>
-        <a 
-          href="https://linkedin.com/in/tu-perfil" 
-          target="_blank"
-          class="hover:text-white transition-colors"
-        >
-          <Linkedin class="w-5 h-5" />
-        </a>
-        <a 
-          href="mailto:tu.email@ejemplo.com"
-          class="hover:text-white transition-colors"
-        >
-          <Mail class="w-5 h-5" />
-        </a>
-      </div>
-      
-      <div class="text-sm">
-        <p>&copy; {{ currentYear }} Tu Nombre. Hecho con ❤️ y Vue.js</p>
-      </div>
-      
-      <div class="text-xs">
-        <p>Versión 1.0.0 • Node.js {{ nodeVersion }}</p>
-      </div>
-    </div>
-  </footer>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { Github, Linkedin, Mail } from 'lucide-vue-next'
-
-const currentYear = computed(() => new Date().getFullYear())
-const nodeVersion = '18+'
-</script>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
deleted file mode 100644
index 866104f..0000000
--- a/src/components/AppHeader.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <header class="border-b border-white/10 backdrop-blur-sm bg-black/20 sticky top-0 z-50">
-    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
-      <div class="flex items-center space-x-3">
-        <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
-          <img src="/src/assets/avatar-bot.png" alt="Avatar" class=" rounded-full object-cover" />
-        </div>
-        <div>
-          <h1 class="text-xl font-bold">Pablo de la Torre Jamardo</h1>
-          <div class="flex items-center space-x-2">
-            <div class="flex items-center space-x-1">
-              <div 
-                class="w-2 h-2 rounded-full"
-                :class="isOnline ? 'bg-green-400' : 'bg-red-400'"
-              ></div>
-              <span class="text-xs text-gray-300">
-                {{ isOnline ? 'Online' : 'Offline' }}
-              </span>
-            </div>
-            <span class="text-xs text-gray-400">•</span>
-            <span class="text-xs text-gray-300">Virtual Me, Powered by Code</span>
-          </div>
-        </div>
-      </div>
-      
-      <div class="flex items-center space-x-2">
-        <button 
-          @click="$emit('toggle-theme')"
-          class="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
-          :title="isDark ? 'Cambiar a tema claro' : 'Cambiar a tema oscuro'"
-        >
-          <component :is="isDark ? 'Sun' : 'Moon'" class="w-5 h-5" />
-        </button>
-        
-        <a 
-          href="https://github.com/tu-usuario/ai-portfolio-chat" 
-          target="_blank"
-          class="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
-          title="Ver código en GitHub"
-        >
-          <Github class="w-5 h-5" />
-        </a>
-      </div>
-    </div>
-  </header>
-</template>
-
-<script setup>
-import { Bot, Sun, Moon, Github } from 'lucide-vue-next'
-
-defineProps({
-  isDark: Boolean,
-  isOnline: Boolean
-})
-
-defineEmits(['toggle-theme'])
-</script>
diff --git a/src/components/ChatInput.vue b/src/components/ChatInput.vue
deleted file mode 100644
index 1221f3f..0000000
--- a/src/components/ChatInput.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <form @submit.prevent="handleSubmit" class="relative">
-    <div class="flex space-x-2">
-      <div class="flex-1 relative">
-        <input
-          :value="input"
-          @input="$emit('update:input', $event.target.value)"
-          :disabled="isLoading"
-          placeholder="Pregúntame sobre mi experiencia, habilidades, proyectos..."
-          class="w-full px-4 py-3 pr-12 glass-effect rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent placeholder-gray-400 transition-all"
-          @keydown.enter.prevent="handleSubmit"
-        />
-        
-        <!-- Character counter -->
-        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-xs text-gray-500">
-          {{ input.length }}/500
-        </div>
-      </div>
-      
-      <button
-        type="submit"
-        :disabled="isLoading || !input.trim() || input.length > 500"
-        class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl font-semibold disabled:opacity-50 disabled:cursor-not-allowed hover:from-purple-600 hover:to-pink-600 transition-all transform hover:scale-105 active:scale-95"
-      >
-        <Send v-if="!isLoading" class="w-5 h-5" />
-        <div v-else class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
-      </button>
-    </div>
-    
-    <!-- Quick suggestions -->
-    <div v-if="!input && quickSuggestions.length > 0" class="flex flex-wrap gap-2 mt-3">
-      <button
-        v-for="suggestion in quickSuggestions.slice(0, 3)"
-        :key="suggestion"
-        @click="$emit('update:input', suggestion)"
-        class="px-3 py-1 text-sm bg-white/5 hover:bg-white/10 rounded-full border border-white/10 transition-colors"
-      >
-        {{ suggestion }}
-      </button>
-    </div>
-  </form>
-</template>
-
-<script setup>
-import { Send } from 'lucide-vue-next'
-
-const props = defineProps({
-  input: String,
-  isLoading: Boolean
-})
-
-const emit = defineEmits(['update:input', 'send-message'])
-
-const quickSuggestions = [
-  '¿Cuál es tu experiencia?',
-  '¿Qué tecnologías usas?',
-  'Háblame de tus proyectos'
-]
-
-function handleSubmit() {
-  if (props.input.trim() && !props.isLoading && props.input.length <= 500) {
-    emit('send-message')
-  }
-}
-</script>
diff --git a/src/components/ChatMessages.vue b/src/components/ChatMessages.vue
deleted file mode 100644
index 6b6a002..0000000
--- a/src/components/ChatMessages.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div class="space-y-4 mb-6 max-h-96 overflow-y-auto" ref="messagesContainer">
-    <TransitionGroup name="chat-message" tag="div">
-      <div 
-        v-for="message in messages" 
-        :key="message.id"
-        class="flex items-start space-x-3"
-        :class="message.role === 'user' ? 'flex-row-reverse space-x-reverse' : ''"
-      >
-        <div class="flex-shrink-0">
-          <div 
-            class="w-8 h-8 rounded-full flex items-center justify-center"
-            :class="message.role === 'user' 
-              ? 'bg-gradient-to-r from-blue-500 to-cyan-500' 
-              : 'bg-gradient-to-r from-purple-500 to-pink-500'"
-          >
-            <component :is="message.role === 'user' ? 'User' : 'Bot'" class="w-4 h-4" />
-
-            <img
-                :src="message.role === 'user' ? avatarUser : avatarBot"
-                alt="avatar"
-                class="w-8 h-8 rounded-full object-cover"
-            />
-          </div>
-        </div>
-        
-        <div 
-          class="max-w-xs lg:max-w-md px-4 py-3 rounded-2xl"
-          :class="message.role === 'user' 
-            ? 'bg-gradient-to-r from-blue-500 to-cyan-500 text-white' 
-            : 'glass-effect'"
-        >
-          <!-- Typing indicator -->
-          <div v-if="message.role === 'assistant' && message.typing" class="flex space-x-1">
-            <div class="w-2 h-2 bg-purple-400 rounded-full typing-indicator"></div>
-            <div class="w-2 h-2 bg-purple-400 rounded-full typing-indicator"></div>
-            <div class="w-2 h-2 bg-purple-400 rounded-full typing-indicator"></div>
-          </div>
-          
-          <!-- Message content -->
-          <div v-else>
-            <div v-html="formatMessage(message.content)" class="prose prose-invert max-w-none"></div>
-            <div v-if="message.role === 'assistant'" class="text-xs text-gray-400 mt-2">
-              {{ formatTime(message.timestamp) }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </TransitionGroup>
-  </div>
-</template>
-
-<script setup>
-import { ref, nextTick, watch } from 'vue'
-import avatarUser from './../assets/avatar-user.jpg'
-import avatarBot from './../assets/avatar-bot.png'
-
-const props = defineProps({
-  messages: Array,
-  isLoading: Boolean
-})
-
-const messagesContainer = ref(null)
-
-function formatMessage(content) {
-  return content.replace(/\n/g, '<br>')
-}
-
-function formatTime(timestamp) {
-  if (!timestamp) return ''
-  return new Date(timestamp).toLocaleTimeString('es-ES', { 
-    hour: '2-digit', 
-    minute: '2-digit' 
-  })
-}
-
-function scrollToBottom() {
-  if (messagesContainer.value) {
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
-  }
-}
-
-// Watch for new messages and scroll to bottom
-watch(() => props.messages.length, () => {
-  nextTick(() => scrollToBottom())
-})
-
-// Expose scrollToBottom method
-defineExpose({
-  scrollToBottom
-})
-</script>
diff --git a/src/components/TechStack.vue b/src/components/TechStack.vue
deleted file mode 100644
index ac60ca4..0000000
--- a/src/components/TechStack.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div class="mt-8 p-6 glass-effect rounded-xl">
-    <h3 class="text-lg font-semibold mb-4 flex items-center">
-      <Code class="w-5 h-5 mr-2 text-purple-400" />
-      Stack Tecnológico Principal
-    </h3>
-    <div class="flex flex-wrap gap-2">
-      <span 
-        v-for="(tech, index) in techStack" 
-        :key="tech" 
-        class="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-sm border border-purple-500/30 hover:bg-purple-500/30 transition-colors cursor-default"
-        :style="{ animationDelay: `${index * 50}ms` }"
-      >
-        {{ tech }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { Code } from 'lucide-vue-next'
-
-defineProps({
-  techStack: Array
-})
-</script>
diff --git a/src/components/WelcomeSection.vue b/src/components/WelcomeSection.vue
deleted file mode 100644
index 9db08cd..0000000
--- a/src/components/WelcomeSection.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div class="text-center mb-8 animate-fade-in">
-    <div class="mb-6">
-      <div class="w-24 h-24 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full mx-auto mb-4 flex items-center justify-center animate-pulse-slow">
-        <img src="/src/assets/avatar-bot.png" alt="Avatar" class="rounded-full object-cover" />
-      </div>
-      <h2 class="text-3xl font-bold mb-2 gradient-text">
-        ¡Hola! Soy tu asistente personal de portfolio
-      </h2>
-      <p class="text-gray-300 text-lg max-w-2xl mx-auto">
-        Pregúntame sobre mi experiencia, habilidades, proyectos o cualquier detalle técnico.
-        ¡Estoy listo para charlar y ayudarte a descubrir mi perfil profesional!
-      </p>
-    </div>
-    
-    <!-- Quick Actions -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
-      <button 
-        v-for="(suggestion, index) in quickSuggestions" 
-        :key="suggestion.text"
-        @click="$emit('send-message', suggestion.text)"
-        class="p-4 glass-effect rounded-xl transition-all hover:scale-105 hover:bg-white/15 text-left group"
-        :style="{ animationDelay: `${index * 100}ms` }"
-      >
-        <component 
-          :is="suggestion.icon" 
-          class="w-6 h-6 mb-2 text-purple-400 group-hover:text-purple-300 transition-colors" 
-        />
-        <h3 class="font-semibold mb-1 text-white group-hover:text-purple-100 transition-colors">
-          {{ suggestion.title }}
-        </h3>
-        <p class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors">
-          {{ suggestion.text }}
-        </p>
-      </button>
-    </div>
-
-    <!-- Stats -->
-    <div class="flex justify-center space-x-8 text-sm text-gray-400">
-      <div class="text-center">
-        <div class="text-2xl font-bold text-purple-400">5+</div>
-        <div>Años Experiencia</div>
-      </div>
-      <div class="text-center">
-        <div class="text-2xl font-bold text-purple-400">50+</div>
-        <div>Proyectos</div>
-      </div>
-      <div class="text-center">
-        <div class="text-2xl font-bold text-purple-400">15+</div>
-        <div>Tecnologías</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { Bot, Briefcase, Code, Rocket, GraduationCap, Mail, DollarSign } from 'lucide-vue-next'
-
-defineProps({
-  quickSuggestions: Array
-})
-
-defineEmits(['send-message'])
-</script>
diff --git a/src/components/chat/ChatFloatingButton.vue b/src/components/chat/ChatFloatingButton.vue
index 423514e..207e623 100644
--- a/src/components/chat/ChatFloatingButton.vue
+++ b/src/components/chat/ChatFloatingButton.vue
@@ -1,3 +1,9 @@
+<script lang="ts" setup>
+import {MessageCircle} from 'lucide-vue-next'
+
+defineEmits(['toggle-chat'])
+</script>
+
 <template>
   <div class="fixed bottom-6 right-6 z-50">
     <button
@@ -14,8 +20,3 @@
   </div>
 </template>
 
-<script setup>
-import { MessageCircle } from 'lucide-vue-next'
-
-defineEmits(['toggle-chat'])
-</script>
diff --git a/src/components/chat/ChatPopup.vue b/src/components/chat/ChatPopup.vue
index 7ab7b6d..f69abd5 100644
--- a/src/components/chat/ChatPopup.vue
+++ b/src/components/chat/ChatPopup.vue
@@ -1,3 +1,55 @@
+<script lang="ts" setup>
+import {computed, nextTick, onMounted, ref} from 'vue'
+import {Send, X} from 'lucide-vue-next'
+import {useChatService} from '@/services/ChatService.ts'
+import avatarUser from '@/assets/avatar-user.jpg'
+import avatarBot from '@/assets/avatar-bot.png'
+
+const props = defineProps({
+  chatConfig: Object
+})
+
+defineEmits(['close'])
+
+const {messages, input, isLoading, sendMessage: sendChatMessage} = useChatService(props.chatConfig)
+const messagesContainer = ref(null)
+
+const showQuickActions = computed(() => {
+  return messages.value.length <= 1 && props.chatConfig?.welcome?.quickActions
+})
+
+function sendMessage(text) {
+  sendChatMessage(text)
+  nextTick(() => scrollToBottom())
+}
+
+function handleSubmit() {
+  if (input.value.trim()) {
+    sendMessage(input.value)
+  }
+}
+
+function scrollToBottom() {
+  if (messagesContainer.value) {
+    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+  }
+}
+
+onMounted(() => {
+  // Send welcome message
+  if (props.chatConfig?.welcome?.message) {
+    setTimeout(() => {
+      messages.value.push({
+        id: Date.now(),
+        role: 'assistant',
+        content: props.chatConfig.welcome.message
+      })
+      nextTick(() => scrollToBottom())
+    }, 500)
+  }
+})
+</script>
+
 <template>
   <div class="fixed inset-0 z-50 flex items-end justify-end p-4">
     <!-- Backdrop -->
@@ -93,56 +145,4 @@
       </div>
     </div>
   </div>
-</template>
-
-<script setup>
-import { ref, onMounted, nextTick, computed } from 'vue'
-import { X, Send } from 'lucide-vue-next'
-import { useChatService } from '@/services/ChatService'
-import avatarUser from '@/assets/avatar-user.jpg'
-import avatarBot from '@/assets/avatar-bot.png'
-
-const props = defineProps({
-  chatConfig: Object
-})
-
-defineEmits(['close'])
-
-const { messages, input, isLoading, sendMessage: sendChatMessage } = useChatService(props.chatConfig)
-const messagesContainer = ref(null)
-
-const showQuickActions = computed(() => {
-  return messages.value.length <= 1 && props.chatConfig?.welcome?.quickActions
-})
-
-function sendMessage(text) {
-  sendChatMessage(text)
-  nextTick(() => scrollToBottom())
-}
-
-function handleSubmit() {
-  if (input.value.trim()) {
-    sendMessage(input.value)
-  }
-}
-
-function scrollToBottom() {
-  if (messagesContainer.value) {
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
-  }
-}
-
-onMounted(() => {
-  // Send welcome message
-  if (props.chatConfig?.welcome?.message) {
-    setTimeout(() => {
-      messages.value.push({
-        id: Date.now(),
-        role: 'assistant',
-        content: props.chatConfig.welcome.message
-      })
-      nextTick(() => scrollToBottom())
-    }, 500)
-  }
-})
-</script>
+</template>
\ No newline at end of file
diff --git a/src/components/layout/AppFooter.vue b/src/components/layout/AppFooter.vue
index 53de7f3..f50932a 100644
--- a/src/components/layout/AppFooter.vue
+++ b/src/components/layout/AppFooter.vue
@@ -1,22 +1,44 @@
+<script lang="ts" setup>
+  import {computed} from 'vue'
+  import {Github, Globe, Linkedin} from 'lucide-vue-next'
+  import config from "@/config";
+  import type {Profile} from '@/domain/models/Profile'
+
+  defineProps<{
+    profile: Profile
+  }>()
+
+  const currentYear = computed(() => new Date().getFullYear())
+
+  function getSocialIcon(platform) {
+    const icons = {
+      github: Github,
+      linkedin: Linkedin,
+      portfolio: Globe
+    }
+    return icons[platform] || Globe
+  }
+</script>
+
 <template>
   <footer class="bg-gray-900 text-white py-12">
     <div class="container mx-auto px-4">
       <div class="grid md:grid-cols-3 gap-8">
         <!-- About -->
         <div>
-          <h3 class="text-xl font-bold mb-4">{{ personal.name }}</h3>
+          <h3 class="text-xl font-bold mb-4">{{ profile?.name }}</h3>
           <p class="text-gray-300 mb-4">
-            {{ personal.title }} especializado en crear experiencias web excepcionales.
+            {{ profile?.title }}
           </p>
           <div class="flex space-x-4">
             <a
-              v-for="(url, platform) in personal.social"
-              :key="platform"
-              :href="url"
+                v-for="social in profile?.social"
+                :key="social.platform"
+                :href="social.url"
               target="_blank"
               class="text-gray-400 hover:text-white transition-colors"
             >
-              <component :is="getSocialIcon(platform)" class="w-5 h-5" />
+              <component :is="getSocialIcon(social.platform)" class="w-5 h-5"/>
             </a>
           </div>
         </div>
@@ -25,11 +47,21 @@
         <div>
           <h3 class="text-xl font-bold mb-4">Enlaces Rápidos</h3>
           <ul class="space-y-2">
-            <li><a href="#about" class="text-gray-300 hover:text-white transition-colors">Sobre mí</a></li>
-            <li><a href="#experience" class="text-gray-300 hover:text-white transition-colors">Experiencia</a></li>
-            <li><a href="#projects" class="text-gray-300 hover:text-white transition-colors">Proyectos</a></li>
-            <li><a href="#skills" class="text-gray-300 hover:text-white transition-colors">Habilidades</a></li>
-            <li><a href="#contact" class="text-gray-300 hover:text-white transition-colors">Contacto</a></li>
+            <li v-if="config.sections.aboutEnabled">
+              <a class="text-gray-300 hover:text-white transition-colors" href="#about">Sobre mí</a>
+            </li>
+            <li v-if="config.sections.experienceEnabled">
+              <a class="text-gray-300 hover:text-white transition-colors" href="#experience">Experiencia</a>
+            </li>
+            <li v-if="config.sections.projectsEnabled">
+              <a class="text-gray-300 hover:text-white transition-colors" href="#projects">Proyectos</a>
+            </li>
+            <li v-if="config.sections.skillsEnabled">
+              <a class="text-gray-300 hover:text-white transition-colors" href="#skills">Habilidades</a>
+            </li>
+            <li v-if="config.sections.contactEnabled">
+              <a class="text-gray-300 hover:text-white transition-colors" href="#contact">Contacto</a>
+            </li>
           </ul>
         </div>
 
@@ -37,38 +69,18 @@
         <div>
           <h3 class="text-xl font-bold mb-4">Contacto</h3>
           <div class="space-y-2 text-gray-300">
-            <p>{{ personal.email }}</p>
-            <p>{{ personal.phone }}</p>
-            <p>{{ personal.location }}</p>
+            <p>{{ profile?.email }}</p>
+            <p style="display:none">{{ profile?.phone }}</p>
+            <p>{{ profile?.location }}</p>
           </div>
         </div>
       </div>
 
       <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
-        <p>&copy; {{ currentYear }} {{ personal.name }}. Todos los derechos reservados.</p>
+        <p>&copy; {{ currentYear }} {{ profile?.name }}. Todos los derechos reservados.</p>
         <p class="mt-2 text-sm">Hecho con ❤️ y Vue.js</p>
       </div>
     </div>
   </footer>
 </template>
 
-<script setup>
-import { computed } from 'vue'
-import { Github, Linkedin, Twitter, Globe } from 'lucide-vue-next'
-
-defineProps({
-  personal: Object
-})
-
-const currentYear = computed(() => new Date().getFullYear())
-
-function getSocialIcon(platform) {
-  const icons = {
-    github: Github,
-    linkedin: Linkedin,
-    twitter: Twitter,
-    portfolio: Globe
-  }
-  return icons[platform] || Globe
-}
-</script>
diff --git a/src/components/layout/AppNavigation.vue b/src/components/layout/AppNavigation.vue
index 27c60e7..b373772 100644
--- a/src/components/layout/AppNavigation.vue
+++ b/src/components/layout/AppNavigation.vue
@@ -1,3 +1,27 @@
+<script lang="ts" setup>
+  import {ref} from 'vue'
+  import {Menu, X} from 'lucide-vue-next'
+  import type {Profile} from '@/domain/models/Profile'
+
+  defineProps<{
+    sections: Array,
+    profile: Profile
+  }>()
+
+  const emit = defineEmits(['navigate'])
+
+  const isMobileMenuOpen = ref(false)
+
+  function toggleMobileMenu() {
+    isMobileMenuOpen.value = !isMobileMenuOpen.value
+  }
+
+  function handleMobileNavigate(sectionId) {
+    emit('navigate', sectionId)
+    isMobileMenuOpen.value = false
+  }
+</script>
+
 <template>
   <nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700">
     <div class="container mx-auto px-4">
@@ -5,21 +29,26 @@
         <!-- Logo -->
         <div class="flex items-center space-x-2">
           <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
-            <span class="text-white font-bold text-sm">P</span>
+            <span class="text-white font-bold text-sm">{{ profile.name.charAt(0).toUpperCase() }}</span>
+          </div>
+          <div class="flex flex-col">
+            <span class="font-bold text-gray-900 dark:text-white">{{ profile.name }}</span>
+            <span class="text-gray-500 dark:text-gray-300 text-sm">{{ profile.title }}</span>
           </div>
-          <span class="font-bold text-gray-900 dark:text-white">Pablo de la Torre Jamardo</span>
         </div>
 
         <!-- Desktop Navigation -->
         <div class="hidden md:flex items-center space-x-8">
-          <button
-            v-for="section in sections"
-            :key="section.id"
-            @click="$emit('navigate', section.id)"
-            class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors font-medium"
-          >
-            {{ section.label }}
-          </button>
+          <template v-for="section in sections">
+            <button
+                v-if="section.enabled === true"
+                :key="section.id"
+                class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors font-medium"
+                @click="$emit('navigate', section.id)"
+            >
+              {{ section.label }}
+            </button>
+          </template>
         </div>
 
         <!-- Mobile Menu Button -->
@@ -35,38 +64,19 @@
       <!-- Mobile Navigation -->
       <div v-if="isMobileMenuOpen" class="md:hidden py-4 border-t border-gray-200 dark:border-gray-700">
         <div class="flex flex-col space-y-2">
-          <button
-            v-for="section in sections"
-            :key="section.id"
-            @click="handleMobileNavigate(section.id)"
-            class="text-left px-4 py-2 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-colors"
-          >
-            {{ section.label }}
-          </button>
+          <template v-for="section in sections">
+            <button
+                v-if="section.enabled === true"
+                :key="section.id"
+                class="text-left px-4 py-2 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-colors"
+                @click="handleMobileNavigate(section.id)"
+            >
+              {{ section.label }}
+            </button>
+          </template>
         </div>
       </div>
     </div>
   </nav>
 </template>
 
-<script setup>
-import { ref } from 'vue'
-import { Menu, X } from 'lucide-vue-next'
-
-defineProps({
-  sections: Array
-})
-
-const emit = defineEmits(['navigate'])
-
-const isMobileMenuOpen = ref(false)
-
-function toggleMobileMenu() {
-  isMobileMenuOpen.value = !isMobileMenuOpen.value
-}
-
-function handleMobileNavigate(sectionId) {
-  emit('navigate', sectionId)
-  isMobileMenuOpen.value = false
-}
-</script>
diff --git a/src/components/sections/AboutSection.vue b/src/components/sections/AboutSection.vue
index 7b8d41e..d4f1198 100644
--- a/src/components/sections/AboutSection.vue
+++ b/src/components/sections/AboutSection.vue
@@ -1,3 +1,15 @@
+<script lang="ts" setup>
+
+import {Mail, MapPin, Phone} from 'lucide-vue-next'
+
+import type {Profile} from '@/domain/models/Profile'
+
+defineProps<{
+  profile: Profile
+}>()
+
+</script>
+
 <template>
   <section id="about" class="py-20 bg-white dark:bg-gray-800">
     <div class="container mx-auto px-4">
@@ -5,40 +17,40 @@
         <h2 class="text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">
           Sobre mí
         </h2>
-        
-        <div class="grid md:grid-cols-2 gap-12 items-center">
+
+        <div class="grid md:grid-cols-1 gap-12 items-center">
           <!-- Bio -->
           <div>
             <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed mb-6">
-              {{ personal.bio }}
+              {{ profile?.bio }}
             </p>
             
             <div class="space-y-4">
               <div class="flex items-center space-x-3">
                 <MapPin class="w-5 h-5 text-purple-600" />
-                <span class="text-gray-700 dark:text-gray-300">{{ personal.location }}</span>
+                <span class="text-gray-700 dark:text-gray-300">{{ profile?.location }}</span>
               </div>
               <div class="flex items-center space-x-3">
                 <Mail class="w-5 h-5 text-purple-600" />
-                <a :href="`mailto:${personal.email}`" class="text-purple-600 hover:underline">
-                  {{ personal.email }}
+                <a :href="`mailto:${profile?.email}`" class="text-purple-600 hover:underline">
+                  {{ profile?.email }}
                 </a>
               </div>
-              <div class="flex items-center space-x-3">
+              <div class="flex items-center space-x-3" style="display:none">
                 <Phone class="w-5 h-5 text-purple-600" />
-                <span class="text-gray-700 dark:text-gray-300">{{ personal.phone }}</span>
+                <span class="text-gray-700 dark:text-gray-300">{{ profile?.phone }}</span>
               </div>
             </div>
           </div>
 
           <!-- Stats -->
-          <div class="grid grid-cols-2 gap-6">
+          <div v-if="1===3" class="grid grid-cols-2 gap-6">
             <div class="text-center p-6 bg-purple-50 dark:bg-gray-700 rounded-xl">
-              <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">5+</div>
+              <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">7+</div>
               <div class="text-gray-600 dark:text-gray-300">Años de Experiencia</div>
             </div>
             <div class="text-center p-6 bg-purple-50 dark:bg-gray-700 rounded-xl">
-              <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">50+</div>
+              <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">10+</div>
               <div class="text-gray-600 dark:text-gray-300">Proyectos Completados</div>
             </div>
             <div class="text-center p-6 bg-purple-50 dark:bg-gray-700 rounded-xl">
@@ -56,10 +68,3 @@
   </section>
 </template>
 
-<script setup>
-import { MapPin, Mail, Phone } from 'lucide-vue-next'
-
-defineProps({
-  personal: Object
-})
-</script>
diff --git a/src/components/sections/CertificationSection.vue b/src/components/sections/CertificationSection.vue
new file mode 100644
index 0000000..b02700b
--- /dev/null
+++ b/src/components/sections/CertificationSection.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import {type Certification} from '@/domain/models/Certification.ts'
+import {Award, Calendar} from 'lucide-vue-next'
+
+defineProps<{
+  certification: Certification[]
+}>()
+</script>
+
+<template>
+  <section id="certification" 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">
+          Certificaciones
+        </h2>
+
+        <div class="relative">
+          <!-- Timeline Line -->
+          <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-purple-200 dark:bg-purple-800"></div>
+
+          <!-- Experience Items -->
+          <div class="space-y-12">
+            <div
+                v-for="(cert, index) in certification"
+                :key="cert.id"
+                class="relative flex items-start space-x-6"
+            >
+              <!-- Timeline Dot -->
+              <div
+                  class="flex-shrink-0 w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center relative z-10">
+                <Award class="w-8 h-8 text-white"/>
+              </div>
+
+              <!-- Content -->
+              <div class="flex-1 bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
+                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
+                  <div>
+                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">
+                      {{ cert.name }}
+                    </h3>
+                    <h4 class="text-lg text-purple-600 dark:text-purple-400 font-semibold">
+                      {{ cert.issuer }}
+                    </h4>
+                  </div>
+                  <div class="text-sm text-gray-500 dark:text-gray-400 mt-2 md:mt-0">
+                    <div class="flex items-center space-x-2">
+                      <Calendar class="w-4 h-4"/>
+                      <span>{{ cert.date }}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <p class="text-gray-600 dark:text-gray-300 mb-4">
+                  {{ cert.description }}
+                </p>
+
+                <!-- Technologies -->
+                <div class="flex flex-wrap gap-2 mb-4">
+                  <span
+                      class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full text-sm"
+                  >
+                    {{ cert.credentialId }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
diff --git a/src/components/sections/ContactSection.vue b/src/components/sections/ContactSection.vue
index 61e76da..89af111 100644
--- a/src/components/sections/ContactSection.vue
+++ b/src/components/sections/ContactSection.vue
@@ -1,3 +1,52 @@
+<script lang="ts" setup>
+import {ref} from 'vue'
+import {Github, Globe, Linkedin, Mail, MapPin, Phone} from 'lucide-vue-next'
+import type {Profile} from '@/domain/models/Profile'
+
+defineProps<{
+  profile: Profile
+}>()
+
+const form = ref({
+  name: '',
+  email: '',
+  message: ''
+})
+
+const isSubmitting = ref(false)
+
+function getSocialIcon(platform) {
+  const icons = {
+    github: Github,
+    linkedin: Linkedin,
+    portfolio: Globe
+  }
+  return icons[platform] || Globe
+}
+
+async function handleSubmit() {
+  isSubmitting.value = true
+
+  // Simulate form submission
+  await new Promise(resolve => setTimeout(resolve, 1000))
+
+  // Here you would typically send the form data to your backend
+  console.log('Form submitted:', form.value)
+
+  // Reset form
+  form.value = {
+    name: '',
+    email: '',
+    message: ''
+  }
+
+  isSubmitting.value = false
+
+  // Show success message (you could use a toast notification)
+  alert('¡Mensaje enviado correctamente! Te responderé pronto.')
+}
+</script>
+
 <template>
   <section id="contact" class="py-20 bg-white dark:bg-gray-800">
     <div class="container mx-auto px-4">
@@ -25,19 +74,19 @@
                 </div>
                 <div>
                   <div class="font-semibold text-gray-900 dark:text-white">Email</div>
-                  <a :href="`mailto:${personal.email}`" class="text-purple-600 hover:underline">
-                    {{ personal.email }}
+                  <a :href="`mailto:${profile?.email}`" class="text-purple-600 hover:underline">
+                    {{ profile?.email }}
                   </a>
                 </div>
               </div>
 
-              <div class="flex items-center space-x-4">
+              <div v-if="profile?.phone" class="flex items-center space-x-4">
                 <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
                   <Phone class="w-6 h-6 text-purple-600 dark:text-purple-400" />
                 </div>
-                <div>
+                <div style="display:none">
                   <div class="font-semibold text-gray-900 dark:text-white">Teléfono</div>
-                  <span class="text-gray-600 dark:text-gray-300">{{ personal.phone }}</span>
+                  <span class="text-gray-600 dark:text-gray-300">{{ profile?.phone }}</span>
                 </div>
               </div>
 
@@ -47,7 +96,7 @@
                 </div>
                 <div>
                   <div class="font-semibold text-gray-900 dark:text-white">Ubicación</div>
-                  <span class="text-gray-600 dark:text-gray-300">{{ personal.location }}</span>
+                  <span class="text-gray-600 dark:text-gray-300">{{ profile?.location }}</span>
                 </div>
               </div>
             </div>
@@ -55,25 +104,28 @@
             <!-- Social Links -->
             <div class="flex space-x-4">
               <a
-                v-for="(url, platform) in personal.social"
-                :key="platform"
-                :href="url"
+                  v-for="social in profile?.social"
+                  :key="social.platform"
+                  :href="social.url"
                 target="_blank"
                 class="w-12 h-12 bg-gray-100 dark:bg-gray-700 hover:bg-purple-100 dark:hover:bg-purple-900 rounded-full flex items-center justify-center transition-colors"
               >
-                <component :is="getSocialIcon(platform)" class="w-6 h-6 text-gray-600 dark:text-gray-300" />
+                <component :is="getSocialIcon(social.platform)" class="w-6 h-6 text-gray-600 dark:text-gray-300"/>
               </a>
             </div>
           </div>
 
           <!-- Contact Form -->
           <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-8">
+            <p class="m-5">¡Hola! Por el momento mi servidor SMTP está de vacaciones 😅.</p>
+            <p class="m-5">Si quieres contactarme, envíame un correo electrónico directamente y prometo responderte
+              rápido.</p>
             <form @submit.prevent="handleSubmit" class="space-y-6">
               <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                   Nombre
                 </label>
-                <input
+                <input disabled
                   v-model="form.name"
                   type="text"
                   required
@@ -85,7 +137,7 @@
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                   Email
                 </label>
-                <input
+                <input disabled
                   v-model="form.email"
                   type="email"
                   required
@@ -97,7 +149,7 @@
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                   Mensaje
                 </label>
-                <textarea
+                <textarea disabled
                   v-model="form.message"
                   rows="4"
                   required
@@ -107,7 +159,7 @@
 
               <button
                 type="submit"
-                :disabled="isSubmitting"
+                :disabled="isSubmitting || 1===1"
                 class="w-full px-6 py-3 bg-purple-600 hover:bg-purple-700 disabled:opacity-50 text-white rounded-lg font-semibold transition-colors"
               >
                 {{ isSubmitting ? 'Enviando...' : 'Enviar Mensaje' }}
@@ -120,51 +172,3 @@
   </section>
 </template>
 
-<script setup>
-import { ref } from 'vue'
-import { Mail, Phone, MapPin, Github, Linkedin, Twitter, Globe } from 'lucide-vue-next'
-
-defineProps({
-  personal: Object
-})
-
-const form = ref({
-  name: '',
-  email: '',
-  message: ''
-})
-
-const isSubmitting = ref(false)
-
-function getSocialIcon(platform) {
-  const icons = {
-    github: Github,
-    linkedin: Linkedin,
-    twitter: Twitter,
-    portfolio: Globe
-  }
-  return icons[platform] || Globe
-}
-
-async function handleSubmit() {
-  isSubmitting.value = true
-  
-  // Simulate form submission
-  await new Promise(resolve => setTimeout(resolve, 1000))
-  
-  // Here you would typically send the form data to your backend
-  console.log('Form submitted:', form.value)
-  
-  // Reset form
-  form.value = {
-    name: '',
-    email: '',
-    message: ''
-  }
-  
-  isSubmitting.value = false
-  
-  // Show success message (you could use a toast notification)
-  alert('¡Mensaje enviado correctamente! Te responderé pronto.')
-}
-</script>
diff --git a/src/components/sections/EducationSection.vue b/src/components/sections/EducationSection.vue
new file mode 100644
index 0000000..29c4805
--- /dev/null
+++ b/src/components/sections/EducationSection.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import {Calendar, GraduationCap} from 'lucide-vue-next'
+import type {Education} from '@/domain/models/Education'
+
+defineProps<{
+  education: Education[]
+}>()
+</script>
+
+<template>
+  <section id="education" 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">
+          Educación
+        </h2>
+
+        <div class="relative">
+          <!-- Timeline Line -->
+          <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-purple-200 dark:bg-purple-800"></div>
+
+          <!-- Experience Items -->
+          <div class="space-y-12">
+            <div
+                v-for="(edu, index) in education"
+                :key="edu.id"
+                class="relative flex items-start space-x-6"
+            >
+              <!-- Timeline Dot -->
+              <div
+                  class="flex-shrink-0 w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center relative z-10">
+                <GraduationCap class="w-8 h-8 text-white"/>
+              </div>
+
+              <!-- Content -->
+              <div class="flex-1 bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
+                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
+                  <div>
+                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">
+                      {{ edu.degree }}
+                    </h3>
+                    <h4 class="text-lg text-purple-600 dark:text-purple-400 font-semibold">
+                      {{ edu.institution }}
+                    </h4>
+                  </div>
+                  <div class="text-sm text-gray-500 dark:text-gray-400 mt-2 md:mt-0">
+                    <div class="flex items-center space-x-2">
+                      <Calendar class="w-4 h-4"/>
+                      <span>{{ edu.period }}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <p class="text-gray-600 dark:text-gray-300 mb-4">
+                  {{ edu.description }}
+                </p>
+
+                <!-- Technologies -->
+                <div class="flex flex-wrap gap-2 mb-4">
+                  <span
+                      class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full text-sm"
+                  >
+                    {{ edu.grade }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
diff --git a/src/components/sections/ExperienceSection.vue b/src/components/sections/ExperienceSection.vue
index 11a12fa..8f7935a 100644
--- a/src/components/sections/ExperienceSection.vue
+++ b/src/components/sections/ExperienceSection.vue
@@ -1,3 +1,12 @@
+<script lang="ts" setup>
+import {Briefcase, Calendar, CheckCircle, MapPin} from 'lucide-vue-next'
+import type {Experience} from '@/domain/models/Experience'
+
+defineProps<{
+  experience: Experience[]
+}>()
+</script>
+
 <template>
   <section id="experience" class="py-20 bg-gray-50 dark:bg-gray-900">
     <div class="container mx-auto px-4">
@@ -83,10 +92,3 @@
   </section>
 </template>
 
-<script setup>
-import { Briefcase, Calendar, MapPin, CheckCircle } from 'lucide-vue-next'
-
-defineProps({
-  experience: Array
-})
-</script>
diff --git a/src/components/sections/HeroSection.vue b/src/components/sections/HeroSection.vue
index fd96f88..7d74431 100644
--- a/src/components/sections/HeroSection.vue
+++ b/src/components/sections/HeroSection.vue
@@ -1,38 +1,74 @@
+<script lang="ts" setup>
+import {ChevronDown, Github, Globe, Linkedin} from 'lucide-vue-next'
+import avatarUser from '@/assets/avatar-bot.png'
+import config from "@/config";
+import type {Profile} from '@/domain/models/Profile'
+
+defineProps<{
+  profile: Profile
+}>()
+
+function getSocialIcon(platform) {
+  const icons = {
+    github: Github,
+    linkedin: Linkedin,
+    portfolio: Globe
+  }
+  return icons[platform] || Globe
+}
+
+function scrollToSection(sectionId) {
+  document.getElementById(sectionId)?.scrollIntoView({behavior: 'smooth'})
+}
+</script>
+
 <template>
-  <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-purple-900 pt-16">
+  <section
+      class="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-200 to-pink-200 dark:from-gray-900 dark:to-purple-900 pt-16">
     <div class="container mx-auto px-4 text-center">
       <div class="max-w-4xl mx-auto">
         <!-- Avatar -->
         <div class="mb-8">
           <img
-            :src="personal.avatar"
-            :alt="personal.name"
+              :alt="profile?.name"
+              :src="avatarUser"
             class="w-32 h-32 rounded-full mx-auto shadow-2xl border-4 border-white dark:border-gray-700"
           />
         </div>
 
         <!-- Name and Title -->
         <h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-4">
-          {{ personal.name }}
+          {{ profile?.name }}
         </h1>
-        
         <h2 class="text-2xl md:text-3xl text-purple-600 dark:text-purple-400 font-semibold mb-6">
-          {{ personal.title }}
+          <VueTyper
+              :erase-delay='250'
+              :erase-on-complete='false'
+              :pre-erase-delay='2000'
+              :pre-type-delay='100'
+              :repeat='Infinity'
+              :shuffle='false'
+              :text="profile?.title ? [profile.title] : ['Cargando...']"
+              :type-delay='100'
+              caret-animation='smooth'
+              erase-style='clear'
+              initial-action='typing'
+          ></VueTyper>
         </h2>
-        
+
         <p class="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
-          {{ personal.subtitle }}
+          {{ profile?.subtitle }}
         </p>
 
         <!-- CTA Buttons -->
         <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
-          <button
+          <button v-if="config.sections.projectsEnabled"
             @click="scrollToSection('projects')"
             class="px-8 py-4 bg-purple-600 hover:bg-purple-700 text-white rounded-full font-semibold transition-all transform hover:scale-105 shadow-lg"
           >
             Ver Proyectos
           </button>
-          <button
+          <button v-if="config.sections.contactEnabled"
             @click="scrollToSection('contact')"
             class="px-8 py-4 border-2 border-purple-600 text-purple-600 dark:text-purple-400 hover:bg-purple-600 hover:text-white rounded-full font-semibold transition-all"
           >
@@ -41,20 +77,20 @@
         </div>
 
         <!-- Social Links -->
-        <div class="flex justify-center space-x-6">
+        <div class="flex justify-center gap-4 mb-12">
           <a
-            v-for="(url, platform) in personal.social"
-            :key="platform"
-            :href="url"
+              v-for="social in profile?.social"
+              :key="social.platform"
+              :href="social.url"
             target="_blank"
             class="p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg hover:shadow-xl transition-all transform hover:scale-110"
           >
-            <component :is="getSocialIcon(platform)" class="w-6 h-6 text-gray-600 dark:text-gray-300" />
+            <component :is="getSocialIcon(social.platform)" class="w-6 h-6 text-gray-600 dark:text-gray-300"/>
           </a>
         </div>
 
         <!-- Scroll Indicator -->
-        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
+        <div class="flex flex-col sm:flex-row justify-center animate-bounce">
           <ChevronDown class="w-8 h-8 text-gray-400" />
         </div>
       </div>
@@ -62,24 +98,3 @@
   </section>
 </template>
 
-<script setup>
-import { Github, Linkedin, Twitter, Globe, ChevronDown } from 'lucide-vue-next'
-
-defineProps({
-  personal: Object
-})
-
-function getSocialIcon(platform) {
-  const icons = {
-    github: Github,
-    linkedin: Linkedin,
-    twitter: Twitter,
-    portfolio: Globe
-  }
-  return icons[platform] || Globe
-}
-
-function scrollToSection(sectionId) {
-  document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' })
-}
-</script>
diff --git a/src/components/sections/ProjectsSection.vue b/src/components/sections/ProjectsSection.vue
index 83e9944..ffb8ebf 100644
--- a/src/components/sections/ProjectsSection.vue
+++ b/src/components/sections/ProjectsSection.vue
@@ -1,3 +1,12 @@
+<script lang="ts" setup>
+import {ExternalLink, Github} from 'lucide-vue-next'
+import type {Project} from '@/domain/models/Project'
+
+defineProps<{
+  projects: Project[]
+}>()
+</script>
+
 <template>
   <section id="projects" class="py-20 bg-white dark:bg-gray-800">
     <div class="container mx-auto px-4">
@@ -64,8 +73,8 @@
               <!-- Links -->
               <div class="flex space-x-2">
                 <a
-                  v-if="project.links.demo"
-                  :href="project.links.demo"
+                    v-if="project.demo"
+                    :href="project.demo"
                   target="_blank"
                   class="flex-1 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-center text-sm font-medium transition-colors"
                 >
@@ -73,8 +82,8 @@
                   Demo
                 </a>
                 <a
-                  v-if="project.links.github"
-                  :href="project.links.github"
+                    v-if="project.repository"
+                    :href="project.repository"
                   target="_blank"
                   class="flex-1 px-4 py-2 border border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white rounded-lg text-center text-sm font-medium transition-colors"
                 >
@@ -85,15 +94,9 @@
             </div>
           </div>
         </div>
+
       </div>
     </div>
   </section>
 </template>
 
-<script setup>
-import { ExternalLink, Github } from 'lucide-vue-next'
-
-defineProps({
-  projects: Array
-})
-</script>
diff --git a/src/components/sections/SkillsSection.vue b/src/components/sections/SkillsSection.vue
index c206f79..33fe6e5 100644
--- a/src/components/sections/SkillsSection.vue
+++ b/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>
diff --git a/src/composables/useChat.js b/src/composables/useChat.js
deleted file mode 100644
index 2234b19..0000000
--- a/src/composables/useChat.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { ref } from "vue"
-
-export function useChat(findBestResponse) {
-  const messages = ref([])
-  const input = ref("")
-  const isLoading = ref(false)
-
-  async function sendMessage(text = null) {
-    const messageText = text || input.value.trim()
-    if (!messageText || isLoading.value) return
-
-    // Agregar mensaje del usuario
-    const userMessage = {
-      id: Date.now(),
-      role: "user",
-      content: messageText,
-      timestamp: Date.now(),
-    }
-    messages.value.push(userMessage)
-
-    // Limpiar input
-    input.value = ""
-    isLoading.value = true
-
-    // Agregar mensaje de typing
-    const typingMessage = {
-      id: Date.now() + 1,
-      role: "assistant",
-      content: "",
-      typing: true,
-    }
-    messages.value.push(typingMessage)
-
-    // Simular delay de respuesta realista
-    const delay = 1000 + Math.random() * 2000 // 1-3 segundos
-
-    setTimeout(() => {
-      // Remover mensaje de typing
-      messages.value.pop()
-
-      // Obtener respuesta de la base de conocimiento
-      const responseData = findBestResponse(messageText)
-
-      // Agregar respuesta real
-      const assistantMessage = {
-        id: Date.now() + 2,
-        role: "assistant",
-        content: responseData.content,
-        category: responseData.category,
-        timestamp: responseData.timestamp,
-      }
-      messages.value.push(assistantMessage)
-
-      isLoading.value = false
-    }, delay)
-  }
-
-  function handleSubmit() {
-    sendMessage()
-  }
-
-  function clearChat() {
-    messages.value = []
-  }
-
-  return {
-    messages,
-    input,
-    isLoading,
-    sendMessage,
-    handleSubmit,
-    clearChat,
-  }
-}
diff --git a/src/composables/useKnowledgeBase.js b/src/composables/useKnowledgeBase.js
deleted file mode 100644
index abc2847..0000000
--- a/src/composables/useKnowledgeBase.js
+++ /dev/null
@@ -1,337 +0,0 @@
-import { ref } from "vue"
-
-export function useKnowledgeBase() {
-  const knowledgeBase = ref({
-    experiencia: {
-      keywords: ["experiencia", "trabajo", "laboral", "años", "empresa", "puesto", "carrera"],
-      response: `
-        <strong>💼 Experiencia Profesional</strong><br><br>
-        
-        <strong>Senior Full Stack Developer</strong> (2021 - Presente)<br>
-        <em>TechCorp Solutions</em><br>
-        • Liderazgo de equipo de 5 desarrolladores<br>
-        • Arquitectura de microservicios con Node.js y Docker<br>
-        • Implementación de CI/CD reduciendo deploys en 80%<br>
-        • Migración de aplicaciones legacy a arquitecturas modernas<br><br>
-        
-        <strong>Frontend Developer</strong> (2019 - 2021)<br>
-        <em>StartupXYZ</em><br>
-        • Desarrollo de SPAs con Vue.js y React<br>
-        • Optimización de performance (Core Web Vitals)<br>
-        • Colaboración estrecha con equipos UX/UI<br>
-        • Implementación de testing automatizado<br><br>
-        
-        <strong>Junior Developer</strong> (2018 - 2019)<br>
-        <em>DevAgency</em><br>
-        • Desarrollo de APIs REST con Express.js<br>
-        • Integración con bases de datos SQL y NoSQL<br>
-        • Metodologías ágiles (Scrum/Kanban)<br>
-        • Participación en code reviews y pair programming
-      `,
-    },
-
-    habilidades: {
-      keywords: ["habilidades", "tecnologías", "stack", "lenguajes", "frameworks", "dominas", "herramientas"],
-      response: `
-        <strong>🚀 Stack Tecnológico</strong><br><br>
-        
-        <strong>Frontend (Avanzado):</strong><br>
-        • Vue.js 3 (Composition API, Pinia, Nuxt.js)<br>
-        • React 18 (Hooks, Context, Redux Toolkit, Next.js)<br>
-        • TypeScript - Tipado fuerte y desarrollo escalable<br>
-        • Tailwind CSS, SCSS - Diseño responsive y modular<br>
-        • Webpack, Vite - Bundling y optimización<br><br>
-        
-        <strong>Backend (Avanzado):</strong><br>
-        • Node.js (Express, Fastify, NestJS)<br>
-        • Python (Django, FastAPI) - APIs y microservicios<br>
-        • Bases de datos: PostgreSQL, MongoDB, Redis<br>
-        • GraphQL, REST APIs - Diseño de APIs escalables<br><br>
-        
-        <strong>DevOps & Cloud (Intermedio-Avanzado):</strong><br>
-        • Docker, Kubernetes - Containerización<br>
-        • AWS (EC2, S3, Lambda, RDS) - Cloud computing<br>
-        • CI/CD (GitHub Actions, Jenkins) - Automatización<br>
-        • Nginx, Apache - Configuración de servidores<br><br>
-        
-        <strong>Herramientas & Metodologías:</strong><br>
-        • Git (GitFlow, conventional commits)<br>
-        • Jest, Cypress - Testing automatizado<br>
-        • Scrum, Kanban - Metodologías ágiles<br>
-        • Figma, Adobe XD - Colaboración con diseño
-      `,
-    },
-
-    proyectos: {
-      keywords: ["proyectos", "desarrollado", "creado", "portfolio", "destacados", "aplicaciones"],
-      response: `
-        <strong>🎯 Proyectos Destacados</strong><br><br>
-        
-        <strong>🛒 E-commerce Platform</strong><br>
-        <em>Plataforma completa de comercio electrónico</em><br>
-        • +50,000 usuarios activos mensuales<br>
-        • Integración con múltiples pasarelas de pago<br>
-        • Panel de administración con analytics en tiempo real<br>
-        • <strong>Tech:</strong> Vue 3, Node.js, PostgreSQL, Redis, Stripe<br>
-        • <strong>Logros:</strong> 99.9% uptime, 2s tiempo de carga<br><br>
-        
-        <strong>📊 Real-time Analytics Dashboard</strong><br>
-        <em>Dashboard empresarial con visualizaciones interactivas</em><br>
-        • Procesamiento de +1M eventos/día<br>
-        • Visualizaciones en tiempo real con WebSockets<br>
-        • Exportación de reportes automatizada<br>
-        • <strong>Tech:</strong> React, D3.js, Socket.io, InfluxDB<br>
-        • <strong>Logros:</strong> Reducción de 70% en tiempo de análisis<br><br>
-        
-        <strong>🏗️ Microservices Architecture</strong><br>
-        <em>Migración de monolito a microservicios</em><br>
-        • Arquitectura distribuida con 12 microservicios<br>
-        • Implementación de Event Sourcing y CQRS<br>
-        • Monitoreo con Prometheus y Grafana<br>
-        • <strong>Tech:</strong> Node.js, Docker, Kubernetes, AWS EKS<br>
-        • <strong>Logros:</strong> 60% reducción latencia, 99.95% disponibilidad<br><br>
-        
-        <strong>🤖 AI Portfolio Chat</strong> (Este proyecto)<br>
-        <em>Portfolio interactivo con simulación de IA</em><br>
-        • Chat inteligente sin dependencias externas<br>
-        • Respuestas contextuales pre-programadas<br>
-        • Diseño responsive y accesible<br>
-        • <strong>Tech:</strong> Vue 3, Tailwind CSS, Vite<br>
-        • <strong>Innovación:</strong> Portfolio que demuestra habilidades técnicas
-      `,
-    },
-
-    educacion: {
-      keywords: ["educación", "estudios", "universidad", "carrera", "certificaciones", "formación"],
-      response: `
-        <strong>🎓 Formación Académica</strong><br><br>
-        
-        <strong>Ingeniería en Sistemas de Información</strong><br>
-        <em>Universidad Tecnológica Nacional (2014-2018)</em><br>
-        • Especialización en Desarrollo de Software<br>
-        • Proyecto final: Sistema de gestión hospitalaria<br>
-        • Promedio: 8.5/10<br><br>
-        
-        <strong>Certificaciones Profesionales:</strong><br>
-        • <strong>AWS Certified Developer Associate</strong> (2022)<br>
-        • <strong>MongoDB Certified Developer</strong> (2021)<br>
-        • <strong>Certified Scrum Master (CSM)</strong> (2020)<br>
-        • <strong>Google Cloud Professional Developer</strong> (2023)<br><br>
-        
-        <strong>Formación Continua:</strong><br>
-        • <strong>Arquitectura de Software</strong> - Platzi (2023)<br>
-        • <strong>Advanced React Patterns</strong> - Epic React (2022)<br>
-        • <strong>Microservices with Node.js</strong> - Udemy (2021)<br>
-        • <strong>Machine Learning Fundamentals</strong> - Coursera (2023)<br><br>
-        
-        <strong>Participación en Comunidad:</strong><br>
-        • Speaker en VueConf Argentina 2022<br>
-        • Contribuciones a proyectos open source<br>
-        • Mentor en programas de coding bootcamps<br>
-        • Organizador de meetups locales de JavaScript
-      `,
-    },
-
-    contacto: {
-      keywords: ["contacto", "email", "linkedin", "github", "cv", "ubicación", "teléfono"],
-      response: `
-        <strong>📞 Información de Contacto</strong><br><br>
-        
-        <strong>Datos Principales:</strong><br>
-        • <strong>Email:</strong> tu.email@ejemplo.com<br>
-        • <strong>LinkedIn:</strong> <a href="https://linkedin.com/in/tu-perfil" target="_blank" class="text-blue-400 hover:underline">linkedin.com/in/tu-perfil</a><br>
-        • <strong>GitHub:</strong> <a href="https://github.com/tu-usuario" target="_blank" class="text-blue-400 hover:underline">github.com/tu-usuario</a><br>
-        • <strong>Portfolio:</strong> <a href="https://tu-portfolio.com" target="_blank" class="text-blue-400 hover:underline">tu-portfolio.com</a><br><br>
-        
-        <strong>Ubicación & Disponibilidad:</strong><br>
-        • <strong>Ubicación:</strong> Buenos Aires, Argentina<br>
-        • <strong>Zona horaria:</strong> GMT-3 (Argentina)<br>
-        • <strong>Modalidad:</strong> Remoto/Híbrido/Presencial<br>
-        • <strong>Disponibilidad:</strong> Inmediata<br><br>
-        
-        <strong>Idiomas:</strong><br>
-        • <strong>Español:</strong> Nativo<br>
-        • <strong>Inglés:</strong> Avanzado (C1) - Certificado Cambridge<br>
-        • <strong>Portugués:</strong> Intermedio (B2)<br><br>
-        
-        <strong>Horarios de Contacto:</strong><br>
-        • Lunes a Viernes: 9:00 - 18:00 (GMT-3)<br>
-        • Respuesta garantizada en menos de 24hs<br><br>
-        
-        <em>¡No dudes en contactarme para discutir oportunidades laborales!</em>
-      `,
-    },
-
-    salario: {
-      keywords: ["salario", "sueldo", "pretensiones", "económicas", "remuneración", "dinero", "pago"],
-      response: `
-        <strong>💰 Expectativas Salariales</strong><br><br>
-        
-        <strong>Rango Salarial (USD/mes):</strong><br>
-        • <strong>Remoto Internacional:</strong> $4,000 - $6,000<br>
-        • <strong>Empresas Locales:</strong> $2,500 - $4,000<br>
-        • <strong>Freelance/Consultoría:</strong> $50 - $80/hora<br><br>
-        
-        <strong>Factores que Considero:</strong><br>
-        • Complejidad técnica del proyecto<br>
-        • Responsabilidades de liderazgo<br>
-        • Oportunidades de crecimiento profesional<br>
-        • Beneficios adicionales (salud, vacaciones, etc.)<br>
-        • Cultura y ambiente de trabajo<br>
-        • Modalidad de trabajo (remoto/híbrido/presencial)<br><br>
-        
-        <strong>Beneficios Valorados:</strong><br>
-        • 🏥 Cobertura médica completa<br>
-        • 📚 Presupuesto para capacitación y conferencias<br>
-        • 💻 Equipamiento de trabajo de calidad<br>
-        • 🏖️ Días de vacaciones flexibles<br>
-        • 🚀 Stock options o participación en ganancias<br>
-        • 🏠 Flexibilidad horaria y trabajo remoto<br><br>
-        
-        <strong>Modalidades de Contratación:</strong><br>
-        • Relación de dependencia (preferida)<br>
-        • Contrato por proyecto<br>
-        • Consultoría a largo plazo<br><br>
-        
-        <em>Estoy abierto a negociar un paquete integral que sea beneficioso para ambas partes. Lo más importante para mí es encontrar un proyecto desafiante con un equipo talentoso.</em>
-      `,
-    },
-  })
-
-  const defaultResponses = [
-    "Esa es una excelente pregunta. Como desarrollador senior con más de 5 años de experiencia, siempre busco mantenerme actualizado con las últimas tecnologías y mejores prácticas del desarrollo web.",
-    "Interesante punto. En mi experiencia trabajando tanto en startups como en empresas enterprise, he encontrado que la clave está en encontrar el equilibrio entre innovación y estabilidad.",
-    "Desde mi perspectiva técnica, considero fundamental evaluar cada herramienta y tecnología en función del contexto específico del proyecto y las necesidades del negocio.",
-    "Basándome en mi experiencia liderando equipos y desarrollando arquitecturas escalables, puedo decir que la comunicación y la documentación son tan importantes como el código.",
-    "Como alguien que ha migrado sistemas legacy y implementado arquitecturas modernas, he aprendido que la planificación y el testing son cruciales para el éxito de cualquier proyecto.",
-  ]
-
-  function findBestResponse(message) {
-    const lowerMessage = message.toLowerCase()
-
-    // Buscar en la base de conocimiento
-    for (const [category, data] of Object.entries(knowledgeBase.value)) {
-      if (data.keywords.some((keyword) => lowerMessage.includes(keyword))) {
-        return {
-          content: data.response,
-          category: category,
-          timestamp: Date.now(),
-        }
-      }
-    }
-
-    // Respuestas contextuales específicas
-    if (lowerMessage.includes("react") || lowerMessage.includes("vue")) {
-      return {
-        content: `
-          <strong>⚛️ React vs Vue.js - Mi Perspectiva</strong><br><br>
-          
-          Tengo experiencia sólida con ambos frameworks y los uso según el contexto:<br><br>
-          
-          <strong>React:</strong><br>
-          • Ecosistema maduro y comunidad muy activa<br>
-          • Hooks y Context API para gestión de estado elegante<br>
-          • Ideal para aplicaciones complejas y equipos grandes<br>
-          • Excelente para desarrollo de componentes reutilizables<br><br>
-          
-          <strong>Vue.js:</strong><br>
-          • Curva de aprendizaje más suave y sintaxis intuitiva<br>
-          • Composition API muy potente (similar a React Hooks)<br>
-          • Excelente para desarrollo rápido y prototipado<br>
-          • Mejor integración con proyectos existentes<br><br>
-          
-          <strong>Mi Recomendación:</strong><br>
-          • <em>React:</em> Para SPAs complejas, equipos grandes, ecosistema robusto<br>
-          • <em>Vue:</em> Para desarrollo ágil, equipos pequeños, integración gradual<br><br>
-          
-          <em>En mi experiencia, ambos son excelentes herramientas. La elección depende del proyecto, equipo y contexto específico.</em>
-        `,
-        category: "tecnologias",
-        timestamp: Date.now(),
-      }
-    }
-
-    if (lowerMessage.includes("node") || lowerMessage.includes("backend") || lowerMessage.includes("servidor")) {
-      return {
-        content: `
-          <strong>🔧 Desarrollo Backend con Node.js</strong><br><br>
-          
-          Mi experiencia en backend se centra principalmente en el ecosistema JavaScript:<br><br>
-          
-          <strong>Frameworks y Librerías:</strong><br>
-          • <strong>Express.js:</strong> Framework minimalista, ideal para APIs REST<br>
-          • <strong>Fastify:</strong> Alto rendimiento, excelente para microservicios<br>
-          • <strong>NestJS:</strong> Arquitectura escalable, perfecto para aplicaciones enterprise<br><br>
-          
-          <strong>Bases de Datos:</strong><br>
-          • <strong>PostgreSQL:</strong> Para datos relacionales complejos<br>
-          • <strong>MongoDB:</strong> Para datos no estructurados y prototipado rápido<br>
-          • <strong>Redis:</strong> Para caché y sesiones de usuario<br><br>
-          
-          <strong>Arquitecturas que Manejo:</strong><br>
-          • APIs REST con documentación OpenAPI/Swagger<br>
-          • GraphQL para consultas flexibles<br>
-          • Microservicios con comunicación asíncrona<br>
-          • Event-driven architecture con message queues<br><br>
-          
-          <strong>Mejores Prácticas:</strong><br>
-          • Testing automatizado (Jest, Supertest)<br>
-          • Validación de datos con Joi/Yup<br>
-          • Logging estructurado con Winston<br>
-          • Monitoreo con Prometheus y Grafana<br><br>
-          
-          <em>Siempre enfocado en código limpio, escalable y bien documentado.</em>
-        `,
-        category: "backend",
-        timestamp: Date.now(),
-      }
-    }
-
-    if (lowerMessage.includes("docker") || lowerMessage.includes("kubernetes") || lowerMessage.includes("devops")) {
-      return {
-        content: `
-          <strong>🐳 DevOps y Containerización</strong><br><br>
-          
-          Mi experiencia en DevOps se enfoca en automatización y escalabilidad:<br><br>
-          
-          <strong>Containerización:</strong><br>
-          • <strong>Docker:</strong> Creación de imágenes optimizadas multi-stage<br>
-          • <strong>Docker Compose:</strong> Orquestación local y testing<br>
-          • <strong>Kubernetes:</strong> Despliegue y escalado en producción<br><br>
-          
-          <strong>CI/CD Pipelines:</strong><br>
-          • <strong>GitHub Actions:</strong> Automatización completa de workflows<br>
-          • <strong>Jenkins:</strong> Pipelines complejos para empresas<br>
-          • Testing automatizado, build y deploy<br><br>
-          
-          <strong>Cloud Platforms:</strong><br>
-          • <strong>AWS:</strong> EC2, ECS, Lambda, RDS, S3<br>
-          • <strong>Google Cloud:</strong> GKE, Cloud Functions, Cloud SQL<br>
-          • Infrastructure as Code con Terraform<br><br>
-          
-          <strong>Monitoreo y Observabilidad:</strong><br>
-          • Prometheus + Grafana para métricas<br>
-          • ELK Stack para logs centralizados<br>
-          • Health checks y alertas automatizadas<br><br>
-          
-          <em>Mi objetivo es crear pipelines que permitan deploys seguros y frecuentes, reduciendo el time-to-market.</em>
-        `,
-        category: "devops",
-        timestamp: Date.now(),
-      }
-    }
-
-    // Respuesta por defecto
-    const randomResponse = defaultResponses[Math.floor(Math.random() * defaultResponses.length)]
-    return {
-      content: randomResponse,
-      category: "general",
-      timestamp: Date.now(),
-    }
-  }
-
-  return {
-    findBestResponse,
-    knowledgeBase,
-  }
-}
diff --git a/src/composables/useNavigation.js b/src/composables/useNavigation.ts
similarity index 87%
rename from src/composables/useNavigation.js
rename to src/composables/useNavigation.ts
index 7514536..8adc0bf 100644
--- a/src/composables/useNavigation.js
+++ b/src/composables/useNavigation.ts
@@ -1,5 +1,5 @@
 export function useNavigation() {
-  function scrollToSection(sectionId) {
+    function scrollToSection(sectionId: string) {
     const element = document.getElementById(sectionId)
     if (element) {
       const offset = 80 // Account for fixed header
diff --git a/src/composables/usePortfolioData.js b/src/composables/usePortfolioData.js
deleted file mode 100644
index 8a70dcb..0000000
--- a/src/composables/usePortfolioData.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ref } from "vue"
-import { PortfolioRepository } from "@/infrastructure/repositories/PortfolioRepository"
-
-export function usePortfolioData() {
-  const portfolioData = ref({})
-  const isLoading = ref(false)
-  const error = ref(null)
-
-  const portfolioRepository = new PortfolioRepository()
-
-  async function loadPortfolioData() {
-    try {
-      isLoading.value = true
-      error.value = null
-      portfolioData.value = await portfolioRepository.getPortfolioData()
-    } catch (err) {
-      error.value = err.message
-      console.error("Error loading portfolio data:", err)
-    } finally {
-      isLoading.value = false
-    }
-  }
-
-  return {
-    portfolioData,
-    isLoading,
-    error,
-    loadPortfolioData,
-  }
-}
diff --git a/src/composables/useProfile.ts b/src/composables/useProfile.ts
new file mode 100644
index 0000000..6b45fcd
--- /dev/null
+++ b/src/composables/useProfile.ts
@@ -0,0 +1,25 @@
+import {onMounted, ref} from "vue";
+import {ProfileService} from "@/infrastructure/api/ProfileService";
+import {GetProfile} from "@/domain/usecases/GetProfile";
+
+const profileService = new ProfileService();
+const getProfileUseCase = new GetProfile(profileService);
+
+export function useProfile() {
+    const profile = ref<any>(null);
+    const loading = ref(false);
+    const error = ref<string | null>(null);
+
+    onMounted(async () => {
+        loading.value = true;
+    try {
+        profile.value = await getProfileUseCase.execute();
+    } catch (err: any) {
+        error.value = err.message;
+    } finally {
+        loading.value = false;
+    }
+    });
+
+    return {profile, loading};
+}
\ No newline at end of file
diff --git a/src/config.ts b/src/config.ts
new file mode 100644
index 0000000..5163645
--- /dev/null
+++ b/src/config.ts
@@ -0,0 +1,32 @@
+interface AppConfig {
+    apiUrl: boolean;
+    sections: {
+        heroEnabled: boolean;
+        aboutEnabled: boolean;
+        experienceEnabled: boolean;
+        projectsEnabled: boolean;
+        skillsEnabled: boolean;
+        educationEnabled: boolean;
+        certificationsEnabled: boolean,
+        contactEnabled: boolean;
+        chatEnabled: boolean;
+    };
+
+}
+
+const config: AppConfig = {
+    apiUrl: import.meta.env.VITE_API_URL || "http://localhost:3000",
+    sections: {
+        heroEnabled: true,
+        aboutEnabled: true,
+        experienceEnabled: true,
+        projectsEnabled: true,
+        skillsEnabled: true,
+        educationEnabled: true,
+        certificationsEnabled: true,
+        contactEnabled: true,
+        chatEnabled: false,
+    }
+};
+
+export default config;
\ No newline at end of file
diff --git a/src/data/portfolio-config.json b/src/data/portfolio-config.json
deleted file mode 100644
index b080180..0000000
--- a/src/data/portfolio-config.json
+++ /dev/null
@@ -1,228 +0,0 @@
-{
-  "personal": {
-    "name": "Pablo de la Torre Jamardo",
-    "title": "Senior Full Stack Developer",
-    "subtitle": "Especializado en Vue.js, React y Node.js",
-    "email": "pablo.delatorre@ejemplo.com",
-    "phone": "+54 11 1234-5678",
-    "location": "Buenos Aires, Argentina",
-    "avatar": "/src/assets/avatar-bot.png",
-    "bio": "Desarrollador Full Stack con más de 5 años de experiencia creando aplicaciones web escalables y modernas. Especializado en JavaScript, Vue.js, React y arquitecturas de microservicios.",
-    "social": {
-      "github": "https://github.com/pablo-delatorre",
-      "linkedin": "https://linkedin.com/in/pablo-delatorre",
-      "twitter": "https://twitter.com/pablo_dev",
-      "portfolio": "https://pablo-portfolio.com"
-    }
-  },
-  "experience": [
-    {
-      "id": "exp1",
-      "company": "TechCorp Solutions",
-      "position": "Senior Full Stack Developer",
-      "period": "2021 - Presente",
-      "location": "Buenos Aires, Argentina",
-      "description": "Liderazgo de equipo de 5 desarrolladores, arquitectura de microservicios con Node.js y Docker, implementación de CI/CD reduciendo deploys en 80%.",
-      "technologies": ["Vue.js", "Node.js", "Docker", "AWS", "PostgreSQL"],
-      "achievements": [
-        "Migración de aplicaciones legacy a arquitecturas modernas",
-        "Reducción del 80% en tiempo de deployment",
-        "Implementación de testing automatizado"
-      ]
-    },
-    {
-      "id": "exp2",
-      "company": "StartupXYZ",
-      "position": "Frontend Developer",
-      "period": "2019 - 2021",
-      "location": "Buenos Aires, Argentina",
-      "description": "Desarrollo de SPAs con Vue.js y React, optimización de performance y colaboración con equipos UX/UI.",
-      "technologies": ["Vue.js", "React", "TypeScript", "Tailwind CSS"],
-      "achievements": [
-        "Optimización de Core Web Vitals",
-        "Implementación de design system",
-        "Mejora del 40% en performance"
-      ]
-    },
-    {
-      "id": "exp3",
-      "company": "DevAgency",
-      "position": "Junior Developer",
-      "period": "2018 - 2019",
-      "location": "Buenos Aires, Argentina",
-      "description": "Desarrollo de APIs REST con Express.js, integración con bases de datos y metodologías ágiles.",
-      "technologies": ["Node.js", "Express.js", "MongoDB", "Git"],
-      "achievements": [
-        "Desarrollo de 15+ APIs REST",
-        "Participación en metodologías ágiles",
-        "Contribución a proyectos open source"
-      ]
-    }
-  ],
-  "projects": [
-    {
-      "id": "proj1",
-      "title": "E-commerce Platform",
-      "description": "Plataforma completa de comercio electrónico con más de 50,000 usuarios activos mensuales",
-      "image": "/placeholder.svg?height=300&width=400",
-      "technologies": ["Vue.js", "Node.js", "PostgreSQL", "Redis", "Stripe"],
-      "features": [
-        "Integración con múltiples pasarelas de pago",
-        "Panel de administración con analytics",
-        "Sistema de inventario en tiempo real"
-      ],
-      "metrics": {
-        "users": "50,000+",
-        "uptime": "99.9%",
-        "loadTime": "2s"
-      },
-      "links": {
-        "demo": "https://demo-ecommerce.com",
-        "github": "https://github.com/pablo/ecommerce"
-      }
-    },
-    {
-      "id": "proj2",
-      "title": "Real-time Analytics Dashboard",
-      "description": "Dashboard empresarial con visualizaciones interactivas y procesamiento de más de 1M eventos/día",
-      "image": "/placeholder.svg?height=300&width=400",
-      "technologies": ["React", "D3.js", "Socket.io", "InfluxDB", "Node.js"],
-      "features": ["Visualizaciones en tiempo real", "Exportación de reportes automatizada", "Alertas personalizables"],
-      "metrics": {
-        "events": "1M+/día",
-        "reduction": "70% tiempo análisis",
-        "users": "500+"
-      },
-      "links": {
-        "demo": "https://analytics-demo.com",
-        "github": "https://github.com/pablo/analytics"
-      }
-    },
-    {
-      "id": "proj3",
-      "title": "Microservices Architecture",
-      "description": "Migración de monolito a arquitectura de microservicios con 12 servicios distribuidos",
-      "image": "/placeholder.svg?height=300&width=400",
-      "technologies": ["Node.js", "Docker", "Kubernetes", "AWS EKS", "MongoDB"],
-      "features": ["Event Sourcing y CQRS", "Monitoreo con Prometheus", "Auto-scaling automático"],
-      "metrics": {
-        "services": "12",
-        "latencyReduction": "60%",
-        "availability": "99.95%"
-      },
-      "links": {
-        "github": "https://github.com/pablo/microservices"
-      }
-    }
-  ],
-  "skills": {
-    "frontend": [
-      { "name": "Vue.js", "level": 95, "years": 4 },
-      { "name": "React", "level": 90, "years": 3 },
-      { "name": "TypeScript", "level": 85, "years": 3 },
-      { "name": "Tailwind CSS", "level": 90, "years": 2 },
-      { "name": "Nuxt.js", "level": 80, "years": 2 }
-    ],
-    "backend": [
-      { "name": "Node.js", "level": 95, "years": 5 },
-      { "name": "Express.js", "level": 90, "years": 4 },
-      { "name": "NestJS", "level": 80, "years": 2 },
-      { "name": "Python", "level": 75, "years": 2 },
-      { "name": "GraphQL", "level": 70, "years": 1 }
-    ],
-    "database": [
-      { "name": "PostgreSQL", "level": 85, "years": 4 },
-      { "name": "MongoDB", "level": 80, "years": 3 },
-      { "name": "Redis", "level": 75, "years": 2 }
-    ],
-    "devops": [
-      { "name": "Docker", "level": 85, "years": 3 },
-      { "name": "AWS", "level": 80, "years": 2 },
-      { "name": "Kubernetes", "level": 70, "years": 1 },
-      { "name": "CI/CD", "level": 85, "years": 3 }
-    ]
-  },
-  "education": [
-    {
-      "id": "edu1",
-      "institution": "Universidad Tecnológica Nacional",
-      "degree": "Ingeniería en Sistemas de Información",
-      "period": "2014 - 2018",
-      "description": "Especialización en Desarrollo de Software. Proyecto final: Sistema de gestión hospitalaria.",
-      "grade": "8.5/10"
-    }
-  ],
-  "certifications": [
-    {
-      "id": "cert1",
-      "name": "AWS Certified Developer Associate",
-      "issuer": "Amazon Web Services",
-      "date": "2022",
-      "credentialId": "AWS-123456"
-    },
-    {
-      "id": "cert2",
-      "name": "MongoDB Certified Developer",
-      "issuer": "MongoDB Inc.",
-      "date": "2021",
-      "credentialId": "MONGO-789012"
-    },
-    {
-      "id": "cert3",
-      "name": "Certified Scrum Master",
-      "issuer": "Scrum Alliance",
-      "date": "2020",
-      "credentialId": "CSM-345678"
-    }
-  ],
-  "chatbot": {
-    "welcome": {
-      "message": "¡Hola! 👋 Soy el asistente virtual de Pablo. Puedo contarte sobre su experiencia, habilidades, proyectos y más. ¿Qué te gustaría saber?",
-      "quickActions": [
-        {
-          "text": "¿Cuál es su experiencia laboral?",
-          "category": "experience"
-        },
-        {
-          "text": "¿Qué tecnologías domina?",
-          "category": "skills"
-        },
-        {
-          "text": "Cuéntame sobre sus proyectos",
-          "category": "projects"
-        },
-        {
-          "text": "¿Cómo puedo contactarlo?",
-          "category": "contact"
-        }
-      ]
-    },
-    "responses": {
-      "experience": {
-        "keywords": ["experiencia", "trabajo", "laboral", "empresa", "puesto", "carrera"],
-        "response": "Pablo tiene más de 5 años de experiencia como desarrollador Full Stack. Actualmente es Senior Developer en TechCorp Solutions, donde lidera un equipo de 5 desarrolladores y ha implementado arquitecturas de microservicios que redujeron los tiempos de deployment en un 80%. Anteriormente trabajó en StartupXYZ optimizando performance y en DevAgency desarrollando APIs REST."
-      },
-      "skills": {
-        "keywords": ["habilidades", "tecnologías", "stack", "lenguajes", "frameworks"],
-        "response": "Pablo domina un amplio stack tecnológico: Frontend con Vue.js (95%), React (90%) y TypeScript (85%). En Backend maneja Node.js (95%), Express.js (90%) y Python (75%). También tiene experiencia en bases de datos como PostgreSQL y MongoDB, y en DevOps con Docker, AWS y Kubernetes."
-      },
-      "projects": {
-        "keywords": ["proyectos", "desarrollado", "creado", "portfolio", "aplicaciones"],
-        "response": "Entre sus proyectos destacados están: una plataforma de e-commerce con +50,000 usuarios activos, un dashboard de analytics en tiempo real que procesa +1M eventos/día, y la migración de un monolito a arquitectura de microservicios que mejoró la disponibilidad al 99.95%."
-      },
-      "contact": {
-        "keywords": ["contacto", "email", "teléfono", "linkedin", "ubicación"],
-        "response": "Puedes contactar a Pablo por email: pablo.delatorre@ejemplo.com, teléfono: +54 11 1234-5678. También está en LinkedIn: linkedin.com/in/pablo-delatorre y GitHub: github.com/pablo-delatorre. Se encuentra en Buenos Aires, Argentina."
-      },
-      "education": {
-        "keywords": ["educación", "estudios", "universidad", "carrera", "certificaciones"],
-        "response": "Pablo es Ingeniero en Sistemas de Información por la UTN (2014-2018) con especialización en Desarrollo de Software. Tiene certificaciones de AWS Developer Associate, MongoDB Certified Developer y Certified Scrum Master."
-      }
-    },
-    "fallback": [
-      "Esa es una excelente pregunta. Pablo siempre busca mantenerse actualizado con las últimas tecnologías.",
-      "Interesante punto. En su experiencia, ha encontrado que la clave está en el equilibrio entre innovación y estabilidad.",
-      "Desde su perspectiva técnica, considera fundamental evaluar cada herramienta según el contexto del proyecto."
-    ]
-  }
-}
diff --git a/src/domain/models/Certification.ts b/src/domain/models/Certification.ts
new file mode 100644
index 0000000..1336aad
--- /dev/null
+++ b/src/domain/models/Certification.ts
@@ -0,0 +1,7 @@
+export interface Certification {
+    id: string;
+    name: string;
+    issuer?: string;
+    date?: string;
+    credentialId?: string;
+}
\ No newline at end of file
diff --git a/src/domain/models/Education.ts b/src/domain/models/Education.ts
new file mode 100644
index 0000000..cf080c6
--- /dev/null
+++ b/src/domain/models/Education.ts
@@ -0,0 +1,8 @@
+export interface Education {
+    id: string;
+    institution: string;
+    degree: string;
+    period?: string;
+    description?: string;
+    grade?: string;
+}
\ No newline at end of file
diff --git a/src/domain/models/Experience.ts b/src/domain/models/Experience.ts
new file mode 100644
index 0000000..f70ac8d
--- /dev/null
+++ b/src/domain/models/Experience.ts
@@ -0,0 +1,10 @@
+export interface Experience {
+    id: string;
+    company: string;
+    position: string;
+    period: string;
+    location?: string;
+    description?: string;
+    technologies?: string[];
+    achievements?: string[];
+}
\ No newline at end of file
diff --git a/src/domain/models/Profile.ts b/src/domain/models/Profile.ts
new file mode 100644
index 0000000..082a5c5
--- /dev/null
+++ b/src/domain/models/Profile.ts
@@ -0,0 +1,21 @@
+export interface SocialLinks {
+    url?: string;
+    platform?: string;
+}
+
+export interface Profile {
+    id: number;
+    name: string;
+    title: string;
+    subtitle?: string;
+    email: string;
+    phone?: string;
+    location?: string;
+    avatar?: string;
+    bio?: string;
+    social?: SocialLinks[];
+}
+
+export default class ProfileDefault {
+
+}
\ No newline at end of file
diff --git a/src/domain/models/Project.ts b/src/domain/models/Project.ts
new file mode 100644
index 0000000..2f16dad
--- /dev/null
+++ b/src/domain/models/Project.ts
@@ -0,0 +1,10 @@
+export interface Project {
+    id: string;
+    title: string;
+    description?: string;
+    image?: string;
+    technologies?: string[];
+    features?: string[];
+    demo?: string;
+    repository?: string;
+}
\ No newline at end of file
diff --git a/src/domain/models/Skill.ts b/src/domain/models/Skill.ts
new file mode 100644
index 0000000..96ff609
--- /dev/null
+++ b/src/domain/models/Skill.ts
@@ -0,0 +1,11 @@
+export interface Skill {
+    name: string;
+    level: number;
+    years: number;
+}
+
+export interface SkillGroup {
+    name: string;
+    icon?: string;
+    skills: Skill[];
+}
\ No newline at end of file
diff --git a/src/domain/usecases/GetProfile.ts b/src/domain/usecases/GetProfile.ts
new file mode 100644
index 0000000..9731ff1
--- /dev/null
+++ b/src/domain/usecases/GetProfile.ts
@@ -0,0 +1,32 @@
+import {ProfileService} from "@/infrastructure/api/ProfileService";
+import {Profile} from "@/domain/models/Profile";
+import {Experience} from "@/domain/models/Experience";
+import {Project} from "@/domain/models/Project";
+import {SkillGroup} from "@/domain/models/Skill";
+import {Education} from "@/domain/models/Education";
+import {Certification} from "@/domain/models/Certification";
+
+export interface ProfileData {
+    profile: Profile;
+    experience: Experience[];
+    projects: Project[];
+    skills: SkillGroup[];
+    education: Education[];
+    certifications: Certification[];
+}
+
+export class GetProfile {
+    constructor(private readonly profileService: ProfileService) {
+    }
+
+    async execute(): Promise<ProfileData> {
+        const profile = await this.profileService.getProfile();
+        const experience = await this.profileService.getExperience(profile.id);
+        const projects = await this.profileService.getProjects(profile.id);
+        const skills = await this.profileService.getSkills(profile.id);
+        const education = await this.profileService.getEducation(profile.id);
+        const certifications = await this.profileService.getCertifications(profile.id);
+
+        return {profile, experience, projects, skills, education, certifications};
+    }
+}
\ No newline at end of file
diff --git a/src/infrastructure/api/ProfileService.ts b/src/infrastructure/api/ProfileService.ts
new file mode 100644
index 0000000..e375b42
--- /dev/null
+++ b/src/infrastructure/api/ProfileService.ts
@@ -0,0 +1,59 @@
+import {Profile} from "@/domain/models/Profile";
+import {Experience} from "@/domain/models/Experience";
+import {Project} from "@/domain/models/Project";
+import {SkillGroup} from "@/domain/models/Skill";
+import {Education} from "@/domain/models/Education";
+import {Certification} from "@/domain/models/Certification";
+import profileMockData from "@/infrastructure/mock/profile.json";
+import experienceMockData from "@/infrastructure/mock/experience.json";
+import educationMockData from "@/infrastructure/mock/education.json";
+import certificationMockData from "@/infrastructure/mock/certification.json";
+import skillMockData from "@/infrastructure/mock/skill.json";
+import projectMockData from "@/infrastructure/mock/project.json";
+
+const useMock = import.meta.env.VITE_USE_MOCK === "true";
+
+export class ProfileService {
+
+    async getProfile(): Promise<Profile> {
+        if (useMock) return profileMockData.content;
+        const res = await fetch(`${import.meta.env.VITE_API_URL}/profiles/${import.meta.env.VITE_PORTFOLIO_SLUG}`);
+        if (!res.ok) console.log(new Error("Error fetching personal data"));
+        return await res.json();
+    }
+
+    async getExperience(profileId: number): Promise<Experience[]> {
+        if (useMock) return experienceMockData.content;
+        const res = await fetch(`${import.meta.env.VITE_API_URL}/profiles/${profileId}/experience`);
+        if (!res.ok) console.log(new Error("Error fetching experience data"));
+        return await res.json();
+    }
+
+    async getProjects(profileId: number): Promise<Project[]> {
+        if (useMock) return projectMockData.content;
+        const res = await fetch(`${import.meta.env.VITE_API_URL}/profiles/${profileId}/projects`);
+        if (!res.ok) console.log(new Error("Error fetching projects data"));
+        return await res.json();
+    }
+
+    async getSkills(profileId: number): Promise<SkillGroup[]> {
+        if (useMock) return skillMockData.content;
+        const res = await fetch(`${import.meta.env.VITE_API_URL}/profiles/${profileId}/skills`);
+        if (!res.ok) console.log(new Error("Error fetching skills data"));
+        return await res.json();
+    }
+
+    async getEducation(profileId: number): Promise<Education[]> {
+        if (useMock) return educationMockData.content;
+        const res = await fetch(`${import.meta.env.VITE_API_URL}/profiles/${profileId}/education`);
+        if (!res.ok) console.log(new Error("Error fetching education data"));
+        return await res.json();
+    }
+
+    async getCertifications(profileId: number): Promise<Certification[]> {
+        if (useMock) return certificationMockData.content;
+        const res = await fetch(`${import.meta.env.VITE_API_URL}/profiles/${profileId}/certifications`);
+        if (!res.ok) console.log(new Error("Error fetching certifications data"));
+        return await res.json();
+    }
+}
\ No newline at end of file
diff --git a/src/infrastructure/mock/certification.json b/src/infrastructure/mock/certification.json
new file mode 100644
index 0000000..50cc678
--- /dev/null
+++ b/src/infrastructure/mock/certification.json
@@ -0,0 +1,25 @@
+{
+  "content": [
+    {
+      "id": "cert1",
+      "name": "AWS Certified Developer Associate",
+      "issuer": "Amazon Web Services",
+      "date": "2022",
+      "credentialId": "AWS-123456"
+    },
+    {
+      "id": "cert2",
+      "name": "MongoDB Certified Developer",
+      "issuer": "MongoDB Inc.",
+      "date": "2021",
+      "credentialId": "MONGO-789012"
+    },
+    {
+      "id": "cert3",
+      "name": "Certified Scrum Master",
+      "issuer": "Scrum Alliance",
+      "date": "2020",
+      "credentialId": "CSM-345678"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/infrastructure/mock/chatbot.json b/src/infrastructure/mock/chatbot.json
new file mode 100644
index 0000000..d479e31
--- /dev/null
+++ b/src/infrastructure/mock/chatbot.json
@@ -0,0 +1,83 @@
+{
+  "content": {
+    "welcome": {
+      "message": "¡Hola! 👋 Soy el asistente virtual de Pablo. ¿Te interesa saber sobre su trabajo en backend, despliegue automatizado o LLMs locales?",
+      "quickActions": [
+        {
+          "text": "¿Cuál es su experiencia laboral?",
+          "category": "experience"
+        },
+        {
+          "text": "¿Qué tecnologías domina?",
+          "category": "skills"
+        },
+        {
+          "text": "Cuéntame sobre sus proyectos",
+          "category": "projects"
+        },
+        {
+          "text": "¿Cómo puedo contactarlo?",
+          "category": "contact"
+        }
+      ]
+    },
+    "responses": {
+      "experience": {
+        "keywords": [
+          "experiencia",
+          "trabajo",
+          "laboral",
+          "empresa",
+          "puesto",
+          "carrera"
+        ],
+        "response": "Pablo trabaja actualmente como Arquitecto de Software en la Xunta de Galicia, liderando desarrollos backend complejos. Anteriormente ha trabajado como consultor y freelance, siempre enfocado en eficiencia y automatización."
+      },
+      "skills": {
+        "keywords": [
+          "habilidades",
+          "tecnologías",
+          "stack",
+          "lenguajes",
+          "frameworks"
+        ],
+        "response": "Domina tecnologías como Java (Spring Boot), Vue.js (Quasar), despliegue automatizado con Docker y GitHub Actions, y recientemente integración con modelos LLM offline."
+      },
+      "projects": {
+        "keywords": [
+          "proyectos",
+          "desarrollado",
+          "creado",
+          "portfolio",
+          "aplicaciones"
+        ],
+        "response": "Ha desarrollado una app LLM offline en Java, un sistema de reservas autónomo para un hostel, y una plataforma completa de tramitación electrónica con firma digital y backend distribuido."
+      },
+      "contact": {
+        "keywords": [
+          "contacto",
+          "email",
+          "teléfono",
+          "linkedin",
+          "ubicación"
+        ],
+        "response": "Puedes contactar a Pablo en pablo@pablotj.com o vía LinkedIn: linkedin.com/in/pablotj. Vive en Galicia, España."
+      },
+      "education": {
+        "keywords": [
+          "educación",
+          "estudios",
+          "universidad",
+          "carrera",
+          "certificaciones"
+        ],
+        "response": "Estudió Ingeniería Informática en la Universidade de Vigo. Está certificado en arquitectura Java, GitOps y modelos LLM locales."
+      }
+    },
+    "fallback": [
+      "Buena pregunta. Pablo valora mucho el rendimiento y la mantenibilidad en sus proyectos.",
+      "Interesante. Él suele aplicar principios de arquitectura limpia y buenas prácticas DevOps.",
+      "Siempre busca mantener la simplicidad sin sacrificar funcionalidad o seguridad."
+    ]
+  }
+}
\ No newline at end of file
diff --git a/src/infrastructure/mock/education.json b/src/infrastructure/mock/education.json
new file mode 100644
index 0000000..60c5165
--- /dev/null
+++ b/src/infrastructure/mock/education.json
@@ -0,0 +1,12 @@
+{
+  "content": [
+    {
+      "id": "edu1",
+      "institution": "CIFP Daniel Castelao, Vigo",
+      "degree": "Ciclo Formativo de Grado Superior en Desarrollo de Aplicaciones Multiplataforma",
+      "period": "2015 - 2017",
+      "description": "Formación técnica especializada en desarrollo de aplicaciones móviles y de escritorio multiplataforma, bases de datos, y programación orientada a objetos.",
+      "grade": "No aplicable"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/infrastructure/mock/experience.json b/src/infrastructure/mock/experience.json
new file mode 100644
index 0000000..178b0b7
--- /dev/null
+++ b/src/infrastructure/mock/experience.json
@@ -0,0 +1,77 @@
+{
+  "content": [
+    {
+      "id": "exp1",
+      "company": "Bahia Software",
+      "position": "Analista Programador Senior y Líder Tecnológico",
+      "period": "2019 - Presente",
+      "location": "O Milladoiro, Galicia, España / Remoto",
+      "description": "Evolución desde programador junior hasta líder tecnológico. Responsable de análisis, desarrollo y liderazgo técnico.",
+      "technologies": [
+        "Java 8",
+        "Java 11",
+        "Spring Boot",
+        "Spring Framework",
+        "Spring Security",
+        "Spring Cloud",
+        "Docker",
+        "Jenkins",
+        "Keycloak",
+        "Vue.js",
+        "Oracle DB",
+        "MariaDB",
+        "SOAP",
+        "REST",
+        "WebLogic",
+        "Tomcat",
+        "SonarQube",
+        "JMS",
+        "Arquitectura Hexagonal"
+      ],
+      "achievements": [
+        "Liderazgo técnico en proyectos clave para la AMTEGA",
+        "Automatización de despliegues y calidad de código con Sonar y Jenkins"
+      ]
+    },
+    {
+      "id": "exp2",
+      "company": "Optare Solutions",
+      "position": "Programador Junior",
+      "period": "2018 - 2019",
+      "location": "Vigo, Galicia, España",
+      "description": "Inicio profesional con beca FEUGA y posterior incorporación como programador junior. Participación en proyectos Java, migración de versiones y tareas puntuales relacionadas con VoIP y AWS.",
+      "technologies": [
+        "Java",
+        "Java 8",
+        "Java 11",
+        "Angular",
+        "VoIP",
+        "AWS"
+      ],
+      "achievements": [
+        "Migración de aplicaciones de Java 8 a Java 11",
+        "Colaboración en desarrollo frontend con Angular",
+        "Participación en entornos productivos de telecomunicaciones"
+      ]
+    },
+    {
+      "id": "exp3",
+      "company": "Kidcode",
+      "position": "Tutor de programación didáctica",
+      "period": "2017 - 2018",
+      "location": "Galicia, España",
+      "description": "Tutor de tiempo libre para iniciación a la programación en niños de entre 5 y 12 años. Uso de herramientas educativas como Arduino, Raspberry Pi, Lego y entornos low-code.",
+      "technologies": [
+        "Arduino",
+        "Raspberry Pi",
+        "Lego",
+        "Low-code"
+      ],
+      "achievements": [
+        "Diseño de actividades didácticas adaptadas por edades",
+        "Fomento del pensamiento computacional en edades tempranas",
+        "Introducción práctica a la robótica educativa"
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/infrastructure/mock/profile.json b/src/infrastructure/mock/profile.json
new file mode 100644
index 0000000..3b3fee4
--- /dev/null
+++ b/src/infrastructure/mock/profile.json
@@ -0,0 +1,23 @@
+{
+  "content": {
+    "id": -1,
+    "name": "Pablo de la Torre",
+    "title": "Softaware Developer",
+    "subtitle": "Especializado en Java",
+    "email": "contact@pablotj.com",
+    "phone": "",
+    "location": "Pontevedra, Galicia, España",
+    "avatar": "assets/avatar-bot.png",
+    "bio": "Desarrollador de software con más de 7 años de experiencia. Apasionado por crear sistemas sólidos, automatizar tareas y trabajar con contenedores. Recientemente, he empezado a explorar modelos LLM locales como parte de mis intereses técnicos.",
+    "social": [
+      {
+        "url": "https://github.com/pablotj",
+        "platform": "github"
+      },
+      {
+        "url": "https://linkedin.com/in/pablotj",
+        "platform": "linkedin"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/src/infrastructure/mock/project.json b/src/infrastructure/mock/project.json
new file mode 100644
index 0000000..e785fb6
--- /dev/null
+++ b/src/infrastructure/mock/project.json
@@ -0,0 +1,78 @@
+{
+  "content": [
+    {
+      "id": "proj1",
+      "title": "E-commerce Platform",
+      "description": "Plataforma completa de comercio electrónico con más de 50,000 usuarios activos mensuales",
+      "image": "/placeholder.svg?height=300&width=400",
+      "technologies": [
+        "Vue.js",
+        "Node.js",
+        "PostgreSQL",
+        "Redis",
+        "Stripe"
+      ],
+      "features": [
+        "Integración con múltiples pasarelas de pago",
+        "Panel de administración con analytics",
+        "Sistema de inventario en tiempo real"
+      ],
+      "metrics": {
+        "users": "50,000+",
+        "uptime": "99.9%",
+        "loadTime": "2s"
+      },
+      "demo": "https://demo-ecommerce.com",
+      "repository": "https://github.com/pablo/ecommerce"
+    },
+    {
+      "id": "proj2",
+      "title": "Real-time Analytics Dashboard",
+      "description": "Dashboard empresarial con visualizaciones interactivas y procesamiento de más de 1M eventos/día",
+      "image": "/placeholder.svg?height=300&width=400",
+      "technologies": [
+        "React",
+        "D3.js",
+        "Socket.io",
+        "InfluxDB",
+        "Node.js"
+      ],
+      "features": [
+        "Visualizaciones en tiempo real",
+        "Exportación de reportes automatizada",
+        "Alertas personalizables"
+      ],
+      "metrics": {
+        "events": "1M+/día",
+        "reduction": "70% tiempo análisis",
+        "users": "500+"
+      },
+      "demo": "https://analytics-demo.com",
+      "repository": "https://github.com/pablo/analytics"
+    },
+    {
+      "id": "proj3",
+      "title": "Microservices Architecture",
+      "description": "Migración de monolito a arquitectura de microservicios con 12 servicios distribuidos",
+      "image": "/placeholder.svg?height=300&width=400",
+      "technologies": [
+        "Node.js",
+        "Docker",
+        "Kubernetes",
+        "AWS EKS",
+        "MongoDB"
+      ],
+      "features": [
+        "Event Sourcing y CQRS",
+        "Monitoreo con Prometheus",
+        "Auto-scaling automático"
+      ],
+      "metrics": {
+        "services": "12",
+        "latencyReduction": "60%",
+        "availability": "99.95%"
+      },
+      "repository": "https://github.com/pablo/microservices"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/infrastructure/mock/skill.json b/src/infrastructure/mock/skill.json
new file mode 100644
index 0000000..16b5eab
--- /dev/null
+++ b/src/infrastructure/mock/skill.json
@@ -0,0 +1,201 @@
+{
+  "content": [
+    {
+      "name": "Backend",
+      "icon": "Server",
+      "skills": [
+        {
+          "name": "Java",
+          "level": 95,
+          "years": 7
+        },
+        {
+          "name": "Spring Boot",
+          "level": 90,
+          "years": 6
+        },
+        {
+          "name": "Spring Framework",
+          "level": 85,
+          "years": 6
+        },
+        {
+          "name": "Spring Security",
+          "level": 80,
+          "years": 5
+        },
+        {
+          "name": "Spring Cloud",
+          "level": 75,
+          "years": 3
+        },
+        {
+          "name": "Node.js",
+          "level": 40,
+          "years": 1
+        },
+        {
+          "name": "Python",
+          "level": 30,
+          "years": 1
+        },
+        {
+          "name": "JUnit",
+          "level": 80,
+          "years": 5
+        },
+        {
+          "name": "Mockito",
+          "level": 75,
+          "years": 4
+        }
+      ]
+    },
+    {
+      "name": "DevOps",
+      "icon": "Server",
+      "skills": [
+        {
+          "name": "Docker",
+          "level": 90,
+          "years": 5
+        },
+        {
+          "name": "Jenkins",
+          "level": 85,
+          "years": 4
+        },
+        {
+          "name": "Keycloak",
+          "level": 80,
+          "years": 3
+        },
+        {
+          "name": "CI/CD",
+          "level": 85,
+          "years": 4
+        },
+        {
+          "name": "SonarQube",
+          "level": 75,
+          "years": 3
+        },
+        {
+          "name": "Linux",
+          "level": 85,
+          "years": 6
+        },
+        {
+          "name": "Git",
+          "level": 90,
+          "years": 6
+        },
+        {
+          "name": "SVN",
+          "level": 60,
+          "years": 4
+        },
+        {
+          "name": "Kubernetes",
+          "level": 40,
+          "years": 1
+        }
+      ]
+    },
+    {
+      "name": "Base de Datos",
+      "icon": "Server",
+      "skills": [
+        {
+          "name": "Oracle",
+          "level": 85,
+          "years": 5
+        },
+        {
+          "name": "MariaDB",
+          "level": 80,
+          "years": 4
+        },
+        {
+          "name": "JMS",
+          "level": 75,
+          "years": 3
+        }
+      ]
+    },
+    {
+      "name": "Frontend",
+      "icon": "Server",
+      "skills": [
+        {
+          "name": "Angular",
+          "level": 85,
+          "years": 5
+        },
+        {
+          "name": "Bootstrap",
+          "level": 75,
+          "years": 4
+        },
+        {
+          "name": "TypeScript",
+          "level": 70,
+          "years": 3
+        },
+        {
+          "name": "Vue.js",
+          "level": 40,
+          "years": 1
+        }
+      ]
+    },
+    {
+      "name": "Methodologies",
+      "icon": "Server",
+      "skills": [
+        {
+          "name": "Agile",
+          "level": 85,
+          "years": 5
+        },
+        {
+          "name": "Scrum",
+          "level": 80,
+          "years": 4
+        },
+        {
+          "name": "Kanban",
+          "level": 70,
+          "years": 3
+        }
+      ]
+    },
+    {
+      "name": "Monitoring",
+      "icon": "Server",
+      "skills": [
+        {
+          "name": "Prometheus",
+          "level": 30,
+          "years": 1
+        },
+        {
+          "name": "Grafana",
+          "level": 30,
+          "years": 1
+        }
+      ]
+    },
+    {
+      "name": "Languages",
+      "icon": "Server",
+      "skills": [
+        {
+          "name": "Inglés",
+          "level": 80,
+          "years": 7
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/infrastructure/repositories/ChatRepository.js b/src/infrastructure/repositories/ChatRepository.ts
similarity index 100%
rename from src/infrastructure/repositories/ChatRepository.js
rename to src/infrastructure/repositories/ChatRepository.ts
diff --git a/src/infrastructure/repositories/PortfolioRepository.js b/src/infrastructure/repositories/PortfolioRepository.js
deleted file mode 100644
index bf82bd6..0000000
--- a/src/infrastructure/repositories/PortfolioRepository.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import portfolioConfig from "@/data/portfolio-config.json"
-
-export class PortfolioRepository {
-  async getPortfolioData() {
-    // Simulate API call delay
-    await new Promise((resolve) => setTimeout(resolve, 100))
-
-    return portfolioConfig
-  }
-
-  async getPersonalInfo() {
-    const data = await this.getPortfolioData()
-    return data.personal
-  }
-
-  async getExperience() {
-    const data = await this.getPortfolioData()
-    return data.experience
-  }
-
-  async getProjects() {
-    const data = await this.getPortfolioData()
-    return data.projects
-  }
-
-  async getSkills() {
-    const data = await this.getPortfolioData()
-    return data.skills
-  }
-
-  async getEducation() {
-    const data = await this.getPortfolioData()
-    return data.education
-  }
-
-  async getCertifications() {
-    const data = await this.getPortfolioData()
-    return data.certifications
-  }
-}
diff --git a/src/main.js b/src/main.ts
similarity index 52%
rename from src/main.js
rename to src/main.ts
index ccd6235..f2cc79e 100644
--- a/src/main.js
+++ b/src/main.ts
@@ -1,8 +1,11 @@
-import { createApp } from "vue"
-import App from "./App.vue"
+import {createApp} from "vue"
 import "./style.css"
+import VueTyper from 'vue3-typer'
+import "vue3-typer/dist/vue-typer.css"
+import App from "./App.vue";
 
 const app = createApp(App)
+app.component('VueTyper', VueTyper)
 
 // Global error handler
 app.config.errorHandler = (err, vm, info) => {
diff --git a/src/services/ChatService.js b/src/services/ChatService.ts
similarity index 94%
rename from src/services/ChatService.js
rename to src/services/ChatService.ts
index e2e189a..ab13242 100644
--- a/src/services/ChatService.js
+++ b/src/services/ChatService.ts
@@ -1,5 +1,5 @@
-import { ref } from "vue"
-import { ChatRepository } from "@/infrastructure/repositories/ChatRepository"
+import {ref} from "vue"
+import {ChatRepository} from "@/infrastructure/repositories/ChatRepository"
 
 export function useChatService(chatConfig) {
   const messages = ref([])
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..4c0772e
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,18 @@
+declare module '*.vue' {
+    import type {DefineComponent} from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}
+
+declare module '*.json' {
+    const value: any
+    export default value
+}
+
+declare module '*.css' {
+    const content: Record<string, string>
+    export default content
+}
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.svg'
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 3312515..cba1844 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+    .border-border {
+        border-color: hsl(var("#4c1d95"));
+    }
+}
+
 @layer base {
   html {
     scroll-behavior: smooth;
@@ -53,7 +59,7 @@
 
 ::-webkit-scrollbar-thumb {
   /*background: rgba(147, 51, 234, 0.5);*/
-  background: rgba(59, 130, 246, 0.5); /* Blue-500 */
+    background: rgb(9, 26, 40); /* Blue-500 */
   border-radius: 3px;
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 198de87..cbed1fa 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,79 +7,86 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+          background: "#0f0f1f",  // fondo oscuro elegante
+          foreground: "#f8f8f2",
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-          50: "#f0f9ff",
-          100: "#e0f2fe",
-          200: "#bae6fd",
-          300: "#7dd3fc",
-          400: "#38bdf8",
-          500: "#0ea5e9",
-          600: "#0284c7",
-          700: "#0369a1",
-          800: "#075985",
-          900: "#0c4a6e",
+            DEFAULT: "#8b5cf6", // violeta principal
+            50: "#f3ebff",
+            100: "#e0d7ff",
+            200: "#c0aaff",
+            300: "#a078ff",
+            400: "#8b5cf6",
+            500: "#7c3aed",
+            600: "#6d28d9",
+            700: "#5b21b6",
+            800: "#4c1d95",
+            900: "#3b1070",
+            foreground: "#ffffff",
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+            DEFAULT: "#c084fc", // púrpura suave para CTA
+            foreground: "#ffffff",
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+            DEFAULT: "#d8b4fe", // acento claro violeta
+            foreground: "#1f1f2e",
         },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          muted: {
+              DEFAULT: "#a78bfa", // violeta pálido
+              foreground: "#f8f8f2",
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+            DEFAULT: "#1e1b2f", // card dark purple
+            foreground: "#f8f8f2",
         },
-        purple: {
-          400: "#475569", // slate-600
-          500: "#334155", // slate-700
-          600: "#1e293b", // slate-800
-        },
-        pink: {
-          500: "#0ea5e9", // sky-500 (azul vibrante, pero no chillón)
-          600: "#0284c7", // sky-600
+          popover: {
+              DEFAULT: "#2c2345",
+              foreground: "#f8f8f2",
         },
+          success: "#7dd3fc",
+          warning: "#facc15",
+          error: "#f87171",
+      },
+        fontFamily: {
+            sans: ["Inter", ...fontFamily.sans],
+            mono: ["Fira Code", ...fontFamily.mono],
       },
       animation: {
         "bounce-slow": "bounce 2s infinite",
         "pulse-slow": "pulse 3s infinite",
-        "fade-in": "fadeIn 0.5s ease-in-out",
+          "fade-in": "fadeIn 0.6s ease-in-out",
+          "float": "float 4s ease-in-out infinite",
+          "wiggle": "wiggle 0.8s ease-in-out infinite",
       },
       keyframes: {
         fadeIn: {
           "0%": { opacity: "0", transform: "translateY(10px)" },
           "100%": { opacity: "1", transform: "translateY(0)" },
         },
-      },
-      fontFamily: {
-        sans: ["Inter", ...fontFamily.sans],
+          float: {
+              "0%, 100%": {transform: "translateY(0)"},
+              "50%": {transform: "translateY(-10px)"},
+          },
+          wiggle: {
+              "0%, 100%": {transform: "rotate(-3deg)"},
+              "50%": {transform: "rotate(3deg)"},
+          },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+          lg: "1rem",
+          md: "0.75rem",
+          sm: "0.5rem",
+      },
+        boxShadow: {
+            "card-light": "0 8px 16px rgba(139,92,246,0.2)",
+            "card-dark": "0 8px 20px rgba(0,0,0,0.5)",
+            glow: "0 0 20px rgba(139,92,246,0.6)",
+        },
+        transitionProperty: {
+            height: "height",
+            spacing: "margin, padding",
       },
     },
   },
   plugins: [],
-};
+};
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..8643230
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "types": [
+      "vite/client"
+    ],
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.vue"
+  ]
+}
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index bd27c78..99df6b6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,10 +1,10 @@
-import { defineConfig } from "vite"
+import {defineConfig} from "vite"
 import vue from "@vitejs/plugin-vue"
-import { resolve } from "path"
+import {resolve} from "path"
 
 export default defineConfig({
   plugins: [vue()],
-  base: process.env.NODE_ENV === "production" ? "/ai-portfolio-chat/" : "/",
+    base: process.env.NODE_ENV === "production" ? "/" : "/",
   resolve: {
     alias: {
       "@": resolve(__dirname, "src"),
@@ -26,5 +26,13 @@ export default defineConfig({
   server: {
     port: 3000,
     open: true,
+      proxy: {
+          '/api': {
+              target: 'http://localhost:8080',
+              changeOrigin: true,
+              secure: false,
+              //rewrite: path => path.replace(/^\/api/, '')
+          }
+      }
   },
 })