diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5667969..336effd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,291 +1,319 @@
 <!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
 <script lang="ts">
-    import "../app.css";
-    import { fly } from 'svelte/transition';
-    import MediaQuery from 'svelte-media-queries';
-    import { Dices } from "@lucide/svelte";
-    let hideOnPrint: boolean;
+  import "../app.css";
+  import { fly } from "svelte/transition";
+  import MediaQuery from "svelte-media-queries";
+  import { Dices } from "@lucide/svelte";
+  let hideOnPrint: boolean;
 
-    let { children } = $props();
+  let { children } = $props();
 
-    import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
-    import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
+  import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
+  import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
 
-    const footerCollapseThreshold : string = '1000px';
-    const headerCollapseThreshold : string = '1000px';
-    let footerCollapse : boolean;
-    let isMobile : boolean = $state(false);
+  const footerCollapseThreshold: string = "1000px";
+  const headerCollapseThreshold: string = "1000px";
+  let footerCollapse: boolean;
+  let isMobile: boolean = $state(false);
 
-    let navbarHidden : boolean = $state(true);
+  let navbarHidden: boolean = $state(true);
 
-    function resetNavBar() {
-        navbarHidden = true;
+  function resetNavBar() {
+    navbarHidden = true;
+  }
+
+  import { afterNavigate } from "$app/navigation";
+  afterNavigate(() => {
+    const params = new URLSearchParams(window.location.search);
+    hideOnPrint = params.get("hideOnPrint") === "1";
+    //console.log(hideOnPrint);
+  });
+
+  import { onMount } from "svelte";
+  import Zooter from "./comps/Zooter.svelte";
+
+  onMount(async () => {
+    const lock = document.createElement("meta");
+    lock.name = "darkreader-lock";
+    document.head.appendChild(lock);
+  });
+
+  function nextTheme() {
+    let theme: string | null = null;
+
+    if (typeof localStorage !== "undefined") {
+      theme = localStorage.getItem("theme");
     }
 
-    import { afterNavigate } from '$app/navigation';
-    afterNavigate(() => {
-        const params = new URLSearchParams(window.location.search);
-        hideOnPrint = params.get('hideOnPrint') === '1';
-        //console.log(hideOnPrint);
-    });
-
-    import { onMount } from 'svelte';
-    import Zooter from "./comps/Zooter.svelte";
-    
-    onMount(async () => {
-        const lock = document.createElement('meta');
-        lock.name = 'darkreader-lock';
-        document.head.appendChild(lock);
-    });
-
-    function nextTheme(){
-        let theme: string | null = null;
-
-        if (typeof localStorage !== 'undefined') {
-            theme = localStorage.getItem('theme');
-        }
-
-        const themesArr = (window as any).AvailableThemes;
-        let nextTheme = "dark";
-        if (theme == "null" || theme == "undefined" || theme == undefined || theme == null){
-
-        } else {
-            nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
-        }
-
-        console.log("Slecting: " + nextTheme);
-        document.documentElement.setAttribute('data-theme', nextTheme);
-        localStorage.setItem('theme', nextTheme);
+    const themesArr = (window as any).AvailableThemes;
+    let nextTheme = "dark";
+    if (
+      theme == "null" ||
+      theme == "undefined" ||
+      theme == undefined ||
+      theme == null
+    ) {
+    } else {
+      nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
     }
 
-    
+    console.log("Slecting: " + nextTheme);
+    document.documentElement.setAttribute("data-theme", nextTheme);
+    localStorage.setItem("theme", nextTheme);
+  }
 </script>
 
 {#snippet SwitchThemeButton()}
-<div class="tooltip tooltip-bottom grid place-content-center" data-tip="Switch theme">
-    <button class="cursor-pointer" onclick={nextTheme}> <Dices/></button>
-</div>
+  <div
+    class="tooltip tooltip-bottom grid place-content-center"
+    data-tip="Switch theme"
+  >
+    <button class="cursor-pointer" onclick={nextTheme}> <Dices /></button>
+  </div>
 {/snippet}
 
 <!-- Detect mobile -->
-<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
-<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
+<MediaQuery
+  query="(max-width: {footerCollapseThreshold})"
+  bind:matches={footerCollapse}
+/>
+<MediaQuery
+  query="(max-width: {headerCollapseThreshold})"
+  bind:matches={isMobile}
+/>
 
 <!-- Nav bar -->
 <div class="bg-base-200 p-0">
-    <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
-        <div class="nav-bar pr-4">
-            {#if !isMobile}
-                <div class="desktop">
-                    <a href="/" class="nav-head">
-                        <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
-                        <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
-                    </a>
-                    <div class="nav-spacer" />
+  <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
+    <div class="nav-bar pr-4">
+      {#if !isMobile}
+        <div class="desktop">
+          <a href="/" class="nav-head">
+            <DeprivedLogo
+              Class="fill-base-content p-2"
+              Style="width: 3.5rem; height: auto;"
+            />
+            <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
+          </a>
+          <div class="nav-spacer" />
 
-                    <!-- <a href="/">Home</a> -->
-                    <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
+          <!-- <a href="/">Home</a> -->
+          <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
 
-                    {@render SwitchThemeButton()}
-                    
-                    <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a>
-                    <a href="/tools" style="width: 7.5rem;">Tools</a>
-                    <a href="https://botalex.itch.io/" target="_blank">Games</a>
-                    <!-- <a href="/posts">Blog</a>
+          {@render SwitchThemeButton()}
+
+          <a
+            href="/zhen/cv/rev2?hideOnPrint=1"
+            target="_blank"
+            style="width: 7.5rem;">Zhen CV</a
+          >
+          <a href="/tools" style="width: 7.5rem;">Tools</a>
+          <a href="https://botalex.itch.io/" target="_blank">Games</a>
+          <!-- <a href="/posts">Blog</a>
                     <a href="/about">About</a> -->
-                </div>
-            {:else}
-                <div class="collapsed shadow-xl">
-                    <a onclick={resetNavBar} href="/" class="nav-head">
-                        <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
-                        <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
-                    </a>
-                    <div class="nav-spacer" />
-                    {@render SwitchThemeButton()}
-                    <div class="px-1"></div>
-                    <button id="toggle-nav" onclick={() => {navbarHidden = !navbarHidden; console.log(navbarHidden);}}>
-                        <HamburgerMenuIcon Class="fill-base-content"/>
-                    </button>
-                </div>
-                {#if !navbarHidden}
-                <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
-                    <!-- <a onclick={resetNavBar} href="/">Home</a> -->
-                    <a onclick={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
-                    <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
-                        <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
-                        <a onclick={resetNavBar} href="/about">About</a> -->
-                    </div>
-                {/if}
-            {/if}
         </div>
-    </header>
-    
-    <!-- Page content -->
-    {@render children?.()}
+      {:else}
+        <div class="collapsed shadow-xl">
+          <a onclick={resetNavBar} href="/" class="nav-head">
+            <DeprivedLogo
+              Class="fill-base-content p-2"
+              Style="width: 3.5rem; height: auto;"
+            />
+            <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
+          </a>
+          <div class="nav-spacer" />
+          {@render SwitchThemeButton()}
+          <div class="px-1"></div>
+          <button
+            id="toggle-nav"
+            onclick={() => {
+              navbarHidden = !navbarHidden;
+              console.log(navbarHidden);
+            }}
+          >
+            <HamburgerMenuIcon Class="fill-base-content" />
+          </button>
+        </div>
+        {#if !navbarHidden}
+          <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
+            <!-- <a onclick={resetNavBar} href="/">Home</a> -->
+            <a
+              onclick={resetNavBar}
+              href="https://botalex.itch.io/"
+              target="_blank">Games</a
+            >
+            <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
+            <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
+                        <a onclick={resetNavBar} href="/about">About</a> -->
+          </div>
+        {/if}
+      {/if}
+    </div>
+  </header>
 
-    <Zooter bind:hideOnPrint/>
+  <!-- Page content -->
+  {@render children?.()}
+
+  <Zooter bind:hideOnPrint />
 </div>
 
-
-<style lang="scss">
-    /* Nav bar. */
-    header {
-        display: flex;
-        justify-content: center;
-    }
-
-    header a {
-        text-decoration: none;
-    }
-
-    .nav-bar {
-        width: 100%;
-        max-width: 1400px;
-    }
-
-    .desktop {
-        width: 100%;
-        display: flex;
-        gap: 30px;
-    }
-
-    .collapsed {
-        width: 100%;
-        display: flex;
-    }
-
-    #toggle-nav {
-        background: transparent;
-        border: none;
-    }
-
-
-    .nav-list {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-
-        align-items: center;
-    }
-
-    .nav-head {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-    }
-
-    #logo-link {
-        width: 64px;
-        aspect-ratio: 1 / 1;
-    }
-
-    #logo-text {
-        font-size: 24px;
-        color: oklch(var(--bc));
-        font-family: var(--title-font);
-        margin: 0;
-
-        min-width: 200px;
-    }
-
-    .nav-spacer {
-        width: 100%;
-    }
-
-    header a {
-        display: flex;
-        align-items: center;
-
-        font-size: 22px;
-        font-family: var(--title-font);
-        // Text color
-        color: oklch(var(--bc));
-    }
-
-    /* Footer. */
-    footer {
-        margin-top: 50px;
-        padding: 25px 0;
-        background-color: oklch(var(--b3));
-
-        height: 100%;
-
-        display: flex;
-        justify-content: center;
-    }
-
-    .about-container {
-        width: 80%;
-        height: 100%;
-
-        color: oklch(var(--bc));
-
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-evenly;
-
-        & h3 {
-            font-size: larger;
-        }
-    }
-
-    .about-container > div {
-        align-items: center;
-        text-align: center;
-    }
-
-    .credits {
-        line-height: 2;
-    }
-
-    .contact {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .social {
-        display: flex;
-        align-content: center;
-        gap: 10px;
-    }
-
-    .social > img {
-        width: 24px;
-    }
-
-    footer h3 {
-        margin-top: 0px;
-        color: var(--text2);
-    }
-
-    footer a {
-        color: var(--text2);
-        text-decoration-line: underline;
-    }
-
-    a:hover {
-        filter: brightness(130%);
-    }
-
-    @media print {
-    .hide-on-print {
-        display: none;
-    }
-}
-</style>
-
 {#if footerCollapse}
-    <style>
-        .about-container {
-            flex-direction: column;
-            justify-content: center !important;
-            gap: 25px;
-        }
-    </style>
+  <style>
+    .about-container {
+      flex-direction: column;
+      justify-content: center !important;
+      gap: 25px;
+    }
+  </style>
 {/if}
 
 {#if isMobile}
-    <style>
-
-    </style>
+  <style>
+  </style>
 {/if}
+
+<style lang="scss">
+  /* Nav bar. */
+  header {
+    display: flex;
+    justify-content: center;
+  }
+
+  header a {
+    text-decoration: none;
+  }
+
+  .nav-bar {
+    width: 100%;
+    max-width: 1400px;
+  }
+
+  .desktop {
+    width: 100%;
+    display: flex;
+    gap: 30px;
+  }
+
+  .collapsed {
+    width: 100%;
+    display: flex;
+  }
+
+  #toggle-nav {
+    background: transparent;
+    border: none;
+  }
+
+  .nav-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    align-items: center;
+  }
+
+  .nav-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  #logo-link {
+    width: 64px;
+    aspect-ratio: 1 / 1;
+  }
+
+  #logo-text {
+    font-size: 24px;
+    color: oklch(var(--bc));
+    font-family: var(--title-font);
+    margin: 0;
+
+    min-width: 200px;
+  }
+
+  .nav-spacer {
+    width: 100%;
+  }
+
+  header a {
+    display: flex;
+    align-items: center;
+
+    font-size: 22px;
+    font-family: var(--title-font);
+    // Text color
+    color: oklch(var(--bc));
+  }
+
+  /* Footer. */
+  footer {
+    margin-top: 50px;
+    padding: 25px 0;
+    background-color: oklch(var(--b3));
+
+    height: 100%;
+
+    display: flex;
+    justify-content: center;
+  }
+
+  .about-container {
+    width: 80%;
+    height: 100%;
+
+    color: oklch(var(--bc));
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+
+    & h3 {
+      font-size: larger;
+    }
+  }
+
+  .about-container > div {
+    align-items: center;
+    text-align: center;
+  }
+
+  .credits {
+    line-height: 2;
+  }
+
+  .contact {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .social {
+    display: flex;
+    align-content: center;
+    gap: 10px;
+  }
+
+  .social > img {
+    width: 24px;
+  }
+
+  footer h3 {
+    margin-top: 0px;
+    color: var(--text2);
+  }
+
+  footer a {
+    color: var(--text2);
+    text-decoration-line: underline;
+  }
+
+  a:hover {
+    filter: brightness(130%);
+  }
+
+  @media print {
+    .hide-on-print {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/routes/comps/Zooter.svelte b/src/routes/comps/Zooter.svelte
index a27855c..589bd3c 100644
--- a/src/routes/comps/Zooter.svelte
+++ b/src/routes/comps/Zooter.svelte
@@ -1,268 +1,260 @@
 <script lang="ts">
-    import svelteLogo from "$lib/svelteLogos/svelte-logo.png";
-    import { browser } from "$app/environment";
-    import { onDestroy, onMount } from "svelte";
-    import { ArrowBigDown } from "lucide-svelte";
-    import { fly } from "svelte/transition";
-    const buildTime = __BUILD_TIME__;
+  import svelteLogo from "$lib/svelteLogos/svelte-logo.png";
+  import { browser } from "$app/environment";
+  import { onDestroy, onMount } from "svelte";
+  import { ArrowBigDown } from "lucide-svelte";
+  import { fly } from "svelte/transition";
+  const buildTime = __BUILD_TIME__;
 
-    let scrollY = 0;
-    const unscrollSpeed = 100;
-    let unscrollScrollDiv: HTMLDivElement;
-    let totalScroll = 0;
+  let scrollY = 0;
+  const unscrollSpeed = 100;
+  let unscrollScrollDiv: HTMLDivElement;
+  let totalScroll = 0;
 
-    let unscrollInterval: number | undefined = undefined;
-    let lastScrollTime = 0; // Used to have delay before unscrolling
-    let isBeingTouched = false; // Phone support
-    const unscrollDelay = 100;
+  let unscrollInterval: number | undefined = undefined;
+  let lastScrollTime = 0; // Used to have delay before unscrolling
+  let isBeingTouched = false; // Phone support
+  const unscrollDelay = 100;
 
-    let isLeavingAnimating = false;
+  let isLeavingAnimating = false;
 
-    // prevent direct scroll
-    let notFirstScroll = false;
+  // prevent direct scroll
+  let notFirstScroll = false;
 
-    let tranisitionOverlay: HTMLElement;
+  let tranisitionOverlay: HTMLElement;
 
-    // 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;
+  // 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;
-        }
+    if (duration <= 0) {
+      window.scrollTo(0, targetY);
+      return;
+    }
 
-        let startTime: number | null = null;
+    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);
+    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;
+      // 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);
-            }
-        }
+      window.scrollTo(0, startY + diff * ease);
 
+      if (time < duration) {
         requestAnimationFrame(step);
+      }
     }
 
-    // Out animation:
-    function flyInFromTop(
-        node: HTMLElement,
-        {
-            y = -window.innerHeight,
-            duration = 400,
-            opacity = 0,
-        }: { y?: number; duration?: number; opacity?: number } = {},
-    ) {
-        const {
-            delay = 0,
-            duration: d,
-            easing = (t) => t,
-            css,
-        } = fly(node, { y, duration: d, opacity });
+    requestAnimationFrame(step);
+  }
 
-        let start: number;
-        function step(now: number) {
-            if (!start) start = now;
-            const elapsed = now - start - delay;
-            if (elapsed < 0) return requestAnimationFrame(step);
-            const t = Math.min(elapsed / d, 1);
-            if (css) node.style.cssText = css(easing(t), 1 - easing(t));
-            if (elapsed < d) requestAnimationFrame(step);
-        }
-        requestAnimationFrame(step);
+  // Out animation:
+  function flyInFromTop(
+    node: HTMLElement,
+    {
+      y = -window.innerHeight,
+      duration = 400,
+      opacity = 0,
+    }: { y?: number; duration?: number; opacity?: number } = {},
+  ) {
+    const {
+      delay = 0,
+      duration: d,
+      easing = (t) => t,
+      css,
+    } = fly(node, { y, duration: d, opacity });
+
+    let start: number;
+    function step(now: number) {
+      if (!start) start = now;
+      const elapsed = now - start - delay;
+      if (elapsed < 0) return requestAnimationFrame(step);
+      const t = Math.min(elapsed / d, 1);
+      if (css) node.style.cssText = css(easing(t), 1 - easing(t));
+      if (elapsed < d) requestAnimationFrame(step);
     }
+    requestAnimationFrame(step);
+  }
 
-    onMount(() => {
-        totalScroll =
-            document.documentElement.scrollHeight - window.innerHeight;
+  onMount(() => {
+    return; // Fuck this, I'm too lazy to fix this atm
+    totalScroll = document.documentElement.scrollHeight - window.innerHeight;
 
-        unscrollInterval = setInterval(() => {
-            // Prevents scroll to bottom on first try
-            if (
-                !notFirstScroll &&
-                scrollY > totalScroll - unscrollScrollDiv.scrollHeight
-            ) {
-                smoothScrollTo(
-                    totalScroll - unscrollScrollDiv.scrollHeight * 1.1,
-                    0,
-                );
+    unscrollInterval = setInterval(() => {
+      // 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);
-            }
+        // 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;
-            }
+      // 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) {
-                smoothScrollTo(
-                    totalScroll - unscrollScrollDiv.scrollHeight,
-                    200,
-                );
-            }
+      if (totalScroll - unscrollScrollDiv.scrollHeight < scrollY) {
+        smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight, 200);
+      }
 
-            if (totalScroll <= scrollY) {
-                console.log("Hit!");
-                // isLeavingAnimating = true;
-                flyInFromTop(tranisitionOverlay, { duration: 800 });
-            }
-        }, 10);
-    });
+      if (totalScroll <= scrollY) {
+        console.log("Hit!");
+        // isLeavingAnimating = true;
+        flyInFromTop(tranisitionOverlay, { duration: 800 });
+      }
+    }, 10);
+  });
 
