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

artifacts/joachim-portfolio/src/components/hero.tsx

@@ -0,0 +1,61 @@
+import { motion } from "framer-motion";
+import { Terminal, ChevronDown } from "lucide-react";
+
+export function Hero() {
+  return (
+    <div className="min-h-[85vh] flex flex-col justify-center relative">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, ease: "easeOut" }}
+        className="max-w-4xl"
+      >
+        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary border border-border mb-8">
+          <Terminal className="w-4 h-4 text-primary" />
+          <span className="text-sm font-mono text-muted-foreground">System.init()</span>
+        </div>
+
+        <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6">
+          <span className="block text-muted-foreground">Joachim</span>
+          <span className="block text-foreground">Hummel</span>
+        </h1>
+
+        <div className="text-xl md:text-2xl font-mono text-primary mb-8 glow-text">
+          Senior IT-Consultant · IT-Systems Engineer · Vibe-Coder
+        </div>
+
+        <p className="text-lg md:text-xl text-muted-foreground max-w-2xl leading-relaxed">
+          Zwei Welten, eine Lösung: Tiefe, praxisbewährte Infrastruktur-Expertise 
+          trifft auf moderne KI-gestützte Softwareentwicklung. Ich baue Systeme, die 
+          in Produktion laufen – präzise, sicher und zukunftsfähig.
+        </p>
+
+        <div className="mt-12 flex flex-wrap gap-4">
+          <a 
+            href="#contact" 
+            className="px-6 py-3 bg-primary text-primary-foreground font-medium rounded hover:bg-primary/90 transition-colors flex items-center gap-2"
+          >
+            Kontakt aufnehmen
+          </a>
+          <a 
+            href="#projects" 
+            className="px-6 py-3 bg-secondary text-secondary-foreground border border-border font-medium rounded hover:bg-secondary/80 transition-colors"
+          >
+            Projekte ansehen
+          </a>
+        </div>
+      </motion.div>
+
+      <motion.div 
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 1, duration: 1 }}
+        className="absolute bottom-10 left-0 right-0 flex justify-center"
+      >
+        <a href="#competencies" className="text-muted-foreground hover:text-primary transition-colors animate-bounce">
+          <ChevronDown className="w-8 h-8" />
+        </a>
+      </motion.div>
+    </div>
+  );
+}