feat: add birthday easter egg

Author: Fraguinha

src/website/src/views/layout/base.ejs

@@ -64,6 +64,8 @@
     <!-- Theme -->
     <link href="/stylesheets/style.css"
           rel="stylesheet">
+    <!-- Confetti -->
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
     <!-- Google -->
     <script async
             src="https://www.googletagmanager.com/gtag/js?id=G-B4HH4VHYV9"></script>

src/website/src/views/pages/homepage/homepage.ejs

@@ -206,9 +206,101 @@
         </div>
     </main>
     <%- include("../../partials/_footer.ejs") %>
+    <div class="modal fade"
+         id="birthdayModal"
+         tabindex="-1"
+         role="dialog"
+         aria-labelledby="birthdayModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered"
+             role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"
+                        id="birthdayModalLabel">Feliz Aniversário António!</h5>
+                    <button type="button"
+                            class="close"
+                            data-dismiss="modal"
+                            aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <script>
-  AOS.init()
+    AOS.init()
+</script>
+
+<script>
+    $(document).ready(() => {
+        const today = new Date();
+        const isBirthday = today.getDate() === 21 && today.getMonth() === 9;
+
+        if (!isBirthday) {
+            return;
+        }
+
+        const birthdayCanvas = document.createElement('canvas');
+        birthdayCanvas.style.position = 'fixed';
+        birthdayCanvas.style.top = 0;
+        birthdayCanvas.style.left = 0;
+        birthdayCanvas.style.width = '100vw';
+        birthdayCanvas.style.height = '100vh';
+        birthdayCanvas.style.zIndex = 1045;
+        document.body.appendChild(birthdayCanvas);
+
+        const animation = confetti.create(birthdayCanvas, {
+            resize: true,
+            useWorker: true
+        });
+
+        let duration = 10000;
+        let animationEnd = Date.now() + duration;
+        let defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 1045 };
+
+        function randomInRange(min, max) {
+            return Math.random() * (max - min) + min;
+        }
+
+        let interval;
+        function startConfetti() {
+            interval = setInterval(function () {
+                let timeLeft = animationEnd - Date.now();
+
+                if (timeLeft <= 0) {
+                    stopAndCleanup();
+                    return;
+                }
+
+                let particleCount = 50 * (timeLeft / duration);
+                animation({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
+                animation({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
+            }, 250);
+        }
+
+        function stopAndCleanup() {
+            if (interval) {
+                clearInterval(interval);
+            }
+            $('#birthdayModal').modal('hide');
+            if (document.body.contains(birthdayCanvas)) {
+                document.body.removeChild(birthdayCanvas);
+            }
+        }
+
+        $('#birthdayModal').on('hidden.bs.modal', function () {
+            stopAndCleanup();
+        });
+
+        $('#birthdayModal').modal('show');
+        startConfetti();
+
+        setTimeout(() => {
+            $('#birthdayModal').modal('hide');
+        }, duration);
+    });
 </script>