feat: harden portfolio and add SEO foundations

app/components/SectionLoading.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useId } from "react";
 import { TopProgressBar } from "./animations/TopProgressBar";
 
 interface SectionLoadingProps {
@@ -14,6 +15,11 @@ export function SectionLoading({
   skeletons = 2,
 }: Readonly<SectionLoadingProps>) {
   const sectionClass = dark ? "ds-section ds-section-dark" : "ds-section";
+  const skeletonId = useId();
+  const skeletonKeys = Array.from(
+    { length: skeletons },
+    (_, index) => `${skeletonId}-${index}`,
+  );
 
   return (
     <section className={sectionClass}>
@@ -21,8 +27,8 @@ export function SectionLoading({
       <div className="ds-section-shell">
         <div className="ds-loading">{message}</div>
         <div className="ds-grid-2 mt-sp-6" aria-hidden="true">
-          {Array.from({ length: skeletons }).map((_, index) => (
-            <div key={`skeleton-${index}`} className="ds-card ds-skeleton-card">
+          {skeletonKeys.map((skeletonKey) => (
+            <div key={skeletonKey} className="ds-card ds-skeleton-card">
               <div className="ds-skeleton ds-skeleton-kicker" />
               <div className="ds-skeleton ds-skeleton-title" />
               <div className="ds-skeleton ds-skeleton-line" />