Added a name plate for me

src/routes/zhen/+page.svelte

@@ -1,82 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-
-    // Params
-    let mouseMoveDevider = 1.5;
-
-    // Site variables
-    let mouseX = 0;
-    let mouseY = 0;
-
-    // Element binded variables
-    let animatedTopBackgroundX = 0;
-    let animatedTopBackgroundY = 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;
-        mouseY = event.clientY;
-        
-        animatedTopBackgroundX = mouseX - StartPageAnimated.clientLeft - centerX;
-        animatedTopBackgroundY = mouseY - StartPageAnimated.clientTop - centerY;
-
-        //console.log(mouseX+"\n"+mouseY);
-    }
-
-    // let windowWidth = window.innerWidth;
-    // let windowHeight = window.innerHeight;
-
-    // // Update window dimensions on mount
-    // onMount(() => {
-    //     const updateDimensions = () => {
-    //     windowWidth = window.innerWidth;
-    //     windowHeight = window.innerHeight;
-    //     };
-
-    //     window.addEventListener('resize', updateDimensions);
-
-    //     return () => {
-    //     window.removeEventListener('resize', updateDimensions);
-    //     };
-    // });
+    import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
 </script>
 
-<svelte:body on:mousemove={handleMouseMove}/>
-
-<div class="StartPageContainer">
-
-    <div class="StartPageAnimated" bind:this={StartPageAnimated} style="transform: translate({animatedTopBackgroundX}px, {animatedTopBackgroundY}px);">
-        <span class="rotate45" style="display: flex; justify-content: center; align-items: center;">TEXT!!!</span>
-    </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);
-
-        justify-content: center;
-        vertical-align: middle;
-        display: flex;
-    }
-
-    .rotate45 {
-        transform: rotate(-45deg); /* Rotate the element by 45 degrees */
-    }
-</style>
+<TopAnimatedBackground/>

