From 8738a77a4e7d9c1146e87c1ae670cc4d8549c306 Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Sun, 31 Mar 2024 05:24:19 +0200
Subject: [PATCH] Added text at background

---
 .../zhen/Comps/TopAnimatedBackground.svelte   | 60 +++++++++++++++++--
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/routes/zhen/Comps/TopAnimatedBackground.svelte b/src/routes/zhen/Comps/TopAnimatedBackground.svelte
index bbd718d..f7b05cf 100644
--- a/src/routes/zhen/Comps/TopAnimatedBackground.svelte
+++ b/src/routes/zhen/Comps/TopAnimatedBackground.svelte
@@ -5,6 +5,7 @@
 
     // Params
     let mouseMoveScale: number = 0.25;
+    let targetTextLenght: number = 70;
 
     // Site variables
     let mousePos: Vector2;
@@ -53,22 +54,53 @@
             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"/>
+
     <div
         class="StartPageAnimated"
         bind:this={StartPageAnimated}
         style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px);"
     >
+        {#each {length: 100} as _, i}
 
-        <span
-            class="rotate45"
-            style="display: flex; justify-content: center; align-items: center;"
-            >TEXT!!!</span
+            <span
+            class="rotate45 SkillsText"
+            >
+                {GrabRandomString()}
+            </span
         >
+        {/each}
     </div>
 </div>
 
@@ -88,8 +120,8 @@
     }
 
     .StartPageAnimated {
-        background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$");
-        background-color: aqua;
+        /* 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;
@@ -103,6 +135,22 @@
         display: flex;
     }
 
+    .SkillsText{
+        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;
+    }
+
     .rotate45 {
         transform: rotate(-45deg); /* Rotate the element by 45 degrees */
     }