Added timeline component to website

src/timeline.svelte

@@ -0,0 +1,56 @@
+<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>
+				<TimelineDot style={`background-color: var(--cyan); border-color: var(--bg-grad);`} />
+				<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;
+	}
+	.content-title {
+		margin: 0;
+		padding: 0;
+	}
+
+	.content-description {
+		margin: 0;
+		padding: 0;
+		margin-top: 1rem;
+		color: var(--foreground);
+		font-weight: lighter;
+		padding: 0.5rem 0;
+	}
+</style>