Initial functional version of the portfolio chatbot site

src/components/sections/ProjectsSection.vue

@@ -0,0 +1,99 @@
+<template>
+  <section id="projects" class="py-20 bg-white dark:bg-gray-800">
+    <div class="container mx-auto px-4">
+      <div class="max-w-6xl mx-auto">
+        <h2 class="text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">
+          Proyectos Destacados
+        </h2>
+
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div
+            v-for="project in projects"
+            :key="project.id"
+            class="bg-gray-50 dark:bg-gray-700 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:scale-105"
+          >
+            <!-- Project Image -->
+            <div class="relative h-48 overflow-hidden">
+              <img
+                :src="project.image"
+                :alt="project.title"
+                class="w-full h-full object-cover"
+              />
+              <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
+            </div>
+
+            <!-- Project Content -->
+            <div class="p-6">
+              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
+                {{ project.title }}
+              </h3>
+              
+              <p class="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
+                {{ project.description }}
+              </p>
+
+              <!-- Technologies -->
+              <div class="flex flex-wrap gap-2 mb-4">
+                <span
+                  v-for="tech in project.technologies.slice(0, 3)"
+                  :key="tech"
+                  class="px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded text-xs"
+                >
+                  {{ tech }}
+                </span>
+                <span
+                  v-if="project.technologies.length > 3"
+                  class="px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded text-xs"
+                >
+                  +{{ project.technologies.length - 3 }}
+                </span>
+              </div>
+
+              <!-- Metrics -->
+              <div class="grid grid-cols-2 gap-4 mb-4 text-sm">
+                <div
+                  v-for="(value, key) in project.metrics"
+                  :key="key"
+                  class="text-center p-2 bg-white dark:bg-gray-600 rounded"
+                >
+                  <div class="font-bold text-purple-600 dark:text-purple-400">{{ value }}</div>
+                  <div class="text-gray-500 dark:text-gray-400 capitalize">{{ key }}</div>
+                </div>
+              </div>
+
+              <!-- Links -->
+              <div class="flex space-x-2">
+                <a
+                  v-if="project.links.demo"
+                  :href="project.links.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"
+                >
+                  <ExternalLink class="w-4 h-4 inline mr-1" />
+                  Demo
+                </a>
+                <a
+                  v-if="project.links.github"
+                  :href="project.links.github"
+                  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"
+                >
+                  <Github class="w-4 h-4 inline mr-1" />
+                  Código
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ExternalLink, Github } from 'lucide-vue-next'
+
+defineProps({
+  projects: Array
+})
+</script>