wow

src/components/Hero.astro

@@ -40,15 +40,9 @@
             data-node-id="42:10"
         >
             <picture class="contents">
-                <source
-                    id="hero-theme-source"
-                    media="(prefers-color-scheme: dark)"
-                    srcset="/hero-dark.avif"
-                    type="image/png"
-                />
                 <img
                     class="block h-full w-full object-cover object-center transition-[scale,border-radius,box-shadow] duration-500 ease-[var(--ease-out-expo)] hover:z-10 hover:scale-105 hover:rounded-lg hover:shadow-[0_15px_45px_#0006] motion-reduce:transition-none"
-                    src="/hero-light.avif"
+                    src="/hero-dark.avif"
                     alt="벚꽃이 핀 수로에서 보트를 타고 있는 캐릭터"
                     width="3840"
                     height="2160"
@@ -62,31 +56,3 @@
         </div>
     </section>
 </div>
-
-<script>
-    const heroThemeSource =
-        document.querySelector<HTMLSourceElement>("#hero-theme-source");
-
-    if (heroThemeSource) {
-        const syncHeroTheme = () => {
-            const root = document.documentElement;
-
-            if (root.classList.contains("dark")) {
-                heroThemeSource.media = "all";
-                heroThemeSource.srcset = "/hero-dark.avif";
-            } else if (root.classList.contains("light")) {
-                heroThemeSource.media = "all";
-                heroThemeSource.srcset = "/hero-light.avif";
-            } else {
-                heroThemeSource.media = "(prefers-color-scheme: dark)";
-                heroThemeSource.srcset = "/hero-dark.avif";
-            }
-        };
-
-        syncHeroTheme();
-        new MutationObserver(syncHeroTheme).observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-    }
-</script>

src/pages/Carrer.astro

@@ -133,6 +133,42 @@ const portfolioDetails = [
         ],
     },
 ] as const;
