|
9 | 9 | <style> |
10 | 10 | body { |
11 | 11 | font-family: 'Orbitron', sans-serif; |
12 | | - background: linear-gradient(-45deg, #1e1b4b, #312e81, #9333ea, #3b0764); |
13 | | - background-size: 400% 400%; |
14 | | - animation: gradientShift 15s ease infinite; |
15 | 12 | } |
16 | | - |
17 | | - @keyframes gradientShift { |
18 | | - 0% { background-position: 0% 50%; } |
19 | | - 50% { background-position: 100% 50%; } |
20 | | - 100% { background-position: 0% 50%; } |
21 | | - } |
22 | | - |
23 | 13 | .glow-card { |
24 | | - background: rgba(255, 255, 255, 0.05); |
25 | | - backdrop-filter: blur(10px); |
26 | | - box-shadow: 0 0 25px rgba(255, 255, 255, 0.05), 0 0 10px rgba(255, 255, 255, 0.1); |
| 14 | + box-shadow: 0 0 25px rgba(255, 255, 255, 0.15), 0 0 10px rgba(255, 255, 255, 0.1); |
27 | 15 | transition: transform 0.3s ease, box-shadow 0.3s ease; |
28 | 16 | } |
29 | | - |
30 | 17 | .glow-card:hover { |
31 | 18 | transform: scale(1.05); |
32 | | - box-shadow: 0 0 35px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.2); |
| 19 | + box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.2); |
33 | 20 | } |
34 | 21 | </style> |
35 | 22 | </head> |
36 | | -<body class="text-white min-h-screen p-8"> |
| 23 | +<body class="bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 text-white min-h-screen p-8"> |
37 | 24 | <div class="max-w-6xl mx-auto"> |
38 | 25 | <header class="text-center mb-16"> |
39 | | - <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"> |
40 | | - ✨ GatocDev's Projects |
| 26 | + <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"> |
| 27 | + 🎮 GatocDev's Projects |
41 | 28 | </h1> |
42 | | - <p class="text-lg text-gray-200">Interactive, creative, and cat-powered programming projects.</p> |
| 29 | + <p class="text-lg text-gray-300">Interactive, creative, and cat-powered programming projects.</p> |
43 | 30 | </header> |
44 | 31 |
|
45 | 32 | <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10"> |
46 | 33 | <!-- Project 1: Blockly JavaScript Builder --> |
47 | 34 | <a href="https://gatoc-idk.github.io/Blockly-JavaScript-builder/" target="_blank" |
48 | | - class="rounded-3xl overflow-hidden glow-card"> |
49 | | - <img src="https://i.imgur.com/RIptUJw.png" alt="Blockly JavaScript Builder" |
50 | | - class="w-full h-48 object-cover bg-black" /> |
| 35 | + class="bg-gray-900 bg-opacity-80 rounded-3xl overflow-hidden glow-card"> |
| 36 | + <img src="https://imgur.com/2QPIBtg.png" alt="Blockly JavaScript Builder" |
| 37 | + class="w-full h-48 object-contain bg-black" /> |
51 | 38 | <div class="p-5"> |
52 | | - <h2 class="text-2xl font-bold text-cyan-300">Blockly JavaScript Builder</h2> |
53 | | - <p class="text-gray-300 mt-2 text-sm">Create JavaScript with drag-and-drop blocks in a fully custom environment.</p> |
54 | | - <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"> |
| 39 | + <h2 class="text-2xl font-bold text-cyan-400">Blockly JavaScript Builder</h2> |
| 40 | + <p class="text-gray-400 mt-2 text-sm">Create JavaScript with drag-and-drop blocks in a fully custom environment.</p> |
| 41 | + <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"> |
55 | 42 | 🚀 Launch Project |
56 | 43 | </button> |
57 | 44 | </div> |
58 | 45 | </a> |
59 | 46 |
|
60 | 47 | <!-- Project 2: CatScript --> |
61 | 48 | <a href="https://gatoc-idk.github.io/CatScript/" target="_blank" |
62 | | - class="rounded-3xl overflow-hidden glow-card"> |
| 49 | + class="bg-gray-900 bg-opacity-80 rounded-3xl overflow-hidden glow-card"> |
63 | 50 | <img src="https://imgur.com/ljukn4G.png" alt="CatScript" |
64 | | - class="w-full h-48 object-cover bg-black" /> |
| 51 | + class="w-full h-48 object-contain bg-black" /> |
65 | 52 | <div class="p-5"> |
66 | | - <h2 class="text-2xl font-bold text-pink-300">CatScript</h2> |
67 | | - <p class="text-gray-300 mt-2 text-sm">A JavaScript-style cat language with canvas rendering and meowtastic syntax.</p> |
68 | | - <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"> |
| 53 | + <h2 class="text-2xl font-bold text-pink-400">CatScript</h2> |
| 54 | + <p class="text-gray-400 mt-2 text-sm">A JavaScript-style cat language with canvas rendering and meowtastic syntax.</p> |
| 55 | + <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"> |
69 | 56 | 🐾 Try CatScript |
70 | 57 | </button> |
71 | 58 | </div> |
72 | 59 | </a> |
73 | 60 |
|
74 | | - <!-- Add more projects here --> |
| 61 | + <!-- Add more projects below as needed --> |
75 | 62 | </section> |
76 | 63 | </div> |
77 | 64 | </body> |
|
0 commit comments