From 172c49f72e037147b0d54256d855f52a8cd4ee2a Mon Sep 17 00:00:00 2001
From: BOT Alex <44818698+MagicBOTAlex@users.noreply.github.com>
Date: Tue, 2 Apr 2024 20:20:38 +0200
Subject: [PATCH] [Sync] started on timeline and added improvements for utils

---
 src/comps/Utils/HorizonalStack.svelte         | 15 ++++++++++++--
 src/comps/Utils/VerticalStack.svelte          |  2 +-
 src/comps/timeline/timeline.svelte            | 20 +++++++++++--------
 src/comps/timeline/timelineItem.svelte        | 10 ++++++----
 src/routes/zhen/+page.svelte                  | 10 +++++++++-
 src/routes/zhen/Comps/AboutMe.svelte          | 20 +++++++++++++++++++
 .../zhen/Comps/TopAnimatedBackground.svelte   |  8 ++------
 7 files changed, 63 insertions(+), 22 deletions(-)
 create mode 100644 src/routes/zhen/Comps/AboutMe.svelte

diff --git a/src/comps/Utils/HorizonalStack.svelte b/src/comps/Utils/HorizonalStack.svelte
index 2fa1931..b5cc04b 100644
--- a/src/comps/Utils/HorizonalStack.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/comps/Utils/VerticalStack.svelte b/src/comps/Utils/VerticalStack.svelte
index 474252a..7b9e06d 100644
--- a/src/comps/Utils/VerticalStack.svelte
+++ b/src/comps/Utils/VerticalStack.svelte
@@ -1,4 +1,4 @@
 <!-- Just used for ease of read -->
-<div>
+<div style="padding: 0;">
     <slot></slot>
 </div>
\ No newline at end of file
diff --git a/src/comps/timeline/timeline.svelte b/src/comps/timeline/timeline.svelte
index 95405ac..1302842 100644
--- a/src/comps/timeline/timeline.svelte
+++ b/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>
\ No newline at end of file
+<HorizonalStack>
+    <ul>
+        <!-- {#each {length: 3} as _, i}
+        <li>
+            <TimelineItem title="Item {i}"/>
+        </li>
+        {/each} -->
+
+        <slot/>
+    </ul>
+</HorizonalStack>
\ No newline at end of file
diff --git a/src/comps/timeline/timelineItem.svelte b/src/comps/timeline/timelineItem.svelte
index 3cdf13d..677ff4a 100644
--- a/src/comps/timeline/timelineItem.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/zhen/+page.svelte b/src/routes/zhen/+page.svelte
index f21056c..9085eb0 100644
--- a/src/routes/zhen/+page.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/zhen/Comps/AboutMe.svelte b/src/routes/zhen/Comps/AboutMe.svelte
new file mode 100644
index 0000000..dfd97f5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/zhen/Comps/TopAnimatedBackground.svelte b/src/routes/zhen/Comps/TopAnimatedBackground.svelte
index 72ec3aa..f2adbca 100644
--- a/src/routes/zhen/Comps/TopAnimatedBackground.svelte
+++ b/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/>