diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index a0f9a7c..20ebd1c 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -30,9 +30,15 @@ const { title, description, image = FallbackImage } = Astro.props; /> - - - + + + + + + + diff --git a/src/components/CustomCursor.tsx b/src/components/CustomCursor.tsx new file mode 100644 index 0000000..b14a43b --- /dev/null +++ b/src/components/CustomCursor.tsx @@ -0,0 +1,43 @@ +import React, { useEffect, useRef } from 'react'; + +const CustomCursor = () => { + const dotRef = useRef(null); + const outlineRef = useRef(null); + + useEffect(() => { + const dot = dotRef.current; + const outline = outlineRef.current; + + if (!dot || !outline) return; + + const onMouseMove = (e: MouseEvent) => { + const posX = e.clientX; + const posY = e.clientY; + + // Dot follows instantly + dot.style.left = `${posX}px`; + dot.style.top = `${posY}px`; + + // Outline follows with animation + outline.animate({ + left: `${posX}px`, + top: `${posY}px` + }, { duration: 500, fill: "forwards" }); + }; + + window.addEventListener('mousemove', onMouseMove); + + return () => { + window.removeEventListener('mousemove', onMouseMove); + }; + }, []); + + return ( + <> +
+
+ + ); +}; + +export default CustomCursor; diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 96c2fce..a32b2db 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -2,61 +2,44 @@ const today = new Date(); --- -