merged changes from J-onasJones/alpha.jonasjones.me

src/components/ParallaxBg.svelte

@@ -0,0 +1,47 @@
+<script>
+    let mouseX = 0;
+    let mouseY = 0;
+  
+    /**
+     * @param {{ clientX: number; clientY: number; }} event
+     */
+    function handleMouseMove(event) {
+      mouseX = event.clientX;
+      mouseY = event.clientY;
+    }
+  </script>
+  
+  <style>
+    @import '../routes/+page.css';
+    .container {
+      min-height: 100vh;
+      position: relative;
+      overflow: hidden; /* Ensure the background image does not overflow */
+    }
+  
+    .parallax-background {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-image: url('/ricky.webp');
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center center;
+      @media only screen and (min-width: 768px) {
+        transform: translateX(calc(-1 * var(--mouse-x) / 50)) translateY(calc(-1 * var(--mouse-y) / 50));
+    }
+      z-index: -1; /* Place the background behind other content */
+    }
+  </style>
+  
+  <main class="container" on:mousemove={handleMouseMove}>
+    <div class="parallax-background" style="--mouse-x: {mouseX}px; --mouse-y: {mouseY}px;">
+        <img src="/ricky.webp" width="102%" height="101%" alt="Parallax Background" class="parallax-image">
+        
+    </div>
+    <!-- Your main content goes here -->
+    <slot></slot>
+  </main>
+