summaryrefslogtreecommitdiff
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
parent82e862474f029cbee369dcc434dc69701fe327e9 (diff)
Astro project structure
Diffstat
-rw-r--r--README.md52
-rw-r--r--isometric/index.html202
-rw-r--r--src/components/Welcome.astro209
-rw-r--r--src/layouts/Layout.astro22
-rw-r--r--src/pages/index.astro144
-rw-r--r--src/pages/isometric/index.astro221
6 files changed, 364 insertions, 486 deletions
diff --git a/README.md b/README.md
index ff19a3e..483d034 100644
--- a/README.md
+++ b/README.md
@@ -1,48 +1,10 @@
-# Astro Starter Kit: Basics
+# Vibes
-```sh
-npm create astro@latest -- --template basics
-```
+[https://vibes.yuv.al](https://vibes.yuv.al)
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+## Dev
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
-/
-├── public/
-│ └── favicon.svg
-├── src/
-│ ├── layouts/
-│ │ └── Layout.astro
-│ └── pages/
-│ └── index.astro
-└── package.json
-```
-
-To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command | Action |
-| :------------------------ | :----------------------------------------------- |
-| `npm install` | Installs dependencies |
-| `npm run dev` | Starts local dev server at `localhost:4321` |
-| `npm run build` | Build your production site to `./dist/` |
-| `npm run preview` | Preview your build locally, before deploying |
-| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+```bash
+$ npm install
+$ npm run dev
+``` \ No newline at end of file
diff --git a/isometric/index.html b/isometric/index.html
deleted file mode 100644
index 47dfbde..0000000
--- a/isometric/index.html
+++ /dev/null
@@ -1,202 +0,0 @@
-<!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 () {
- console.log("DOM loaded, creating triangles");
-
- 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));
-
- 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();
- }
-
- 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);
- console.log(`Created isometric triangle at (${left}, ${top}) with size ${size} and color ${color}`);
- }
-
- // 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();
- }
- });
-
- console.log("Initialization complete");
- });
- </script>
-</body>
-
-</html> \ No newline at end of file
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>
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-15 11:51:20 +0000