diff options
| author | Yuval Adam <_@yuv.al> | 2025-02-27 11:17:31 +0100 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-02-27 11:17:31 +0100 |
| commit | 2320997f086b18b8c79434a86f44b3a1d0e64398 (patch) | |
| tree | bf010fd4dbc0c4b5150456ca74c66411a6a71bee | |
| parent | 5734c40eac6c69bbb9adb1c625c08461f33524d5 (diff) | |
Just use basic html
| -rw-r--r-- | README.md | 27 | ||||
| -rw-r--r-- | index.html | 102 | ||||
| -rw-r--r-- | isometric/index.html | 29 |
3 files changed, 157 insertions, 1 deletions
@@ -1 +1,26 @@ -# Vibes
\ No newline at end of file +# Vibes + +A collection of creative web experiments and visual experiences. + +## Experiments + +- [Isometric Triangles](/isometric/index.html) - Dynamic background with animated geometric shapes in an isometric perspective. + +## Local Development + +To view the experiments locally: + +1. Clone this repository +2. Open the HTML files directly in your browser + - Main page: `index.html` + - Isometric Triangles: `isometric/index.html` + +## Technologies + +- HTML5 +- CSS3 +- JavaScript (Vanilla) + +## License + +MIT
\ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..52dc26c --- /dev/null +++ b/index.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Vibes</title> + <style> + body { + font-family: 'Helvetica Neue', Arial, sans-serif; + background-color: #121212; + color: #ffffff; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + text-align: center; + } + + .container { + max-width: 800px; + padding: 2rem; + } + + h1 { + font-size: 4rem; + margin-bottom: 1rem; + background: linear-gradient(45deg, #ff00aa, #00aaff); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + p { + font-size: 1.2rem; + line-height: 1.6; + margin-bottom: 2rem; + color: #aaaaaa; + } + + .experiments { + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 2rem; + } + + .experiment-card { + background: rgba(255, 255, 255, 0.05); + border-radius: 10px; + padding: 1.5rem; + transition: all 0.3s ease; + text-decoration: none; + color: white; + border: 1px solid rgba(255, 255, 255, 0.1); + } + + .experiment-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.2); + } + + .experiment-title { + font-size: 1.5rem; + margin-bottom: 0.5rem; + } + + .experiment-description { + color: #aaaaaa; + font-size: 1rem; + } + + footer { + margin-top: 4rem; + color: #666666; + font-size: 0.9rem; + } + </style> +</head> +<body> + <div class="container"> + <h1>Vibes</h1> + <p>A collection of creative web experiments and visual experiences.</p> + + <div class="experiments"> + <a href="isometric/index.html" class="experiment-card"> + <div class="experiment-title">Isometric Triangles</div> + <div class="experiment-description"> + Dynamic background with animated geometric shapes in an isometric perspective. + </div> + </a> + </div> + + <footer> + © 2025 Vibes + </footer> + </div> +</body> +</html> diff --git a/isometric/index.html b/isometric/index.html index 47dfbde..d5bf032 100644 --- a/isometric/index.html +++ b/isometric/index.html @@ -79,10 +79,39 @@ text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); margin-bottom: 1rem; } + + .back-link { + position: absolute; + top: 20px; + left: 20px; + z-index: 100; + color: white; + text-decoration: none; + background: rgba(0, 0, 0, 0.5); + padding: 10px 15px; + border-radius: 5px; + font-family: 'Arial', sans-serif; + font-size: 14px; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 5px; + } + + .back-link:hover { + background: rgba(255, 255, 255, 0.2); + } + + .back-link::before { + content: "←"; + font-size: 18px; + } </style> </head> <body> + <a href="../index.html" class="back-link">Back to Home</a> + <div class="content"> <h1>Isometric Triangles</h1> </div> |