wow

src/components/About.astro

@@ -1,12 +1,11 @@
 ---
 import AboutRow from "@/components/AboutRow.astro";
-import DDay from "./DDay.astro";
 ---
 
 <section
     id="about"
     data-node-id="4:104"
-    class="min-h-full snap-start snap-always bg-background text-foreground"
+    class="min-h-[calc(100svh-64px)] snap-start bg-background text-foreground"
     aria-labelledby="about-title"
 >
     <div class="grid min-h-full grid-cols-1 lg:grid-cols-2">
@@ -14,10 +13,12 @@ import DDay from "./DDay.astro";
             class="relative z-10 flex flex-col justify-center px-6 py-16 sm:px-10 lg:px-[clamp(52px,5.208vw,100px)] lg:py-[clamp(58px,9.26vh,100px)]"
         >
             <h2 id="about-title" class="max-w-xl text-3xl font-semibold tracking-tight sm:text-4xl">
-                👋
+                About<span class="text-foreground/35" aria-hidden="true">.</span>
             </h2>
             <p class="mt-6 max-w-lg text-base leading-8 text-foreground">
                 안녕하세요. 정보보안과 소프트웨어 엔지니어링을 공부하는 암냥입니다.
+                새로운 기술을 배우고, 머릿속의 아이디어를 실제로 작동하는 것으로
+                만드는 일을 좋아해요.
             </p>
             <section class="mt-16" aria-labelledby="experience-title">
                 <div class="mb-5 flex items-baseline justify-between gap-4">
@@ -70,11 +71,11 @@ import DDay from "./DDay.astro";
                     </AboutRow>
                 </div>
             </section>
-            <div class="mt-6 flex flex-row items-center text-sm text-foreground/60">
+            <div class="mt-8 flex flex-row items-center text-sm text-foreground/60">
                 <a
                     href="#experience"
-                    class="flex flex-row items-center underline underline-offset-4"
-                    ><span>등등...</span>
+                    class="flex flex-row items-center underline underline-offset-4 hover:text-foreground"
+                    ><span>전체 타임라인 보기</span>
                     <svg
                         aria-hidden="true"
                         class="h-4 text-foreground/40"
@@ -89,21 +90,26 @@ import DDay from "./DDay.astro";
                         <path d="M7 7h10v10"></path>
                     </svg></a
                 >
-                <p class="ml-1"> 많은 여러가지의 활동을 해왔어요.</p>
             </div>
         </div>
 
         <div
-            class="relative order-first h-[min(150vw,720px)] min-h-[600px] overflow-hidden lg:sticky lg:top-0 lg:order-none lg:h-[calc(100svh-64px)] lg:min-h-0 lg:self-start"
+            class="relative order-last h-[min(100vw,480px)] min-h-0 overflow-hidden bg-muted lg:sticky lg:top-0 lg:order-none lg:h-[calc(100svh-64px)] lg:min-h-0 lg:self-start"
             aria-label="활동 사진"
         >
-            <!-- <img
-                class="absolute inset-0 h-full w-full select-none pointer-events-none object-contain"
-                src="/side.avif"
-                alt="활동 사진 콜라주"
-                width="3840"
-                height="4320"
-            /> -->
+            <img
+                class="absolute inset-0 h-full w-full select-none object-cover object-center"
+                src="/about/vrchat.webp"
+                alt="VRChat에서 촬영한 캐릭터 스크린샷"
+                width="1920"
+                height="1080"
+                loading="lazy"
+                decoding="async"
+            />
+            <div
+                class="pointer-events-none absolute inset-0 bg-gradient-to-t from-background/35 via-transparent to-black/5"
+                aria-hidden="true"
+            ></div>
         </div>
     </div>
 </section>