Added heart spray on click as a gimmick

inc/css/main.css

@@ -303,6 +303,26 @@ nav {
     margin-left: calc(var(--h-info) * 0.25 * -0.70);
 }
 
+#avatar:hover {
+    cursor: pointer;
+}
+
+.wobble {
+    animation: wob 1s infinite;
+}
+
+@keyframes wob {
+    0% {
+        transform: scale(1.0) rotate(0deg);
+    }
+    50% {
+        transform: scale(0.8);
+    }
+    100% {
+        transform: scale(1.0) rotate(360deg);
+    }
+}
+
 .flying-text {
     display: inline-block;
     position: absolute;

inc/js/main.js

@@ -30,6 +30,11 @@ function initialize() {
             runTextAnimation = true;
             flyingText(welcome);
             hideElement(overlay);
+        } else if (curr.id === "avatar") {
+            curr.classList.add("wobble");
+            for (let i = 0; i < 10; ++i)
+                shootText(welcome, 3, "♥");
+            setTimeout(() => {curr.classList.remove("wobble");}, 2000);
         }
     });
 

inc/js/text.js

@@ -8,8 +8,17 @@
 // set a global var "run" to true before running this function
 "use strict";
 async function flyingText(canvas) {
+    canvas.classList.remove("hidden");
+
+    while (runTextAnimation) {
+        // wait till ele is rdy in dom + time between spawns
+        await shootText(canvas, 4);
+    }
+}
+
+async function shootText(canvas, sec, sta) {
     // TODO: move to argument, load from backend
-    let statements = ["Keyboard-Nerd", "🖤", "Emacs",
+    let statements = sta || ["Keyboard-Nerd", "🖤", "Emacs",
                       "Lives in VI", "GNU/Linux", "Arch Linux",
                       "Computer Science", "Design",
                       "Javascript", "C/C++", "Go", "Bash",
@@ -28,12 +37,8 @@ async function flyingText(canvas) {
                       "Winter is coming!", "😺 Person"];
 
     let stCount = statements.length;
-    let animationTime = 4;
+    let animationTime = sec;
     let maxX , maxY, x, y;
-
-    canvas.classList.remove("hidden");
-
-    while (runTextAnimation) {
     // Browser resize
     maxX = canvas.offsetWidth / 2;
     maxY = canvas.offsetHeight / 2;
@@ -52,8 +57,6 @@ async function flyingText(canvas) {
     y = (getRand(2) == 1) ? -1*y : 0.8 * y;
 
     canvas.appendChild(curr);
-
-        // wait till ele is rdy in dom + time between spawns
     await sleep(1000);
 
     // add the stuff that should be animated (transition in class)
@@ -65,7 +68,6 @@ async function flyingText(canvas) {
         curr.remove();
     }, animationTime * 1000 + 2000);
 }
-}
 
 function getRand(max, min) {
     min = min || 0;