summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/IsometricBackground.astro83
-rw-r--r--src/components/IsometricScript.astro143
-rw-r--r--src/components/IsometricTriangles.astro211
3 files changed, 437 insertions, 0 deletions
diff --git a/src/components/IsometricBackground.astro b/src/components/IsometricBackground.astro
new file mode 100644
index 0000000..68c6205
--- /dev/null
+++ b/src/components/IsometricBackground.astro
@@ -0,0 +1,83 @@
+---
+// Isometric Background 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>
diff --git a/src/components/IsometricScript.astro b/src/components/IsometricScript.astro
new file mode 100644
index 0000000..9b251a9
--- /dev/null
+++ b/src/components/IsometricScript.astro
@@ -0,0 +1,143 @@
+---
+---
+
+<script>
+ // Immediately execute the script
+ console.log("Script running, creating triangles");
+
+ const colors = [
+ "#FF0000",
+ "#FF00FF",
+ "#FF00AA",
+ "#AA00FF",
+ "#0000FF",
+ "#00AAFF",
+ "#00FFFF",
+ "#00FFAA",
+ "#00FF00",
+ "#AAFF00",
+ "#FFFF00",
+ "#FFAA00",
+ "#FF6600",
+ "#FF0066",
+ "#FFFFFF",
+ "#AAAAFF",
+ ];
+
+ // Wait for DOM to be fully loaded
+ document.addEventListener('DOMContentLoaded', function() {
+ initializeTriangles();
+ });
+
+ function initializeTriangles() {
+ const windowWidth = window.innerWidth;
+ const windowHeight = window.innerHeight;
+ const triangleCount = Math.max(
+ 50,
+ Math.floor((windowWidth * windowHeight) / 10000),
+ );
+
+ console.log(`Creating ${triangleCount} triangles for window size ${windowWidth}x${windowHeight}`);
+
+ // Create triangles using DOM elements with isometric perspective
+ for (let i = 0; i < triangleCount; i++) {
+ createIsometricTriangle();
+ }
+
+ // 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();
+ }
+ });
+ }
+
+ function createIsometricTriangle() {
+ const windowWidth = window.innerWidth;
+ const windowHeight = window.innerHeight;
+
+ 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);
+ }
+</script>
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>
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-15 12:27:42 +0000