310 lines
17 KiB
Text
310 lines
17 KiB
Text
---
|
|
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>
|