clean: remove Rellax scroll animations

- Unnecessary bloat and looked broken on certain screen sizes

.astro/types.d.ts

@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />

package.json

@@ -37,9 +37,7 @@
   "dependencies": {
     "@astrojs/alpinejs": "^0.4.4",
     "@types/alpinejs": "^3.13.10",
-    "@types/rellax": "^1.7.7",
     "alpinejs": "^3.14.1",
-    "rellax": "^1.12.1",
     "vanilla-tilt": "^1.8.1"
   }
 }

src/components/ContentMedia.astro

@@ -7,11 +7,11 @@ const { imgSrc, reverseImg = false } = Astro.props
 <section class="my-32">
   <div class="container">
     <div class="grid grid-cols-1 gap-24 md:grid-cols-2">
-      {!reverseImg ? <Media class="rounded-lg rellax -z-10" data-rellax-desktop-speed="-1" data-rellax-speed="-0.5" src={imgSrc} /> : ''}
+      {!reverseImg ? <Media class="rounded-lg" src={imgSrc} /> : ''}
       <div class="space-content flex flex-col justify-center">
         <slot />
       </div>
-      {reverseImg ? <Media class="rounded-lg rellax -z-10" data-rellax-desktop-speed="1" data-rellax-speed="0.5" src={imgSrc} /> : ''}
+      {reverseImg ? <Media class="rounded-lg" src={imgSrc} /> : ''}
     </div>
   </div>
 </section>

src/components/Hero.astro

@@ -7,7 +7,7 @@ const { src = '/motschensummer-cutout.png' } = Astro.props
 <section class="hero my-12">
   <div class="container">
     <div class="grid grid-cols-1 items-center gap-24 lg:grid-cols-2">
-      <div class="flex flex-col items-center gap-8 md:items-start rellax" data-rellax-desktop-speed="-5" data-rellax-speed="-4" data-rellax-zindex="-10">
+      <div class="flex flex-col items-center gap-8 md:items-start">
         <h1 class="text-center text-6xl md:text-left lg:text-8xl">
           <slot>
             <span id="modding-text" class="text-gradient">Modding</span> 
@@ -25,7 +25,7 @@ const { src = '/motschensummer-cutout.png' } = Astro.props
           </a>
         </div>
       </div>
-      <div class="rellax -z-10" data-rellax-speed="-7">
+      <div>
         <img class="hidden lg:block" src={src} alt="" decoding="async" data-tilt data-tilt-full-page-listening />
       </div>
     </div>

src/layouts/DefaultLayout.astro

@@ -108,18 +108,4 @@ const {
       }
     </style>
   </body>
-</html>
-<script>
-  import Rellax from 'rellax';
-
-  function initRellax() {
-    var rellax = new Rellax('.rellax', {
-      center: true
-    });
-  }
-  initRellax();
-  document.addEventListener('astro:after-swap', () => {
-    initRellax();
-  })
-  
-</script>
+</html>