add randomness to header links

Author: g-harel

index.animated.html

@@ -28,7 +28,7 @@
                 color: #aaa;
                 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
                     Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-                font-weight: 600;
+                font-weight: 700;
                 padding: 1rem;
                 text-decoration: none;
                 user-select: none;
@@ -46,15 +46,27 @@
         </style>
 
         <header>
-            <a href="mailto:gabrielj.harel@gmail.com">contact</a>
-            <a href="https://github.com/g-harel/blobs">github</a>
-            <a href="https://npmjs.com/package/blobs">npm</a>
+            <a class="randomized" href="mailto:gabrielj.harel@gmail.com">CONTACT</a>
+            <a class="randomized" href="https://npmjs.com/package/blobs">NPM</a>
+            <a class="randomized" href="https://github.com/g-harel/blobs">GITHUB</a>
         </header>
 
         <main>
             <canvas id="canvas"></canvas>
         </main>
 
+        <script>
+            // Randomly rotate and move elements with "randomized" class.
+            const randomize = (elem) => {
+                elem.style.display = "inline-block";
+                elem.style.transform = `
+                    rotate(${-3 + 6 * Math.random()}deg)
+                    translate(${-5 + 10 * Math.random()}px, ${-5 + 10 * Math.random()}px)
+                `;
+            };
+            Array.from(document.querySelectorAll(".randomized")).map(randomize);
+        </script>
+
         <script>
             // Set blob size relative to window, but limit to 600.
             const size = Math.min(600, window.innerWidth - 64);