src/routes/zhen/Comps/TopAnimatedBackground.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { Vector2 } from "./../Utils/Vector2";
+    import TopNameTextPlate from "./TopNameTextPlate.svelte";
+    //import { throttle } from "./../Utils/Throttle";
+
+    // Params
+    let mouseMoveScale: number = 0.25;
+    let targetTextLenght: number = 70;
+
+    // Site variables
+    let mousePos: Vector2;
+
+    // Element binded variables
+    let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
+
+    let windowWidth = 0;
+    let windowHeight = 0;
+
+    let screenCenter: Vector2;
+
+    let StartPageAnimated: Element;
+    let windowRef: Window;
+
+    function onMouseMoved(event: MouseEvent) {
+        mousePos = new Vector2(event.clientX, event.clientY);
+
+        updateAnimation(mousePos);
+    }
+
+    function updateAnimation(mousePos: Vector2) {
+        let mouseRelativePos = mousePos.Sub(screenCenter);
+        mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
+
+        //console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
+    }
+
+    onMount(() => {
+        windowRef = window;
+
+        const updateDimensions = () => {
+            windowWidth = windowRef.innerWidth;
+            windowHeight = windowRef.innerHeight;
+
+            screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
+
+            //console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
+        };
+
+        updateDimensions(); // On first pass
+
+        windowRef.addEventListener("resize", updateDimensions);
+
+        return () => {
+            windowRef.removeEventListener("resize", updateDimensions);
+        };
+    });
+
+    const programmingLanguages: string[] = [
+        "C++",
+        "C#",
+        "ARDUINO",
+        "PYTHON",
+        "JAVA",
+        "JAVASCRIPT",
+        "TYPESCRIPT",
+        "HTML",
+        "CSS"
+    ];
+
+    function getRandomInt(max: number) {
+        return Math.floor(Math.random() * max);
+    }
+
+    function GrabRandomString(){
+        let outString: string = "";
+        while (outString.length < targetTextLenght) {
+            outString += programmingLanguages[getRandomInt(programmingLanguages.length)] + " ";
+        }
+
+        return outString; // At about target size
+    }
+
+</script>
+
+<svelte:window on:mousemove={onMouseMoved} />
+
+<div class="StartPageContainer">
+    <div class="TopOverlay">
+        <TopNameTextPlate/>
+    </div>
+
+    <div
+        class="StartPageAnimated"
+        bind:this={StartPageAnimated}
+        style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px);"
+    >
+        {#each {length: 100} as _, i}
+
+            <span
+            class="rotate45 SkillsText"
+            >
+                {GrabRandomString()}
+            </span
+        >
+        {/each}
+    </div>
+</div>
+
+<style>
+    .StartPageContainer {
+        height: 40vh;
+
+        background-color: burlywood;
+        overflow: hidden;
+        position: relative;
+
+        justify-content: center;
+        align-items: center;
+        display: flex;
+
+        padding: 0;
+    }
+
+    .StartPageAnimated {
+        /* background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$"); */
+        background-color: #131313;
+        position: absolute;
+        height: 150vh;
+        width: 150vw;
+
+        padding: 0;
+
+        transition: all 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
+
+        justify-content: center;
+        vertical-align: middle;
+        display: flex;
+    }
+
+    .SkillsText{
+        font-family: 'CozetteVector';
+
+        text-align: start;
+        font-size: x-large;
+        display: flex; 
+        justify-content: center; 
+        align-items: center;
+        text-wrap: nowrap;
+
+        width: 2rem;
+
+        color: rgb(66, 66, 66);
+    }
+
+    .TopOverlay {
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+
+        padding: 0;
+    }
+
+    .rotate45 {
+        transform: rotate(-45deg); /* Rotate the element by 45 degrees */
+    }
+</style>

src/routes/zhen/Comps/TopNameTextPlate.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+    import HorizonalStack from './../../../comps/Utils/HorizonalStack.svelte'
+</script>
+
+<div class="container">
+    <div style="flex-grow: 1;" />
+    <div class="TextContainer">
+        <span class="NamePlateText"  >
+            Zhentao Wei
+            <br/>
+            <p class="NickNameText">Alex</p>
+        </span>
+    </div>
+    <div style="flex-grow: 2;" />
+</div>
+
+<style>
+    .container{
+        width: 100%;
+        height: 100%;
+
+        align-items: center;
+        vertical-align: middle;
+        display: flex;
+    }
+
+    .TextContainer{
+        align-items: center;
+        vertical-align: middle;
+        display: flex;
+
+        /* background-color: aliceblue; */
+        background-color: rgba(45, 45, 45, 0.645);
+        padding: 0.75rem 1rem;
+        border-radius: 20px;
+
+        backdrop-filter: blur(1px);
+    }
+
+    .NamePlateText{
+        /* font-family: 'CozetteVector'; */
+        text-align: left;
+        font-size: 5rem;
+        color: rgb(225, 225, 225);
+
+        border-left: 0.5rem solid rgb(88, 198, 82);
+        padding-left: 1rem;
+    }
+
+    .NickNameText{
+        font-size: 2rem;
+        margin: 0;
+        margin-top: -1rem;
+        
+        color: rgb(99, 99, 99);
+    }
+</style>

src/routes/zhen/Utils/Throttle.js

@@ -0,0 +1,21 @@
+export function throttle(callback, wait) {
+    let timeoutId = null;
+    let lastExecutedTime = 0;
+  
+    return function (...args) {
+      const currentTime = Date.now();
+  
+      const execute = () => {
+        lastExecutedTime = currentTime;
+        callback.apply(this, args);
+      };
+  
+      if (currentTime - lastExecutedTime >= wait) {
+        execute();
+      } else {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(execute, wait - (currentTime - lastExecutedTime));
+      }
+    };
+  }
+  

src/routes/zhen/Utils/Vector2.ts

@@ -0,0 +1,21 @@
+export class Vector2 {
+    x: number;
+    y: number;
+
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+
+    Add(vec2: Vector2){
+        return new Vector2(this.x + vec2.x, this.y + vec2.y);
+    }
+
+    Sub(vec2: Vector2){
+        return new Vector2(this.x - vec2.x, this.y - vec2.y);
+    }
+
+    Scale(mult: number){
+        return new Vector2(this.x * mult, this.y * mult);;
+    }
+}