fix: website

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

frontend/src/app/globals.css

@@ -139,3 +139,7 @@
     pointer-events: none;
   }
 }
+
+* {
+  cursor: none;
+}

frontend/src/app/not-found.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <main className="flex items-center justify-center h-screen">
+      404 | This page could not be found
+    </main>
+  );
+}

frontend/src/components/CustomCircleCursor.tsx

@@ -1,9 +1,10 @@
 "use client";
-import { useRef, useEffect, FC } from "react";
+import { useRef, useEffect, FC, useState } from "react";
 import gsap from "gsap";
 
 const GSAPCursor: FC = () => {
   const cursorRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
 
   // For touch devices, return null
   if (typeof window !== "undefined" && "ontouchstart" in window) return null;
@@ -31,14 +32,32 @@ const GSAPCursor: FC = () => {
     };
   }, []);
 
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      setPosition({ x: e.clientX, y: e.clientY });
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+
   return (
-    <div
+    <div>
-      ref={cursorRef}
+      <div
-      className="fixed w-8 h-8 rounded-full border-2 border-dotted border-red-500 bg-transparent pointer-events-none z-50"
+        ref={cursorRef}
-      style={{
+        className="fixed w-8 h-8 rounded-full border-2 border-dotted border-red-500 bg-transparent pointer-events-none z-60"
-        transform: "translate(-50%, -50%)",
+        style={{
-      }}
+          transform: "translate(-50%, -50%)",
-    />
+        }}
+      />
+      <div
+        className="w-2 h-2 rounded-full bg-black dark:bg-white absolute pointer-events-none z-60"
+        style={{
+          left: `${position.x}px`,
+          top: `${position.y}px`,
+          transform: "translate(-50%, -50%)", // Centers the dot on the cursor
+        }}
+      />
+    </div>
   );
 };
 

frontend/src/components/Navbar.tsx

@@ -11,47 +11,47 @@ import {
 
 export function NavigationMenu() {
   return (
-    <div className="flex justify-center fixed left-1/2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-50">
+    <div className="flex justify-center fixed left-1/2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-20">
-      <Button variant="ghost">
+      <Link href="/">
-        <Link href="/">
+        <Button variant="ghost">
           <div className="hidden md:inline">Home</div>
           <div className="md:hidden">
             <House />
           </div>
-        </Link>
+        </Button>
-      </Button>
+      </Link>
-      <Button variant="ghost">
+      <Link href="/blog">
-        <Link href="/blog">
+        <Button variant="ghost">
           <div className="hidden md:inline">Blog</div>
           <div className="md:hidden">
             <NotebookPen />
           </div>
-        </Link>
+        </Button>
-      </Button>
+      </Link>
-      <Button variant="ghost">
+      <Link href="/portfolio">
-        <Link href="/portfolio">
+        <Button variant="ghost">
           <div className="hidden md:inline">Portfolio</div>
           <div className="md:hidden">
             <BriefcaseBusiness />
           </div>
-        </Link>
+        </Button>
-      </Button>
+      </Link>
-      <Button variant="ghost">
+      <Link href="/talk">
-        <Link href="/talk">
+        <Button variant="ghost">
           <div className="hidden md:inline">Talk</div>
           <div className="md:hidden">
             <MessageCircleMore />
           </div>
-        </Link>
+        </Button>
-      </Button>
+      </Link>
-      <Button variant="ghost">
+      <Link href="/references">
-        <Link href="/references">
+        <Button variant="ghost">
           <div className="hidden md:inline">References</div>
           <div className="md:hidden">
             <Handshake />
           </div>
-        </Link>
+        </Button>
-      </Button>
+      </Link>
       <ModeToggle />
     </div>
   );