+
+const programmingMaterials = [
+    { title: "(주제)작품설명서(배열을_이용한_프로젝트)(1)", file: "10104남현석 - (주제)작품설명서(배열을_이용한_프로젝트)(1).pdf" },
+    { title: "(주제)작품설명서(배열을_이용한_프로젝트)", file: "10104남현석 - (주제)작품설명서(배열을_이용한_프로젝트).pdf" },
+    { title: "(주제)탐구보고서(Duet_Debug _ Deep_Dive)", file: "10104남현석 - (주제)탐구보고서(Duet_Debug _ Deep_Dive).pdf" },
+    { title: "01_포인터", file: "10104남현석 - 01_포인터.pdf" },
+    { title: "01_프로그래밍의 개요(1)", file: "10104남현석 - 01_프로그래밍의 개요(1).pdf" },
+    { title: "01_프로그래밍의 개요", file: "10104남현석 - 01_프로그래밍의 개요.pdf" },
+    { title: "02_1_다양한 포인터 실습(기본, 배열, 함수)", file: "10104남현석 - 02_1_다양한 포인터 실습(기본, 배열, 함수).pdf" },
+    { title: "02_2_다양한 포인터 실습(문자열)", file: "10104남현석 - 02_2_다양한 포인터 실습(문자열).pdf" },
+    { title: "02_프로그래밍의 기초_자료형_표준입출력(1)", file: "10104남현석 - 02_프로그래밍의 기초_자료형_표준입출력(1).pdf" },
+    { title: "02_프로그래밍의 기초_자료형_표준입출력", file: "10104남현석 - 02_프로그래밍의 기초_자료형_표준입출력.pdf" },
+    { title: "03_구조체", file: "10104남현석 - 03_구조체.pdf" },
+    { title: "03_프로그래밍의 기초_연산자(1)", file: "10104남현석 - 03_프로그래밍의 기초_연산자(1).pdf" },
+    { title: "03_프로그래밍의 기초_연산자(2)", file: "10104남현석 - 03_프로그래밍의 기초_연산자(2).pdf" },
+    { title: "03_프로그래밍의 기초_연산자", file: "10104남현석 - 03_프로그래밍의 기초_연산자.pdf" },
+    { title: "04_구조체", file: "10104남현석 - 04_구조체.pdf" },
+    { title: "04_구조체_배열,포인터,함수,중첩구조체", file: "10104남현석 - 04_구조체_배열,포인터,함수,중첩구조체.pdf" },
+    { title: "04_프로그래밍의 기초_선택구조(1)", file: "10104남현석 - 04_프로그래밍의 기초_선택구조(1).pdf" },
+    { title: "04_프로그래밍의 기초_선택구조", file: "10104남현석 - 04_프로그래밍의 기초_선택구조.pdf" },
+    { title: "05_프로그래밍의 기초_반복구조", file: "10104남현석 - 05_프로그래밍의 기초_반복구조.pdf" },
+    { title: "06_중첩된_제어구조", file: "10104남현석 - 06_중첩된_제어구조.pdf" },
+    { title: "07_1차원배열", file: "10104남현석 - 07_1차원배열.pdf" },
+    { title: "08_함수", file: "10104남현석 - 08_함수.pdf" },
+    { title: "15_재귀함수_라이브러리함수", file: "10104남현석 - 15_재귀함수_라이브러리함수.pdf" },
+    { title: "18_재귀호출_보충_문제지", file: "10104남현석 - 18_재귀호출_보충_문제지.pdf" },
+    { title: "나의 프로젝트와 한권의 책", file: "10104남현석 - 나의 프로젝트와 한권의 책.pdf" },
+    { title: "배열을_이용한_프로젝트_개발노트(1)", file: "10104남현석 - 배열을_이용한_프로젝트_개발노트(1).pdf" },
+    { title: "배열을_이용한_프로젝트_개발노트(2)", file: "10104남현석 - 배열을_이용한_프로젝트_개발노트(2).pdf" },
+    { title: "배열을_이용한_프로젝트_개발노트", file: "10104남현석 - 배열을_이용한_프로젝트_개발노트.pdf" },
+    { title: "수행평가1차시_연산자까지(1)", file: "10104남현석 - 수행평가1차시_연산자까지(1).pdf" },
+    { title: "수행평가1차시_연산자까지", file: "10104남현석 - 수행평가1차시_연산자까지.pdf" },
+    { title: "수행평가2차시_제어구조", file: "10104남현석 - 수행평가2차시_제어구조.pdf" },
+    { title: "프로그래밍 개발 도구 비교하기(1)", file: "10104남현석 - 프로그래밍 개발 도구 비교하기(1).pdf" },
+    { title: "프로그래밍 개발 도구 비교하기", file: "10104남현석 - 프로그래밍 개발 도구 비교하기.pdf" },
+] as const;
 ---
 
 <html lang="ko">
@@ -303,6 +339,28 @@ const portfolioDetails = [
                             </details>
                         ))}
                     </div>
+
+                    <details class="group mt-3 rounded-2xl border border-border bg-background open:bg-muted">
+                        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-semibold [&::-webkit-details-marker]:hidden">
+                            <span>
+                                프로그래밍 원본 자료 PDF
+                                <span class="ml-3 text-sm font-normal text-foreground/50">33개 문서</span>
+                            </span>
+                            <span class="text-xl font-normal text-foreground/40 transition-transform group-open:rotate-45">+</span>
+                        </summary>
+                        <div class="grid gap-px border-t border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
+                            {programmingMaterials.map((material) => (
+                                <a
+                                    href={`/portfolio/programming/${encodeURIComponent(material.file)}`}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                    class="bg-background p-4 text-sm font-semibold text-foreground no-underline transition-colors hover:bg-muted"
+                                >
+                                    {material.title} <span aria-hidden="true">↗</span>
+                                </a>
+                            ))}
+                        </div>
+                    </details>
                 </section>
             </div>
         </main>