From 9f802381a29fbd9987f97041c08073c249295bc8 Mon Sep 17 00:00:00 2001
From: zyqunix <117040076+zyqunix@users.noreply.github.com>
Date: Mon, 19 May 2025 21:55:47 +0200
Subject: [PATCH] typewriter and lil ui change

---
 assets/css/style.css |   1 +
 assets/js/index.js   |  56 +++++++++++++++
 global.css           | 160 ++-----------------------------------------
 index.html           |   8 +--
 4 files changed, 66 insertions(+), 159 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 5e284d7..ea5891f 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -60,6 +60,7 @@ strong {
     margin-top: 10px;
     font-size: 16px;
     color: #bac2de;
+	display: block;
 }
 
 .cards {
diff --git a/assets/js/index.js b/assets/js/index.js
index f8286f1..e536f74 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -251,6 +251,62 @@ function fetchWeather(location) {
 		});
 }
 
+const messages = [
+    "Coding",
+    "Listening to Music",
+    "Reverse Engineering",
+    "Playing Counter-Strike",
+    "swagman",
+];
+
+let currentMessageIndex = 0;
+let currentCharIndex = 0;
+let isDeleting = false;
+
+function typeWriter() {
+    const currentMessage = messages[currentMessageIndex];
+    let displayText = '';
+
+    if (isDeleting) {
+        displayText = currentMessage.substring(0, currentCharIndex - 1);
+        currentCharIndex--;
+    } else {
+        displayText = currentMessage.substring(0, currentCharIndex + 1);
+        currentCharIndex++;
+    }
+
+    displayText += "<span id='typewriter-line'>|</span>";
+    document.getElementById('hobbies').innerHTML = displayText;
+
+    if (!isDeleting && currentCharIndex === currentMessage.length + 1) {
+        isDeleting = true;
+        setTimeout(typeWriter, 1000);
+    } else if (isDeleting && currentCharIndex === 0) {
+        isDeleting = false;
+        currentMessageIndex = (currentMessageIndex + 1) % messages.length;
+        setTimeout(typeWriter, 1000);
+    } else {
+        setTimeout(typeWriter, isDeleting ? 40 : 75);
+    }
+}
+
+let cursorOpacity = 0;
+let fadeDirection = 1;
+
+setInterval(() => {
+    const cursorElement = document.getElementById("typewriter-line");
+
+    if (cursorElement) {
+        cursorElement.style.opacity = cursorOpacity;
+        cursorOpacity += 0.1 * fadeDirection;
+
+        if (cursorOpacity <= 0 || cursorOpacity >= 1) {
+            fadeDirection *= -1;
+        }
+    }
+}, 50);
+
+typeWriter();
 fetchWeather();
 fetchSong();
 
