summaryrefslogtreecommitdiff
path: root/src/pages
diff options
context:
space:
mode:
authorYuval Adam <_@yuv.al>2025-02-27 10:42:09 +0100
committerYuval Adam <_@yuv.al>2025-02-27 10:42:09 +0100
commitb33c2f06a4524bc846e66bbe3abf6428d1cf2305 (patch)
treead2369b91d3574a795438f9efd557f3a40d6ad4e /src/pages
parent82e862474f029cbee369dcc434dc69701fe327e9 (diff)
Astro project structure
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/index.astro144
-rw-r--r--src/pages/isometric/index.astro221
2 files changed, 357 insertions, 8 deletions
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>
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-20 12:30:12 +0000