wow

src/components/About.astro

@@ -2,11 +2,14 @@
 import AboutRow from "@/components/AboutRow.astro";
 
 const cards = [
-    { src: "/about/cards/0.avif", alt: "활동 사진 카드" },
+	{
-    { src: "/about/cards/1.avif", alt: "활동 사진 카드" },
+		src: "/about/cards/0.avif",
-    { src: "/about/cards/2.avif", alt: "활동 일러스트 카드" },
+		alt: "2026 사이버 가디언즈 CMX 대회 활동 사진",
-    { src: "/about/cards/3.avif", alt: "활동 일러스트 카드" },
+	},
-    { src: "/about/cards/4.avif", alt: "활동 사진 카드" },
+    { src: "/about/cards/1.avif", alt: "화이트햇스쿨 활동 사진" },
+    { src: "/about/cards/2.avif", alt: "글로벌 스타트업 부트캠프 명찰 사진" },
+    { src: "/about/cards/3.avif", alt: "글로벌 스타트업 부트캠프 활동 사진" },
+    { src: "/about/cards/4.avif", alt: "손그림 일러스트" },
 ];
 ---
 
@@ -24,7 +27,7 @@ const cards = [
                 About<span class="text-foreground/35" aria-hidden="true">.</span>
             </h2>
             <p class="mt-6 max-w-lg text-base leading-8 text-foreground">
-                안녕하세요. 정보보안과 소프트웨어 엔지니어링을 공부하는 암냥입니다.<br/>
+                안녕하세요. 정보보안과 소프트웨어 엔지니어링을 공부하는 남현석입니다.<br/>
                 새로운 기술을 배우고, 머릿속의 아이디어를 실제로 작동하는 것으로<br/>
                 만드는 일을 좋아해요.
             </p>
@@ -104,11 +107,15 @@ const cards = [
         <div class="about-card-panel order-last min-h-[min(100vw,540px)] overflow-hidden bg-muted lg:sticky lg:top-0 lg:order-none lg:h-[calc(100svh-64px)] lg:min-h-0" aria-label="활동 사진 선택">
             <div class="about-card-stage" data-card-stage>
                 <canvas class="about-card-canvas" data-card-canvas aria-hidden="true"></canvas>
+                <div class="about-card-meta" aria-hidden="true">
+                    <span>MOMENTS / 05</span>
+                    <span>click to reveal</span>
+                </div>
                 <div class="about-card-access" role="group" aria-label="활동 카드 선택">
                     {cards.map((card, index) => (
                         <button
                             type="button"
-                            aria-label={`활동 카드 ${index + 1} 선택`}
+                            aria-label={`${card.alt} 선택`}
                             aria-pressed="false"
                             data-card-control={index}
                             data-card-src={card.src}
@@ -428,6 +435,17 @@ const cards = [
         transform: translateX(-50%);
     }
 
+    .about-card-stage::after {
+        position: absolute;
+        inset: 0;
+        background:
+            linear-gradient(120deg, transparent 30%, rgb(255 255 255 / 4%) 50%, transparent 70%),
+            repeating-linear-gradient(90deg, transparent 0 88px, rgb(255 255 255 / 2%) 89px, transparent 90px);
+        content: "";
+        opacity: .45;
+        pointer-events: none;
+    }
+
     .about-card-canvas {
         display: block;
         width: 100%;
@@ -438,6 +456,30 @@ const cards = [
         z-index: 1;
     }
 
+    .about-card-meta {
+        position: absolute;
+        inset: 28px 30px auto;
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: color-mix(in srgb, var(--foreground) 52%, transparent);
+        font-size: 10px;
+        font-weight: 700;
+        letter-spacing: .16em;
+        pointer-events: none;
+        text-transform: uppercase;
+    }
+
+    .about-card-meta span:last-child {
+        padding: 8px 12px;
+        border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
+        border-radius: 999px;
+        background: color-mix(in srgb, var(--background) 42%, transparent);
+        backdrop-filter: blur(10px);
+        letter-spacing: .1em;
+    }
+
     .about-card-access {
         position: absolute;
         width: 1px;