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>

src/routes/+page.svelte

@@ -4,6 +4,7 @@
     import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
     import Button from '$lib/IO/Button.svelte';
     import { ButtonType } from '$lib/IO/ButtonType.ts';
+    import Timeline from '../comps/timeline/timeline.svelte';
 
     export let data; // <- contains post data
 
@@ -46,6 +47,8 @@
     </footer>
 </section>
 
+<Timeline/>
+
 <style>
     #news-section {
         display: flex;