copilot. Split into components

2026-03-12 23:08:38 +01:00
parent f8c6bacf61
commit 855cb4affd
14 changed files with 897 additions and 827 deletions
--- a/src/sections/Hero.tsx
+++ b/src/sections/Hero.tsx
@@ -0,0 +1,112 @@
+export function Hero({
+  glowColor,
+  borderStatus,
+  displayMessage,
+  rotatingMessages,
+  statusMessage,
+  showOldNames,
+  setShowOldNames,
+  oldUsernames,
+}: {
+  glowColor: string;
+  borderStatus: string;
+  displayMessage: string;
+  rotatingMessages: string[];
+  statusMessage: string;
+  showOldNames: boolean;
+  setShowOldNames: (show: boolean) => void;
+  oldUsernames: string[];
+}) {
+  return (
+    <section className="flex flex-col items-center text-center space-y-8 animate-fade-in">
+      <div className="relative group">
+        <div
+          className={`absolute -inset-1 rounded-full blur opacity-75 transition duration-500`}
+          style={{ backgroundColor: glowColor }}
+        ></div>
+        <div
+          className={`relative w-48 h-48 rounded-full border-4 transition-colors duration-500 overflow-hidden ${borderStatus} bg-black`}
+        >
+          <img
+            src="https://cdn.reversed.dev/pictures/20250405_120402.png"
+            alt="Space"
+            className="w-full h-full object-cover scale-110 transition-transform duration-700 group-hover:scale-125"
+          />
+        </div>
+
+        {/* Rotating Message Bubble (Left Side) */}
+        <div className="absolute -left-4 top-4 -translate-x-full">
+          <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>
+          </div>
+        </div>
+
+        {/* Status Bubble (Right Side) */}
+        <div className="absolute -right-4 top-8 translate-x-full">
+          <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>
+        </div>
+      </div>
+
+      {/* Name & Description */}
+      <div className="space-y-4 max-w-2xl">
+        <h1 className="text-6xl md:text-7xl font-extrabold">
+          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 cursor-help px-2"
+            style={{ marginLeft: "0.15em", marginRight: "0.15em" }}
+            onMouseEnter={() => setShowOldNames(true)}
+            onMouseLeave={() => setShowOldNames(false)}
+          >
+            Space²
+            {showOldNames && (
+              <div className="absolute left-1/2 -translate-x-1/2 top-full mt-4 z-50 animate-fade-in flex justify-center w-full">
+                <div className="relative bg-gradient-to-br from-purple-500/20 to-pink-500/10 backdrop-blur-md border border-purple-500/30 rounded-xl px-6 py-4 shadow-2xl min-w-[220px] max-w-xs">
+                  <div className="absolute left-1/2 -translate-x-1/2 -top-2 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-purple-500/30"></div>
+                  <p className="text-xs text-gray-400 mb-2 font-medium whitespace-nowrap text-center">
+                    Also known as:
+                  </p>
+                  <ul className="flex flex-col items-center gap-1.5">
+                    {oldUsernames.map((name, index) => (
+                      <li
+                        key={index}
+                        className="text-sm text-gray-200 font-mono hover:text-purple-400 transition-colors whitespace-nowrap text-center"
+                      >
+                        {name}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            )}
+          </span>
+        </h1>
+        <p className="text-2xl text-gray-400 font-light">
+          A{" "}
+          <span className="line-through decoration-purple-500/50 decoration-2">
+            Self-proclaimed
+          </span>{" "}
+          Developer breaking things to see how they&nbsp;work.
+        </p>
+      </div>
+    </section>
+  );
+}