File size: 4,483 Bytes
162b974 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, X } from "lucide-react";
import { Link } from "react-scroll";
const navLinks = [
{ name: "About", to: "about" },
{ name: "Experience", to: "experience" },
{ name: "Projects", to: "projects" },
{ name: "Services", to: "services" },
{ name: "Contact", to: "contact" },
];
const Navbar = () => {
const [scrolled, setScrolled] = useState(false);
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
const handleScroll = () => {
setScrolled(window.scrollY > 50);
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
<nav
className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? "bg-background/80 glass shadow-lg py-4" : "bg-transparent py-6"
}`}
>
<div className="max-w-7xl mx-auto px-6 flex justify-between items-center">
<Link
to="hero"
smooth={true}
className="text-2xl font-bold font-heading cursor-pointer tracking-tighter"
>
Abhishek Singh<span className="text-purple-500">.</span>
</Link>
{/* Desktop Menu */}
<div className="hidden md:flex space-x-8 items-center">
{navLinks.map((link) => (
<Link
key={link.name}
to={link.to}
smooth={true}
offset={-80}
className="text-gray-300 hover:text-white cursor-pointer text-sm font-medium transition-colors"
>
{link.name}
</Link>
))}
<a
href="/Abhi singh Resume-iisc.pdf"
target="_blank"
className="px-5 py-2 rounded-full border border-purple-500/50 bg-purple-500/10 text-purple-400 hover:bg-purple-500 hover:text-white transition-all duration-300 text-sm font-semibold"
>
Resume
</a>
</div>
{/* Mobile Toggle */}
<div className="md:hidden">
<button onClick={() => setIsOpen(!isOpen)} className="text-white">
{isOpen ? <X size={28} /> : <Menu size={28} />}
</button>
</div>
</div>
{/* Mobile Menu */}
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
className="md:hidden bg-[#030014] border-b border-white/10 overflow-hidden"
>
<div className="flex flex-col items-center py-6 space-y-6">
{navLinks.map((link) => (
<Link
key={link.name}
to={link.to}
smooth={true}
offset={-80}
onClick={() => setIsOpen(false)}
className="text-gray-300 text-lg hover:text-white cursor-pointer"
>
{link.name}
</Link>
))}
<a
href="/Abhi singh Resume-iisc.pdf"
target="_blank"
className="px-6 py-2 rounded-full bg-purple-600 text-white font-semibold"
>
Resume
</a>
</div>
</motion.div>
)}
</AnimatePresence>
</nav>
);
};
export default Navbar;
|