93 lines
3.4 KiB
Vue
93 lines
3.4 KiB
Vue
<template>
|
|
<section id="experience" 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">
|
|
Experiencia Profesional
|
|
</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="(exp, index) in experience"
|
|
:key="exp.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">
|
|
<Briefcase 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">
|
|
{{ exp.position }}
|
|
</h3>
|
|
<h4 class="text-lg text-purple-600 dark:text-purple-400 font-semibold">
|
|
{{ exp.company }}
|
|
</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>{{ exp.period }}</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<MapPin class="w-4 h-4" />
|
|
<span>{{ exp.location }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-600 dark:text-gray-300 mb-4">
|
|
{{ exp.description }}
|
|
</p>
|
|
|
|
<!-- Technologies -->
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<span
|
|
v-for="tech in exp.technologies"
|
|
:key="tech"
|
|
class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full text-sm"
|
|
>
|
|
{{ tech }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Achievements -->
|
|
<div class="space-y-2">
|
|
<h5 class="font-semibold text-gray-900 dark:text-white">Logros destacados:</h5>
|
|
<ul class="space-y-1">
|
|
<li
|
|
v-for="achievement in exp.achievements"
|
|
:key="achievement"
|
|
class="flex items-start space-x-2 text-gray-600 dark:text-gray-300"
|
|
>
|
|
<CheckCircle class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
|
|
<span>{{ achievement }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Briefcase, Calendar, MapPin, CheckCircle } from 'lucide-vue-next'
|
|
|
|
defineProps({
|
|
experience: Array
|
|
})
|
|
</script>
|