might work

pages/user/index.html

@@ -1,4 +1,3 @@
-<!--PAGENAME=Hello, <template name="username">-->
 <header class="user-index-header">
     <div class="user-index-header-text" id="headerText">
         <h1 class="user-index-h1">Hello, <span class="outlined-text"><template name="username"></template></span>.</h1>
@@ -6,14 +5,13 @@
     </div>
 </header>
 
-
 <script>
     document.addEventListener("DOMContentLoaded", function () {
         const headerText = document.getElementById("headerText");
 
         window.addEventListener("scroll", function () {
             const scrollPosition = window.scrollY;
-            const opacity = 1 - scrollPosition / 500; // Adjust the divisor for a smoother or faster fade
+            const opacity = 1 - scrollPosition / 500;
 
             headerText.style.opacity = opacity.toFixed(2);
             headerText.style.transform = `translateX(${100 - opacity * 100}%)`;

styles/global.css

@@ -1,13 +1,16 @@
 /* Common styles for all pages */
+
+
 body {
     font-family: 'Poppins', sans-serif;
     margin: 0;
     padding: 0;
     background-color: #161c21;
     color: aliceblue;
-    overflow-x: hidden; /* Prevent horizontal scrolling */
+    overflow-x: hidden;
 }
 
+
 h2 {
     text-align: center;
 }
@@ -27,8 +30,6 @@ a {
     border-radius: 50px;
 }
 
-
-
 .user-index-header-text {
     width: 80%;
     margin: auto;
@@ -52,7 +53,4 @@ a {
 .outlined-text {
     -webkit-text-fill-color: transparent;
     -webkit-text-stroke: 2.2px #8c00ff;
-}
-
-
-
+}