Add CSS styling, bird anim, background

2026-04-19 20:40:50 +02:00
parent 239b1c034f
commit 485d2b2c76
6 changed files with 201 additions and 1 deletions
@@ -3,15 +3,65 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
    <title>nikology.dev</title>
+    <!-- <link rel="icon" href="birbFavicon.svg" type="image/svg+xml"> -->
 </head>
 <body>
-    <h1>nikology.dev</h1>
+    <div class="ribbon">Work In Progress</div>
+
+    <h1>nikology.dev 
+        <span class="bird-wrap">
+            <button id="birdButton"><img src="birb.svg" alt=""></button>
+            <svg id="barTemplate" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.47 8.47"><path fill="none" stroke="#3d2f1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="m1.5 4.23.23-.1a6 6 0 0 1 5.01 0l.23.1" style="paint-order:markers stroke fill"/></svg>
+        </span>
+    </h1>
    <h2>About Me</h2>
    <p>Hi there! I am Niki and welcome to my website, I make stuff with computers. My current project is <a href="https://roplus.dev" target="_blank" rel="noopener">roplus.dev</a>!</p>
    <h2>Links n Stuff</h2>
    <ul>
        <li><a href="https://gitlab.com/Nikology" target="_blank" rel="noopener">GitLab</a></li>
    </ul>
+    <footer>
+        <p>Bird recording by Petter Westberg via <a href="https://xeno-canto.org/1087467" target="_blank" rel="noopener">xeno-canto</a>, CC BY-NC-SA 4.0</p>
+    </footer>
+    <!-- Scripts -->
+    <script>
+        const DISTANCE = 20
+        const birdIcon = document.getElementById("birdButton");
+        const birdSound = new Audio("SnowBuntingSound.ogg");
+        const template = document.getElementById("barTemplate");
+        const wrap = document.querySelector(".bird-wrap");
+        
+        function spawnBar(distance, angle, delay = 0) {
+            const clone = template.cloneNode(true);
+            clone.removeAttribute("id");
+            clone.classList.add("bar");
+            clone.style.setProperty("--angle", `${angle}deg`);
+            clone.style.setProperty("--distance", `${-distance}px`);
+            clone.style.setProperty("--delay", `${delay}s`);
+            wrap.appendChild(clone);
+
+            clone.addEventListener("animationend", () => clone.remove());
+        }
+
+        function birdSoundAnim() {
+            const leftRandom = (Math.random() * 40) + 40
+            const rightRandom = (Math.random() * 40) + 40
+            spawnBar(DISTANCE, -leftRandom, 0.2)
+            spawnBar(DISTANCE, -leftRandom, 0.4)
+            spawnBar(DISTANCE, rightRandom, 0.6)
+            spawnBar(DISTANCE, rightRandom, 0.8)
+        }
+
+        birdIcon.addEventListener("click", (e) => {
+            if (!birdSound.paused) return;
+            birdSound.play();
+            birdSoundAnim()
+        });
+    </script>
 </body>
 </html>