cursor follower

src/components/Card.svelte

@@ -26,7 +26,7 @@ export let techno :PropsComponent['techno'];
     <div class=" absolute -bottom-[5%] right-[5%] w-[40%] h-[20%] flex justify-around items-center overflow-visible">
         {#each techno as currentTechno, index}
             {#if index < 3}
-                <img alt="image" src={currentTechno.img} class="w-[25%]"/>
+                <img alt="of techno" src={currentTechno.img} class="w-[25%]"/>
             {/if}
         {/each}
     </div>

src/components/CursorFollower.svelte

@@ -0,0 +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);"
+  />

src/components/header.astro

@@ -7,9 +7,9 @@ interface Props {
 const { href, title } = Astro.props;
 ---
 
-<ul class=" sticky inset-x-0 top-4 z-50 global-color flex justify-around w-1/4 rounded-full mx-auto my-5 font-semibold text-2xl drop-shadow-sm">
+<ul class=" sticky inset-x-0 top-4 z-50 global-color flex justify-around w-1/3 rounded-full mx-auto my-5 text-2xl drop-shadow-sm">
 	{title.map((item, index) => (
-        <a href={href[index]} class=" m-4">{item}</a>
+        <a href={href[index]} class=" m-4 font-medium hover:text-hover">{item}</a>
     ))}
 </ul>
 

src/pages/index.astro

@@ -8,6 +8,8 @@ import Card from '../components/Card.svelte';
 
 import Arrow from '../components/Arrow.svelte'
 
+import CursorFollower from '../components/CursorFollower.svelte'
+
 const cards = [
 	{ title: "Arcania", body: "Dans Arcania transformer votre telephone en veritable baguette magique et combattez vos amies dans l'arene" ,href: "https://github.com/math-pixel/ARCANIA", thumbnail : "/images/masarus.png",
 		techno: [
@@ -43,6 +45,7 @@ const cards = [
 ---
 
 <LayoutPage title="Mathieu Chavanel - Portfolio">
+	<CursorFollower client:load></CursorFollower>
 	<Header title={["Accueil", "Projets", "Contact"]} href={["/", "/#projectHighlight", "/#contact"]}></Header>
 	<div id="home" class=" flex w-full h-screen ">
 
@@ -61,7 +64,7 @@ const cards = [
 
 
 		<!-- <a href="" class=" absolute bottom-[10%] left-1/2">arrow</a> -->
-		<div class="absolute right-[5%] top-[20%] overflow-visible shape-outside">
+		<div class="absolute right-[5%] top-[20%] overflow-visible">
 
 			<img src="/images/avatar.png" alt="image profile" class=" w-[450px]">
 
@@ -126,7 +129,7 @@ const cards = [
 	@layer base{
 		@font-face {
 			font-family: 'RubikFont';
-			src: url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
+			src: url("");
 		}
 	}
 
@@ -135,8 +138,8 @@ const cards = [
 			background-color: #CFE9FF;
 		}
 
-		.shape-outside{
-			shape-outside: circle();
+		.text-hover{
+			text-shadow: 0px 0px 1px black;
 		}
 
 	}