Pl ase gag dayum 😔🫣

README.md

@@ -2,24 +2,289 @@
 title: README
 emoji: 🏆
 colorFrom: yellow
-colorTo: yellow
+colorTo: purple
 sdk: static
 pinned: true
 ---
-# CompactAI 
 
-We teach tiny neural networks to think. Sometimes they surprise us. Sometimes they just output zeros.
-### Want to join our discord?
-https://discord.gg/y2jTct6Cxv
+<div align="center">
 
-## Associates 
+<style>
 
-We work with other folks who also enjoy the small life:
-* [TeichAI](https://huggingface.co/TeichAI)
-* [Armand0e](https://huggingface.co/armand0e)
-* [Crownelius](https://huggingface.co/Crownelius)
-* [Enderchef](https://huggingface.co/Enderchef)
-* [wop](https://huggingface.co/wop)
+body {
+    background:
+        radial-gradient(circle at top left, #ff00cc22, transparent 30%),
+        radial-gradient(circle at bottom right, #00ffee22, transparent 30%),
+        linear-gradient(135deg, #09090f, #111827);
+    overflow-x: hidden;
+}
 
-# Hey! You can support us! (Please!)
-<a href='https://ko-fi.com/F1F31YAC4I' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi6.png?v=6' border='0' alt='Buy Me a token at ko-fi.com' /></a>
+/* Floating shapes */
+
+.shape {
+    position: fixed;
+    z-index: -1;
+    border-radius: 30px;
+    opacity: 0.5;
+    animation: float 12s infinite ease-in-out;
+    filter: blur(2px);
+}
+
+.circle {
+    border-radius: 999px;
+}
+
+.s1 {
+    width: 180px;
+    height: 180px;
+    background: #ff00aa;
+    top: 5%;
+    left: 3%;
+}
+
+.s2 {
+    width: 120px;
+    height: 120px;
+    background: #00ffee;
+    top: 70%;
+    left: 10%;
+    animation-duration: 18s;
+}
+
+.s3 {
+    width: 240px;
+    height: 240px;
+    background: #8844ff;
+    top: 20%;
+    right: 5%;
+}
+
+.s4 {
+    width: 140px;
+    height: 140px;
+    background: #ffee00;
+    bottom: 10%;
+    right: 8%;
+}
+
+.s5 {
+    width: 90px;
+    height: 90px;
+    background: #ff5500;
+    top: 45%;
+    left: 45%;
+}
+
+.s6 {
+    width: 300px;
+    height: 60px;
+    background: linear-gradient(90deg,#00ffee,#ff00cc);
+    transform: rotate(45deg);
+    top: 10%;
+    left: 35%;
+    opacity: 0.25;
+}
+
+.s7 {
+    width: 220px;
+    height: 220px;
+    background: #00ff88;
+    top: 60%;
+    right: 20%;
+    opacity: 0.18;
+}
+
+.s8 {
+    width: 70px;
+    height: 70px;
+    background: white;
+    top: 30%;
+    left: 70%;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0px) rotate(0deg);
+    }
+    50% {
+        transform: translateY(-25px) rotate(8deg);
+    }
+    100% {
+        transform: translateY(0px) rotate(0deg);
+    }
+}
+
+/* Glass panels */
+
+.glass {
+    background: rgba(255,255,255,0.07);
+    border: 1px solid rgba(255,255,255,0.12);
+    backdrop-filter: blur(12px);
+    border-radius: 24px;
+    padding: 24px;
+    margin: 20px auto;
+    width: min(850px, 92%);
+    box-shadow: 0 0 40px rgba(0,0,0,0.35);
+}
+
+/* Titles */
+
+.title {
+    font-size: 72px;
+    font-weight: 900;
+    background: linear-gradient(90deg,#ffffff,#ffcc00,#ff00aa,#00ffee);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-top: 50px;
+}
+
+.subtitle {
+    font-size: 20px;
+    color: #dddddd;
+}
+
+/* Associate cards */
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
+    gap: 16px;
+}
+
+.card {
+    background: rgba(255,255,255,0.05);
+    border-radius: 20px;
+    padding: 20px;
+    transition: 0.25s;
+    border: 1px solid rgba(255,255,255,0.1);
+}
+
+.card:hover {
+    transform: scale(1.05);
+    background: rgba(255,255,255,0.1);
+}
+
+/* Tiny glowing dots */
+
+.dot {
+    position: fixed;
+    width: 8px;
+    height: 8px;
+    background: white;
+    border-radius: 999px;
+    opacity: 0.4;
+    z-index: -1;
+}
+
+</style>
+
+<!-- BIG BACKGROUND SHAPES -->
+
+<div class="shape circle s1"></div>
+<div class="shape circle s2"></div>
+<div class="shape s3"></div>
+<div class="shape circle s4"></div>
+<div class="shape s5"></div>
+<div class="shape s6"></div>
+<div class="shape circle s7"></div>
+<div class="shape circle s8"></div>
+
+<!-- RANDOM DOTS -->
+
+<div class="dot" style="top:10%;left:20%"></div>
+<div class="dot" style="top:15%;left:70%"></div>
+<div class="dot" style="top:80%;left:40%"></div>
+<div class="dot" style="top:50%;left:85%"></div>
+<div class="dot" style="top:65%;left:60%"></div>
+<div class="dot" style="top:35%;left:10%"></div>
+<div class="dot" style="top:75%;left:90%"></div>
+<div class="dot" style="top:20%;left:45%"></div>
+
+<!-- HERO -->
+
+<h1 class="title">CompactAI</h1>
+
+<p class="subtitle">
+We teach tiny neural networks to think.<br>
+Sometimes they surprise us.<br>
+Sometimes they just output zeros.
+</p>
+
+</div>
+
+---
+
+<div class="glass">
+
+# 🚀 Join our Discord
+
+### https://discord.gg/y2jTct6Cxv
+
+</div>
+
+---
+
+<div class="glass">
+
+# 🤝 Associates
+
+<div class="grid">
+
+<div class="card">
+
+### TeichAI
+
+https://huggingface.co/TeichAI
+
+</div>
+
+<div class="card">
+
+### Armand0e
+
+https://huggingface.co/armand0e
+
+</div>
+
+<div class="card">
+
+### Crownelius
+
+https://huggingface.co/Crownelius
+
+</div>
+
+<div class="card">
+
+### Enderchef
+
+https://huggingface.co/Enderchef
+
+</div>
+
+<div class="card">
+
+### wop
+
+https://huggingface.co/wop
+
+</div>
+
+</div>
+
+</div>
+
+---
+
+<div class="glass">
+
+# ❤️ Support CompactAI
+
+<a href='https://ko-fi.com/F1F31YAC4I' target='_blank'>
+<img height='52'
+src='https://storage.ko-fi.com/cdn/kofi6.png?v=6'
+border='0'
+alt='Support CompactAI'/>
+</a>
+
+</div>