Update README.md

README.md

@@ -17,36 +17,34 @@ tags:
 - [ ] 12M million dataset finetune (planned)
 
 <style>
-.parallax-container {
+.logo-container {
     position: relative;
-    overflow: visible;
-    height: 120px;
-    margin: 20px 0;
-    perspective: 100px;
+    text-align: center;
+    margin: 40px 0;
 }
 
 .text-layer {
-    position: absolute;
-    width: 100%;
-    text-align: center;
     font-family: 'Arial Black', 'Helvetica', sans-serif;
     font-size: 72px;
     font-weight: bold;
     white-space: nowrap;
-    will-change: transform;
 }
 
 .text-base {
+    position: relative;
     color: #ff71ce;
     text-shadow: 2px 2px 0 #ff00ff;
-    z-index: 1;
 }
 
 .text-overlay {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-49%, -47%); /* Slightly offset */
     color: #01cdfe;
     text-shadow: -2px -2px 0 #00ffff;
     opacity: 0.8;
-    z-index: 2;
+    mix-blend-mode: screen;
 }
 
 .sigma {
@@ -57,32 +55,15 @@ tags:
 }
 </style>
 
-<div class="parallax-container" id="parallax">
-    <div class="text-layer text-base">
+<div class="logo-container">
+    <div class="text-layer text-overlay">
         Proteus<span class="sigma">Σ</span>
     </div>
-    <div class="text-layer text-overlay">
+    <div class="text-layer text-base">
         Proteus<span class="sigma">Σ</span>
     </div>
 </div>
 
-<script>
-const parallax = document.getElementById('parallax');
-const textBase = parallax.querySelector('.text-base');
-const textOverlay = parallax.querySelector('.text-overlay');
-
-window.addEventListener('scroll', () => {
-    requestAnimationFrame(() => {
-        const scrolled = window.pageYOffset;
-        const baseOffset = scrolled * -0.2;
-        const overlayOffset = scrolled * 0.2;
-        
-        textBase.style.transform = `translateY(${baseOffset}px)`;
-        textOverlay.style.transform = `translateY(${overlayOffset}px)`;
-    });
-});
-
-
 ## Example Outputs
 
 <style>