Update README.md

README.md

@@ -17,20 +17,32 @@ tags:
 - [ ] 12M million dataset finetune (planned)
 
 <style>
-.retro-text {
+.parallax-container {
+    position: relative;
+    overflow: hidden;
+    height: 120px;
+    margin: 20px 0;
+}
+
+.text-layer {
+    position: absolute;
+    width: 100%;
+    text-align: center;
     font-family: 'Arial Black', 'Helvetica', sans-serif;
     font-size: 72px;
-    text-align: center;
-    margin: 0;
-    padding: 20px;
-    background: linear-gradient(to bottom, #ff71ce 0%, #b967ff 50%, #01cdfe 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    text-shadow: 
-        3px 3px 0 #ff00ff,
-        -3px -3px 0 #00ffff;
-    animation: glow 2s ease-in-out infinite alternate;
+    font-weight: bold;
+    transition: transform 0.1s ease-out;
+}
+
+.text-base {
+    color: #ff71ce;
+    text-shadow: 2px 2px 0 #ff00ff;
+}
+
+.text-overlay {
+    color: #01cdfe;
+    text-shadow: -2px -2px 0 #00ffff;
+    opacity: 0.8;
 }
 
 .sigma {
@@ -61,9 +73,41 @@ tags:
 }
 </style>
 
-<h1 class="retro-text">
-    Proteus<span class="sigma">Σ</span>
-</h1>
+<div class="parallax-container">
+    <div class="text-layer text-base">
+        Proteus<span class="sigma">Σ</span>
+    </div>
+    <div class="text-layer text-overlay">
+        Proteus<span class="sigma">Σ</span>
+    </div>
+</div>
+
+<script>
+document.addEventListener('scroll', function() {
+    const scrolled = window.pageYOffset || document.documentElement.scrollTop;
+    const overlay = document.querySelector('.text-overlay');
+    const base = document.querySelector('.text-base');
+    
+    // Create parallax effect
+    const moveX = scrolled * 0.1;
+    const moveY = scrolled * 0.05;
+    
+    overlay.style.transform = `translate(${moveX}px, ${moveY}px)`;
+    base.style.transform = `translate(${-moveX * 0.5}px, ${-moveY * 0.5}px)`;
+});
+
+// Add mouse movement effect
+document.addEventListener('mousemove', function(e) {
+    const overlay = document.querySelector('.text-overlay');
+    const base = document.querySelector('.text-base');
+    
+    const moveX = (e.clientX - window.innerWidth/2) * 0.01;
+    const moveY = (e.clientY - window.innerHeight/2) * 0.01;
+    
+    overlay.style.transform = `translate(${moveX}px, ${moveY}px)`;
+    base.style.transform = `translate(${-moveX * 0.5}px, ${-moveY * 0.5}px)`;
+});
+</script>
 
 
 ## Example Outputs