Started on zhen portfolio with animation

src/routes/portfolios/zhen.svelte

@@ -1,4 +0,0 @@
-<script lang="ts">
-    
-</script>
-

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>