From e79408b9bc3436f90da909848a43e8189d666a72 Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Fri, 29 Mar 2024 16:26:02 +0100
Subject: [PATCH] Started on zhen portfolio with animation

---
 src/routes/portfolios/zhen.svelte |  4 ---
 src/routes/zhen/+page.svelte      | 44 +++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 4 deletions(-)
 delete mode 100644 src/routes/portfolios/zhen.svelte
 create mode 100644 src/routes/zhen/+page.svelte

diff --git a/src/routes/portfolios/zhen.svelte b/src/routes/portfolios/zhen.svelte
deleted file mode 100644
index 49f0bbf..0000000
--- a/src/routes/portfolios/zhen.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<script lang="ts">
-    
-</script>
-
diff --git a/src/routes/zhen/+page.svelte b/src/routes/zhen/+page.svelte
new file mode 100644
index 0000000..33d4fb9
--- /dev/null
+++ b/src/routes/zhen/+page.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    let mouseX = 0;
+    let mouseY = 0;
+
+    let StartPageAnimated: Element;
+
+    function handleMouseMove(event: MouseEvent) {
+        // Calculate the mouse position relative to the center of the div
+        const centerX = StartPageAnimated.clientWidth / 2;
+        const centerY = StartPageAnimated.clientHeight / 2;
+        
+        mouseX = event.clientX - StartPageAnimated.clientLeft - centerX;
+        mouseY = event.clientY - StartPageAnimated.clientTop - centerY;
+
+        //console.log(mouseX+"\n"+mouseY);
+    }
+
+
+</script>
+
+<div class="StartPageContainer" role="presentation" on:mousemove={handleMouseMove}>
+
+    <div class="StartPageAnimated" bind:this={StartPageAnimated} style="transform: translate({mouseX}px, {mouseY}px);">
+
+    </div>
+</div>
+
+<style>
+    .StartPageContainer{
+        height: 40vh;
+
+        background-color: burlywood;
+        overflow: hidden;
+    }
+
+    .StartPageAnimated{
+        background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$");
+        position: static;
+        height: 100vh;
+        height: 100vw;
+        
+        transition: all 1000ms cubic-bezier(0.16,1.63,0.01,0.99);
+    }
+</style>
\ No newline at end of file