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/contact.tsx

@@ -1,40 +1,88 @@
 import { motion } from "framer-motion";
-import { Mail, Github, Linkedin, Terminal } from "lucide-react";
+import { Mail, ExternalLink, ArrowRight } from "lucide-react";
+
+const links = [
+  {
+    label: "Tech-Blog",
+    url: "https://blog.unixweb.de",
+    desc: "300+ Fachartikel rund um Linux, Server & IT",
+  },
+  {
+    label: "KI-Blog",
+    url: "https://ki-blog.unixweb.de",
+    desc: "KI, Automation, Vibe-Coding & n8n",
+  },
+  {
+    label: "Website",
+    url: "https://joachimhummel.de",
+    desc: "joachimhummel.de",
+  },
+];
 
 export function Contact() {
   return (
-    <div className="py-32 border-t border-border/50">
+    <div className="py-24">
       <motion.div
-        initial={{ opacity: 0, scale: 0.95 }}
-        whileInView={{ opacity: 1, scale: 1 }}
-        viewport={{ once: true, margin: "-100px" }}
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, margin: "-80px" }}
         transition={{ duration: 0.6 }}
-        className="max-w-2xl mx-auto text-center p-12 rounded-2xl bg-card border border-border glow-box relative overflow-hidden"
       >
-        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-primary to-transparent" />
-        
-        <Terminal className="w-12 h-12 text-primary mx-auto mb-6" />
-        
-        <h2 className="text-3xl md:text-4xl font-bold mb-4">Bereit für das nächste Projekt?</h2>
-        <p className="text-muted-foreground mb-8 text-lg">
-          Lassen Sie uns darüber sprechen, wie wir Ihre Infrastruktur modernisieren oder Ihre nächste Anwendung bauen können.
-        </p>
-        
-        <a 
-          href="mailto:hello@example.com" 
-          className="inline-flex items-center gap-2 px-8 py-4 bg-primary text-primary-foreground font-bold rounded hover:bg-primary/90 transition-all hover:scale-105"
-        >
-          <Mail className="w-5 h-5" />
-          Kontakt aufnehmen
-        </a>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <p className="section-number mb-3" data-testid="text-section-label-contact">Kontakt</p>
+            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4" data-testid="text-section-title-contact">
+              Bereit für das nächste Projekt?
+            </h2>
+            <p className="text-muted-foreground text-lg max-w-xl mx-auto">
+              Ob Infrastruktur-Modernisierung, KI-Automation oder technische Dokumentation — ich freue mich auf Ihre Anfrage.
+            </p>
+          </div>
 
-        <div className="mt-12 flex justify-center gap-6">
-          <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
-            <Github className="w-6 h-6" />
-          </a>
-          <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
-            <Linkedin className="w-6 h-6" />
-          </a>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <motion.a
+              href="mailto:jh@unixweb.de"
+              whileHover={{ scale: 1.01 }}
+              className="flex items-center gap-5 p-6 rounded-2xl bg-primary text-white border border-primary card-hover group"
+              data-testid="link-contact-email"
+            >
+              <div className="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center shrink-0">
+                <Mail className="w-6 h-6" />
+              </div>
+              <div className="flex-grow">
+                <p className="font-semibold text-white">E-Mail schreiben</p>
+                <p className="text-sm text-white/70">jh@unixweb.de</p>
+              </div>
+              <ArrowRight className="w-5 h-5 text-white/60 group-hover:translate-x-1 transition-transform" />
+            </motion.a>
+
+            <div className="flex flex-col gap-3">
+              {links.map((link) => (
+                <motion.a
+                  key={link.label}
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  whileHover={{ scale: 1.01 }}
+                  className="flex items-center gap-4 px-5 py-4 rounded-xl bg-white border border-border card-hover group"
+                  data-testid={`link-contact-${link.label.toLowerCase().replace(/\s/g, '-')}`}
+                >
+                  <div className="w-9 h-9 rounded-lg bg-secondary flex items-center justify-center shrink-0">
+                    <ExternalLink className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" />
+                  </div>
+                  <div className="flex-grow min-w-0">
+                    <p className="text-sm font-semibold text-foreground">{link.label}</p>
+                    <p className="text-xs text-muted-foreground truncate">{link.desc}</p>
+                  </div>
+                  <ArrowRight className="w-4 h-4 text-muted-foreground/40 group-hover:text-primary group-hover:translate-x-1 transition-all shrink-0" />
+                </motion.a>
+              ))}
+            </div>
+          </div>
+
+          <div className="mt-12 pt-8 border-t border-border text-center text-sm text-muted-foreground">
+            Joachim Hummel &mdash; Senior IT-Consultant &middot; München
+          </div>
         </div>
       </motion.div>
     </div>