-    function onScroll() {
-        lastScrollTime = Date.now();
-        // console.log("scroll");
-    }
+  function onScroll() {
+    lastScrollTime = Date.now();
+    // console.log("scroll");
+  }
 
-    function onResize() {
-        totalScroll =
-            document.documentElement.scrollHeight - window.innerHeight;
-    }
+  function onResize() {
+    totalScroll = document.documentElement.scrollHeight - window.innerHeight;
+  }
 
-    onDestroy(() => {
-        clearInterval(unscrollInterval);
-    });
+  onDestroy(() => {
+    clearInterval(unscrollInterval);
+  });
 
-    export let hideOnPrint: boolean;
+  export let hideOnPrint: boolean;
 </script>
 
 <svelte:window
-    bind:scrollY
-    on:scroll={() => {
-        onScroll();
-    }}
-    on:touchstart={() => {
-        isBeingTouched = true;
-    }}
-    on:touchend={() => {
-        isBeingTouched = false;
-    }}
-    on:resize={onResize}
+  bind:scrollY
+  on:scroll={() => {
+    onScroll();
+  }}
+  on:touchstart={() => {
+    isBeingTouched = true;
+  }}
+  on:touchend={() => {
+    isBeingTouched = false;
+  }}
+  on:resize={onResize}
 />
 
 <div class="w-full">
