Added timeline component to website

src/main.svelte

@@ -3,8 +3,10 @@
 	import { Toast, ToastType } from "$lib/toast";
     import { addToast } from "$lib/store";
 
-    import Card from './Card.svelte';
-    import Modal from './Modal.svelte';
+    import Card from '$lib/components/Card.svelte';
+    import Modal from '$lib/components/Modal.svelte';
+
+    import Timeline from "./timeline.svelte";
 
 	let showModal: boolean = false;
     let activeModal: any = null;
@@ -76,7 +78,7 @@
     }
 
     /* Skills Cards CSS */
-    .skills-container {
+    .container {
         padding-top: 3em;
         max-width: 90%;
         margin: auto;
@@ -112,7 +114,7 @@
         </div>
     </div>
 
-    <div class="skills-container">
+    <div class="container">
         <h1>Skills</h1>
         <hr />
         <div class="cards">
@@ -135,6 +137,12 @@
         </div>
     </div>
 
+    <div class="container">
+        <h1>Experience</h1>
+        <hr />
+        <Timeline timelineData="{info.timeline}"></Timeline>
+    </div>
+
     <div style="display: none;">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 4000))}</div>
     <div style="display: none;">{addToast(new Toast("Welcome!", ToastType.Success, true, 3000))}</div>
 {:catch}