alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Releases 34 Activity

feat: change timeline to preline

Browse Source
This commit is contained in:
Alex Lebens
2026-05-21 17:53:28 -05:00
parent b7787cb723
commit 3e5aa65840
1 changed files with 116 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/ExperienceSection.astro
+15 -11
View File
@@ -18,15 +18,15 @@ const experiences = ((await directus.request(
<h3 class="smooth-reveal card-text-header flex relative items-center w-full gap-3 pb-10"> <h3 class="smooth-reveal card-text-header flex relative items-center w-full gap-3 pb-10">
Experience Experience
</h3> </h3>
<ul class="flex flex-col w-full ml-8 pr-8"> <ul class="flex flex-col w-full gap-8">
{experiences.map((experience: Experience, index: number) => { {experiences.map((experience: Experience, index: number) => {
const startYear = new Date(experience.startDate).getFullYear(); const startYear = new Date(experience.startDate).getFullYear();
const endYear = experience.endDate != null ? new Date(experience.endDate).getFullYear() : 'Present'; const endYear = experience.endDate != null ? new Date(experience.endDate).getFullYear() : 'Present';
return ( return (
<li class="relative"> <li class="smooth-reveal card-base-hidden flex gap-x-4 -mx-4 md:-mx-8 px-4 md:px-8 py-4 md:py-6">
<div class="smooth-reveal group relative grid sm:grid-cols-18 sm:gap-8 md:gap-6 pb-16"> <div class="w-28 md:w-32 text-end pt-1 shrink-0">
<header class="relative sm:col-span-3 text-header font-semibold text-lg mt-1"> <header class="text-sm md:text-base font-semibold text-header">
<time datetime={experience.startDate} data-title={experience.startDate}> <time datetime={experience.startDate} data-title={experience.startDate}>
{startYear} {startYear}
</time> </time>
@@ -35,8 +35,13 @@ const experiences = ((await directus.request(
{endYear} {endYear}
</time> </time>
</header> </header>
<div class="relative flex flex-col sm:col-span-12 pb-6"> </div>
<div class="absolute bg-accent translate-x-[-1.71rem] rounded-full h-2 w-2 mt-3"/> <div class="relative last:after:hidden after:absolute after:top-6 after:-bottom-2 md:after:-bottom-4 after:inset-s-3.5 after:w-px after:translate-x-[-0.5px] after:bg-divider">
<div class="relative z-10 size-7 flex justify-center items-center">
<div class="size-2 rounded-full bg-accent"></div>
</div>
</div>
<div class="grow pt-0.5">
<h3> <h3>
<div <div
class="inline-flex items-center text-2xl leading-tight font-semibold" class="inline-flex items-center text-2xl leading-tight font-semibold"
@@ -78,6 +83,7 @@ const experiences = ((await directus.request(
</div> </div>
)} )}
{(experience.responsibilities || experience.achievements) && ( {(experience.responsibilities || experience.achievements) && (
<>
<div id={`hs-show-hide-collapse-heading-${index}`} class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-500"> <div id={`hs-show-hide-collapse-heading-${index}`} class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-500">
<div class="relative flex flex-col gap-4 pb-4"> <div class="relative flex flex-col gap-4 pb-4">
{experience.responsibilities && ( {experience.responsibilities && (
@@ -110,12 +116,11 @@ const experiences = ((await directus.request(
)} )}
</div> </div>
</div> </div>
<p class="mb-4"> <p class="mb-4">
<button <button
type="button" type="button"
class="hs-collapse-toggle inline-flex items-center gap-x-1 text-sm rounded-lg text-primary hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none" class="hs-collapse-toggle inline-flex items-center gap-x-1 text-sm rounded-lg text-primary hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none"
id="hs-show-hide-collapse" id={`hs-show-hide-collapse-${index}`}
aria-expanded="false" aria-expanded="false"
aria-controls={`hs-show-hide-collapse-heading-${index}`} aria-controls={`hs-show-hide-collapse-heading-${index}`}
data-hs-collapse={`#hs-show-hide-collapse-heading-${index}`} data-hs-collapse={`#hs-show-hide-collapse-heading-${index}`}
@@ -138,7 +143,8 @@ const experiences = ((await directus.request(
</svg> </svg>
</button> </button>
</p> </p>
</>
)}
<ul <ul
class="flex print:hidden flex-wrap gap-2" class="flex print:hidden flex-wrap gap-2"
aria-label="Technologies used" aria-label="Technologies used"
@@ -153,8 +159,6 @@ const experiences = ((await directus.request(
) )
})} })}
</ul> </ul>
)}
</div>
</div> </div>
</div> </div>
</li> </li>