[Sync] started on timeline and added improvements for utils

src/comps/Utils/HorizonalStack.svelte

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

src/comps/Utils/VerticalStack.svelte

@@ -1,4 +1,4 @@
 <!-- Just used for ease of read -->
-<div>
+<div style="padding: 0;">
     <slot></slot>
 </div>

src/comps/timeline/timeline.svelte

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

src/comps/timeline/timelineItem.svelte

@@ -10,8 +10,8 @@
     export let desc: string = "null";
 </script>
 
-<div>
-    <title>{title}</title>
+<li>
+    <span class="title">{title}</span>
     <HorizonalStack>
         {#if imagePath !== "null"}
             <Img src={imagePath}/>
@@ -20,8 +20,10 @@
             
         </VerticalStack>
     </HorizonalStack>
-</div>
+</li>
 
 <style>
-
+    .title {
+        font-size: 2.5rem;
+    }
 </style>

src/routes/zhen/+page.svelte

@@ -1,5 +1,13 @@
 <script lang="ts">
     import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
+    import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
+    import ZhenAboutMe from "./Comps/AboutMe.svelte"
 </script>
 
-<TopAnimatedBackground/>
+<Parallax sections={2} config={{ stiffness: 0.2, damping: 0.3 }}>
+    <TopAnimatedBackground/>
+    
+    <ParallaxLayer rate={0.5} offset={0.5} style="background-color: var(--background);">
+        <ZhenAboutMe/>
+    </ParallaxLayer>
+</Parallax>

src/routes/zhen/Comps/AboutMe.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import Timeline from "../../../comps/timeline/timeline.svelte";
+    import TimelineItem from "../../../comps/timeline/timelineItem.svelte";
+    import image from "/static/images/posts/folder-icons/cover.png"
+</script>
+
+<Timeline>
+    <TimelineItem 
+    date="[Date]" 
+    desc="[Date] Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+    title="[Title]"
+    imagePath={image}
+    />
+    <TimelineItem 
+    date="[Date]" 
+    desc="[Date] Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+    title="[Title]"
+    imagePath={image}
+    />
+</Timeline>

src/routes/zhen/Comps/TopAnimatedBackground.svelte

@@ -113,8 +113,8 @@
 
 <svelte:window on:mousemove={onMouseMoved} />
 
-<Parallax sections={2} config={{ stiffness: 0.2, damping: 0.3 }}>
-    <ParallaxLayer class="StartPageContainer" rate={0.25} offset={0} span={0}>
+
+<ParallaxLayer class="StartPageContainer" rate={0.25} offset={0} span={0}>
         <div
             class="StartPageAnimated"
             bind:this={StartPageAnimated}
@@ -132,10 +132,6 @@
         <TopNameTextPlate />
     </ParallaxLayer>
 
-    <ParallaxLayer rate={0.5} offset={0.5} style="background-color: var(--background);">
-    </ParallaxLayer>
-</Parallax>
-
 <!-- <div class="StartPageContainer">
     <div class="TopOverlay">
         <TopNameTextPlate/>