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

@@ -1,15 +1,24 @@
 /*
-* text.js
-* function for the purpose of my portfolio to animate welcome text
-* Author: phga/teord
-* Date: 2019-10-23
-* Version: 1.0
-*/
+ * text.js
+ * function for the purpose of my portfolio to animate welcome text
+ * Author: phga/teord
+ * Date: 2019-10-23
+ * Version: 1.0
+ */
 // 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,43 +37,36 @@ async function flyingText(canvas) {
                       "Winter is coming!", "😺 Person"];
 
     let stCount = statements.length;
-    let animationTime = 4;
+    let animationTime = sec;
     let maxX , maxY, x, y;
+    // Browser resize
+    maxX = canvas.offsetWidth / 2;
+    maxY = canvas.offsetHeight / 2;
 
-    canvas.classList.remove("hidden");
-
-    while (runTextAnimation) {
-        // Browser resize
-        maxX = canvas.offsetWidth / 2;
-        maxY = canvas.offsetHeight / 2;
+    let curr = document.createElement("p");
+    curr.innerHTML = statements[getRand(stCount)];
+    curr.className = "flying-text";
+    curr.style.transition = `${animationTime}s ease-in`;
 
-        let curr = document.createElement("p");
-        curr.innerHTML = statements[getRand(stCount)];
-        curr.className = "flying-text";
-        curr.style.transition = `${animationTime}s ease-in`;
+    // Get random position + correction to not touch middle to much
+    x = getRand(maxX * 0.2, maxX);
+    y = getRand(maxY * 0.45, maxY);
 
-        // Get random position + correction to not touch middle to much
-        x = getRand(maxX * 0.2, maxX);
-        y = getRand(maxY * 0.45, maxY);
+    // Random direction and correction to not touch right border
+    x = (getRand(2) == 1) ? -1*x : 0.3 * x;
+    y = (getRand(2) == 1) ? -1*y : 0.8 * y;
 
-        // Random direction and correction to not touch right border
-        x = (getRand(2) == 1) ? -1*x : 0.3 * x;
-        y = (getRand(2) == 1) ? -1*y : 0.8 * y;
+    canvas.appendChild(curr);
+    await sleep(1000);
 
-        canvas.appendChild(curr);
+    // add the stuff that should be animated (transition in class)
+    curr.style.transform = `translate(${x}px, ${y}px)`;
+    curr.style.fontSize = `${Math.random() + Math.random() + 1.0}vw`;
 
-        // wait till ele is rdy in dom + time between spawns
-        await sleep(1000);
-
-        // add the stuff that should be animated (transition in class)
-        curr.style.transform = `translate(${x}px, ${y}px)`;
-        curr.style.fontSize = `${Math.random() + Math.random() + 1.0}vw`;
-
-        // wait to remove it (async)
-        setTimeout(() => {
-            curr.remove();
-        }, animationTime * 1000 + 2000);
-    }
+    // wait to remove it (async)
+    setTimeout(() => {
+        curr.remove();
+    }, animationTime * 1000 + 2000);
 }
 
 function getRand(max, min) {