Spaces:
Running
Running
File size: 2,096 Bytes
26f4db3 |
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 |
"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { Github } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PortfolioLogo } from "@/components/icons";
import { cn } from "@/lib/utils";
const navItems = [
{ name: "About", href: "#about" },
{ name: "Projects", href: "#projects" },
{ name: "Skills", href: "#skills" },
{ name: "Contact", href: "#contact" },
];
export function Header() {
const [isScrolled, setIsScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 10);
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
return (
<header
className={cn(
"sticky top-0 z-50 w-full transition-all duration-300",
isScrolled
? "bg-background/80 backdrop-blur-sm border-b"
: "bg-background"
)}
>
<div className="container flex h-16 items-center">
<Link href="/" className="mr-6 flex items-center space-x-2">
<PortfolioLogo className="h-6 w-6 text-primary" />
<span className="font-bold font-headline inline-block">
Portfolio
</span>
</Link>
<nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
{navItems.map((item) => (
<Link
key={item.name}
href={item.href}
className="transition-colors hover:text-primary"
>
{item.name}
</Link>
))}
</nav>
<div className="flex flex-1 items-center justify-end space-x-4">
<a
href="https://github.com/sameerbanchhor-git"
target="_blank"
rel="noopener noreferrer"
>
<Button variant="ghost" size="icon" aria-label="GitHub">
<Github className="h-5 w-5" />
</Button>
</a>
</div>
</div>
</header>
);
}
|