From 8a5041ff6edc72a2933867fc7cf7f07649dfabcb Mon Sep 17 00:00:00 2001
From: joachimhummel <47454583-joachimhummel@users.noreply.replit.com>
Date: Fri, 15 May 2026 15:56:10 +0000
Subject: [PATCH] Add a second email address to the contact section

Update contact.tsx to include `kontakt@joachimhummel.de` alongside the existing `jh@unixweb.de` in the email contact options.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 6f3329ae-2dcc-46cc-bf2e-f58b7a5fa805
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 9c03a06c-fe4f-4361-ba05-dbe78ca9024b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/e678fe28-87ab-4437-945b-7a15e872a292/6f3329ae-2dcc-46cc-bf2e-f58b7a5fa805/YmfGtQf
Replit-Helium-Checkpoint-Created: true
---
 .../src/components/contact.tsx                | 52 +++++++++++++------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/artifacts/joachim-portfolio/src/components/contact.tsx b/artifacts/joachim-portfolio/src/components/contact.tsx
index 3ac87c1..665ce67 100644
--- a/artifacts/joachim-portfolio/src/components/contact.tsx
+++ b/artifacts/joachim-portfolio/src/components/contact.tsx
@@ -1,6 +1,11 @@
 import { motion } from "framer-motion";
 import { Mail, ExternalLink, ArrowRight } from "lucide-react";
 
+const emailAddresses = [
+  { address: "jh@unixweb.de", label: "jh@unixweb.de" },
+  { address: "kontakt@joachimhummel.de", label: "kontakt@joachimhummel.de" },
+];
+
 const links = [
   {
     label: "Tech-Blog",
@@ -40,21 +45,38 @@ export function Contact() {
           </div>
 
           <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">
+              {emailAddresses.map((email, i) => (
+                <motion.a
+                  key={email.address}
+                  href={`mailto:${email.address}`}
+                  whileHover={{ scale: 1.01 }}
+                  className={`flex items-center gap-5 p-5 rounded-2xl border card-hover group ${
+                    i === 0
+                      ? "bg-primary text-white border-primary"
+                      : "bg-white text-foreground border-border"
+                  }`}
+                  data-testid={`link-contact-email-${i}`}
+                >
+                  <div className={`w-11 h-11 rounded-xl flex items-center justify-center shrink-0 ${
+                    i === 0 ? "bg-white/20" : "bg-secondary"
+                  }`}>
+                    <Mail className={`w-5 h-5 ${i === 0 ? "text-white" : "text-primary"}`} />
+                  </div>
+                  <div className="flex-grow min-w-0">
+                    <p className={`text-xs font-medium mb-0.5 ${i === 0 ? "text-white/70" : "text-muted-foreground"}`}>
+                      {i === 0 ? "Hauptadresse" : "Alternativ"}
+                    </p>
+                    <p className={`text-sm font-semibold truncate ${i === 0 ? "text-white" : "text-foreground"}`}>
+                      {email.label}
+                    </p>
+                  </div>
+                  <ArrowRight className={`w-4 h-4 shrink-0 group-hover:translate-x-1 transition-all ${
+                    i === 0 ? "text-white/60" : "text-muted-foreground/40 group-hover:text-primary"
+                  }`} />
+                </motion.a>
+              ))}
+            </div>
 
             <div className="flex flex-col gap-3">
               {links.map((link) => (