103 lines
3.7 KiB
Vue
103 lines
3.7 KiB
Vue
<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">
|
|
<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.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"
|
|
>
|
|
<ExternalLink class="w-4 h-4 inline mr-1" />
|
|
Demo
|
|
</a>
|
|
<a
|
|
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"
|
|
>
|
|
<Github class="w-4 h-4 inline mr-1" />
|
|
Código
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|