aferrer/portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Experience component layout and update experience duration format for consistency

Browse Source
This commit is contained in:
aferrer committed 2025-10-31 22:53:20 +00:00
1 parent e266f96416
commit 5130cb9412
2 files changed
+40 -31
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/Experience.astro
+37 -28
View File
@@ -12,32 +12,41 @@ interface ExperienceProps {
---
<Section id="experience">
<h3 class="text-3xl font-bold text-white text-center mb-10">
Experiencia
</h3>
<div class="space-y-12">
{experience.map((exp: ExperienceProps) => (
<div class="flex gap-x-3 relative group rounded-lg">
<div class="relative last:after:hidden after:absolute after:top-0 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700 dark:group-hover:after:bg-neutral-600">
<div class="relative z-10 size-7 flex justify-center items-center">
<div class="size-2 rounded-full bg-white border-2 border-gray-300 group-hover:border-gray-600 dark:bg-neutral-800 dark:border-neutral-600 dark:group-hover:border-neutral-600"></div>
</div>
</div>
<div class="section-card overflow-hidden md:flex">
<div class="p-8 flex-1">
<span class="text-sm text-sky-400 mb-4 block">
{exp.duration}
</span>
<h4 class="text-xl font-bold text-gray-200 mb-2">
{exp.role}
</h4>
<h5 class="text-md font-medium text-gray-300 mb-4">
{exp.company}
</h5>
<p class="text-gray-300 text-wrap">{exp.description}</p>
</div>
</div>
</div>
))}
</div>
<h3 class="text-3xl font-bold text-white text-center mb-10">
Experiencia
</h3>
<!-- Contenedor del timeline -->
<div class="relative">
<div class="absolute top-8 bottom-8 w-px">
<!-- Línea vertical única -->
<div class="absolute left-2.25 inset-0 w-px bg-sky-800"></div>
<!-- Bola que "baja" con el scroll -->
<div class="sticky top-1/2 w-5 h-5 rounded-full bg-sky-400 border-4 border-gray-100 shadow-lg translate-y-[-50%] transition-all duration-300 z-10"></div>
</div>
<!-- Contenedor de experiencias con padding para que la línea cubra bien -->
<div class="space-y-12 pt-8 pb-8">
{experience.map((exp: ExperienceProps) => (
<div class="flex gap-x-3 relative group rounded-lg">
<div class="overflow-hidden md:flex">
<div class="p-8 flex-1">
<div class="flex flex-col md:flex-row md:justify-between md:items-center mb-2">
<h4 class="text-xl font-bold text-gray-200 mb-2 md:mb-0 md:max-w-1/2 text-pretty">
{exp.role}
</h4>
<span class="text-sm text-sky-400 mb-4 block md:mb-0">
📅 {exp.duration}
</span>
</div>
<h5 class="text-md font-medium text-gray-300 mb-4">
{exp.company}
</h5>
<p class="text-gray-300 text-wrap">
{exp.description}
</p>
</div>
</div>
</div>
))}
</div>
</div>
</Section>