-    <!-- Keep scrolling thing -->
-    <div
-        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>
+  <!-- Keep scrolling thing -->
+  <div class="hidden 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"
-        bind:this={unscrollScrollDiv}
-    >
-        <img
-            src="/images/memes/WhatDaDog.png"
-            class="w-32 h-32 object-contain"
-            alt="da dog"
-        />
-    </div>
+  <div
+    class="hidden h-64 w-full flex flex-col justify-end items-center"
+    bind:this={unscrollScrollDiv}
+  >
+    <img
+      src="/images/memes/WhatDaDog.png"
+      class="w-32 h-32 object-contain"
+      alt="da dog"
+    />
+  </div>
 
-    <!-- About footer -->
-    <div
-        class="{hideOnPrint
-            ? 'hide-on-print'
-            : ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
-    >
-        <div class="flex justify-center">
-            <div class="grid gap-8 sm:grid-cols-3 items-center w-full">
-                <div class="flex flex-col items-center">
-                    <span class="font-bold">© 2023-2025</span>
-                    <br />
-                    <span>Benjamin Dreyer</span>
-                    <br />
-                    <span>Oliver Schwenger</span>
-                    <br />
-                    <span>Sylvester Junge</span>
-                    <br />
-                    <span>Snorre Ettrup Altschul</span>
-                    <br />
-                    <span>Zhentao Wei</span>
-                </div>
-                <div class="flex flex-col items-center">
-                    <h3><b>About this website</b></h3>
-                    <!-- <a href="/" target="_blank">Recursion</a> -->
-                    <div class="flex justify-center">
-                        This website was made using <a
-                            class="grid place-content-center"
-                            target="_blank"
-                            href="https://kit.svelte.dev/"
-                        >
-                            <img
-                                class="pl-2"
-                                src={svelteLogo}
-                                style="height: 1.5rem;"
-                                alt="SvelteKit logo"
-                            /></a
-                        >
-                    </div>
-                    <span
-                        >Website <a
-                            href="https://git.spoodythe.one/sveske-juice/deprived-main-website"
-                            target="_blank">source code</a
-                        ></span
-                    >
-                </div>
-                <div class="flex flex-col items-center">
-                    <h3><b>Contact</b></h3>
-                    <a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
-                    <div class="mt-2"></div>
-                    <a
-                        href="https://discord.gg/awatEEqc3M"
-                        target="_blank"
-                        class="social"
-                    >
-                        <!-- <span>Discord</span> -->
-                        <img
-                            src="/images/icons/discord.svg"
-                            class="w-8 h-8 object-contain"
-                            alt="Discord"
-                        />
-                    </a>
-                </div>
-            </div>
+  <!-- About footer -->
+  <div
+    class="{hideOnPrint
+      ? 'hide-on-print'
+      : ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
+  >
+    <div class="flex justify-center">
+      <div class="grid gap-8 sm:grid-cols-3 items-center w-full">
+        <div class="flex flex-col items-center">
+          <span class="font-bold">© 2023-2025</span>
+          <br />
+          <span>Benjamin Dreyer</span>
+          <br />
+          <span>Oliver Schwenger</span>
+          <br />
+          <span>Sylvester Junge</span>
+          <br />
+          <span>Snorre Ettrup Altschul</span>
+          <br />
+          <span>Zhentao Wei</span>
         </div>
