fix: website
Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
This commit is contained in:
parent
00628a1876
commit
dd641fc5aa
4 changed files with 59 additions and 29 deletions
|
|
@ -139,3 +139,7 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
cursor: none;
|
||||
}
|
||||
|
|
|
|||
7
frontend/src/app/not-found.tsx
Normal file
7
frontend/src/app/not-found.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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
|
||||
ref={cursorRef}
|
||||
className="fixed w-8 h-8 rounded-full border-2 border-dotted border-red-500 bg-transparent pointer-events-none z-50"
|
||||
style={{
|
||||
transform: "translate(-50%, -50%)",
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
ref={cursorRef}
|
||||
className="fixed w-8 h-8 rounded-full border-2 border-dotted border-red-500 bg-transparent pointer-events-none z-60"
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<Button variant="ghost">
|
||||
<Link href="/">
|
||||
<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">
|
||||
<Link href="/">
|
||||
<Button variant="ghost">
|
||||
<div className="hidden md:inline">Home</div>
|
||||
<div className="md:hidden">
|
||||
<House />
|
||||
</div>
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="ghost">
|
||||
<Link href="/blog">
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/blog">
|
||||
<Button variant="ghost">
|
||||
<div className="hidden md:inline">Blog</div>
|
||||
<div className="md:hidden">
|
||||
<NotebookPen />
|
||||
</div>
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="ghost">
|
||||
<Link href="/portfolio">
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/portfolio">
|
||||
<Button variant="ghost">
|
||||
<div className="hidden md:inline">Portfolio</div>
|
||||
<div className="md:hidden">
|
||||
<BriefcaseBusiness />
|
||||
</div>
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="ghost">
|
||||
<Link href="/talk">
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/talk">
|
||||
<Button variant="ghost">
|
||||
<div className="hidden md:inline">Talk</div>
|
||||
<div className="md:hidden">
|
||||
<MessageCircleMore />
|
||||
</div>
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="ghost">
|
||||
<Link href="/references">
|
||||
</Button>
|
||||
</Link>
|
||||
<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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue