feat: add AboutSummary component with personal introduction and game preview

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
2025-09-08 19:12:30 +02:00
parent fab7310436
commit a99b6353be
32 changed files with 1522 additions and 107 deletions
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -0,0 +1,78 @@
+"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;