Animate username

assets/index.css

@@ -124,10 +124,14 @@ body {
   margin: 1.5vh 0px;
 }
 
+.hidden {
+  opacity: 0;
+}
+
 #username {
-  font-size: 18px;
-  font-weight: bold;
   font-family: "Asap Condensed", sans-serif;
+  font-size: 18px;
+  color: white;
 }
 
 #username span {
@@ -135,6 +139,13 @@ body {
   font-family: "Asap Condensed", sans-serif;
 }
 
+.console-underscore {
+  display: inline-block;
+  position: relative;
+  top: -0.14em;
+  left: 10px;
+}
+
 #userbio {
   font-size: 26px;
   font-family: "Asap", sans-serif;

assets/index.html

@@ -69,6 +69,59 @@
         magicProjectsGrid.listen();
         magicForksGrid.listen();
       });
+
+      // function([string1, string2],target id,[color1,color2])
+      consoleText(["K4USTU3H", "Just another code copy-paster."], "text", [
+        "white",
+        "white"
+      ]);
+
+      function consoleText(words, id, colors) {
+        if (colors === undefined) colors = ["#fff"];
+        var visible = true;
+        var con = document.getElementById("console");
+        var letterCount = 1;
+        var x = 1;
+        var waiting = false;
+        var target = document.getElementById(id);
+        target.setAttribute("style", "color:" + colors[0]);
+        window.setInterval(function() {
+          if (letterCount === 0 && waiting === false) {
+            waiting = true;
+            target.innerHTML = words[0].substring(0, letterCount);
+            window.setTimeout(function() {
+              var usedColor = colors.shift();
+              colors.push(usedColor);
+              var usedWord = words.shift();
+              words.push(usedWord);
+              x = 1;
+              target.setAttribute("style", "color:" + colors[0]);
+              letterCount += x;
+              waiting = false;
+            }, 1000);
+          } else if (letterCount === words[0].length + 1 && waiting === false) {
+            waiting = true;
+            window.setTimeout(function() {
+              x = -1;
+              letterCount += x;
+              waiting = false;
+            }, 1000);
+          } else if (waiting === false) {
+            target.innerHTML = words[0].substring(0, letterCount);
+            letterCount += x;
+          }
+        }, 120);
+        window.setInterval(function() {
+          if (visible === true) {
+            con.className = "console-underscore hidden";
+            visible = false;
+          } else {
+            con.className = "console-underscore";
+
+            visible = true;
+          }
+        }, 400);
+      }
     </script>
   </body>
 </html>

populate.js

@@ -112,9 +112,11 @@ module.exports.updateHTML = (username, opts) => {
           <meta name="twitter:description" content="${user.bio}" />`;
           document.getElementById(
             "username"
-          ).innerHTML = `<span style="display:${
+          ).innerHTML = `<span id="text" style="display:${
             user.name == null || !user.name ? "none" : "block"
-          };">${user.name}</span><a href="${user.html_url}">@${user.login}</a>`;
+          };"></span><div class='console-underscore' id='console'>&#95;</div><br><a href="${
+            user.html_url
+          }">@${user.login}</a>`;
           //document.getElementById("github_link").href = `https://github.com/${user.login}`;
           document.getElementById("userbio").innerHTML = convertToEmoji(
             user.bio