63 lines
1.7 KiB
Svelte
63 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
export let timelineData: any;
|
|
|
|
import Timeline from '$lib/components/timeline/Timeline.svelte';
|
|
import TimelineItem from '$lib/components/timeline/TimelineItem.svelte';
|
|
import TimelineSeparator from '$lib/components/timeline/TimelineSeparator.svelte';
|
|
import TimelineDot from '$lib/components/timeline/TimelineDot.svelte';
|
|
import TimelineConnector from '$lib/components/timeline/TimelineConnector.svelte';
|
|
import TimelineContent from '$lib/components/timeline/TimelineContent.svelte';
|
|
import TimelineOppositeContent from '$lib/components/timeline/TimelineOppositeContent.svelte';
|
|
</script>
|
|
|
|
<Timeline
|
|
position="alternate"
|
|
style={`
|
|
border-radius: 3%;
|
|
padding: 1rem;
|
|
`}
|
|
>
|
|
{#each timelineData as item}
|
|
<TimelineItem>
|
|
<TimelineOppositeContent slot="opposite-content">
|
|
<p class="oposite-content-title">{item.duration}</p>
|
|
</TimelineOppositeContent>
|
|
|
|
<TimelineSeparator>
|
|
{#if item.duration.includes('Present') || !item.duration.includes('-')}
|
|
<div class="elementToFadeInAndOut">
|
|
<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
|
|
</div>
|
|
{:else}
|
|
<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
|
|
{/if}
|
|
<TimelineConnector />
|
|
</TimelineSeparator>
|
|
<TimelineContent>
|
|
<h3 class="content-title">{item.title}</h3>
|
|
<p class="content-description">{@html item.description}</p>
|
|
</TimelineContent>
|
|
</TimelineItem>
|
|
{/each}
|
|
</Timeline>
|
|
|
|
<style>
|
|
.oposite-content-title {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--bg-grad-2);
|
|
}
|
|
.content-title {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.content-description {
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-top: 1rem;
|
|
color: var(--fg);
|
|
font-weight: lighter;
|
|
padding: 0.5rem 0;
|
|
}
|
|
</style> |