Nieve

Author: mouredev

link_bio/assets/css/styles.css

@@ -1,3 +1,5 @@
+/* General */
+
 body {
     background-color: #1A1A1A;
 }
@@ -7,9 +9,35 @@ a:hover {
 }
 
 @keyframes blinker {
-    50% { opacity: 0; }
+    50% {
+        opacity: 0;
+    }
 }
 
 .blink {
     animation: blinker 1.5s linear infinite;
 }
+
+/* Snow */
+
+#SnowflakeContainer {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+}
+
+.snowflake {
+    padding-left: 15px;
+    font-family: Cambria, Georgia, serif;
+    font-size: 14px;
+    line-height: 24px;
+    position: fixed;
+    color: #F7F7F7;
+    user-select: none;
+    z-index: 1000;
+    pointer-events: none;
+}
+
+.snowflake:hover {
+    cursor: default;
+}

link_bio/assets/js/snowflakes.js

@@ -0,0 +1,123 @@
+import { useEffect } from 'react';
+
+export function Snowflakes() {
+
+    useEffect(() => {
+        function handlePageChange() {
+            clearSnowflakes();
+            generateSnowflakes();
+        }
+
+        function clearSnowflakes() {
+            const snowflakes = document.querySelectorAll(".snowflake");
+            snowflakes.forEach(snowflake => snowflake.remove());
+        }
+
+        function getSupportedPropertyName(properties) {
+            for (var i = 0; i < properties.length; i++) {
+                if (typeof document.body.style[properties[i]] !== "undefined") {
+                    return properties[i];
+                }
+            }
+            return null;
+        }
+
+        class Snowflake {
+            constructor(element, speed, xPos, yPos) {
+                this.element = element;
+                this.speed = speed;
+                this.xPos = xPos;
+                this.yPos = yPos;
+                this.counter = 0;
+                this.sign = Math.random() < 0.5 ? 1 : -1;
+                this.element.style.opacity = 0.1 + Math.random();
+                this.element.style.fontSize = 12 + 50 * Math.random() + 'px';
+            }
+
+            update() {
+                this.counter += this.speed / 5000;
+                this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40;
+                this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;
+                setTranslate3DTransform(this.element, Math.round(this.xPos), Math.round(this.yPos));
+
+                if (this.yPos > browserHeight) {
+                    this.yPos = -50;
+                }
+            }
+        }
+
+        function setTranslate3DTransform(element, x, y) {
+            var transform = "translate3d(" + x + "px, " + y + "px, 0)";
+            element.style[transformProperty] = transform;
+        }
+
+        function generateSnowflakes() {
+            var originalSnowflake = document.querySelector(".snowflake");
+            if (!originalSnowflake) {
+                console.error("No element with class 'snowflake' found");
+                return;
+            }
+            var container = originalSnowflake.parentNode;
+            browserWidth = document.documentElement.clientWidth;
+            browserHeight = document.documentElement.clientHeight;
+
+            for (var i = 0; i < numberOfSnowflakes; i++) {
+                var clone = originalSnowflake.cloneNode(true);
+                container.appendChild(clone);
+                var xPos = getPosition(50, browserWidth);
+                var yPos = getPosition(50, browserHeight);
+                var speed = 5 + 40 * Math.random();
+                var snowflake = new Snowflake(clone, speed, xPos, yPos);
+                snowflakes.push(snowflake);
+            }
+            container.removeChild(originalSnowflake);
+            moveSnowflakes();
+        }
+
+        function moveSnowflakes() {
+            for (var i = 0; i < snowflakes.length; i++) {
+                var snowflake = snowflakes[i];
+                snowflake.update();
+            }
+            if (resetPosition) {
+                browserWidth = document.documentElement.clientWidth;
+                browserHeight = document.documentElement.clientHeight;
+                for (var i = 0; i < snowflakes.length; i++) {
+                    var snowflake = snowflakes[i];
+                    snowflake.xPos = getPosition(50, browserWidth);
+                    snowflake.yPos = getPosition(50, browserHeight);
+                }
+                resetPosition = false;
+            }
+            requestAnimationFrame(moveSnowflakes);
+        }
+
+        function getPosition(offset, size) {
+            return Math.round(-1 * offset + Math.random() * (size + 2 * offset));
+        }
+
+        function setResetFlag() {
+            resetPosition = true;
+        }
+
+        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+        var transforms = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"];
+        var transformProperty = getSupportedPropertyName(transforms);
+        var snowflakes = [];
+        var browserWidth;
+        var browserHeight;
+        var numberOfSnowflakes = 25;
+        var resetPosition = false;
+
+        generateSnowflakes();
+        window.addEventListener("resize", setResetFlag, false);
+        window.addEventListener("popstate", handlePageChange, false);
+
+        return () => {
+            window.removeEventListener("resize", setResetFlag, false);
+            window.removeEventListener("popstate", handlePageChange, false);
+        };
+    }, []);
+
+    return null;
+}

link_bio/link_bio/components/navbar.py

@@ -1,8 +1,10 @@
 import reflex as rx
-import link_bio.styles.styles as styles
+
+from link_bio import conf
+from link_bio.lib.snow import snow
 from link_bio.routes import Route
-from link_bio.styles.styles import Size
 from link_bio.styles.colors import Color
+from link_bio.styles.styles import Size
 
 
 def navbar() -> rx.Component:
@@ -13,15 +15,16 @@ def navbar() -> rx.Component:
                 width="auto",
                 height=Size.LARGE.value,
                 justify="start",
-                alt=f"MoureDev logo"
+                alt="MoureDev logo",
             ),
-            href=Route.INDEX.value
+            href=Route.INDEX.value,
         ),
+        rx.cond(conf.SNOW, snow()),
         position="sticky",
         bg=Color.DARK.value,
         border_bottom="1px solid rgba(247, 247, 247, 0.2)",
         padding_x=Size.BIG.value,
         padding_y=Size.DEFAULT.value,
         z_index="999",
-        top="0"
+        top="0",
     )

link_bio/link_bio/conf.py

@@ -0,0 +1 @@
+SNOW = True

link_bio/link_bio/lib/snow.py

@@ -0,0 +1,18 @@
+import reflex as rx
+
+
+class Snowflakes(rx.Component):
+    tag = "Snowflakes"
+    library = "/public/js/snowflakes.js"
+
+
+snowflakes = Snowflakes.create
+
+
+def snow() -> rx.Component:
+    return rx.el.div(
+        rx.el.p("*", class_name="snowflake"),
+        snowflakes(),
+        id="SnowflakeContainer",
+        aria_hidden="true",
+    )

link_bio/requirements.txt

@@ -1,5 +1,5 @@
-pip==25.2
-reflex==0.8.11
+pip==25.3
+reflex==0.8.24.post1
 python-dotenv==1.0.1
 supabase==2.13.0
 configcat-client==9.0.4