75 lines
2.6 KiB
Vue
75 lines
2.6 KiB
Vue
<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>
|
|
|