Update index.html

Gatoc-Idk · web-flow · commit a9a440ab767a · 2025-05-29T16:14:31.000-07:00
diff --git a/index.html b/index.html
@@ -9,56 +9,69 @@
   <style>
     body {
       font-family: 'Orbitron', sans-serif;
+      background: linear-gradient(-45deg, #1e1b4b, #312e81, #9333ea, #3b0764);
+      background-size: 400% 400%;
+      animation: gradientShift 15s ease infinite;
     }
+
+    @keyframes gradientShift {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+
     .glow-card {
-      box-shadow: 0 0 25px rgba(255, 255, 255, 0.15), 0 0 10px rgba(255, 255, 255, 0.1);
+      background: rgba(255, 255, 255, 0.05);
+      backdrop-filter: blur(10px);
+      box-shadow: 0 0 25px rgba(255, 255, 255, 0.05), 0 0 10px rgba(255, 255, 255, 0.1);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
     }
+
     .glow-card:hover {
       transform: scale(1.05);
-      box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);
+      box-shadow: 0 0 35px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.2);
     }
   </style>
 </head>
-<body class="bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 text-white min-h-screen p-8">
+<body class="text-white min-h-screen p-8">
   <div class="max-w-6xl mx-auto">
     <header class="text-center mb-16">
-      <h1 class="text-5xl font-extrabold mb-4 bg-gradient-to-r from-pink-500 via-yellow-500 to-blue-500 text-transparent bg-clip-text animate-pulse">
-        🎮 GatocDev's Projects
+      <h1 class="text-5xl font-extrabold mb-4 bg-gradient-to-r from-yellow-400 via-pink-500 to-cyan-400 text-transparent bg-clip-text animate-pulse">
+        ✨ GatocDev's Projects
       </h1>
-      <p class="text-lg text-gray-300">
+      <p class="text-lg text-gray-200">Interactive, creative, and cat-powered programming projects.</p>
     </header>
 
     <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
       <!-- Project 1: Blockly JavaScript Builder -->
       <a href="https://gatoc-idk.github.io/Blockly-JavaScript-builder/" target="_blank"
-         class="bg-gray-900 bg-opacity-80 rounded-3xl overflow-hidden glow-card">
-        <img src="https://imgur.com/a/RIptUJw" alt="Blockly JavaScript Builder"
-             class="w-full h-48 object-contain bg-black" />
+         class="rounded-3xl overflow-hidden glow-card">
+        <img src="https://i.imgur.com/RIptUJw.png" alt="Blockly JavaScript Builder"
+             class="w-full h-48 object-cover bg-black" />
         <div class="p-5">
-          <h2 class="text-2xl font-bold text-cyan-400">Blockly JavaScript Builder</h2>
-          <p class="text-gray-400 mt-2 text-sm">Create JavaScript with drag-and-drop blocks in a fully custom environment.</p>
-          <button class="mt-4 px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 rounded-lg font-medium shadow-md">
-             start Project
+          <h2 class="text-2xl font-bold text-cyan-300">Blockly JavaScript Builder</h2>
+          <p class="text-gray-300 mt-2 text-sm">Create JavaScript with drag-and-drop blocks in a fully custom environment.</p>
+          <button class="mt-4 px-4 py-2 bg-gradient-to-r from-cyan-400 to-blue-500 hover:from-cyan-300 hover:to-blue-400 rounded-lg font-medium shadow-md">
+            🚀 Launch Project
           </button>
         </div>
       </a>
 
       <!-- Project 2: CatScript -->
       <a href="https://gatoc-idk.github.io/CatScript/" target="_blank"
-         class="bg-gray-900 bg-opacity-80 rounded-3xl overflow-hidden glow-card">
+         class="rounded-3xl overflow-hidden glow-card">
         <img src="https://imgur.com/ljukn4G.png" alt="CatScript"
-             class="w-full h-48 object-contain bg-black" />
+             class="w-full h-48 object-cover bg-black" />
         <div class="p-5">
-          <h2 class="text-2xl font-bold text-pink-400">CatScript</h2>
-          <p class="text-gray-400 mt-2 text-sm">A JavaScript-style cat language with canvas rendering .</p>
-          <button class="mt-4 px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-400 hover:to-purple-500 rounded-lg font-medium shadow-md">
-             Try CatScript
+          <h2 class="text-2xl font-bold text-pink-300">CatScript</h2>
+          <p class="text-gray-300 mt-2 text-sm">A JavaScript-style cat language with canvas rendering and meowtastic syntax.</p>
+          <button class="mt-4 px-4 py-2 bg-gradient-to-r from-pink-400 to-purple-500 hover:from-pink-300 hover:to-purple-400 rounded-lg font-medium shadow-md">
+            🐾 Try CatScript
           </button>
         </div>
       </a>
 
-      <!-- Add more projects below as needed -->
+      <!-- Add more projects here -->
     </section>
   </div>
 </body>
