cursor follower

src/components/CursorFollower.svelte

@@ -1,40 +1,40 @@
 <script>
-    import { onMount } from 'svelte';
-  
-    let target = { x: 0, y: 0 };
-    let current = { x: 0, y: 0 };
-    let frame;
-  
-    let sizeElement = 800
-
-    function handleMousemove(event) {
-      target.x = event.pageX;
-      target.y = event.pageY;
-    }
-  
-    function lerp(start, end, factor) {
-      return start * (1 - factor) + end * factor;
-    }
-  
-    function animate() {
-      current.x = lerp(current.x, target.x, 0.1);
-      current.y = lerp(current.y, target.y, 0.1);
-  
-      frame = requestAnimationFrame(animate);
-    }
-  
-    onMount(() => {
-      window.addEventListener('mousemove', handleMousemove);
-      frame = requestAnimationFrame(animate);
-  
-      return () => {
-        window.removeEventListener('mousemove', handleMousemove);
-        cancelAnimationFrame(frame);
-      };
-    });
-  </script>
-  
-  <div 
-    class="w-[{sizeElement}px] h-[{sizeElement}px] bg-[#CFE9FF] blur-3xl opacity-30 absolute top-0 left-0 rounded-full z-[-100]" 
-    style="transform: translate({current.x - (sizeElement / 2)}px, {current.y - (sizeElement / 2)}px);"
-  />
+  import { onMount } from 'svelte';
+
+  let target = { x: 0, y: 0 };
+  let current = { x: 0, y: 0 };
+  let frame;
+
+  function handleMousemove(event) {
+    target.x = event.pageX;
+    target.y = event.pageY;
+  }
+
+  function lerp(start, end, factor) {
+    return start * (1 - factor) + end * factor;
+  }
+
+  function animate() {
+    current.x = lerp(current.x, target.x, 0.1);
+    current.y = lerp(current.y, target.y, 0.1);
+
+    frame = requestAnimationFrame(animate);
+  }
+
+  onMount(() => {
+    window.addEventListener('mousemove', handleMousemove);
+    frame = requestAnimationFrame(animate);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMousemove);
+      cancelAnimationFrame(frame);
+    };
+  });
+</script>
+
+<div 
+class="w-[{800}px] h-[{800}px] bg-[#CFE9FF] blur-3xl opacity-40 absolute top-0 left-0 rounded-full z-[-100]" 
+style="transform: translate({current.x - (800 / 2)}px, {current.y - (800 / 2)}px);"
+/>
+
+

src/pages/index.astro

@@ -78,9 +78,9 @@ const cards = [
 		</div>
 	</div>
 
-	<h1 class=" w-full my-[5%] font-black text-6xl text-center">Projets à la une !</h1>
+	<h1 id="projectHighlight" class=" w-full my-[5%] font-black text-6xl text-center">Projets à la une !</h1>
 
-	<div id="projectHighlight" class="overflow-visible flex w-full h-screen  flex-wrap justify-around">
+	<div class="overflow-visible flex w-full h-screen  flex-wrap justify-around">
 
 		{cards.map(currentCard => (
 			<Card title={currentCard.title} description={currentCard.body} href={currentCard.href} thumbnail={currentCard.thumbnail} techno={currentCard.techno}></Card>
@@ -111,7 +111,7 @@ const cards = [
 		</div>
 
 		<img src="/images/toto.png" alt="" class="w-[20%] absolute top-[2%] left-[8%] rounded-[16px]">
-		<img src="/images/toto.png" alt="" class="w-[20%] absolute bottom-[2%] right-[8%] rounded-[16px]">
+		<img src="/images/photographie.png" alt="" class="w-[20%] absolute bottom-[2%] right-[8%] rounded-[16px]">
 
 	</div>
 
@@ -122,6 +122,10 @@ const cards = [
 	  navigation: auto; /* enabled! */
 	}
 
+	html{
+		scroll-behavior: smooth;
+	}
+
 	@tailwind base;
 	@tailwind components;
 	@tailwind utilities;