Create a professional portfolio website for Joachim Hummel

Implement a React-Vite portfolio website for Joachim Hummel, featuring sections for bio, competencies, projects, and contact information. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 6f3329ae-2dcc-46cc-bf2e-f58b7a5fa805 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 93e1822d-6468-4db0-9e37-4f1f19334ba5 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/e678fe28-87ab-4437-945b-7a15e872a292/6f3329ae-2dcc-46cc-bf2e-f58b7a5fa805/MG2yXVH Replit-Helium-Checkpoint-Created: true
2026-05-15 15:27:21 +00:00
parent 758e23e905
commit 67f0e12a21
82 changed files with 7373 additions and 0 deletions
--- a/artifacts/joachim-portfolio/src/components/navbar.tsx
+++ b/artifacts/joachim-portfolio/src/components/navbar.tsx
@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+import { motion, useScroll, useMotionValueEvent } from "framer-motion";
+
+export function Navbar() {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const { scrollY } = useScroll();
+
+  useMotionValueEvent(scrollY, "change", (latest) => {
+    setIsScrolled(latest > 50);
+  });
+
+  const navLinks = [
+    { name: "Kompetenzen", href: "#competencies" },
+    { name: "3 Welten", href: "#strengths" },
+    { name: "Projekte", href: "#projects" },
+    { name: "Kontakt", href: "#contact" },
+  ];
+
+  return (
+    <motion.header
+      className={`fixed top-0 w-full z-50 transition-all duration-300 ${
+        isScrolled 
+          ? "bg-background/80 backdrop-blur-md border-b border-border/50 py-4" 
+          : "bg-transparent py-6"
+      }`}
+      initial={{ y: -100 }}
+      animate={{ y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      <div className="container mx-auto px-4 md:px-8 flex items-center justify-between">
+        <a href="#hero" className="text-xl font-bold font-mono text-primary glow-text">
+          JH<span className="text-muted-foreground">.</span>
+        </a>
+        
+        <nav className="hidden md:flex gap-8">
+          {navLinks.map((link) => (
+            <a 
+              key={link.name} 
+              href={link.href}
+              className="text-sm font-mono text-muted-foreground hover:text-primary transition-colors"
+            >
+              {link.name}
+            </a>
+          ))}
+        </nav>
+
+        <a 
+          href="#contact" 
+          className="md:hidden px-4 py-2 border border-border rounded text-sm font-mono text-foreground hover:border-primary transition-colors"
+        >
+          Kontakt
+        </a>
+      </div>
+    </motion.header>
+  );
+}