diff options
| author | Yuval Adam <_@yuv.al> | 2025-02-27 10:42:09 +0100 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-02-27 10:42:09 +0100 |
| commit | b33c2f06a4524bc846e66bbe3abf6428d1cf2305 (patch) | |
| tree | ad2369b91d3574a795438f9efd557f3a40d6ad4e /src/pages/index.astro | |
| parent | 82e862474f029cbee369dcc434dc69701fe327e9 (diff) | |
Astro project structure
Diffstat (limited to 'src/pages/index.astro')
| -rw-r--r-- | src/pages/index.astro | 144 |
1 files changed, 136 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> |