scroll thingy good. now animation

src/routes/comps/Zooter.svelte

@@ -2,6 +2,7 @@
     import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
     import { browser } from '$app/environment';
     import { onDestroy, onMount } from "svelte";
+    import { ArrowBigDown } from "lucide-svelte";
     const buildTime = __BUILD_TIME__;
     
     let scrollY = 0;
@@ -11,20 +12,74 @@
     
     let unscrollInterval: number |undefined = undefined;
     let lastScrollTime = 0; // Used to have delay before unscrolling
-    const unscrollDelay = 2000;
+    let isBeingTouched = false; // Phone support
+    const unscrollDelay = 100;
+
+    // prevent direct scroll
+    let notFirstScroll = false;
+
+
+    // Function with more scroll control, by chatgpt
+    function smoothScrollTo(targetY: number, duration: number = 500): void {
+        const startY: number = window.scrollY;
+        const diff: number = targetY - startY;
+
+        if (duration <= 0) {
+            window.scrollTo(0, targetY);
+            return;
+        }
+
+        let startTime: number | null = null;
+
+        function step(timestamp: number): void {
+            if (startTime === null) startTime = timestamp;
+            const time = timestamp - startTime;
+            const percent = Math.min(time / duration, 1);
+
+            // easeInOutQuad easing
+            const ease = percent < 0.5
+            ? 2 * percent * percent
+            : -1 + (4 - 2 * percent) * percent;
+
+            window.scrollTo(0, startY + diff * ease);
+
+            if (time < duration) {
+            requestAnimationFrame(step);
+            }
+        }
+
+        requestAnimationFrame(step);
+    }
+
 
     onMount(()=>{
         totalScroll = document.documentElement.scrollHeight - window.innerHeight
 
         unscrollInterval = setInterval(() => {
-            console.log("Time with delay: " + (Date.now() - -unscrollDelay) + " Other " + lastScrollTime);
-            if (Date.now() < lastScrollTime - -unscrollDelay){
-                console.log("nah");
+
+            // Prevents scroll to bottom on first try
+            if (!notFirstScroll && scrollY > totalScroll - unscrollScrollDiv.scrollHeight){
+                smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight*1.1, 0);
+
+                // Allow further scroll after delay
+                setTimeout(() => {
+                    notFirstScroll = true;
+                }, 1000);
+            }
+
+            // console.log("Time with delay: " + (Date.now() - -unscrollDelay) + " Other " + lastScrollTime);
+            // console.log(isBeingTouched);
+            if (!notFirstScroll || isBeingTouched || Date.now() < lastScrollTime - -unscrollDelay){
+                // console.log("nah");
                 return
             }
 
             if(totalScroll - unscrollScrollDiv.scrollHeight < scrollY) {
-                window.scrollTo({ top: Math.max(scrollY - unscrollSpeed, totalScroll - unscrollScrollDiv.scrollHeight), behavior: 'smooth' });
+                smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight, 200);
+            }
+
+            if (totalScroll <= scrollY){
+                console.log("Hit!");
             }
         }, 10);
     });
@@ -34,6 +89,10 @@
         // console.log("scroll");
     }
 
+    function onResize(){
+        totalScroll = document.documentElement.scrollHeight - window.innerHeight
+    }
+
     onDestroy(()=>{
         clearInterval(unscrollInterval);
     });
@@ -41,12 +100,28 @@
     export let hideOnPrint: boolean;
 </script>
 
-<svelte:window bind:scrollY on:scroll={()=>{onScroll();}} on:touchmove={()=>{onScroll();}}/>
+<svelte:window bind:scrollY on:scroll={()=>{onScroll();}} 
+    on:touchstart={()=>{isBeingTouched = true}}
+    on:touchend={()=>{isBeingTouched = false}}
+    on:resize={onResize}
+    />
 
 <div class="w-full">
     <!-- Keep scrolling thing -->
-    <div bind:this={unscrollScrollDiv} class="h-64 w-full">
+    <div bind:this={unscrollScrollDiv} class="h-64 w-full flex flex-col justify-center items-center">
+        <div>
+            Keep scrolling to veiw Zhen's portfolio site!
+        </div>
+        <div class="flex justify-center">
+            <ArrowBigDown />
+            <ArrowBigDown />
+            <ArrowBigDown />
+            <ArrowBigDown />
+        </div>
+    </div>
 
+    <div class="h-64 w-full flex flex-col justify-end items-center">
+       <img src="/images/memes/WhatDaDog.png" class="w-32 h-32 object-contain" alt="da dog"> 
     </div>
 
     <!-- About footer -->