parent
56af4599a2
commit
f64e9d2e4c
22 changed files with 757 additions and 366 deletions
149
src/components/About.astro
Normal file
149
src/components/About.astro
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
---
|
||||
import ExperienceRow from "@/components/ExperienceRow.astro";
|
||||
---
|
||||
|
||||
<section
|
||||
id="about"
|
||||
data-node-id="4:104"
|
||||
class="min-h-full snap-start snap-always bg-background text-foreground lg:h-full lg:overflow-hidden"
|
||||
aria-labelledby="about-title"
|
||||
>
|
||||
<div class="grid min-h-full grid-cols-1 lg:h-full lg:grid-cols-2">
|
||||
<div
|
||||
class="relative z-10 px-6 py-12 sm:px-10 lg:px-[clamp(52px,5.208vw,100px)] lg:py-[clamp(58px,9.26vh,100px)]"
|
||||
>
|
||||
<div
|
||||
class="max-w-[654px] text-[24px] leading-[1.2] tracking-[-0.02em] lg:leading-none"
|
||||
>
|
||||
<p id="about-title">저는 이런 것들을 해왔어요.</p>
|
||||
|
||||
<section class="mt-[0.75em]" aria-labelledby="security-title">
|
||||
<h2
|
||||
id="security-title"
|
||||
class="text-[inherit] font-bold leading-[inherit]"
|
||||
>
|
||||
Information security
|
||||
</h2>
|
||||
<div class="mt-[0.5em] flex flex-col gap-[0.34em]">
|
||||
<ExperienceRow year="2026" connector="wave">
|
||||
<img
|
||||
class="h-[1em] w-[1em] shrink-0"
|
||||
src="/about/layer7-mark.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>선린인터넷고등학교 정보보안 동아리</span>
|
||||
<img
|
||||
class="h-[1em] w-[1em] shrink-0 [filter:var(--mono-filter)]"
|
||||
src="/about/layer7-wordmark.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>Layer7</span>
|
||||
</ExperienceRow>
|
||||
|
||||
<ExperienceRow year="2026" connector="wave">
|
||||
<img
|
||||
class="h-[1em] w-[1em] shrink-0"
|
||||
src="/about/sunrin.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>선린인터넷고등학교 정보보호과</span>
|
||||
</ExperienceRow>
|
||||
|
||||
<ExperienceRow year="2025" connector="line">
|
||||
<img
|
||||
class="h-[1em] w-[1em] shrink-0 object-contain"
|
||||
src="/about/whitehat.png"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>화이트햇스쿨 3기 이수</span>
|
||||
</ExperienceRow>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-[0.75em]" aria-labelledby="software-title">
|
||||
<h2
|
||||
id="software-title"
|
||||
class="text-[inherit] font-bold leading-[inherit]"
|
||||
>
|
||||
Software engineering
|
||||
</h2>
|
||||
<div class="mt-[0.5em] flex flex-col gap-[0.34em]">
|
||||
<ExperienceRow year="2025" connector="line">
|
||||
<img
|
||||
class="h-[1em] w-[1em] shrink-0"
|
||||
src="/about/adofai.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>ADOFAI.gg</span>
|
||||
<span class="text-foreground/70"
|
||||
>Full Stack, Mod Developer</span
|
||||
>
|
||||
</ExperienceRow>
|
||||
|
||||
<div
|
||||
class="grid min-w-0 grid-cols-[2.25em_0.55em_minmax(0,1fr)] items-start gap-[0.5em]"
|
||||
>
|
||||
<time class="whitespace-nowrap" datetime="2026"
|
||||
>2026</time
|
||||
>
|
||||
<img
|
||||
class="mt-[0.08em] h-[1em] w-[0.55em] [filter:var(--mono-filter)]"
|
||||
src="/about/contest-separator.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div
|
||||
class="grid min-w-0 grid-cols-[1em_minmax(0,1fr)] items-start gap-[0.34em]"
|
||||
>
|
||||
<img
|
||||
class="mt-[0.22em] h-[0.55em] w-[1em] [filter:var(--mono-filter)]"
|
||||
src="/about/contest.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div
|
||||
class="grid min-w-0 grid-cols-1 gap-[0.35em] lg:grid-cols-[minmax(11em,1.5fr)_minmax(8.6em,1fr)] lg:gap-[0.75em]"
|
||||
>
|
||||
<div
|
||||
class="flex flex-wrap content-start gap-x-[0.5em]"
|
||||
>
|
||||
<span>Effect Playing Contest</span>
|
||||
<span class="text-foreground/70"
|
||||
>2025 · Finale</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col text-foreground/70"
|
||||
>
|
||||
<span>Broadcast Engineer</span>
|
||||
<span>ARG Creator</span>
|
||||
<span>Full Stack Developer</span>
|
||||
<span>Mod Developer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative h-[min(150vw,720px)] min-h-[600px] overflow-hidden lg:h-auto lg:min-h-0"
|
||||
aria-label="활동 사진"
|
||||
>
|
||||
<img
|
||||
class="absolute inset-0 h-full w-full select-none object-contain"
|
||||
src="/side.png"
|
||||
alt="활동 사진 콜라주"
|
||||
width="3840"
|
||||
height="4320"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
Reference in a new issue