Merged changes from o10aupva/main

Replit-Task-Id: 96838fc6-bf00-4a8d-ae18-84ba08feec56
2026-05-15 16:11:01 +00:00
parent 83a3bf9c62
commit e9f0d1ed98
18 changed files with 612 additions and 140 deletions
--- a/artifacts/api-server/package.json
+++ b/artifacts/api-server/package.json
@@ -10,6 +10,7 @@
    "typecheck": "tsc -p tsconfig.json --noEmit"
  },
  "dependencies": {
+    "@getbrevo/brevo": "^5.0.4",
    "@workspace/api-zod": "workspace:*",
    "@workspace/db": "workspace:*",
    "cookie-parser": "^1.4.7",
--- a/artifacts/api-server/src/routes/contact.ts
+++ b/artifacts/api-server/src/routes/contact.ts
@@ -0,0 +1,73 @@
+import { Router, type IRouter } from "express";
+import { BrevoClient } from "@getbrevo/brevo";
+import { SendContactMessageBody } from "@workspace/api-zod";
+
+const router: IRouter = Router();
+
+function getBrevoClient() {
+  const apiKey = process.env.BREVO_API_KEY;
+  if (!apiKey) throw new Error("BREVO_API_KEY is not set");
+  return new BrevoClient({ apiKey });
+}
+
+router.post("/contact", async (req, res) => {
+  const parsed = SendContactMessageBody.safeParse(req.body);
+
+  if (!parsed.success) {
+    res.status(400).json({
+      success: false,
+      message: "Ungültige Eingabe. Bitte überprüfen Sie Ihre Angaben.",
+    });
+    return;
+  }
+
+  const { name, email, subject, message } = parsed.data;
+
+  try {
+    const brevo = getBrevoClient();
+
+    await brevo.transactionalEmails.sendTransacEmail({
+      sender: { name: "Kontaktformular Portfolio", email: "jh@unixweb.de" },
+      to: [{ email: "jh@unixweb.de", name: "Joachim Hummel" }],
+      replyTo: { email, name },
+      subject: subject ? `[Portfolio] ${subject}` : `[Portfolio] Neue Anfrage von ${name}`,
+      textContent: [
+        `Name: ${name}`,
+        `E-Mail: ${email}`,
+        subject ? `Betreff: ${subject}` : "",
+        "",
+        message,
+      ]
+        .filter((l) => l !== undefined)
+        .join("\n"),
+      htmlContent: `
+        <p><strong>Name:</strong> ${escapeHtml(name)}</p>
+        <p><strong>E-Mail:</strong> ${escapeHtml(email)}</p>
+        ${subject ? `<p><strong>Betreff:</strong> ${escapeHtml(subject)}</p>` : ""}
+        <hr />
+        <p style="white-space:pre-wrap">${escapeHtml(message)}</p>
+      `,
+    });
+
+    req.log.info({ to: "jh@unixweb.de", from: email }, "Contact message sent via Brevo");
+    res.json({ success: true, message: "Ihre Nachricht wurde erfolgreich gesendet." });
+  } catch (err) {
+    req.log.error({ err }, "Failed to send contact email via Brevo");
+    res.status(500).json({
+      success: false,
+      message:
+        "Die Nachricht konnte nicht gesendet werden. Bitte versuchen Sie es später erneut.",
+    });
+  }
+});
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+export default router;
--- a/artifacts/api-server/src/routes/index.ts
+++ b/artifacts/api-server/src/routes/index.ts
@@ -1,8 +1,10 @@
 import { Router, type IRouter } from "express";
 import healthRouter from "./health";
+import contactRouter from "./contact";

 const router: IRouter = Router();

 router.use(healthRouter);
+router.use(contactRouter);

 export default router;
--- a/artifacts/joachim-portfolio/public/opengraph.jpg
+++ b/artifacts/joachim-portfolio/public/opengraph.jpg
--- a/artifacts/joachim-portfolio/src/components/contact.tsx
+++ b/artifacts/joachim-portfolio/src/components/contact.tsx
@@ -1,10 +1,10 @@
 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" },
-];
+import { ExternalLink, ArrowRight, Send, CheckCircle, AlertCircle, Loader2 } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useSendContactMessage } from "@workspace/api-client-react";

 const links = [
  {
@@ -19,6 +19,177 @@ const links = [
  },
 ];

+const contactSchema = z.object({
+  name: z.string().min(1, "Bitte geben Sie Ihren Namen ein").max(100),
+  email: z.string().email("Bitte geben Sie eine gültige E-Mail-Adresse ein").max(200),
+  subject: z.string().max(200).optional(),
+  message: z.string().min(1, "Bitte geben Sie eine Nachricht ein").max(5000, "Die Nachricht ist zu lang (max. 5000 Zeichen)"),
+});
+
+type ContactFormData = z.infer<typeof contactSchema>;
+
+function ContactForm() {
+  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
+  const [serverMessage, setServerMessage] = useState("");
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<ContactFormData>({
+    resolver: zodResolver(contactSchema),
+  });
+
+  const { mutate: sendMessage, isPending } = useSendContactMessage({
+    mutation: {
+      onSuccess: (data) => {
+        setServerMessage(data.message);
+        setStatus("success");
+        reset();
+      },
+      onError: (err: unknown) => {
+        const apiErr = err as { data?: { message?: string } };
+        setServerMessage(
+          apiErr?.data?.message ??
+            "Die Nachricht konnte nicht gesendet werden. Bitte versuchen Sie es später erneut.",
+        );
+        setStatus("error");
+      },
+    },
+  });
+
+  const onSubmit = (data: ContactFormData) => {
+    setStatus("idle");
+    sendMessage({ data: { name: data.name, email: data.email, subject: data.subject, message: data.message } });
+  };
+
+  if (status === "success") {
+    return (
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="flex flex-col items-center justify-center gap-4 p-8 rounded-2xl bg-green-50 border border-green-200 text-center"
+        data-testid="contact-form-success"
+      >
+        <CheckCircle className="w-10 h-10 text-green-500" />
+        <div>
+          <p className="font-semibold text-green-800 text-lg">Nachricht gesendet!</p>
+          <p className="text-green-700 text-sm mt-1">{serverMessage}</p>
+        </div>
+        <button
+          onClick={() => setStatus("idle")}
+          className="mt-2 text-sm text-green-700 underline underline-offset-2 hover:text-green-900 transition-colors"
+        >
+          Weitere Nachricht senden
+        </button>
+      </motion.div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4" noValidate data-testid="contact-form">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div className="flex flex-col gap-1.5">
+          <label htmlFor="contact-name" className="text-sm font-medium text-foreground">
+            Name <span className="text-red-500">*</span>
+          </label>
+          <input
+            id="contact-name"
+            type="text"
+            autoComplete="name"
+            placeholder="Max Mustermann"
+            className={`rounded-xl border px-4 py-2.5 text-sm bg-white text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:ring-2 focus:ring-primary/30 focus:border-primary ${errors.name ? "border-red-400" : "border-border"}`}
+            data-testid="input-contact-name"
+            {...register("name")}
+          />
+          {errors.name && (
+            <p className="text-xs text-red-500">{errors.name.message}</p>
+          )}
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <label htmlFor="contact-email" className="text-sm font-medium text-foreground">
+            E-Mail <span className="text-red-500">*</span>
+          </label>
+          <input
+            id="contact-email"
+            type="email"
+            autoComplete="email"
+            placeholder="max@beispiel.de"
+            className={`rounded-xl border px-4 py-2.5 text-sm bg-white text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:ring-2 focus:ring-primary/30 focus:border-primary ${errors.email ? "border-red-400" : "border-border"}`}
+            data-testid="input-contact-email"
+            {...register("email")}
+          />
+          {errors.email && (
+            <p className="text-xs text-red-500">{errors.email.message}</p>
+          )}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <label htmlFor="contact-subject" className="text-sm font-medium text-foreground">
+          Betreff <span className="text-muted-foreground font-normal">(optional)</span>
+        </label>
+        <input
+          id="contact-subject"
+          type="text"
+          placeholder="Worum geht es?"
+          className="rounded-xl border border-border px-4 py-2.5 text-sm bg-white text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:ring-2 focus:ring-primary/30 focus:border-primary"
+          data-testid="input-contact-subject"
+          {...register("subject")}
+        />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <label htmlFor="contact-message" className="text-sm font-medium text-foreground">
+          Nachricht <span className="text-red-500">*</span>
+        </label>
+        <textarea
+          id="contact-message"
+          rows={5}
+          placeholder="Ihre Nachricht..."
+          className={`rounded-xl border px-4 py-2.5 text-sm bg-white text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:ring-2 focus:ring-primary/30 focus:border-primary resize-none ${errors.message ? "border-red-400" : "border-border"}`}
+          data-testid="input-contact-message"
+          {...register("message")}
+        />
+        {errors.message && (
+          <p className="text-xs text-red-500">{errors.message.message}</p>
+        )}
+      </div>
+
+      {status === "error" && (
+        <div className="flex items-start gap-2 p-3 rounded-xl bg-red-50 border border-red-200 text-sm text-red-700" data-testid="contact-form-error">
+          <AlertCircle className="w-4 h-4 shrink-0 mt-0.5" />
+          <span>{serverMessage}</span>
+        </div>
+      )}
+
+      <p className="text-xs text-muted-foreground">
+        Ihre Daten werden ausschließlich zur Bearbeitung Ihrer Anfrage verwendet und nicht an Dritte weitergegeben.
+      </p>
+
+      <button
+        type="submit"
+        disabled={isPending}
+        className="flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-primary text-white font-semibold text-sm hover:bg-primary/90 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+        data-testid="button-contact-submit"
+      >
+        {isPending ? (
+          <>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            Wird gesendet…
+          </>
+        ) : (
+          <>
+            <Send className="w-4 h-4" />
+            Nachricht senden
+          </>
+        )}
+      </button>
+    </form>
+  );
+}
+
 export function Contact() {
  return (
    <div className="py-24">
@@ -40,39 +211,6 @@ export function Contact() {
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <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) => (
                <motion.a
@@ -95,6 +233,11 @@ export function Contact() {
                </motion.a>
              ))}
            </div>
+
+            <div className="rounded-2xl bg-white border border-border p-6 shadow-sm">
+              <h3 className="text-lg font-semibold text-foreground mb-5">Direkt schreiben</h3>
+              <ContactForm />
+            </div>
          </div>

          <div className="mt-12 pt-8 border-t border-border text-center text-sm text-muted-foreground">
--- a/artifacts/joachim-portfolio/src/components/experience.tsx
+++ b/artifacts/joachim-portfolio/src/components/experience.tsx
@@ -23,7 +23,7 @@ const stations: Station[] = [
    ],
  },
  {
-    period: "01/2024 – 05/2025",
+    period: "01/2024 – heute",
    role: "Senior IT-Consultant",
    client: "Landesamt für Statistik Bayern, München",
    type: "behoerde",
--- a/artifacts/joachim-portfolio/src/components/navbar.tsx
+++ b/artifacts/joachim-portfolio/src/components/navbar.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { motion, useScroll, useMotionValueEvent } from "framer-motion";
-import { Menu, X, ExternalLink } from "lucide-react";
+import { Menu, X } from "lucide-react";

 export function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);
@@ -12,13 +12,11 @@ export function Navbar() {
  });

  const navLinks = [
-    { name: "Kompetenzen", href: "#competencies" },
    { name: "Projekte", href: "#projects" },
    { name: "Erfahrung", href: "#experience" },
+    { name: "Über mich", href: "#bio" },
  ];

-  const blogLinks: { name: string; href: string }[] = [];
-
  return (
    <motion.header
      className={`fixed top-0 w-full z-50 transition-all duration-300 ${
@@ -53,20 +51,6 @@ export function Navbar() {
              {link.name}
            </a>
          ))}
-          <div className="w-px h-4 bg-border mx-1" />
-          {blogLinks.map((link) => (
-            <a
-              key={link.name}
-              href={link.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-secondary rounded-lg transition-all"
-              data-testid={`link-nav-${link.name.toLowerCase().replace(/\s/g, '-')}`}
-            >
-              {link.name}
-              <ExternalLink className="w-3 h-3 opacity-50" />
-            </a>
-          ))}
        </nav>

        <div className="hidden md:block">
@@ -104,19 +88,6 @@ export function Navbar() {
              {link.name}
            </a>
          ))}
-          <div className="border-t border-border my-1" />
-          {blogLinks.map((link) => (
-            <a
-              key={link.name}
-              href={link.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 px-4 py-3 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-secondary rounded-lg transition-all"
-            >
-              {link.name}
-              <ExternalLink className="w-3 h-3 opacity-50" />
-            </a>
-          ))}
          <a
            href="#contact"
            onClick={() => setMobileOpen(false)}