-        <div
-            class="flex w-full justify-center border-t border-base-100 border-dashed"
-        >
-            Last build: {buildTime} (+2 UTC)
+        <div class="flex flex-col items-center">
+          <h3><b>About this website</b></h3>
+          <!-- <a href="/" target="_blank">Recursion</a> -->
+          <div class="flex justify-center">
+            This website was made using <a
+              class="grid place-content-center"
+              target="_blank"
+              href="https://kit.svelte.dev/"
+            >
+              <img
+                class="pl-2"
+                src={svelteLogo}
+                style="height: 1.5rem;"
+                alt="SvelteKit logo"
+              /></a
+            >
+          </div>
+          <span
+            >Website <a
+              href="https://git.spoodythe.one/sveske-juice/deprived-main-website"
+              target="_blank">source code</a
+            ></span
+          >
         </div>
+        <div class="flex flex-col items-center">
+          <h3><b>Contact</b></h3>
+          <a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
+          <div class="mt-2"></div>
+          <a
+            href="https://discord.gg/awatEEqc3M"
+            target="_blank"
+            class="social"
+          >
+            <!-- <span>Discord</span> -->
+            <img
+              src="/images/icons/discord.svg"
+              class="w-8 h-8 object-contain"
+              alt="Discord"
+            />
+          </a>
+        </div>
+      </div>
     </div>
+    <div
+      class="flex w-full justify-center border-t border-base-100 border-dashed"
+    >
+      Last build: {buildTime} (+2 UTC)
+    </div>
+  </div>
 </div>
 
 <div
-    bind:this={tranisitionOverlay}
-    class="{isLeavingAnimating
-        ? ''
-        : 'hidden'} fixed top-0 left-0 w-screen h-screen bg-base-200"
+  bind:this={tranisitionOverlay}
+  class="{isLeavingAnimating
+    ? ''
+    : 'hidden'} fixed top-0 left-0 w-screen h-screen bg-base-200"
 ></div>
 <!-- {#if isLeavingAnimating}
 {/if} -->