From d7ed881a225d3df8c445da4a79e793d72f52056f Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Tue, 14 Jan 2025 20:17:03 +0100
Subject: [PATCH] added back-end tag

---
 src/routes/+page.svelte             |   2 +-
 src/routes/comps/SlantedText.svelte | 180 ++++++++++++++++++++++++++++
 src/routes/comps/Tags.svelte        |   1 +
 3 files changed, 182 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/comps/SlantedText.svelte

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f98d999..2a04481 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -81,7 +81,7 @@
         </Profile>
         
         <ProfileSpacer/>
-        <Profile name="Sveske / Benjamin" tags={["Programmer"]} isMobile={mobile}>
+        <Profile name="Sveske / Benjamin" tags={["Programmer", "Back-end Admin"]} isMobile={mobile}>
             <span>
                 <p>Hi, I use Arch, btw.</p>
                 <p><a href="https://www.linkedin.com/in/benjamin-dreyer/" target="_blank" style="color:lightblue;">Linked-in</a></p>
diff --git a/src/routes/comps/SlantedText.svelte b/src/routes/comps/SlantedText.svelte
new file mode 100644
index 0000000..f1e6a4d
--- /dev/null
+++ b/src/routes/comps/SlantedText.svelte
@@ -0,0 +1,180 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { Vector2 } from "./../zhen/Utils/Vector2";
+
+    import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
+
+    // Params
+    let mouseMoveScale: number = 0.25;
+    let targetTextLenght: number = 100;
+
+    // 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 | null;
+    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);
+
+        const RevertToOrigin = () => {
+            if (
+                navigator.userAgent.search(/gecko/i) > 0 &&
+                StartPageAnimated !== null
+            ) {
+                StartPageAnimated.classList.add("FirefoxSmoothTranition");
+            }
+            updateAnimation(new Vector2(windowWidth / 2, windowHeight / 2));
+        };
+        document.documentElement.addEventListener("mouseleave", RevertToOrigin);
+
+        const RemoveFirefoxSmoothTranition = () => {
+            if (
+                navigator.userAgent.search(/gecko/i) > 0 &&
+                StartPageAnimated !== null
+            ) {
+                StartPageAnimated.classList.remove("FirefoxSmoothTranition");
+            }
+        };
+        document.documentElement.addEventListener(
+            "mouseenter",
+            RemoveFirefoxSmoothTranition,
+        );
+
+        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="StartPageAnimated top-0 left-0 w-full h-full"
+        id="StartPageAnimated"
+        bind:this={StartPageAnimated}
+        style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px) translateZ(0) rotate(0.001deg);"
+    >
+        {#each {length: 100} as _, i}
+
+            <span
+            class="rotate45 SkillsText"
+            >
+                {GrabRandomString()}
+            </span
+        >
+        {/each}
+    </div>
+<style>
+    .StartPageContainer {
+        /* height: 40vh; */
+
+        background-color: burlywood;
+        overflow: hidden;
+        position: relative;
+
+        justify-content: center;
+        align-items: center;
+        display: flex;
+
+        padding: 0;
+    }
+
+    .StartPageAnimated {
+        padding: 0;
+
+        transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
+        -moz-transition: none;
+        justify-content: center;
+        vertical-align: middle;
+        display: flex;
+
+        pointer-events: none;
+    }
+
+    .FirefoxSmoothTranition {
+        transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
+        -moz-transition: transform 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99) !important;
+    }
+
+    .SkillsText {
+        font-family: "CozetteVector";
+
+        text-align: start;
+        font-size: x-large;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        white-space: nowrap;
+
+        width: 2rem;
+
+        color: rgb(66, 66, 66);
+    }
+
+    .rotate45 {
+        transform: rotate(-45deg); /* Rotate the element by 45 degrees */
+    }
+</style>
diff --git a/src/routes/comps/Tags.svelte b/src/routes/comps/Tags.svelte
index d675236..3dc597e 100644
--- a/src/routes/comps/Tags.svelte
+++ b/src/routes/comps/Tags.svelte
@@ -10,6 +10,7 @@
         "2d/3dartist": {"color1":"#F1EAC0", "color2":"#F4881C","rotation": "-65deg", "offset": "71.5%"},
         "sounddesigner": "#F3EC2A",
         "storydesigner": "#EEC12A",
+        "back-endadmin": "#3236a8",
     };
 
 </script>