Spaces:
Sleeping
Sleeping
File size: 2,917 Bytes
4208a2c |
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 |
'use client';
import { motion } from 'framer-motion';
import { Menu, X } from 'lucide-react';
import { useState } from 'react';
export default function Navbar() {
const [isOpen, setIsOpen] = useState(false);
const navLinks = [
{ name: 'Research', href: '#research' },
{ name: 'Projects', href: '#projects' },
{ name: 'About', href: '#about' },
{ name: 'Contact', href: '#contact' },
];
return (
<motion.nav
initial={{ y: -100 }}
animate={{ y: 0 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
className="fixed top-0 left-0 w-full z-50 px-6 py-6 flex justify-between items-center mix-blend-difference"
>
<a href="/" className="font-serif text-2xl font-bold tracking-tighter hover:opacity-70 transition-opacity">
A.I.
</a>
{/* Desktop Nav */}
<div className="hidden md:flex items-center gap-8 font-mono text-sm uppercase tracking-widest">
{navLinks.map((link) => (
<a
key={link.name}
href={link.href}
className="relative group overflow-hidden"
>
<span className="block transition-transform duration-300 group-hover:-translate-y-full">
{link.name}
</span>
<span className="absolute top-0 left-0 block translate-y-full transition-transform duration-300 group-hover:translate-y-0 text-gray-400">
{link.name}
</span>
</a>
))}
<a
href="https://huggingface.co/spaces/akhaliq/anycoder"
target="_blank"
rel="noopener noreferrer"
className="text-xs border-b border-white/30 pb-0.5 hover:border-white transition-colors"
>
Built with anycoder
</a>
</div>
{/* Mobile Toggle */}
<button
className="md:hidden"
onClick={() => setIsOpen(!isOpen)}
>
{isOpen ? <X /> : <Menu />}
</button>
{/* Mobile Menu */}
{isOpen && (
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
className="absolute top-full left-0 w-full bg-void/90 backdrop-blur-xl border-b border-white/10 p-6 flex flex-col gap-4 md:hidden"
>
{navLinks.map((link) => (
<a
key={link.name}
href={link.href}
className="font-mono text-lg uppercase tracking-widest hover:text-gray-400"
onClick={() => setIsOpen(false)}
>
{link.name}
</a>
))}
<a
href="https://huggingface.co/spaces/akhaliq/anycoder"
target="_blank"
rel="noopener noreferrer"
className="text-xs border-b border-white/30 pb-0.5 w-fit"
>
Built with anycoder
</a>
</motion.div>
)}
</motion.nav>
);
} |