Little rework

src/sections/Hero.tsx

@@ -1,32 +1,62 @@
-import { useState, useRef } from "react";
-import { useRouter } from "next/navigation";
-import { TimezoneClockBlock } from "../components/TimezoneClockBlock";
+"use client";
 
-export function Hero({
-  glowColor,
-  borderStatus,
-  displayMessage,
-  rotatingMessages,
-  statusMessage,
-  oldUsernames,
-  timeGapWarningThreshold = 5,
-}: {
-  glowColor: string;
-  borderStatus: string;
-  displayMessage: string;
-  rotatingMessages: string[];
-  statusMessage: string;
-  oldUsernames: string[];
-  timeGapWarningThreshold?: number;
-}) {
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Mail } from "lucide-react";
+import { CONTACT_EMAIL } from "../types";
+
+const HANDLE = "getspaced";
+
+// Discord presence via SHSF (drives the avatar ring + name dot colour).
+const STATUS_URL =
+  "https://shsf.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6";
+
+type Presence = "online" | "idle" | "dnd" | "offline";
+
+const PRESENCE: Record<Presence, { ring: string; glow: string; dot: string; label: string }> = {
+  online: {
+    ring: "border-emerald-400/70",
+    glow: "bg-emerald-500/30",
+    dot: "bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.8)]",
+    label: "Online",
+  },
+  idle: {
+    ring: "border-amber-400/70",
+    glow: "bg-amber-500/30",
+    dot: "bg-amber-400 shadow-[0_0_12px_rgba(251,191,36,0.8)]",
+    label: "Idle",
+  },
+  dnd: {
+    ring: "border-red-500/70",
+    glow: "bg-red-500/30",
+    dot: "bg-red-500 shadow-[0_0_12px_rgba(239,68,68,0.8)]",
+    label: "Do Not Disturb",
+  },
+  offline: {
+    ring: "border-gray-500/60",
+    glow: "bg-gray-500/20",
+    dot: "bg-gray-500",
+    label: "Offline",
+  },
+};
+
+function isPresence(value: unknown): value is Presence {
+  return value === "online" || value === "idle" || value === "dnd" || value === "offline";
+}
+
+export function Hero() {
   const router = useRouter();
-  const [movementCount, setMovementCount] = useState(0);
+  const [presence, setPresence] = useState<Presence>("offline");
+
+  // Hidden easter egg: rapidly shake the mouse back and forth over the avatar
+  // (10 quick direction changes) to jump to the admin panel.
   const lastX = useRef<number | null>(null);
   const lastDir = useRef<"left" | "right" | null>(null);
   const lastTime = useRef<number>(0);
-  const resetTimeout = useRef<NodeJS.Timeout | null>(null);
+  const shakeCount = useRef<number>(0);
+  const resetTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const handleMouseMove = (e: React.MouseEvent) => {
+  const handleAvatarMouseMove = (e: React.MouseEvent) => {
     const currentX = e.clientX;
     const currentTime = Date.now();
 
@@ -35,22 +65,19 @@ export function Hero({
       const velocity = Math.abs(deltaX) / (currentTime - lastTime.current || 1);
       const direction = deltaX > 0 ? "right" : "left";
 
-      // Thresholds: velocity > 2 (approx 2px/ms) and changed direction
       if (velocity > 2 && direction !== lastDir.current) {
-        setMovementCount((prev) => {
-          const newCount = prev + 1;
-          if (newCount >= 10) {
-            // Trigger navigation outside of the state update to avoid React warning
-            setTimeout(() => router.push("/admin"), 0);
-            return 0;
-          }
-          return newCount;
-        });
+        shakeCount.current += 1;
         lastDir.current = direction;
 
-        // Reset if no movement for a while
+        if (shakeCount.current >= 10) {
+          shakeCount.current = 0;
+          setTimeout(() => router.push("/admin"), 0);
+        }
+
         if (resetTimeout.current) clearTimeout(resetTimeout.current);
-        resetTimeout.current = setTimeout(() => setMovementCount(0), 1000);
+        resetTimeout.current = setTimeout(() => {
+          shakeCount.current = 0;
+        }, 1000);
       }
     }
 
@@ -58,141 +85,101 @@ export function Hero({
     lastTime.current = currentTime;
   };
 
+  useEffect(() => {
+    let cancelled = false;
+    fetch(STATUS_URL)
+      .then((r) => r.json())
+      .then((d) => {
+        if (!cancelled && isPresence(d?.status)) setPresence(d.status);
+      })
+      .catch(() => {
+        /* keep offline on failure */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const style = PRESENCE[presence];
+
   return (
-    <section
-      className="mt-16 flex flex-col items-center text-center space-y-6 px-4 sm:mt-20 sm:space-y-8 animate-fade-in"
-      data-old-usernames={oldUsernames.join(",")}
-    >
-      <div className="relative group" onMouseMove={handleMouseMove}>
-        <div
-          className={`absolute -inset-1 rounded-full blur opacity-75 transition duration-500`}
-          style={{ backgroundColor: glowColor }}
-        ></div>
-        <div
-          className={`relative h-32 w-32 overflow-hidden rounded-full border-4 bg-black transition-colors duration-500 sm:h-48 sm:w-48 ${borderStatus}`}
-        >
-          <img
-            src="https://cdn.reversed.dev/pictures/20250405_120402.png"
-            alt="Space"
-            className="h-full w-full scale-110 object-cover transition-transform duration-700 group-hover:scale-125"
-          />
-        </div>
-
-        {/* Rotating Message Bubble (Left Side) */}
-        <div className="absolute -left-4 top-4 hidden -translate-x-full md:block">
-          <div className="relative bg-gradient-to-br from-purple-500/20 to-pink-500/10 backdrop-blur-sm border border-purple-500/30 rounded-2xl px-4 py-3 shadow-lg">
-            {/* Arrow pointing to profile */}
-            <div className="absolute right-0 top-1/2 translate-x-2 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-l-8 border-l-purple-500/30"></div>
-            <div className="absolute right-0 top-1/2 translate-x-1.5 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-l-8 border-l-purple-500/20"></div>
-
-            <p className="text-sm text-gray-200 whitespace-nowrap font-medium font-mono">
-              {displayMessage || rotatingMessages[0]}
-            </p>
+    <section className="mx-auto w-full max-w-5xl px-4">
+      <div className="flex flex-col-reverse items-center gap-8 sm:flex-row sm:items-start sm:justify-between sm:gap-10">
+        {/* Left: identity */}
+        <div className="flex-1 space-y-5 text-center sm:text-left">
+          <div className="space-y-2">
+            <h1 className="flex items-center justify-center gap-3 text-4xl font-extrabold text-white sm:justify-start sm:text-5xl">
+              Paul&nbsp;W.
+              <span
+                className={`inline-block h-3 w-3 rounded-full transition-colors duration-500 ${style.dot}`}
+                title={style.label}
+                aria-label={style.label}
+              />
+            </h1>
+            <p className="font-mono text-sm text-gray-500">{HANDLE}</p>
           </div>
-        </div>
 
-        {/* Status Bubble (Right Side) */}
-        <div className="absolute -right-4 top-8 hidden translate-x-full md:block">
-          <div className="relative bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/20 rounded-2xl px-4 py-3 shadow-lg">
-            {/* Arrow pointing to profile */}
-            <div className="absolute left-0 top-1/2 -translate-x-2 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white/20"></div>
-            <div className="absolute left-0 top-1/2 -translate-x-1.5 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white/10"></div>
-
-            <p className="text-sm text-gray-300 whitespace-nowrap">
-              Currently{" "}
-              <span className="text-white font-semibold">
-                {statusMessage}
-              </span>
-              <br />
-              on Discord
-            </p>
-          </div>
-          <p className="text-xs text-gray-400/70 mt-1">
-            Data from <a href="https://github.com/Space-Banane/shsf-discord-status" className="text-blue-400 hover:underline">Discord</a> (cached & delayed)
+          <p className="mx-auto max-w-xl text-base leading-relaxed text-gray-400 sm:mx-0 sm:text-lg">
+            Full-stack developer &amp; open-source author. Building server
+            infrastructure, developer tools, and web applications.
           </p>
-        </div>
-      </div>
 
-      {/* Mobile: Discord status + message (hidden on md+ where bubbles appear) */}
-      <div className="flex flex-col items-center gap-2 md:hidden w-full max-w-sm">
-        {(displayMessage || rotatingMessages[0]) && (
-          <div className="w-full bg-gradient-to-br from-purple-500/20 to-pink-500/10 backdrop-blur-sm border border-purple-500/30 rounded-2xl px-4 py-2.5 text-sm text-gray-200 font-mono text-center">
-            {displayMessage || rotatingMessages[0]}
-          </div>
-        )}
-        {statusMessage && (
-          <div className="flex items-center gap-2 rounded-2xl border border-white/15 bg-white/5 px-4 py-2.5 text-sm backdrop-blur-sm">
-            <span className="h-2 w-2 shrink-0 rounded-full bg-green-400" />
-            <span className="text-gray-300">Currently</span>
-            <span className="font-semibold text-white">{statusMessage}</span>
-            <span className="text-gray-400">on Discord</span>
-          </div>
-        )}
-      </div>
-
-      {/* Name & Description */}
-      <div className="space-y-4 max-w-2xl">
-        <h1 className="text-4xl font-extrabold leading-tight sm:text-5xl md:text-7xl">
-          Hey, I'm{" "}
-          <span
-            className="relative inline-block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 px-2"
-            style={{ marginLeft: "0.15em", marginRight: "0.15em" }}
-          >
-            Space²
-          </span>
-        </h1>
-        <p className="text-base font-light text-gray-400 sm:text-xl md:text-2xl">
-          A{" "}
-          <span className="line-through decoration-purple-500/50 decoration-2">
-            Self-proclaimed
-          </span>{" "}
-          Developer breaking things to see how they&nbsp;work.
-        </p>
-
-        {/* Luna AI Profile Link */}
-        <div className="pt-4 flex justify-center">
-          <div className="flex flex-wrap items-center justify-center gap-3">
+          <div className="flex flex-wrap items-center justify-center gap-3 sm:justify-start">
             <a
-              href="https://luna.spaceistyping.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group relative flex w-full items-center justify-center gap-3 rounded-full border border-white/10 bg-white/5 px-5 py-2.5 text-center shadow-lg transition-all duration-300 hover:border-purple-500/50 hover:bg-white/10 hover:shadow-purple-500/10 sm:w-auto"
+              href={`mailto:${CONTACT_EMAIL}`}
+              className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-5 py-2.5 text-sm font-medium text-gray-200 transition-all duration-300 hover:border-white/25 hover:bg-white/10"
             >
-              <div className="w-3 h-3 rounded-full bg-purple-500" />
-              <span className="text-sm font-medium text-gray-300 group-hover:text-white transition-colors">
-                <span className="text-purple-400 font-semibold">Luna</span>
-              </span>
+              <Mail className="h-4 w-4" />
+              Contact
             </a>
 
             <a
               href="https://github.com/Space-Banane"
               target="_blank"
               rel="noopener noreferrer"
-              className="group relative flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 shadow-sm transition-all duration-300 hover:border-gray-400 hover:bg-white/10"
+              className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2.5 text-sm font-medium text-gray-200 transition-all duration-300 hover:border-gray-400 hover:bg-white/10"
               aria-label="GitHub"
             >
-              <svg className="w-6 h-6 text-gray-300 group-hover:text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+              <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                 <path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.49.5.09.68-.22.68-.48 0-.24-.01-.87-.01-1.71-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.89 1.52 2.34 1.08 2.91.83.09-.65.35-1.08.64-1.33-2.22-.25-4.56-1.11-4.56-4.95 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02A9.56 9.56 0 0112 6.8c.85.004 1.71.115 2.51.338 1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.10 2.65.64.7 1.03 1.59 1.03 2.68 0 3.85-2.34 4.7-4.57 4.95.36.31.68.92.68 1.86 0 1.34-.01 2.42-.01 2.75 0 .26.18.58.69.48A10.01 10.01 0 0022 12c0-5.52-4.48-10-10-10z" />
               </svg>
+              GitHub
             </a>
 
             <a
               href="https://gitea.reversed.dev/space"
               target="_blank"
               rel="noopener noreferrer"
-              className="group relative flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 shadow-sm transition-all duration-300 hover:border-yellow-400 hover:bg-white/10"
+              className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2.5 text-sm font-medium text-gray-200 transition-all duration-300 hover:border-emerald-400/50 hover:bg-white/10"
               aria-label="Gitea"
             >
               <img
                 src="https://gitea.reversed.dev/assets/img/logo.svg"
-                alt="Gitea"
-                className="w-6 h-6"
+                alt=""
+                className="h-5 w-5"
               />
+              Gitea
             </a>
           </div>
+
+          <p className="text-xs uppercase tracking-[0.2em] text-gray-600">
+            <span className="text-gray-500">◷</span> Europe/Berlin
+          </p>
         </div>
 
-        <TimezoneClockBlock warningThresholdHours={timeGapWarningThreshold} />
+        {/* Right: avatar with live status ring */}
+        <div className="relative shrink-0" onMouseMove={handleAvatarMouseMove}>
+          <div className={`absolute -inset-1 rounded-full blur-md transition-colors duration-500 ${style.glow}`} />
+          <div
+            className={`relative h-32 w-32 overflow-hidden rounded-full border-4 bg-black transition-colors duration-500 sm:h-44 sm:w-44 ${style.ring}`}
+          >
+            <img
+              src="/api/profile-image"
+              alt="Paul W."
+              className="h-full w-full scale-105 object-cover"
+            />
+          </div>
+        </div>
       </div>
     </section>
   );