---
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">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width" />
        <meta name="color-scheme" content="light dark" />
        <meta name="theme-color" content="#fcf8f9" />
        <title>Carrer | 남현석</title>
        <meta name="description" content="남현석의 경력 및 활동 기록" />
    </head>
    <body class="m-0 min-w-[320px] bg-background font-sans text-foreground">
        <Header />

        <main class="min-h-svh px-6 pb-12 pt-[104px] sm:px-10 lg:px-16">
            <div class="mx-auto flex max-w-6xl flex-col gap-8">
                <div class="flex items-end justify-between gap-6">
                    <div>
                        <h1 class="m-0 text-4xl font-bold tracking-tight sm:text-6xl">
                            Carrer Portfolio
                            <span class="text-foreground/30">.</span>
                        </h1>
                    </div>
                    <a
                        href="/Carrer.pdf"
                        target="_blank"
                        rel="noreferrer"
                        class="shrink-0 rounded-full border border-border px-4 py-2 text-sm font-semibold text-foreground no-underline transition-colors hover:bg-foreground hover:text-background"
                    >
                        새 창에서 열기
                    </a>
                </div>

                <div class="overflow-hidden rounded-3xl border border-border bg-muted p-2 shadow-[0_24px_80px_rgba(44,20,35,0.12)] sm:p-4">
                    <object
                        data="/Carrer.pdf#view=FitH"
                        type="application/pdf"
                        class="h-[calc(100svh-220px)] min-h-[560px] w-full rounded-2xl bg-white"
                    >
                        <div class="flex min-h-[560px] flex-col items-center justify-center gap-4 rounded-2xl bg-background p-8 text-center">
                            <p class="m-0 text-foreground/70">
                                이 브라우저에서는 PDF 미리보기를 지원하지
                                않습니다.
                            </p>
                            <a
                                href="/Carrer.pdf"
                                download
                                class="rounded-full bg-foreground px-5 py-3 text-sm font-semibold text-background no-underline"
                            >
                                PDF 다운로드
                            </a>
                        </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>
</html>