Adjusted "I'm a" text functionality

main.js

@@ -1,10 +1,28 @@
 const Maths = Math; // Yes, I'm that patriotic.
 const hellos = ['Hewwo!', 'Hello!', 'Awoo!'];
 
-const imaTypingSpeed = 100;
+const imaTypingSpeed = 75;
 const imaDeletingSpeed = 50;
 const imaGapTime = 1500;
-const imaTexts = ['dumbass', 'network engineer', 'Arch Linux user', 'programmer', 'furry', 'massive nerd'];
+const imaTexts = shuffle([
+    'I\'m a $dumbass',
+    'I\'m a $network engineer',
+    'I\'m an $Arch Linux user',
+    'I\'m a $programmer',
+    'I\'m a $furry',
+    'I\'m a $massive nerd',
+    'I\'m a $Home Assistant addict',
+    'I\'m a $House M.D. enjoyer',
+    'I\'m a $DJ',
+    'I\'m an $ice skater'
+]);
+
+function shuffle(array) {
+    return array
+    .map(value => ({ value, sort: Maths.random() }))
+    .sort((a, b) => a.sort - b.sort)
+    .map(({ value }) => value);
+}
 
 function pickRandom(array) {
     return array[Maths.floor(Maths.random() * array.length)];
@@ -17,35 +35,54 @@ window.addEventListener('load', (e) => {
 
     // ----- I'm a text section -----
     const imaEl = document.getElementById('imaText');
+    let currentEl = document.createElement('span');
+    imaEl.appendChild(currentEl);
     let imaSelection = 0;
     let imaCharIdx = 0;
-    let currentIntervalID = -1;
 
     const typeFunc = () => {
-        imaEl.innerText += imaTexts[imaSelection][imaCharIdx];
+        let controlChar = imaTexts[imaSelection][imaCharIdx] == '$';
+        if (controlChar) {
+            let highlight = !currentEl.classList.contains('textHighlight');
+            currentEl = document.createElement('span');
+            if (highlight) {
+                currentEl.classList.add('textHighlight');
+            }
+            imaEl.appendChild(currentEl);
+        } else {
+            currentEl.innerText += imaTexts[imaSelection][imaCharIdx];
+        }
         imaCharIdx++;
 
         if (imaCharIdx >= imaTexts[imaSelection].length) {
-            clearInterval(currentIntervalID);
-            setTimeout(() => {
-                currentIntervalID = setInterval(deleteFunc, imaDeletingSpeed)
-            }, imaGapTime);
+            setTimeout(deleteFunc, imaGapTime);
+        } else {
+            setTimeout(typeFunc, imaTypingSpeed*!controlChar);
         }
     };
 
     const deleteFunc = () => {
-        imaEl.innerText = imaEl.innerText.slice(0, -1);
+        // This is honestly quite disgusting, but it does work...
+        let textAttrib = imaEl.lastChild.nodeName == '#text' ? 'data' : 'innerText';
+        imaEl.lastChild.innerText = imaEl.lastChild.innerText.slice(0, -1);
+        if (imaEl.lastChild.innerText == '') {
+            imaEl.lastChild.remove();
+        }
 
         if (imaEl.innerText == '') {
+            currentEl = imaEl;
             imaCharIdx = 0;
             imaSelection += 1;
             if (imaSelection >= imaTexts.length) {
                 imaSelection = 0;
             }
-            clearInterval(currentIntervalID);
-            currentIntervalID = setInterval(typeFunc, imaTypingSpeed);
+            currentEl = document.createElement('span');
+            imaEl.appendChild(currentEl);
+            setTimeout(typeFunc, imaTypingSpeed);
+        } else {
+            setTimeout(deleteFunc, imaDeletingSpeed);
         }
     };
 
-    currentIntervalID = setInterval(typeFunc, imaTypingSpeed);
-});
+    typeFunc();
+});