redesign heh

author: Yuval Adam <_@yuv.al> 2025-02-27 11:40:22 +0100
committer: Yuval Adam <_@yuv.al> 2025-02-27 11:40:22 +0100
commit: 6e70bc78a66d21e7e6caf86f252b7972416f3ce5 (patch)
tree: a13121858946871e77fcb429f5728b375fae93ef
parent: 2320997f086b18b8c79434a86f44b3a1d0e64398 (diff)
3 files changed, 118 insertions, 59 deletions
diff --git a/README.md b/README.md
index 5d10dc6..cc2e551 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
-# Vibes
+# ✨ Vibes ✨
 
-A collection of creative web experiments and visual experiences.
+A collection of cute & creative web experiments and visual experiences.
 
-## Experiments
+## 🌈 Experiments
 
 - [Isometric Triangles](/isometric/index.html) - Dynamic background with animated geometric shapes in an isometric perspective.
 
-## Local Development
+## 🚀 Local Development
 
 To view the experiments locally:
 
@@ -15,12 +15,22 @@ To view the experiments locally:
    - Main page: `index.html`
    - Isometric Triangles: `isometric/index.html`
 
-## Technologies
+## 💻 Technologies
 
 - HTML5
 - CSS3
 - JavaScript (Vanilla)
+- Google Fonts (VT323 & Fredoka)
 
-## License
+## 🎨 Style
+
+The project uses a bright, cute, and slightly pixelated aesthetic with:
+- Pastel colors (pink, purple, light blue)
+- Pixelated rendering for some elements
+- Playful borders and shadows
+- Retro-inspired pixel font (VT323) for headings
+- Modern rounded font (Fredoka) for body text
+
+## 📝 License
 
 MIT
 \ No newline at end of file
