Small changes & adjustments

src/sections/Hero.tsx

@@ -7,8 +7,6 @@ export function Hero({
   displayMessage,
   rotatingMessages,
   statusMessage,
-  showOldNames,
-  setShowOldNames,
   oldUsernames,
 }: {
   glowColor: string;
@@ -16,8 +14,6 @@ export function Hero({
   displayMessage: string;
   rotatingMessages: string[];
   statusMessage: string;
-  showOldNames: boolean;
-  setShowOldNames: (show: boolean) => void;
   oldUsernames: string[];
 }) {
   const router = useRouter();
@@ -60,7 +56,10 @@ export function Hero({
   };
 
   return (
-    <section className="mt-20 flex flex-col items-center text-center space-y-8 animate-fade-in">
+    <section
+      className="mt-20 flex flex-col items-center text-center 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`}
@@ -113,32 +112,10 @@ export function Hero({
         <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"
+            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" }}
-            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">