diff options
| -rw-r--r-- | README.md | 52 | ||||
| -rw-r--r-- | isometric/index.html | 202 | ||||
| -rw-r--r-- | src/components/Welcome.astro | 209 | ||||
| -rw-r--r-- | src/layouts/Layout.astro | 22 | ||||
| -rw-r--r-- | src/pages/index.astro | 144 | ||||
| -rw-r--r-- | src/pages/isometric/index.astro | 221 |
6 files changed, 364 insertions, 486 deletions
@@ -1,48 +1,10 @@ -# Astro Starter Kit: Basics +# Vibes -```sh -npm create astro@latest -- --template basics -``` +[https://vibes.yuv.al](https://vibes.yuv.al) -[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) -[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) -[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) +## Dev -> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun! - - - -## 🚀 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> |