Gabriel Kaszewski
a99b6353be
feat: create Chip component for displaying technology tags feat: implement ExperienceCard component to showcase job experiences feat: add Experience component to list multiple job experiences feat: create Footer component with social links and copyright information feat: implement Hero component for the landing section with social links feat: add ImageCarousel component for displaying project images feat: create Navbar component with scroll effect and navigation links feat: implement ProjectItem component to display individual project details feat: add Skills component to showcase technical skills feat: create data module with skills, jobs, and projects information feat: define types for Skill, Job, and Project in types module chore: update package.json with new dependencies for Tailwind CSS and Lucide icons chore: add CV PDF file to public directory chore: remove unused SVG files from public directory chore: add new images for background and hero sections feat: implement formatDate utility function for date formatting
79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const Navbar = () => {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const pathname = usePathname();
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 10);
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
const navLinks = [
|
|
{ href: "/", label: "Home" },
|
|
{ href: "/projects", label: "Projects" },
|
|
{
|
|
href: "https://blog.gabrielkaszewski.dev/",
|
|
label: "Blog",
|
|
external: true,
|
|
},
|
|
{ href: "/about", label: "About" },
|
|
];
|
|
|
|
const baseClasses =
|
|
"fixed z-20 flex w-full items-center justify-center p-4 transition-all duration-300";
|
|
const scrolledClasses = "bg-gray-900/80 backdrop-blur-md";
|
|
const transparentClasses = "bg-transparent";
|
|
|
|
return (
|
|
<nav
|
|
className={`${baseClasses} ${
|
|
isScrolled ? scrolledClasses : transparentClasses
|
|
}`}
|
|
>
|
|
<div className="flex flex-1"></div>
|
|
<div className="flex gap-4">
|
|
{navLinks.map((link) => {
|
|
const isActive = pathname === link.href;
|
|
const linkClasses = `text-lg hover:text-yellow-400 transition-colors ${
|
|
isActive ? "text-yellow-400 font-semibold" : "text-white"
|
|
}`;
|
|
|
|
if (link.external) {
|
|
return (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className={linkClasses}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link key={link.href} href={link.href} className={linkClasses}>
|
|
{link.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|