From 259befc9a58da44d82a3101504ba805a2957949e Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Thu, 27 Feb 2025 11:15:18 +0100
Subject: Refactor but still no dice

---
 src/components/IsometricTriangles.astro | 211 ++++++++++++++++++++++++++++++++
 1 file changed, 211 insertions(+)
 create mode 100644 src/components/IsometricTriangles.astro

(limited to 'src/components/IsometricTriangles.astro')

diff --git a/src/components/IsometricTriangles.astro b/src/components/IsometricTriangles.astro
new file mode 100644
index 0000000..4c4a091
--- /dev/null
+++ b/src/components/IsometricTriangles.astro
@@ -0,0 +1,211 @@
+---
+// Isometric Triangles Component
+---
+
+<div class="content">
+    <h1>Isometric Triangles</h1>
+</div>
+
+<style>
+    body,
+    html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background-color: #000;
+    }
+
+    .triangle {
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        opacity: 0.7;
+        transform-origin: center;
+        animation: float 20s infinite ease-in-out;
+    }
+
+    /* Create isometric triangle using clip-path instead of borders */
+    .isometric {
+        width: 100px;
+        height: 100px;
+        background-color: rgba(255, 255, 255, 0.8);
+        border: none;
+        clip-path: polygon(50% 0%, 100% 75%, 0% 75%);
+        transform-style: preserve-3d;
+        perspective: 800px;
+    }
+
+    @keyframes float {
+        0% {
+            transform: translateY(0) rotate(0deg) scale(1);
+        }
+
+        25% {
+            transform: translateY(-20px) rotate(90deg) scale(1.05);
+        }
+
+        50% {
+            transform: translateY(0) rotate(180deg) scale(1);
+        }
+
+        75% {
+            transform: translateY(20px) rotate(270deg) scale(0.95);
+        }
+
+        100% {
+            transform: translateY(0) rotate(360deg) scale(1);
+        }
+    }
+
+    .content {
+        position: relative;
+        z-index: 10;
+        color: white;
+        text-align: center;
+        font-family: "Arial", sans-serif;
+
+        /* Center vertically and horizontally */
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+    }
+
+    h1 {
+        font-size: 3rem;
+        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+        margin-bottom: 1rem;
+    }
+</style>
+
+<script is:inline>
+    document.addEventListener("DOMContentLoaded", function () {
+        const colors = [
+            "#FF0000",
+            "#FF00FF",
+            "#FF00AA",
+            "#AA00FF",
+            "#0000FF",
+            "#00AAFF",
+            "#00FFFF",
+            "#00FFAA",
+            "#00FF00",
+            "#AAFF00",
+            "#FFFF00",
+            "#FFAA00",
+            "#FF6600",
+            "#FF0066",
+            "#FFFFFF",
+            "#AAAAFF",
+        ];
+
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const triangleCount = Math.max(
+            50,
+            Math.floor((windowWidth * windowHeight) / 10000),
+        );
+
+        // Create triangles using DOM elements with isometric perspective
+        for (let i = 0; i < triangleCount; i++) {
+            createIsometricTriangle();
+        }
+
+        function createIsometricTriangle() {
+            const triangle = document.createElement("div");
+            triangle.className = "triangle isometric";
+
+            // Random size between 50 and 150
+            const size = 50 + Math.random() * 100;
+
+            // Random position
+            const left = Math.random() * windowWidth;
+            const top = Math.random() * windowHeight;
+
+            // Random color
+            const color =
+                colors[Math.floor(Math.random() * colors.length)];
+
+            // Random rotation for isometric effect
+            const rotateX = -30 + Math.random() * 60; // -30 to 30 degrees
+            const rotateY = -30 + Math.random() * 60; // -30 to 30 degrees
+            const rotateZ = Math.random() * 360; // 0 to 360 degrees
+
+            // Random animation duration
+            const duration = 10 + Math.random() * 40;
+
+            // Random direction
+            const direction =
+                Math.random() > 0.5 ? "normal" : "reverse";
+
+            // Set triangle properties
+            triangle.style.left = `${left}px`;
+            triangle.style.top = `${top}px`;
+            triangle.style.width = `${size}px`;
+            triangle.style.height = `${size}px`;
+            triangle.style.backgroundColor = color;
+            triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+            triangle.style.animationDuration = `${duration}s`;
+            triangle.style.animationDirection = direction;
+
+            // Add to body
+            document.body.appendChild(triangle);
+        }
+
+        // Add some triangles when mouse moves
+        document.addEventListener("mousemove", function (e) {
+            if (Math.random() < 0.05) {
+                // 5% chance to create a triangle on mouse move
+                const triangle = document.createElement("div");
+                triangle.className = "triangle isometric";
+
+                const size = 50 + Math.random() * 100;
+                const color =
+                    colors[Math.floor(Math.random() * colors.length)];
+
+                // Random rotation for isometric effect
+                const rotateX = -30 + Math.random() * 60;
+                const rotateY = -30 + Math.random() * 60;
+                const rotateZ = Math.random() * 360;
+
+                triangle.style.left = `${e.clientX - size / 2}px`;
+                triangle.style.top = `${e.clientY - size / 2}px`;
+                triangle.style.width = `${size}px`;
+                triangle.style.height = `${size}px`;
+                triangle.style.backgroundColor = color;
+                triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+                triangle.style.animationDuration = `${10 + Math.random() * 40}s`;
+                triangle.style.animationDirection =
+                    Math.random() > 0.5 ? "normal" : "reverse";
+
+                document.body.appendChild(triangle);
+            }
+        });
+
+        // Handle window resize
+        window.addEventListener("resize", function () {
+            // Clear all existing triangles
+            const existingTriangles =
+                document.querySelectorAll(".triangle");
+            existingTriangles.forEach((triangle) => {
+                document.body.removeChild(triangle);
+            });
+
+            // Create new triangles based on new window size
+            const newWindowWidth = window.innerWidth;
+            const newWindowHeight = window.innerHeight;
+            const newTriangleCount = Math.max(
+                50,
+                Math.floor((newWindowWidth * newWindowHeight) / 10000),
+            );
+
+            for (let i = 0; i < newTriangleCount; i++) {
+                createIsometricTriangle();
+            }
+        });
+    });
+</script>
-- 
cgit v1.3.1