diff --git a/global.css b/global.css
index 5be5373..1d7f988 100644
--- a/global.css
+++ b/global.css
@@ -1,148 +1,3 @@
-:root[theme=latte] {
-  --rosewater:#dc8a78;
-  --flamingo:#dd7878;
-  --pink:#ea76cb;
-  --mauve:#8839ef;
-  --red:#d20f39;
-  --maroon:#e64553;
-  --peach:#fe640b;
-  --yellow:#df8e1d;
-  --green:#40a02b;
-  --teal:#179299;
-  --sky:#04a5e5;
-  --sapphire:#209fb5;
-  --blue:#1e66f5;
-  --lavender:#7287fd;
-  --text:#4c4f69;
-  --subtext1:#5c5f77;
-  --subtext0:#6c6f85;
-  --overlay2:#7c7f93;
-  --overlay1:#8c8fa1;
-  --overlay0:#9ca0b0;
-  --surface2:#acb0be;
-  --surface1:#bcc0cc;
-  --surface0:#ccd0da;
-  --base:#eff1f5;
-  --mantle:#e6e9ef;
-  --crust:#dce0e8
-}
-
-:root[theme=frappe] {
-  --rosewater:#f2d5cf;
-  --flamingo:#eebebe;
-  --pink:#f4b8e4;
-  --mauve:#ca9ee6;
-  --red:#e78284;
-  --maroon:#ea999c;
-  --peach:#ef9f76;
-  --yellow:#e5c890;
-  --green:#a6d189;
-  --teal:#81c8be;
-  --sky:#99d1db;
-  --sapphire:#85c1dc;
-  --blue:#8caaee;
-  --lavender:#babbf1;
-  --text:#c6d0f5;
-  --subtext1:#b5bfe2;
-  --subtext0:#a5adce;
-  --overlay2:#949cbb;
-  --overlay1:#838ba7;
-  --overlay0:#737994;
-  --surface2:#626880;
-  --surface1:#51576d;
-  --surface0:#414559;
-  --base:#303446;
-  --mantle:#292c3c;
-  --crust:#232634
-}
-
-:root[theme=macchiato] {
-  --rosewater:#f4dbd6;
-  --flamingo:#f0c6c6;
-  --pink:#f5bde6;
-  --mauve:#c6a0f6;
-  --red:#ed8796;
-  --maroon:#ee99a0;
-  --peach:#f5a97f;
-  --yellow:#eed49f;
-  --green:#a6da95;
-  --teal:#8bd5ca;
-  --sky:#91d7e3;
-  --sapphire:#7dc4e4;
-  --blue:#8aadf4;
-  --lavender:#b7bdf8;
-  --text:#cad3f5;
-  --subtext1:#b8c0e0;
-  --subtext0:#a5adcb;
-  --overlay2:#939ab7;
-  --overlay1:#8087a2;
-  --overlay0:#6e738d;
-  --surface2:#5b6078;
-  --surface1:#494d64;
-  --surface0:#363a4f;
-  --base:#24273a;
-  --mantle:#1e2030;
-  --crust:#181926
-}
-
-:root[theme=mocha] {
-  --rosewater:#f5e0dc;
-  --flamingo:#f2cdcd;
-  --pink:#f5c2e7;
-  --mauve:#cba6f7;
-  --red:#f38ba8;
-  --maroon:#eba0ac;
-  --peach:#fab387;
-  --yellow:#f9e2af;
-  --green:#a6e3a1;
-  --teal:#94e2d5;
-  --sky:#89dceb;
-  --sapphire:#74c7ec;
-  --blue:#89b4fa;
-  --lavender:#b4befe;
-  --text:#cdd6f4;
-  --subtext1:#bac2de;
-  --subtext0:#a6adc8;
-  --overlay2:#9399b2;
-  --overlay1:#7f849c;
-  --overlay0:#6c7086;
-  --surface2:#585b70;
-  --surface1:#45475a;
-  --surface0:#313244;
-  --base:#1e1e2e;
-  --mantle:#181825;
-  --crust:#11111b
-}
-
-:root {
-  --rosewater:#f5e0dc;
-  --flamingo:#f2cdcd;
-  --pink:#f5c2e7;
-  --mauve:#cba6f7;
-  --red:#f38ba8;
-  --maroon:#eba0ac;
-  --peach:#fab387;
-  --yellow:#f9e2af;
-  --green:#a6e3a1;
-  --teal:#94e2d5;
-  --sky:#89dceb;
-  --sapphire:#74c7ec;
-  --blue:#89b4fa;
-  --lavender:#b4befe;
-  --text:#cdd6f4;
-  --subtext1:#bac2de;
-  --subtext0:#a6adc8;
-  --overlay2:#9399b2;
-  --overlay1:#7f849c;
-  --overlay0:#6c7086;
-  --surface2:#585b70;
-  --surface1:#45475a;
-  --surface0:#313244;
-  --base:#1e1e2e;
-  --mantle:#181825;
-  --crust:#11111b
-}
-
 @font-face {
     font-family: 'Hack';
     src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
@@ -153,7 +8,6 @@
     src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
 }
 
-
 body {
     display: flex;
     justify-content: center;
@@ -162,8 +16,8 @@ body {
     min-height: 100vh;
     margin: 0;
     font-size: 1rem;
-    background-color: var(--maroon);
-    color: var(--subtext1); 
+    background-color: #2a2a2a;
+    color: #f0f0f0;
     overflow-x: hidden;
 }
 
@@ -171,20 +25,16 @@ body {
     font-family: 'Hack', 'JetBrainsMono', monospace;
 }
 
-html {
-    height: 100%;
-}
-
 a {
-    color: var(--subtext1);
+    color: #fff;
 }
 
 a:hover, svg:hover {
-    color: var(--teal);
+    color: #c099ff;
 }
 
 .card {
-    background-color: var(--red);
+    background-color: #252525;
     padding: 20px;
     border-radius: 10px;
     width: 600px !important;
diff --git a/index.html b/index.html
index adb8cf1..963c097 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <script src="https://cdn.jsdelivr.net/gh/0x5841524f4e/js-lanyard/lanyard.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
+		<script src="https://cdn.jsdelivr.net/gh/0x5841524f4e/js-lanyard/lanyard.js"></script>
         <title>zyq's Portfolio</title>
         <link href="assets/css/style.css" rel="stylesheet" />
 		<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
@@ -15,9 +15,9 @@
             <h1 class="name tooltip" data-tooltip="zyqunix / Fabio / fentboiswag / монгол">zyqunix</h1>
 			<span><div class="time tooltip" id="time"></div><div class="weather" id="weather"></div></span></span>
 			<div class="age" id="age"></div>
-            <div class="hobbies" id="hobbies">
+            <span class="hobbies" id="hobbies">
                 Coding, Listening to Music, Reverse Engineering, Playing Counter-Strike
-            </div>
+            </span>
         </div>
         <div class="discord cards">
             <h2>Discord</h2>