wow

src/pages/Carrer.astro

@@ -1,6 +1,138 @@
 ---
 import Header from "@/components/Header.astro";
 import "@/globals.css";
+
+const portfolios = [
+    {
+        subject: "디자인일반 · 2학기",
+        title: "시각 언어로 정리한 주제 발표",
+        description:
+            "주제를 조사하고 핵심 내용을 한 장의 발표 자료로 구성했습니다.",
+        image: "/portfolio/design/design-02.jpg",
+        href: "/portfolio/pdfs/design-report.pdf",
+        label: "발표 학습지 보기",
+    },
+    {
+        subject: "프로그래밍",
+        title: "C 언어로 익힌 문제 해결",
+        description:
+            "자료형, 조건문, 반복문부터 배열·포인터·함수까지 단계적으로 실습했습니다.",
+    },
+    {
+        subject: "정보통신",
+        title: "네트워크 구성과 연결 확인",
+        description:
+            "라우터 설정, PC 간 Ping, SSH 연결을 직접 구성하고 검증했습니다.",
+        image: "/portfolio/network/ping-ssh.png",
+        href: "/portfolio/network/all-ping.png",
+        label: "실습 결과 보기",
+    },
+    {
+        subject: "통합과학",
+        title: "선천성 대사 이상 탐구",
+        description:
+            "질환의 원인과 유전적 배경을 조사해 보고서와 발표 자료로 정리했습니다.",
+        href: "/portfolio/pdfs/science-report.pdf",
+        label: "탐구 보고서 보기",
+    },
+    {
+        subject: "웹 프로그래밍 · 2학기",
+        title: "HTML로 만든 작은 웹 페이지들",
+        description:
+            "시맨틱 HTML, CSS 레이아웃, 링크와 미디어를 활용해 여러 페이지를 제작했습니다.",
+    },
+    {
+        subject: "Layer7",
+        title: "학기말 프로젝트",
+        description:
+            "정보보안 동아리에서 팀 프로젝트를 기획하고 결과를 문서화했습니다.",
+        href: "/portfolio/pdfs/layer7-project.pdf",
+        label: "프로젝트 문서 보기",
+    },
+] as const;
+
+const securityNotes = [
+    {
+        label: "Layer7 학습 기록 전체 보기",
+        href: "https://blog.imnya.ng/tags/layer7",
+    },
+    { label: "C언어 과제", href: "https://blog.imnya.ng/layer7/01" },
+    { label: "리버싱 학습 기록", href: "https://blog.imnya.ng/layer7/10" },
+    { label: "시스템 해킹 학습 기록", href: "https://blog.imnya.ng/layer7/15" },
+    {
+        label: "Dreamhack 풀이 모아보기",
+        href: "https://blog.imnya.ng/tags/dreamhack",
+    },
+] as const;
+
+const portfolioDetails = [
+    {
+        subject: "디자인일반 · 2학기",
+        summary: "주제 조사부터 발표 자료 구성까지",
+        items: [
+            { title: "주제 발표 학습지", detail: "조사한 내용을 시각적으로 정리한 발표 자료", href: "/portfolio/pdfs/design-report.pdf" },
+            { title: "8월 25일 작업 기록", detail: "디자인 실습 결과물", href: "/portfolio/design/design-01.jpg" },
+            { title: "9월 8일 작업 기록", detail: "디자인 실습 결과물", href: "/portfolio/design/design-02.jpg" },
+        ],
+    },
+    {
+        subject: "프로그래밍",
+        summary: "C 언어 기초에서 자료구조와 프로젝트까지",
+        items: [
+            { title: "프로그래밍의 개요", detail: "개발 도구와 프로그래밍 환경 비교" },
+            { title: "자료형·표준 입출력", detail: "변수, 자료형, 형식 지정자, 기본 입출력" },
+            { title: "연산자", detail: "산술·관계·논리 연산자와 표현식" },
+            { title: "선택 구조", detail: "if, else, switch를 활용한 조건 분기" },
+            { title: "반복 구조", detail: "for, while, do-while과 반복 제어" },
+            { title: "배열·포인터·함수", detail: "배열을 이용한 데이터 처리와 함수 분리" },
+            { title: "구조체·중첩 구조체", detail: "관련 데이터를 하나의 자료형으로 묶기" },
+            { title: "배열 기반 프로젝트", detail: "배운 문법을 조합해 작은 프로그램으로 구현" },
+        ],
+    },
+    {
+        subject: "정보통신",
+        summary: "Packet Tracer로 구성하고 Ping과 SSH로 검증",
+        items: [
+            { title: "라우터 설정", detail: "라우터 인터페이스와 네트워크 기본 설정" },
+            { title: "PC 간 연결 확인", detail: "모든 PC의 Ping 테스트로 연결 상태 검증", href: "/portfolio/network/all-ping.png" },
+            { title: "라우터 Ping 테스트", detail: "라우터 간 통신과 경로 확인", href: "/portfolio/network/router-ping.png" },
+            { title: "Ping and SSH", detail: "원격 접속을 포함한 네트워크 실습", href: "/portfolio/network/ping-ssh.png" },
+            { title: "수행평가와 토폴로지", detail: "Packet Tracer 파일로 네트워크 토폴로지 구성" },
+        ],
+    },
+    {
+        subject: "통합과학",
+        summary: "생명과학 주제를 조사하고 보고서로 정리",
+        items: [
+            { title: "선천성 대사 이상", detail: "질환의 원인과 유전적 배경을 조사한 탐구 보고서", href: "/portfolio/pdfs/science-report.pdf" },
+            { title: "주제 발표 자료", detail: "탐구 내용을 발표용 자료로 재구성" },
+        ],
+    },
+    {
+        subject: "웹 프로그래밍 · 2학기",
+        summary: "HTML 문서 구조와 CSS·미디어 활용",
+        items: [
+            { title: "시맨틱 웹 페이지", detail: "header, main, section 등 의미 있는 HTML 구조" },
+            { title: "제주도 소개 페이지", detail: "이미지·링크·목록을 활용한 정보 페이지" },
+            { title: "선린인터넷고등학교 페이지", detail: "학교 소개형 화면 구성" },
+            { title: "Notepad 실습", detail: "텍스트 편집기에서 HTML 문서 작성" },
+            { title: "VS Code 실습", detail: "개발 도구를 활용한 웹 문서 작성" },
+        ],
+    },
+    {
+        subject: "Layer7 · Dreamhack",
+        summary: "보안 동아리 과제와 문제 풀이 기록",
+        items: [
+            { title: "C언어 과제", detail: "조건문·반복문·배열을 이용한 CodeUp 문제 풀이", href: "https://blog.imnya.ng/layer7/01" },
+            { title: "컴퓨터 구조", detail: "구조와 실행 흐름을 이해하기 위한 과제", href: "https://blog.imnya.ng/layer7/06" },
+            { title: "리버싱", detail: "바이너리 분석과 디버깅 학습 기록", href: "https://blog.imnya.ng/layer7/10" },
+            { title: "시스템 해킹", detail: "메모리 구조와 취약점 실습", href: "https://blog.imnya.ng/layer7/15" },
+            { title: "웹 해킹", detail: "웹 취약점 분석과 과제 풀이", href: "https://blog.imnya.ng/layer7/19" },
+            { title: "Dreamhack 풀이", detail: "웹·리버싱·시스템 분야 문제 풀이 모음", href: "https://blog.imnya.ng/tags/dreamhack" },
+            { title: "학기말 프로젝트", detail: "팀 프로젝트 기획과 결과 문서", href: "/portfolio/pdfs/layer7-project.pdf" },
+        ],
+    },
+] as const;
 ---
 
 <html lang="ko">
