Spaces:
Sleeping
Sleeping
File size: 5,124 Bytes
140d1e7 |
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 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
import React, { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { TbDownload } from "react-icons/tb";
import { HiOutlineMenu, HiX } from "react-icons/hi";
import AdityaLogo from "../assets/Aditya.png";
export default function Navbar() {
const [hasShadow, setHasShadow] = useState(false);
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
const handleScroll = () => {
setHasShadow(window.scrollY > 0);
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
const scrollToSection = (id) => {
const section = document.getElementById(id);
if (section) {
window.scrollTo({
top: section.offsetTop - 110,
behavior: "smooth",
});
}
setIsOpen(false);
};
return (
<motion.nav
initial={{ y: -100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5 }}
className={`fixed lg:px-28 px-5 top-0 left-0 w-full z-50 bg-white p-5 transition-shadow duration-300 ${hasShadow ? "shadow-md" : "shadow-none"
}`}
>
<div className="container mx-auto flex justify-between items-center">
<motion.img
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
onClick={() => scrollToSection("home")}
className="h-16 lg:h-20 cursor-pointer"
src={AdityaLogo}
alt="Aditya Kumar Logo"
/>
<ul className="hidden lg:flex items-center gap-x-7 font-semibold">
{["about", "skills", "projects", "contact"].map((section) => (
<motion.li
key={section}
className="group"
whileHover={{ scale: 1.1 }}
>
<button onClick={() => scrollToSection(section)}>
{section.charAt(0).toUpperCase() + section.slice(1)}
</button>
<motion.span
className="w-0 transition-all duration-300 group-hover:w-full h-[2px] bg-black flex"
layout
></motion.span>
</motion.li>
))}
</ul>
<motion.a
href="https://drive.google.com/file/d/1DOw2CBeKyWwk9rq8eLdJbE9DdFn-kp2x/view?usp=sharing"
className="hidden relative lg:inline-block px-4 py-2 font-medium group"
>
<span className="absolute inset-0 w-full h-full transition duration-200 ease-out transform translate-x-1 translate-y-1 bg-black group-hover:-translate-x-0 group-hover:-translate-y-0"></span>
<span className="absolute inset-0 w-full h-full bg-white border-2 border-black group-hover:bg-black"></span>
<span className="relative text-black group-hover:text-white flex items-center gap-x-3">
Resume <TbDownload size={16} />
</span>
</motion.a>
<motion.button
className="lg:hidden text-2xl"
onClick={() => setIsOpen(!isOpen)}
whileHover={{ scale: 1.2 }}
>
{isOpen ? <HiX /> : <HiOutlineMenu />}
</motion.button>
</div>
{/* Mobile Menu */}
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ y: "-100%" }}
animate={{ y: 0 }}
exit={{ y: "-100%" }}
transition={{ duration: 0.3 }}
className="lg:hidden fixed top-0 right-0 h-full w-full bg-white shadow"
>
<button
className="absolute top-5 right-5 text-2xl"
onClick={() => setIsOpen(false)}
>
<HiX />
</button>
<ul className="flex flex-col items-start ml-16 mt-28 h-full gap-y-6 font-semibold">
{["about", "skills", "projects", "contact"].map((section) => (
<motion.li
key={section}
className="border-b"
whileHover={{ scale: 1.1 }}
>
<button onClick={() => scrollToSection(section)}>
{section.charAt(0).toUpperCase() + section.slice(1)}
</button>
</motion.li>
))}
<motion.a
href="https://drive.google.com/uc?export=download&id=1Oy7Wmtc9W1HXmHLViOHZdUJ6yXjy6Rga"
className="relative inline-block px-4 py-2 font-semibold group"
whileHover={{ scale: 1.1 }}
>
<span className="absolute inset-0 w-full h-full transition duration-200 ease-out transform translate-x-1 translate-y-1 bg-black group-hover:-translate-x-0 group-hover:-translate-y-0"></span>
<span className="absolute inset-0 w-full h-full bg-white border-2 border-black group-hover:bg-black"></span>
<span className="relative text-black group-hover:text-white flex items-center gap-x-3">
Resume <TbDownload size={16} />
</span>
</motion.a>
</ul>
</motion.div>
)}
</AnimatePresence>
</motion.nav>
);
}
|