Astro project structure

4 files changed, 357 insertions, 239 deletions

diff --git a/src/components/Welcome.astro b/src/components/Welcome.astro
deleted file mode 100644
index 6b7b9c7..0000000
--- a/src/components/Welcome.astro
+++ /dev/null
@@ -1,209 +0,0 @@
----
-import astroLogo from '../assets/astro.svg';
-import background from '../assets/background.svg';
----
-
-<div id="container">
-	<img id="background" src={background.src} alt="" fetchpriority="high" />
-	<main>
-		<section id="hero">
-			<a href="https://astro.build"
-				><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a
-			>
-			<h1>
-				To get started, open the <code><pre>src/pages</pre></code> directory in your project.
-			</h1>
-			<section id="links">
-				<a class="button" href="https://docs.astro.build">Read our docs</a>
-				<a href="https://astro.build/chat"
-					>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
-						><path
-							fill="currentColor"
-							d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
-						></path></svg
-					>
-				</a>
-			</section>
-		</section>
-	</main>
-
-	<a href="https://astro.build/blog/astro-5/" id="news" class="box">
-		<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
-			><path
-				d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
-				fill="#111827"></path></svg
-		>
-		<h2>What's New in Astro 5.0?</h2>
-		<p>
-			From content layers to server islands, click to learn more about the new features and
-			improvements in Astro 5.0
-		</p>
-	</a>
-</div>
-
-<style>
-	#background {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: -1;
-		filter: blur(100px);
-	}
-
-	#container {
-		font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
-		height: 100%;
-	}
-
-	main {
-		height: 100%;
-		display: flex;
-		justify-content: center;
-	}
-
-	#hero {
-		display: flex;
-		align-items: start;
-		flex-direction: column;
-		justify-content: center;
-		padding: 16px;
-	}
-
-	h1 {
-		font-size: 22px;
-		margin-top: 0.25em;
-	}
-
-	#links {
-		display: flex;
-		gap: 16px;
-	}
-
-	#links a {
-		display: flex;
-		align-items: center;
-		padding: 10px 12px;
-		color: #111827;
-		text-decoration: none;
-		transition: color 0.2s;
-	}
-
-	#links a:hover {
-		color: rgb(78, 80, 86);
-	}
-
-	#links a svg {
-		height: 1em;
-		margin-left: 8px;
-	}
-
-	#links a.button {
-		color: white;
-		background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
-		box-shadow:
-			inset 0 0 0 1px rgba(255, 255, 255, 0.12),
-			inset 0 -2px 0 rgba(0, 0, 0, 0.24);
-		border-radius: 10px;
-	}
-
-	#links a.button:hover {
-		color: rgb(230, 230, 230);
-		box-shadow: none;
-	}
-
-	pre {
-		font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
-			'DejaVu Sans Mono', monospace;
-		font-weight: normal;
-		background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-clip: text;
-		margin: 0;
-	}
-
-	h2 {
-		margin: 0 0 1em;
-		font-weight: normal;
-		color: #111827;
-		font-size: 20px;
-	}
-
-	p {
-		color: #4b5563;
-		font-size: 16px;
-		line-height: 24px;
-		letter-spacing: -0.006em;
-		margin: 0;
-	}
-
-	code {
-		display: inline-block;
-		background:
-			linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
-			linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
-		border-radius: 8px;
-		border: 1px solid transparent;
-		padding: 6px 8px;
-	}
-
-	.box {
-		padding: 16px;
-		background: rgba(255, 255, 255, 1);
-		border-radius: 16px;
-		border: 1px solid white;
-	}
-
-	#news {
-		position: absolute;
-		bottom: 16px;
-		right: 16px;
-		max-width: 300px;
-		text-decoration: none;
-		transition: background 0.2s;
-		backdrop-filter: blur(50px);
-	}
-
-	#news:hover {
-		background: rgba(255, 255, 255, 0.55);
-	}
-
-	@media screen and (max-height: 368px) {
-		#news {
-			display: none;
-		}
-	}
-
-	@media screen and (max-width: 768px) {
-		#container {
-			display: flex;
-			flex-direction: column;
-		}
-
-		#hero {
-			display: block;
-			padding-top: 10%;
-		}
-
-		#links {
-			flex-wrap: wrap;
-		}
-
-		#links a.button {
-			padding: 14px 18px;
-		}
-
-		#news {
-			right: 16px;
-			left: 16px;
-			bottom: 2.5rem;
-			max-width: 100%;
-		}
-
-		h1 {
-			line-height: 1.5;
-		}
-	}
-</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
deleted file mode 100644
index e455c61..0000000
--- a/src/layouts/Layout.astro
+++ /dev/null
@@ -1,22 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro Basics</title>
-	</head>
-	<body>
-		<slot />
-	</body>
-</html>
-
-<style>
-	html,
-	body {
-		margin: 0;
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c04f360..0e40b3d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,139 @@
 ---
-import Welcome from '../components/Welcome.astro';
-import Layout from '../layouts/Layout.astro';
-
-// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
-// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
+// Vibes homepage
 ---
 
-<Layout>
-	<Welcome />
-</Layout>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<title>Vibes</title>
+		<style>
+			body {
+				font-family: "Arial", sans-serif;
+				background-color: #121212;
+				color: #ffffff;
+				margin: 0;
+				padding: 0;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				min-height: 100vh;
+				text-align: center;
+			}
+
+			h1 {
+				font-size: 3rem;
+				margin-bottom: 2rem;
+				background: linear-gradient(
+					45deg,
+					#ff5252,
+					#ff4081,
+					#e040fb,
+					#7c4dff,
+					#536dfe,
+					#448aff
+				);
+				-webkit-background-clip: text;
+				background-clip: text;
+				color: transparent;
+				animation: gradient 10s ease infinite;
+				background-size: 400% 400%;
+			}
+
+			.experiments {
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: center;
+				gap: 2rem;
+				max-width: 1200px;
+				padding: 2rem;
+			}
+
+			.experiment-card {
+				background-color: rgba(255, 255, 255, 0.05);
+				border-radius: 10px;
+				overflow: hidden;
+				width: 300px;
+				transition:
+					transform 0.3s,
+					box-shadow 0.3s;
+				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+			}
+
+			.experiment-card:hover {
+				transform: translateY(-10px);
+				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+			}
+
+			.card-preview {
+				height: 200px;
+				background-color: #333;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 2rem;
+				background: linear-gradient(45deg, #ff5252, #7c4dff);
+			}
+
+			.card-content {
+				padding: 1.5rem;
+			}
+
+			.card-content h2 {
+				margin-top: 0;
+				font-size: 1.5rem;
+			}
+
+			.card-content p {
+				color: #aaa;
+				margin-bottom: 1.5rem;
+			}
+
+			.view-btn {
+				display: inline-block;
+				padding: 0.5rem 1.5rem;
+				background: linear-gradient(45deg, #536dfe, #448aff);
+				color: white;
+				text-decoration: none;
+				border-radius: 30px;
+				font-weight: bold;
+				transition: opacity 0.3s;
+			}
+
+			.view-btn:hover {
+				opacity: 0.9;
+			}
+
+			@keyframes gradient {
+				0% {
+					background-position: 0% 50%;
+				}
+				50% {
+					background-position: 100% 50%;
+				}
+				100% {
+					background-position: 0% 50%;
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<h1>Vibes</h1>
+
+		<div class="experiments">
+			<div class="experiment-card">
+				<div class="card-preview">▲</div>
+				<div class="card-content">
+					<h2>Isometric Triangles</h2>
+					<p>
+						A dynamic background with colorful isometric triangles
+						that rotate and float across the screen.
+					</p>
+					<a href="/isometric/" class="view-btn">Go</a>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/src/pages/isometric/index.astro b/src/pages/isometric/index.astro
new file mode 100644
index 0000000..df4ff5d
--- /dev/null
+++ b/src/pages/isometric/index.astro
@@ -0,0 +1,221 @@
+---
+// Isometric Triangles Experiment
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Isometric Triangles</title>
+        <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>
+    </head>
+
+    <body>
+        <div class="content">
+            <h1>Isometric Triangles</h1>
+        </div>
+
+        <script>
+            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>
+    </body>
+</html>