@@ -20,11 +152,9 @@ import "@/globals.css";
             <div class="mx-auto flex max-w-6xl flex-col gap-8">
                 <div class="flex items-end justify-between gap-6">
                     <div>
-                        <p class="mb-3 text-sm font-semibold tracking-[0.18em] text-foreground/45 uppercase">
-                            Portfolio
-                        </p>
                         <h1 class="m-0 text-4xl font-bold tracking-tight sm:text-6xl">
-                            Carrer<span class="text-foreground/30">.</span>
+                            Carrer Portfolio
+                            <span class="text-foreground/30">.</span>
                         </h1>
                     </div>
                     <a
@@ -58,6 +188,122 @@ import "@/globals.css";
                         </div>
                     </object>
                 </div>
+
+                <section aria-labelledby="school-portfolio-title" class="pt-8">
+                    <div class="mb-6 flex items-end justify-between gap-4">
+                        <div>
+                            <p class="mb-2 text-sm font-semibold tracking-[0.18em] text-foreground/45 uppercase">
+                                2026 · 교과 활동
+                            </p>
+                            <h2
+                                id="school-portfolio-title"
+                                class="m-0 text-2xl font-bold tracking-tight sm:text-3xl"
+                            >
+                                교과 포트폴리오
+                                <span class="text-foreground/30">.</span>
+                            </h2>
+                        </div>
+                        <span class="text-sm text-foreground/45">6개 분야</span>
+                    </div>
+
+                    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                        {portfolios.map((portfolio) => (
+                            <article class="group flex min-h-56 flex-col overflow-hidden rounded-3xl border border-border bg-background transition-[transform,box-shadow] duration-200 hover:-translate-y-1 hover:shadow-[0_16px_45px_rgba(44,20,35,0.12)]">
+                                {portfolio.image && (
+                                    <img
+                                        src={portfolio.image}
+                                        alt=""
+                                        class="h-36 w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                                        loading="lazy"
+                                    />
+                                )}
+                                <div class="flex flex-1 flex-col p-5">
+                                    <p class="m-0 text-xs font-semibold tracking-[0.12em] text-foreground/45 uppercase">
+                                        {portfolio.subject}
+                                    </p>
+                                    <h3 class="mt-3 mb-0 text-lg font-bold tracking-tight">
+                                        {portfolio.title}
+                                    </h3>
+                                    <p class="mt-2 mb-0 text-sm leading-6 text-foreground/60">
+                                        {portfolio.description}
+                                    </p>
+                                    {portfolio.href && (
+                                        <a
+                                            href={portfolio.href}
+                                            target="_blank"
+                                            rel="noreferrer"
+                                            class="mt-5 inline-flex w-fit items-center gap-1 text-sm font-semibold text-foreground underline decoration-foreground/25 underline-offset-4 transition-colors hover:decoration-foreground"
+                                        >
+                                            {portfolio.label}
+                                            <span aria-hidden="true">↗</span>
+                                        </a>
+                                    )}
+                                </div>
+                            </article>
+                        ))}
+                    </div>
+
+                    <div class="mt-4 flex flex-col gap-5 rounded-3xl border border-border bg-muted p-6 sm:flex-row sm:items-center sm:justify-between">
+                        <div>
+                            <p class="m-0 text-xs font-semibold tracking-[0.12em] text-foreground/45 uppercase">
+                                Security notes
+                            </p>
+                            <h3 class="mt-2 mb-0 text-lg font-bold tracking-tight">
+                                Layer7 · Dreamhack 학습 기록
+                            </h3>
+                            <p class="mt-2 mb-0 text-sm text-foreground/60">
+                                C언어부터 컴퓨터 구조, 리버싱, 시스템·웹
+                                해킹까지의 풀이와 과제를 블로그에 기록하고
+                                있습니다.
+                            </p>
+                        </div>
+                        <div class="flex flex-wrap gap-x-5 gap-y-2 sm:max-w-[48%] sm:justify-end">
+                            {securityNotes.map((note) => (
+                                <a
+                                    href={note.href}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                    class="text-sm font-semibold text-foreground underline decoration-foreground/25 underline-offset-4 transition-colors hover:decoration-foreground"
+                                >
+                                    {note.label}{" "}
+                                    <span aria-hidden="true">↗</span>
+                                </a>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div class="mt-6 flex flex-col gap-3">
+                        {portfolioDetails.map((section) => (
+                            <details class="group 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>
+                                        {section.subject}
+                                        <span class="ml-3 text-sm font-normal text-foreground/50">{section.summary}</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">
+                                    {section.items.map((item) => (
+                                        <div class="bg-background p-4">
+                                            <p class="m-0 font-semibold">{item.title}</p>
+                                            <p class="mt-1 mb-0 text-sm leading-6 text-foreground/55">{item.detail}</p>
+                                            {item.href && (
+                                                <a
+                                                    href={item.href}
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    class="mt-3 inline-block text-sm font-semibold underline decoration-foreground/25 underline-offset-4 hover:decoration-foreground"
+                                                >
+                                                    자료 보기 ↗
+                                                </a>
+                                            )}
+                                        </div>
+                                    ))}
+                                </div>
+                            </details>
+                        ))}
+                    </div>
+                </section>
             </div>
         </main>
     </body>