diff --git a/index.html b/index.html
index 52dc26c..0ce74f3 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vibes</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=VT323&family=Fredoka:wght@400;600&display=swap"
+        rel="stylesheet">
     <style>
         body {
-            font-family: 'Helvetica Neue', Arial, sans-serif;
-            background-color: #121212;
-            color: #ffffff;
+            font-family: 'Fredoka', sans-serif;
+            background-color: #ffd6e0;
+            color: #5a3d5c;
             margin: 0;
             padding: 0;
             display: flex;
@@ -16,75 +21,96 @@
             align-items: center;
             min-height: 100vh;
             text-align: center;
+            background-image:
+                linear-gradient(45deg, #ffd6e0 25%, transparent 25%),
+                linear-gradient(-45deg, #ffd6e0 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, #ffd6e0 75%),
+                linear-gradient(-45deg, transparent 75%, #ffd6e0 75%);
+            background-size: 20px 20px;
+            background-color: #ffecf1;
         }
-        
+
         .container {
             max-width: 800px;
             padding: 2rem;
+            background-color: rgba(255, 255, 255, 0.85);
+            border-radius: 20px;
+            box-shadow: 0 10px 25px rgba(90, 61, 92, 0.2);
+            border: 5px solid #c1a5e8;
+            image-rendering: pixelated;
         }
-        
+
         h1 {
-            font-size: 4rem;
+            font-family: 'VT323', monospace;
+            font-size: 5rem;
             margin-bottom: 1rem;
-            background: linear-gradient(45deg, #ff00aa, #00aaff);
+            background: linear-gradient(45deg, #ff6ec4, #7873f5);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
+            text-shadow: 3px 3px 0px rgba(255, 110, 196, 0.3);
+            letter-spacing: 2px;
         }
-        
+
         p {
             font-size: 1.2rem;
             line-height: 1.6;
             margin-bottom: 2rem;
-            color: #aaaaaa;
+            color: #7c5295;
         }
-        
+
         .experiments {
             display: flex;
             flex-direction: column;
             gap: 1rem;
             margin-top: 2rem;
         }
-        
+
         .experiment-card {
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 10px;
+            background: #c1a5e8;
+            border-radius: 15px;
             padding: 1.5rem;
             transition: all 0.3s ease;
             text-decoration: none;
-            color: white;
-            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: #5a3d5c;
+            border: 3px dashed #ff6ec4;
+            box-shadow: 5px 5px 0px #7873f5;
+            transform: rotate(-1deg);
         }
-        
+
         .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);
+            transform: translateY(-5px) rotate(1deg);
+            box-shadow: 8px 8px 0px #7873f5;
+            background: #d4c1f0;
         }
-        
+
         .experiment-title {
-            font-size: 1.5rem;
+            font-family: 'VT323', monospace;
+            font-size: 2rem;
             margin-bottom: 0.5rem;
+            color: #5a3d5c;
         }
-        
+
         .experiment-description {
-            color: #aaaaaa;
+            color: #5a3d5c;
             font-size: 1rem;
         }
-        
+
         footer {
             margin-top: 4rem;
-            color: #666666;
+            color: #7c5295;
             font-size: 0.9rem;
+            font-family: 'VT323', monospace;
+            letter-spacing: 1px;
         }
     </style>
 </head>
+
 <body>
     <div class="container">
         <h1>Vibes</h1>
-        <p>A collection of creative web experiments and visual experiences.</p>
-        
+        <p>A collection of cute & 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>
@@ -93,10 +119,11 @@
                 </div>
             </a>
         </div>
-        
+
         <footer>
-            &copy; 2025 Vibes
+            &copy; 2025 Vibes ♡
         </footer>
     </div>
 </body>
-</html>
+
+</html>
+\ No newline at end of file
diff --git a/isometric/index.html b/isometric/index.html
index d5bf032..c93d4a6 100644
--- a/isometric/index.html
+++ b/isometric/index.html
@@ -5,6 +5,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Isometric Triangles</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=VT323&family=Fredoka:wght@400;600&display=swap"
+        rel="stylesheet">
     <style>
         body,
         html {
@@ -13,7 +17,8 @@
             width: 100%;
             height: 100%;
             overflow: hidden;
-            background-color: #000;
+            background-color: #c1a5e8;
+            font-family: 'Fredoka', sans-serif;
         }
 
         .triangle {
@@ -21,20 +26,22 @@
             width: 0;
             height: 0;
             border-style: solid;
-            opacity: 0.7;
+            opacity: 0.8;
             transform-origin: center;
             animation: float 20s infinite ease-in-out;
+            image-rendering: pixelated;
         }
 
         /* Create isometric triangle using clip-path instead of borders */
         .isometric {
             width: 100px;
             height: 100px;
-            background-color: rgba(255, 255, 255, 0.8);
+            background-color: rgba(255, 255, 255, 0.9);
             border: none;
             clip-path: polygon(50% 0%, 100% 75%, 0% 75%);
             transform-style: preserve-3d;
             perspective: 800px;
+            filter: drop-shadow(2px 2px 0 rgba(90, 61, 92, 0.3));
         }
 
         @keyframes float {
@@ -62,9 +69,9 @@
         .content {
             position: relative;
             z-index: 10;
-            color: white;
+            color: #5a3d5c;
             text-align: center;
-            font-family: 'Arial', sans-serif;
+            font-family: 'Fredoka', sans-serif;
 
             /* Center vertically and horizontally */
             position: absolute;
@@ -72,48 +79,63 @@
             left: 50%;
             transform: translate(-50%, -50%);
             width: 100%;
+            background-color: rgba(255, 255, 255, 0.7);
+            padding: 20px;
+            border-radius: 20px;
+            border: 5px dashed #ff6ec4;
+            box-shadow: 5px 5px 0px #7873f5;
+            max-width: 500px;
+            margin: 0 auto;
         }
 
         h1 {
-            font-size: 3rem;
-            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+            font-family: 'VT323', monospace;
+            font-size: 3.5rem;
+            text-shadow: 3px 3px 0px rgba(255, 110, 196, 0.5);
             margin-bottom: 1rem;
+            color: #5a3d5c;
+            letter-spacing: 2px;
         }
-        
+
         .back-link {
             position: absolute;
             top: 20px;
             left: 20px;
             z-index: 100;
-            color: white;
+            color: #5a3d5c;
             text-decoration: none;
-            background: rgba(0, 0, 0, 0.5);
+            background: rgba(255, 255, 255, 0.8);
             padding: 10px 15px;
-            border-radius: 5px;
-            font-family: 'Arial', sans-serif;
-            font-size: 14px;
+            border-radius: 10px;
+            font-family: 'VT323', monospace;
+            font-size: 18px;
             transition: all 0.3s ease;
             display: flex;
             align-items: center;
             gap: 5px;
+            border: 3px solid #ff6ec4;
+            box-shadow: 3px 3px 0px #7873f5;
         }
-        
+
         .back-link:hover {
-            background: rgba(255, 255, 255, 0.2);
+            background: rgba(255, 255, 255, 1);
+            transform: translateY(-3px);
+            box-shadow: 5px 5px 0px #7873f5;
         }
-        
+
         .back-link::before {
             content: "←";
-            font-size: 18px;
+            font-size: 22px;
         }
     </style>
 </head>
 
 <body>
     <a href="../index.html" class="back-link">Back to Home</a>
-    
+
     <div class="content">
         <h1>Isometric Triangles</h1>
+        <p>Move your mouse around to create more cute triangles! ✨</p>
     </div>
 
     <script>
@@ -121,10 +143,10 @@
             console.log("DOM loaded, creating triangles");
 
             const colors = [
-                '#FF0000', '#FF00FF', '#FF00AA', '#AA00FF',
-                '#0000FF', '#00AAFF', '#00FFFF', '#00FFAA',
-                '#00FF00', '#AAFF00', '#FFFF00', '#FFAA00',
-                '#FF6600', '#FF0066', '#FFFFFF', '#AAAAFF'
+                '#ff6ec4', '#7873f5', '#c1a5e8', '#ffd6e0',
+                '#ffecf1', '#5a3d5c', '#7c5295', '#ffb3d1',
+                '#b3f5ff', '#b3ffcc', '#ffffb3', '#ffccb3',
+                '#ffb3ff', '#b3b3ff', '#ffffff', '#ffa6c9'
             ];
 
             const windowWidth = window.innerWidth;
author	Yuval Adam <_@yuv.al>	2025-02-27 11:40:22 +0100
committer	Yuval Adam <_@yuv.al>	2025-02-27 11:40:22 +0100
commit	6e70bc78a66d21e7e6caf86f252b7972416f3ce5 (patch)
tree	a13121858946871e77fcb429f5728b375fae93ef
parent	2320997f086b18b8c79434a86f44b3a1d0e64398 (diff)