feat: harden portfolio and add SEO foundations

app/components/animations/TextDiffuseReveal.tsx

@@ -36,7 +36,17 @@ export function TextDiffuseReveal({
     return () => media.removeEventListener("change", updateStagger);
   }, []);
 
-  const tokens = useMemo(() => text.split(/(\n|\s+)/), [text]);
+  const tokens = useMemo(() => {
+    let offset = 0;
+    return text
+      .split(/(\n|\s+)/)
+      .filter(Boolean)
+      .map((value) => {
+        const key = `${offset}:${value}`;
+        offset += value.length;
+        return { key, value };
+      });
+  }, [text]);
   const animatedChars = useMemo(
     () =>
       Array.from(text).filter((char) => char !== "\n" && char !== " ").length,
@@ -58,75 +68,66 @@ export function TextDiffuseReveal({
     <span
       ref={ref}
       className={className}
-      aria-label={text}
       style={{
         willChange: hasActiveWillChange
           ? "filter, opacity, transform"
           : undefined,
       }}
     >
-      {tokens.map((token, tokenIndex) => {
-        if (!token) {
-          return null;
-        }
+      <span className="sr-only">{text}</span>
+      <span aria-hidden="true">
+        {tokens.map(({ key, value: token }) => {
+          if (token === "\n") {
+            return <br key={key} />;
+          }
 
-        if (token === "\n") {
-          return <br key={`line-${tokenIndex}`} />;
-        }
+          if (/^\s+$/.test(token)) {
+            return <span key={key}>{token.replace(/ /g, "\u00A0")}</span>;
+          }
 
-        if (/^\s+$/.test(token)) {
           return (
-            <span key={`space-${tokenIndex}`} aria-hidden="true">
-              {token.replace(/ /g, "\u00A0")}
+            <span key={key} className="inline-block whitespace-nowrap">
+              {Array.from(token).map((char) => {
+                const currentIndex = animatedIndex;
+                animatedIndex += 1;
+
+                return (
+                  <motion.span
+                    key={`${key}-${currentIndex}-${char}`}
+                    className="inline-block"
+                    initial={
+                      shouldReduceMotion
+                        ? { opacity: 0 }
+                        : { filter: "blur(12px)", opacity: 0, scale: 0.9 }
+                    }
+                    animate={
+                      isInView
+                        ? { filter: "blur(0px)", opacity: 1, scale: 1 }
+                        : shouldReduceMotion
+                          ? { filter: "blur(0px)", opacity: 0, scale: 1 }
+                          : { filter: "blur(12px)", opacity: 0, scale: 0.9 }
+                    }
+                    transition={{
+                      duration: shouldReduceMotion ? 0.3 : 0.6,
+                      ease: EXPO_OUT,
+                      delay: startDelay + currentIndex * staggerDelay,
+                    }}
+                    onAnimationComplete={() => {
+                      if (!shouldReduceMotion) {
+                        setCompletedChars((count) =>
+                          count < animatedChars ? count + 1 : count,
+                        );
+                      }
+                    }}
+                  >
+                    {char}
+                  </motion.span>
+                );
+              })}
             </span>
           );
-        }
-
-        return (
-          <span
-            key={`word-${tokenIndex}`}
-            className="inline-block whitespace-nowrap"
-          >
-            {Array.from(token).map((char, charIndex) => {
-              const currentIndex = animatedIndex;
-              animatedIndex += 1;
-
-              return (
-                <motion.span
-                  key={`char-${tokenIndex}-${charIndex}-${char}`}
-                  className="inline-block"
-                  initial={
-                    shouldReduceMotion
-                      ? { opacity: 0 }
-                      : { filter: "blur(12px)", opacity: 0, scale: 0.9 }
-                  }
-                  animate={
-                    isInView
-                      ? { filter: "blur(0px)", opacity: 1, scale: 1 }
-                      : shouldReduceMotion
-                        ? { filter: "blur(0px)", opacity: 0, scale: 1 }
-                        : { filter: "blur(12px)", opacity: 0, scale: 0.9 }
-                  }
-                  transition={{
-                    duration: shouldReduceMotion ? 0.3 : 0.6,
-                    ease: EXPO_OUT,
-                    delay: startDelay + currentIndex * staggerDelay,
-                  }}
-                  onAnimationComplete={() => {
-                    if (!shouldReduceMotion) {
-                      setCompletedChars((count) =>
-                        count < animatedChars ? count + 1 : count,
-                      );
-                    }
-                  }}
-                >
-                  {char}
-                </motion.span>
-              );
-            })}
-          </span>
-        );
-      })}
+        })}
+      </span>
     </span>
   );
 }