parent
5403448f63
commit
7676e7f7dc
6 changed files with 109 additions and 40 deletions
BIN
public/Carrer.pdf
Normal file
BIN
public/Carrer.pdf
Normal file
Binary file not shown.
|
|
@ -9,20 +9,31 @@ import AboutRow from "@/components/AboutRow.astro";
|
||||||
aria-labelledby="about-title"
|
aria-labelledby="about-title"
|
||||||
>
|
>
|
||||||
<div class="grid min-h-full grid-cols-1 lg:grid-cols-2">
|
<div class="grid min-h-full grid-cols-1 lg:grid-cols-2">
|
||||||
<div
|
<div 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)]">
|
||||||
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"
|
||||||
>
|
>
|
||||||
<h2 id="about-title" class="max-w-xl text-3xl font-semibold tracking-tight sm:text-4xl">
|
About
|
||||||
About<span class="text-foreground/35" aria-hidden="true">.</span>
|
<span class="text-foreground/35" aria-hidden="true">
|
||||||
|
.
|
||||||
|
</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p class="mt-6 max-w-lg text-base leading-8 text-foreground">
|
<p class="mt-6 max-w-lg text-base leading-8 text-foreground">
|
||||||
안녕하세요. 정보보안과 소프트웨어 엔지니어링을 공부하는 암냥입니다.
|
안녕하세요. 정보보안과 소프트웨어 엔지니어링을 공부하는
|
||||||
|
암냥입니다.
|
||||||
|
<br />
|
||||||
새로운 기술을 배우고, 머릿속의 아이디어를 실제로 작동하는 것으로
|
새로운 기술을 배우고, 머릿속의 아이디어를 실제로 작동하는 것으로
|
||||||
만드는 일을 좋아해요.
|
만드는 일을 좋아해요.
|
||||||
</p>
|
</p>
|
||||||
<section class="mt-16" aria-labelledby="experience-title">
|
<section class="mt-16" aria-labelledby="experience-title">
|
||||||
<div class="mb-5 flex items-baseline justify-between gap-4">
|
<div class="mb-5 flex items-baseline justify-between gap-4">
|
||||||
<h3 id="experience-title" class="text-sm font-semibold tracking-wide">지금까지</h3>
|
<h3
|
||||||
|
id="experience-title"
|
||||||
|
class="text-sm font-semibold tracking-wide"
|
||||||
|
>
|
||||||
|
지금까지
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-[0.55em]">
|
<div class="flex flex-col gap-[0.55em]">
|
||||||
<AboutRow year="2026" connector="wave">
|
<AboutRow year="2026" connector="wave">
|
||||||
|
|
@ -75,7 +86,8 @@ import AboutRow from "@/components/AboutRow.astro";
|
||||||
<a
|
<a
|
||||||
href="#experience"
|
href="#experience"
|
||||||
class="flex flex-row items-center underline underline-offset-4 hover:text-foreground"
|
class="flex flex-row items-center underline underline-offset-4 hover:text-foreground"
|
||||||
><span>전체 타임라인 보기</span>
|
>
|
||||||
|
<span>전체 타임라인 보기</span>
|
||||||
<svg
|
<svg
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="h-4 text-foreground/40"
|
class="h-4 text-foreground/40"
|
||||||
|
|
@ -88,8 +100,8 @@ import AboutRow from "@/components/AboutRow.astro";
|
||||||
>
|
>
|
||||||
<path d="M7 17 17 7"></path>
|
<path d="M7 17 17 7"></path>
|
||||||
<path d="M7 7h10v10"></path>
|
<path d="M7 7h10v10"></path>
|
||||||
</svg></a
|
</svg>
|
||||||
>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
---
|
---
|
||||||
const navigationItems = [
|
const navigationItems = [
|
||||||
{ label: "Home", href: "#home" },
|
{ label: "Home", href: "/#home" },
|
||||||
{ label: "About", href: "#about" },
|
{ label: "About", href: "/#about" },
|
||||||
{ label: "Projects", href: "#projects" },
|
{ label: "Projects", href: "/#projects" },
|
||||||
{ label: "Experience", href: "#experience" },
|
{ label: "Experience", href: "/#experience" },
|
||||||
{ label: "Carrer", href: "#carrer" },
|
{ label: "Carrer", href: "/Carrer" },
|
||||||
{ label: "Contact", href: "#contact" },
|
{ label: "Contact", href: "/#contact" },
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
const desktopLinkClass =
|
const desktopLinkClass =
|
||||||
|
|
@ -20,7 +20,7 @@ const mobileLinkClass =
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
class="shrink-0 text-2xl font-bold leading-[normal] text-foreground no-underline max-md:text-xl"
|
class="shrink-0 text-2xl font-bold leading-[normal] text-foreground no-underline max-md:text-xl"
|
||||||
href="#home"
|
href="/#home"
|
||||||
data-node-id="43:28"
|
data-node-id="43:28"
|
||||||
>
|
>
|
||||||
@imnya.ng
|
@imnya.ng
|
||||||
|
|
|
||||||
|
|
@ -15,19 +15,17 @@
|
||||||
class="m-0 flex h-[250px] w-full max-w-full flex-col justify-center break-words whitespace-nowrap text-[clamp(34px,3.333333vw,64px)] font-bold leading-[normal] tracking-[0] max-md:whitespace-normal max-md:text-[clamp(24px,8vw,48px)] max-md:leading-[1.12]"
|
class="m-0 flex h-[250px] w-full max-w-full flex-col justify-center break-words whitespace-nowrap text-[clamp(34px,3.333333vw,64px)] font-bold leading-[normal] tracking-[0] max-md:whitespace-normal max-md:text-[clamp(24px,8vw,48px)] max-md:leading-[1.12]"
|
||||||
>
|
>
|
||||||
<span class="block" data-node-id="43:14">
|
<span class="block" data-node-id="43:14">
|
||||||
<span class="font-bold">항상 꿈꾸던 것</span><span
|
<span class="font-bold">항상 꿈꾸던 것</span>
|
||||||
class="font-normal text-foreground/50">들을</span
|
<span class="font-normal text-foreground/50">들을</span>
|
||||||
>
|
|
||||||
</span>
|
</span>
|
||||||
<span class="block" data-node-id="43:16">
|
<span class="block" data-node-id="43:16">
|
||||||
<span class="font-bold">현실</span><span
|
<span class="font-bold">현실</span>
|
||||||
class="font-normal text-foreground/50"
|
<span class="font-normal text-foreground/50">
|
||||||
>{"로 만들어나가는 "}
|
{"로 만들어나가는 "}
|
||||||
</span><br class="hidden max-md:block md:hidden" /><span
|
</span>
|
||||||
class="font-bold"
|
<br class="hidden max-md:block md:hidden" />
|
||||||
>
|
<span class="font-bold">남현석</span>
|
||||||
암냥</span
|
<span class="font-normal text-foreground/50">입니다.</span>
|
||||||
><span class="font-normal text-foreground/50">입니다.</span>
|
|
||||||
</span>
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -51,7 +49,7 @@
|
||||||
<img
|
<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"
|
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-light.avif"
|
||||||
alt="벚꽃이 핀 수로에서 보트를 타고 있는 암냥"
|
alt="벚꽃이 핀 수로에서 보트를 타고 있는 캐릭터"
|
||||||
width="3840"
|
width="3840"
|
||||||
height="2160"
|
height="2160"
|
||||||
fetchpriority="high"
|
fetchpriority="high"
|
||||||
|
|
@ -60,8 +58,7 @@
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="pointer-events-none absolute inset-x-0 bottom-0 z-20 h-[min(150px,35%)] bg-gradient-to-b from-transparent via-background/20 to-background backdrop-blur-[2px] [mask-image:linear-gradient(to_bottom,transparent,black_42%)]"
|
class="pointer-events-none absolute inset-x-0 bottom-0 z-20 h-[min(150px,35%)] bg-gradient-to-b from-transparent via-background/20 to-background backdrop-blur-[2px] [mask-image:linear-gradient(to_bottom,transparent,black_42%)]"
|
||||||
>
|
></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
64
src/pages/Carrer.astro
Normal file
64
src/pages/Carrer.astro
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
---
|
||||||
|
import Header from "@/components/Header.astro";
|
||||||
|
import "@/globals.css";
|
||||||
|
---
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -24,20 +24,16 @@ import "@/globals.css";
|
||||||
media="(prefers-color-scheme: dark)"
|
media="(prefers-color-scheme: dark)"
|
||||||
content="#191014"
|
content="#191014"
|
||||||
/>
|
/>
|
||||||
<title>암냥 | imnya.ng</title>
|
<title>남현석 | imnya.ng</title>
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="항상 꿈꾸던 것들을 현실로 만들어나가기 위해..."
|
content="항상 꿈꾸던 것들을 현실로 만들어나가기 위해..."
|
||||||
/>
|
/>
|
||||||
</head>
|
</head>
|
||||||
<body
|
<body class="m-0 min-w-[320px] overflow-hidden bg-background font-sans text-foreground transition-colors duration-300">
|
||||||
class="m-0 min-w-[320px] overflow-hidden bg-background font-sans text-foreground transition-colors duration-300"
|
|
||||||
>
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<main
|
<main class="mt-[64px] h-[calc(100svh-64px)] snap-y snap-proximity overflow-x-hidden overflow-y-auto scroll-smooth overscroll-y-contain bg-background transition-colors duration-300 [&::-webkit-scrollbar]:h-[11px] [&::-webkit-scrollbar]:w-[19px] [&::-webkit-scrollbar-thumb]:rounded-2xl [&::-webkit-scrollbar-thumb]:border-[5px] [&::-webkit-scrollbar-thumb]:border-background [&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar)] [&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-hover)] [&::-webkit-scrollbar-track]:bg-transparent">
|
||||||
class="mt-[64px] h-[calc(100svh-64px)] snap-y snap-proximity overflow-x-hidden overflow-y-auto scroll-smooth overscroll-y-contain bg-background transition-colors duration-300 [&::-webkit-scrollbar]:h-[11px] [&::-webkit-scrollbar]:w-[19px] [&::-webkit-scrollbar-thumb]:rounded-2xl [&::-webkit-scrollbar-thumb]:border-[5px] [&::-webkit-scrollbar-thumb]:border-background [&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar)] [&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-hover)] [&::-webkit-scrollbar-track]:bg-transparent"
|
|
||||||
>
|
|
||||||
<Hero />
|
<Hero />
|
||||||
<About />
|
<About />
|
||||||
<EPCProjects />
|
<EPCProjects />
|
||||||
|
|
@ -50,7 +46,7 @@ import "@/globals.css";
|
||||||
<script>
|
<script>
|
||||||
const scrollContainer = document.querySelector<HTMLElement>("main");
|
const scrollContainer = document.querySelector<HTMLElement>("main");
|
||||||
const inPageLinks =
|
const inPageLinks =
|
||||||
document.querySelectorAll<HTMLAnchorElement>('a[href^="#"]');
|
document.querySelectorAll<HTMLAnchorElement>('a[href^="/#"]');
|
||||||
|
|
||||||
const getTargetScrollTop = (target: HTMLElement) =>
|
const getTargetScrollTop = (target: HTMLElement) =>
|
||||||
target.offsetTop - (scrollContainer?.offsetTop ?? 0);
|
target.offsetTop - (scrollContainer?.offsetTop ?? 0);
|
||||||
|
|
@ -68,7 +64,7 @@ import "@/globals.css";
|
||||||
|
|
||||||
inPageLinks.forEach((link) => {
|
inPageLinks.forEach((link) => {
|
||||||
link.addEventListener("click", (event) => {
|
link.addEventListener("click", (event) => {
|
||||||
const hash = link.getAttribute("href");
|
const hash = new URL(link.href).hash;
|
||||||
const target = hash
|
const target = hash
|
||||||
? document.querySelector<HTMLElement>(hash)
|
? document.querySelector<HTMLElement>(hash)
|
||||||
: null;
|
: null;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue