Redesign: Modernes SaaS-Design für Joachim Hummel Portfolio

Task #4 — vollständiges Redesign von dunkler Terminal-Ästhetik zu modernem SaaS-Look.

Änderungen:
- index.css: Komplette Neudefinition der CSS-Variablen. Helles Farbschema (weißer Hintergrund),
  Primärfarbe Indigo/Blau (hsl 234 89% 60%), neutrale Grautöne, Google Font Inter eingebunden.
  Utility-Klassen .section-number, .hero-gradient, .dot-pattern, .card-hover hinzugefügt.
  Terminal-spezifische Klassen (.glow-text, .glow-box, .bg-grid-pattern) entfernt.

- navbar.tsx: Sticky Nav mit transparentem Start → weißem Hintergrund + Schatten beim Scrollen.
  Logo "JH" als gefülltes Indigo-Badge + "Joachim Hummel" Text. Pill-Style Navigation Links.
  Primär-CTA Button. Vollständiges Mobile-Menü mit Hamburger/X Toggle.

- hero.tsx: Zentriertes Layout, großer Display-Headline mit Indigo-Akzent auf Nachname.
  "Verfügbar für neue Projekte" Badge mit grünem Puls. Skill-Badges (30+ Jahre, ITIL, etc.).
  Zwei CTAs: gefüllter Primärbutton + Outline-Button. Subtiler Radial-Gradient + Dot-Pattern.

- competencies.tsx: Sechs weiße Karten im Grid mit farbigen Icon-Badges (blau, sky, grün, orange,
  violett, rose). Tech-Icon-Leiste (Linux, Ubuntu, Docker, Grafana, Nginx, Ansible, Prometheus)
  mit Hover-Farbeffekt und Labels.

- strengths.tsx: Drei weiße Karten auf hellgrauem Hintergrund. Nummerierung (01/02/03) als
  dekoratives Element. Highlight-Badge je Karte. Kein Glow, kein Neon.

- projects.tsx: Sechs Projektkarten mit farbigen Icon-Badges je Projektkategorie. Externe Links
  für SafeDocs Portal (safedocsportal.com) und zensend.email als ArrowUpRight-Icon-Buttons.
  Pill-Badges für Tags.

- bio.tsx: Zweispaltiges Layout. Links: Fließtext + Kunden-Badges. Rechts: Weißes Highlights-Panel
  mit CheckCircle-Icons (7 Punkte inkl. ITIL, BSI, Tech-Blogger).

- contact.tsx: Primärfarbige E-Mail-Karte + drei kompakte Link-Cards (Tech-Blog, KI-Blog, Website).
  Footer-Zeile mit Name und Standort.

- home.tsx: Vereinfacht — kein Fixed-Background, kein Grid-Pattern, kein Ambient-Glow.
  max-w-6xl Container für alle Sektionen.

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

@@ -1,61 +1,92 @@
 import { motion } from "framer-motion";
-import { Terminal, ChevronDown } from "lucide-react";
+import { ArrowRight, ChevronDown } from "lucide-react";
+
+const badges = [
+  "30+ Jahre IT-Erfahrung",
+  "ITIL & BSI-Grundschutz",
+  "Vibe-Coding mit KI",
+  "On-Premise & DSGVO",
+];
 
 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>
+    <div className="min-h-[92vh] flex flex-col justify-center items-center text-center relative pt-20">
+      <div className="absolute inset-0 hero-gradient pointer-events-none" />
+      <div className="absolute inset-0 dot-pattern opacity-40 pointer-events-none" />
 
-        <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>
+      <motion.div
+        initial={{ opacity: 0, y: 24 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.7, ease: "easeOut" }}
+        className="relative z-10 max-w-4xl mx-auto px-4"
+      >
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+          className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-accent text-accent-foreground text-sm font-medium mb-8 border border-primary/20"
+          data-testid="badge-availability"
+        >
+          <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+          Verfügbar für neue Projekte
+        </motion.div>
+
+        <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight text-foreground mb-6 leading-tight" data-testid="text-hero-name">
+          Joachim{" "}
+          <span className="text-primary">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 className="text-lg md:text-xl font-medium text-muted-foreground mb-4 tracking-wide" data-testid="text-hero-title">
+          Senior IT-Consultant &middot; Service Manager &middot; Technical Writer &middot; Vibe-Coder
         </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"
+        <p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed mb-10" data-testid="text-hero-description">
+          Über 30 Jahre IT-Betrieb in Behörden und Konzernen. Heute verbinde ich klassische
+          Infrastruktur-Expertise mit KI-gestützter Softwareentwicklung — von der Idee bis zum
+          produktiven System.
+        </p>
+
+        <div className="flex flex-wrap justify-center gap-3 mb-12">
+          {badges.map((badge) => (
+            <span
+              key={badge}
+              className="px-3 py-1 text-sm font-medium bg-secondary text-secondary-foreground rounded-full border border-border"
+              data-testid={`badge-skill-${badge.replace(/\s/g, '-').toLowerCase()}`}
+            >
+              {badge}
+            </span>
+          ))}
+        </div>
+
+        <div className="flex flex-wrap justify-center gap-4">
+          <a
+            href="#contact"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white font-semibold rounded-xl hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 hover:shadow-primary/30"
+            data-testid="button-hero-contact"
           >
             Kontakt aufnehmen
+            <ArrowRight className="w-4 h-4" />
           </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"
+          <a
+            href="#projects"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-white text-foreground font-semibold rounded-xl border border-border hover:bg-secondary transition-all"
+            data-testid="button-hero-projects"
           >
             Projekte ansehen
           </a>
         </div>
       </motion.div>
 
-      <motion.div 
+      <motion.a
+        href="#competencies"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
-        transition={{ delay: 1, duration: 1 }}
-        className="absolute bottom-10 left-0 right-0 flex justify-center"
+        transition={{ delay: 1.2, duration: 0.6 }}
+        className="absolute bottom-10 text-muted-foreground hover:text-primary transition-colors"
+        data-testid="link-scroll-down"
       >
-        <a href="#competencies" className="text-muted-foreground hover:text-primary transition-colors animate-bounce">
-          <ChevronDown className="w-8 h-8" />
-        </a>
-      </motion.div>
+        <ChevronDown className="w-6 h-6 animate-bounce" />
+      </motion.a>
     </div>
   );
 }