update

static/css/main.css

@@ -64,6 +64,7 @@ nav ul li a:hover img {
 }
 
 nav ul li#music {
+    z-index: 100;
     margin-top: auto;
     padding-bottom: 2rem;
     display: none;
@@ -252,10 +253,23 @@ main section a:hover {
 
 .links a img {
     height: 120px;
-    transition: all 0.3s ease-in-out;
+    transition: all 0.2s ease-in-out;
 }
 
-.links a img:hover {
+.links a:nth-child(even) img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.links a:nth-child(odd) img:hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+.links iframe {
+    height: 120px;
+    transition: all 0.2s ease-in-out;
+}
+
+.links iframe:hover {
     transform: scale(1.1);
 }
 
@@ -266,10 +280,39 @@ main section a:hover {
 
 .blinkies a img {
     height: 60px;
-    transition: all 0.3s ease-in-out;
+    transition: all 0.2s ease-in-out;
+}
+
+.blinkies a {
+    height: 60px;
 }
 
 img.btn {
-    height: 50px !important;
-    transition: all 0.3s ease-in-out;
-} 
+    height: 60px !important;
+    transition: all 0.2s ease-in-out;
+}
+
+#links h2 {
+    margin-top: 2rem;
+}
+
+.btns {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 2rem;
+}
+
+.btns img {
+    height: 40px;
+    transition: all 0.2s ease-in-out;
+}
+
+.btns img:hover:nth-child(even) {
+    transform: scale(1.3) rotate(5deg);
+}
+
+.btns img:hover:nth-child(odd) {
+    transform: scale(1.3) rotate(-5deg);
+}

static/js/music.js

@@ -64,8 +64,9 @@ function hideUi() {
 
 function update() {
     fetchData().then(data => { 
+        console.log(data);
         if (data.item != null) {
-            hideUi();
+            updateUi(data);
         }
         else {
             hideUi();

static/js/typing.js

@@ -1,9 +1,36 @@
-const values = ["Web developer", "Pc games enjoyer", "Server backend survivor", "python programmer", "Javascript disliker"];
+const values = [
+    "Web developer", 
+    "Pc games enjoyer", 
+    "Server backend survivor", 
+    "python programmer", 
+    "Javascript disliker",
+    "I use Arch btw",
+    "Owo, what's this?",
+    "Ultimate procrastinator",
+    "Ultrakill gaming",
+    "00111010 00110011",
+    "fistful of dollar",
+    "Thy end is now!!!",
+    "Possibly a furry",
+    "Prepare thyself!!!",
+    "Spegatti code master",
+    "Ethernet cable untangler",
+    "Caffeine addict",
+    "I'm not a robot ☑",
+    "Loud Music enjoyer",
+    "part time femboy :<",
+];
 var direction = 1;
 var text = "";
 var speed = 100; 
 var selectedValue = 0;
-var currentValueIndex = 0;                                                  
+var currentValueIndex = 0;
+var pause = false;
+
+function randomValue() {
+    selectedValue = Math.floor(Math.random() * values.length);
+    currentValueIndex = 0;
+}
 
 function type() {
     if (direction == 1) {
@@ -12,7 +39,7 @@ function type() {
             currentValueIndex++;
         } else {
             direction = -1;
-            speed = 1500;
+            pause = true;
         }
     } else {
         if (currentValueIndex > 0) {
@@ -20,10 +47,7 @@ function type() {
             currentValueIndex--;
         } else {
             direction = 1;
-            selectedValue++;
-            if (selectedValue >= values.length) {
-                selectedValue = 0;
-            }
+            randomValue();
         }
     }
 }
@@ -36,7 +60,12 @@ function typing() {
     } else {
         speed = 60 + (Math.random() * 100) / 2;
     }
-    setTimeout(typing, speed);
+    if (!pause) {
+        setTimeout(typing, speed);
+    } else {
+        setTimeout(typing, 500);
+        pause = false;
+    }
 }
 
 typing();