Software,{" "}
die dein Team wirklich{" "}
voranbringt – statt auszubremsen.
Als Fachinformatiker mit Hands-on-Mentalität entwickle ich Webseiten,
SaaS-Lösungen und KI-Automationen, die funktionieren: praxisnah, effizient
und mit echtem Mehrwert für deinen Arbeitsalltag.
{/* Faux-3D rotating disc as marginalia */}
);
};
const Pillar = ({ n, eyebrow, title, body }) =>
{eyebrow || `(${n}) — Wie ich arbeite`}
{title}
{body}
;
const Disc = () =>
;
const WEB3FORMS_KEY = "03fbdb04-5464-47b0-92ba-f14e97c27850";
const validateContact = (name, email, message) => {
const errors = {};
if (!name.trim()) errors.name = "Bitte gib deinen Namen an.";
if (!email.trim()) {
errors.email = "Bitte gib deine E-Mail-Adresse an.";
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
errors.email = "Diese E-Mail-Adresse sieht ungültig aus.";
}
if (!message.trim()) errors.message = "Bitte schreib eine kurze Nachricht.";
return errors;
};
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const Contact = () => {
const [name, setName] = React.useState("");
const [email, setEmail] = React.useState("");
const [message, setMessage] = React.useState("");
const [status, setStatus] = React.useState("idle"); // idle | loading | success | error
const [errors, setErrors] = React.useState({});
const [statusMessage, setStatusMessage] = React.useState("");
// Field-level validity used for live "errors clear when fixed" + green tick.
// Per-field validators reused by both submit and live updates.
const isNameValid = (v) => v.trim().length >= 2;
const isEmailValid = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());
const isMessageValid = (v) => v.trim().length > 0;
// Wrapped setters: clear the corresponding error as soon as the field becomes valid.
const updateName = React.useCallback((v) => {
setName(v);
setErrors((prev) => {
if (!prev.name) return prev;
if (isNameValid(v)) {
const { name: _, ...rest } = prev;
return rest;
}
return prev;
});
}, []);
const updateEmail = React.useCallback((v) => {
setEmail(v);
setErrors((prev) => {
if (!prev.email) return prev;
if (isEmailValid(v)) {
const { email: _, ...rest } = prev;
return rest;
}
return prev;
});
}, []);
const updateMessage = React.useCallback((v) => {
setMessage(v);
setErrors((prev) => {
if (!prev.message) return prev;
if (isMessageValid(v)) {
const { message: _, ...rest } = prev;
return rest;
}
return prev;
});
}, []);
// When all errors are cleared via live editing, clear the global error
// status banner too so the page no longer announces "X Felder müssen korrigiert werden".
React.useEffect(() => {
if (status === "error" && Object.keys(errors).length === 0) {
setStatus("idle");
setStatusMessage("");
}
}, [status, errors]);
const nameRef = React.useRef(null);
const emailRef = React.useRef(null);
const messageRef = React.useRef(null);
const statusRef = React.useRef(null);
const submitRef = React.useRef(null);
const formWrapRef = React.useRef(null);
// === Black-Hole Particle Guide State ===
const [particlesActive, setParticlesActive] = React.useState(false);
const [particleTarget, setParticleTarget] = React.useState(null);
const [particleMode, setParticleMode] = React.useState("attract"); // attract | repel | suck
const [particleTone, setParticleTone] = React.useState("default"); // default | error | success
// === Hyperspace Jump State ===
// Phases: idle | charge (0.4s) | jump (0.6s) | tunnel (0.8s) | snap (0.3s) | confirm (0.5s+)
const [jumpPhase, setJumpPhase] = React.useState("idle");
const [jumpCenter, setJumpCenter] = React.useState(null);
const [showConfirmation, setShowConfirmation] = React.useState(false);
const audioCtxRef = React.useRef(null);
// Compute jump center (button center within canvas-local coords).
// Canvas is inset by `-60px -80px` from the form wrapper, so we add the
// same offset used by updateTarget to keep the explosion centered on the button.
const computeJumpCenter = React.useCallback(() => {
const wrap = formWrapRef.current;
const btn = submitRef.current;
if (!wrap || !btn) return null;
const wr = wrap.getBoundingClientRect();
const br = btn.getBoundingClientRect();
return {
x: br.left + br.width / 2 - wr.left + 80,
y: br.top + br.height / 2 - wr.top + 60,
};
}, []);
// Web Audio: charge hum + whoosh sweep (best-effort, silent if blocked)
const playHyperspaceSound = React.useCallback(() => {
try {
if (!audioCtxRef.current) {
const Ctx = window.AudioContext || window.webkitAudioContext;
if (!Ctx) return;
audioCtxRef.current = new Ctx();
}
const ac = audioCtxRef.current;
if (ac.state === "suspended") ac.resume();
const now = ac.currentTime;
// Charge hum (low oscillator rising)
const o1 = ac.createOscillator();
const g1 = ac.createGain();
o1.type = "sawtooth";
o1.frequency.setValueAtTime(60, now);
o1.frequency.exponentialRampToValueAtTime(220, now + 0.4);
g1.gain.setValueAtTime(0.0001, now);
g1.gain.exponentialRampToValueAtTime(0.08, now + 0.3);
g1.gain.exponentialRampToValueAtTime(0.0001, now + 0.5);
o1.connect(g1).connect(ac.destination);
o1.start(now); o1.stop(now + 0.55);
// Whoosh: noise burst + downward sweep
const bufLen = Math.floor(ac.sampleRate * 1.4);
const buf = ac.createBuffer(1, bufLen, ac.sampleRate);
const data = buf.getChannelData(0);
for (let i = 0; i < bufLen; i++) data[i] = (Math.random() * 2 - 1) * (1 - i / bufLen);
const noise = ac.createBufferSource();
noise.buffer = buf;
const bp = ac.createBiquadFilter();
bp.type = "bandpass";
bp.frequency.setValueAtTime(2000, now + 0.4);
bp.frequency.exponentialRampToValueAtTime(200, now + 1.6);
bp.Q.value = 8;
const g2 = ac.createGain();
g2.gain.setValueAtTime(0.0001, now + 0.4);
g2.gain.exponentialRampToValueAtTime(0.18, now + 0.7);
g2.gain.exponentialRampToValueAtTime(0.0001, now + 1.6);
noise.connect(bp).connect(g2).connect(ac.destination);
noise.start(now + 0.4); noise.stop(now + 1.7);
} catch (e) { /* swallow — sound is decorative */ }
}, []);
// Determine which step we're on based on validity
const currentStep = React.useMemo(() => {
if (name.trim().length < 2) return "name";
if (!EMAIL_RE.test(email.trim())) return "email";
if (!message.trim()) return "message";
return "submit";
}, [name, email, message]);
// Recompute target rect (in canvas-local coords) on resize/scroll/step.
// The canvas is inset by -80px (left) / -60px (top) from the form wrapper
// to allow a soft edge fade, so we must shift target coords by that
// offset — otherwise the swirl sits to the upper-left of the actual field.
const CANVAS_OFFSET_X = 80; // matches `inset: -60px -80px` on the canvas
const CANVAS_OFFSET_Y = 60;
const updateTarget = React.useCallback(() => {
const wrap = formWrapRef.current;
if (!wrap) return;
const wrapRect = wrap.getBoundingClientRect();
let el = null;
if (currentStep === "name") el = nameRef.current;
else if (currentStep === "email") el = emailRef.current;
else if (currentStep === "message") el = messageRef.current;
else if (currentStep === "submit") el = submitRef.current;
if (!el) return;
const r = el.getBoundingClientRect();
setParticleTarget({
x: r.left - wrapRect.left + CANVAS_OFFSET_X,
y: r.top - wrapRect.top + CANVAS_OFFSET_Y,
w: r.width,
h: r.height,
});
}, [currentStep]);
React.useEffect(() => {
updateTarget();
const onResize = () => updateTarget();
window.addEventListener("resize", onResize);
window.addEventListener("scroll", onResize, { passive: true });
return () => {
window.removeEventListener("resize", onResize);
window.removeEventListener("scroll", onResize);
};
}, [updateTarget]);
// Sync mode/tone with form state
React.useEffect(() => {
if (status === "loading") {
setParticleMode("suck");
setParticleTone("default");
} else if (status === "success") {
setParticleMode("attract");
setParticleTone("success");
} else if (errors.email) {
setParticleMode("repel");
setParticleTone("error");
const t = setTimeout(() => {
setParticleMode("attract");
setParticleTone("default");
}, 900);
return () => clearTimeout(t);
} else {
setParticleMode("attract");
setParticleTone("default");
}
}, [status, errors.email]);
const triggerHyperspace = React.useCallback(() => {
const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const center = computeJumpCenter();
setJumpCenter(center);
if (reduce) {
// Reduced motion: skip the spectacle — direct confirmation
setShowConfirmation(true);
return Promise.resolve();
}
playHyperspaceSound();
return new Promise((resolve) => {
setJumpPhase("charge");
setTimeout(() => setJumpPhase("jump"), 400);
setTimeout(() => setJumpPhase("tunnel"), 1000);
setTimeout(() => setJumpPhase("snap"), 1800);
setTimeout(() => {
setJumpPhase("confirm");
setShowConfirmation(true);
resolve();
}, 2100);
// Confirmation phase fades out after 1.4s of ambient afterglow
setTimeout(() => setJumpPhase("idle"), 3500);
});
}, [computeJumpCenter, playHyperspaceSound]);
const resetIfDone = React.useCallback(() => {
if (status === "success" || status === "error") {
setStatus("idle");
setStatusMessage("");
}
}, [status]);
const onSubmit = async (e) => {
e.preventDefault();
if (status === "loading") return;
const honeypot = e.target.elements.botcheck && e.target.elements.botcheck.value;
const validationErrors = validateContact(name, email, message);
if (Object.keys(validationErrors).length > 0) {
setErrors(validationErrors);
const count = Object.keys(validationErrors).length;
setStatus("error");
setStatusMessage(count === 1 ? "1 Feld muss korrigiert werden." : `${count} Felder müssen korrigiert werden.`);
// Focus first invalid field
if (validationErrors.name) nameRef.current && nameRef.current.focus();else
if (validationErrors.email) emailRef.current && emailRef.current.focus();else
if (validationErrors.message) messageRef.current && messageRef.current.focus();
return;
}
setErrors({});
setStatus("loading");
setStatusMessage("Nachricht wird gesendet …");
try {
const res = await fetch("https://api.web3forms.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({
access_key: WEB3FORMS_KEY,
name: name.trim(),
email: email.trim(),
message: message.trim(),
botcheck: honeypot || "",
subject: `Neue Anfrage über omniacore.net — von ${name.trim()}`,
from_name: "Omnia Core Website"
})
});
const data = await res.json();
if (data.success) {
setStatus("success");
setStatusMessage("Nachricht raus — ich melde mich zeitnah bei dir.");
// Trigger the hyperspace jump animation (or instant confirm if reduced motion)
triggerHyperspace();
// Clear fields after the jump finishes (cleared mid-tunnel so they reset
// before the confirmation appears)
setTimeout(() => {
setName(""); setEmail(""); setMessage("");
}, 1800);
// Move focus to status region for AT users
setTimeout(() => {
if (!statusRef.current) return;
statusRef.current.focus();
const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
statusRef.current.scrollIntoView({ block: "center", behavior: reduce ? "auto" : "smooth" });
}, 150);
} else {
throw new Error(data.message || "Web3Forms hat die Nachricht abgelehnt.");
}
} catch (err) {
setStatus("error");
setStatusMessage(
<>Senden fehlgeschlagen. Bitte versuche es erneut oder schreib direkt an info@omniacore.net.
);
setTimeout(() => statusRef.current && statusRef.current.focus(), 50);
}
};
const buttonLabel =
status === "loading" ? "Wird gesendet …" :
status === "success" ? <>✓ Nachricht raus — wir sprechen uns :
status === "error" ? <>Erneut senden → :
<>Nachricht senden →;
const isError = status === "error";
const isSuccess = status === "success";
const isLoading = status === "loading";
return (
(03) — KONTAKT
Womit ich dir helfen kann
SaaS-Produkte, Webseiten (gerne auch im Immobilienbereich)
und IT-Dienstleistungen rund um Netzwerk und Systemintegration.
Am liebsten mit Teams, die smarter arbeiten wollen — und Lust
auf saubere Lösungen haben.
