typewriter and lil ui change

assets/css/style.css

@@ -60,6 +60,7 @@ strong {
     margin-top: 10px;
     font-size: 16px;
     color: #bac2de;
+	display: block;
 }
 
 .cards {

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();