Started on timeline

src/comps/Utils/HorizonalStack.svelte

@@ -0,0 +1,10 @@
+<div class="flex-start">
+    <slot></slot>
+</div>
+
+<style>
+    .flex-start{
+        display: flex;
+        justify-items: start;
+    }
+</style>

src/comps/Utils/VerticalStack.svelte

@@ -0,0 +1,4 @@
+<!-- Just used for ease of read -->
+<div>
+    <slot></slot>
+</div>

src/comps/timeline/timeline.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import TimelineItem from "./timelineItem.svelte";
+
+</script>
+
+<ul>
+    {#each {length: 3} as _, i}
+    <li>
+        <TimelineItem title="Item {i}"/>
+    </li>
+    {/each}
+</ul>

src/comps/timeline/timelineItem.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import HorizonalStack from "../Utils/HorizonalStack.svelte";
+    import Img from '@zerodevx/svelte-img'
+    import VerticalStack from "../Utils/VerticalStack.svelte";
+
+    // Set these when using the component
+    export let date: string = "null";
+    export let imagePath: string = "null";
+    export let title: string = "null";
+    export let desc: string = "null";
+</script>
+
+<div>
+    <title>{title}</title>
+    <HorizonalStack>
+        {#if imagePath !== "null"}
+            <Img src={imagePath}/>
+        {/if}
+        <VerticalStack>
+            
+        </VerticalStack>
+    </HorizonalStack>
+</div>
+
+<style>
+
+</style>