imnyang/imnya.ng
Watch
1
0
Fork
You've already forked imnya.ng
 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

wow
Some checks failed
/ print-content (push) Failing after 1m40s
Details

Browse source
This commit is contained in:
암냥 2026-09-06 01:12:02 +09:00
commit 961ad3351c
18 changed files with 372 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

248
src/components/About.astro
View file

@ -1,165 +1,143 @@
---
import ExperienceRow from "@/components/ExperienceRow.astro";
import { events } from "@/lib/events";
const sortedEvents = [...events].sort((a, b) => b.date.localeCompare(a.date));
const years = [...new Set(sortedEvents.map((event) => event.date.slice(0, 4)))];
// biome-ignore lint/correctness/noUnusedVariables: Used in the Astro template below.
const eventsByYear = years.map((year) => ({
year,
events: sortedEvents.filter((event) => event.date.startsWith(year)),
}));
// biome-ignore lint/correctness/noUnusedVariables: Used in the Astro template below.
const getShortDate = (date: string) => {
const [, month, day] = date.split("-");
return `${month}.${day}`;
};
const currentYear = new Date().getFullYear();
// biome-ignore lint/correctness/noUnusedVariables: Used in the Astro template below.
const daysUntilYearEnd = Math.ceil(
(new Date(currentYear + 1, 0, 1).getTime() - Date.now()) /
(1000 * 60 * 60 * 24),
);
---
<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"
class="min-h-full snap-start snap-always bg-background text-foreground"
aria-labelledby="about-title"
>
<div class="grid min-h-full grid-cols-1 lg:h-full lg:grid-cols-2">
<div class="grid min-h-full grid-cols-1 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
id="experience"
class="max-w-[654px] text-[24px] leading-[1.2] tracking-[-0.02em] lg:leading-none"
class="max-w-[654px] break-keep text-[24px] leading-[1.2] tracking-[-0.02em] lg:leading-none"
>
<p id="about-title">저는 이런 것들을 해왔어요.</p>
<p id="about-title">
저는 <b>{years.length}년간 {events.length}개</b>의
개성있는 조각들을 모아왔어요.
</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>
<ExperienceRow year="2024" connector="line">
<img
class="h-[1em] w-[1em] shrink-0 object-contain"
src="/about/whitehat.png"
alt=""
aria-hidden="true"
/>
<span>글로벌 스타트업 학교 2기</span>
</ExperienceRow>
<ExperienceRow year="2024" connector="line">
<img
class="h-[1em] w-[1em] shrink-0 object-contain"
src="/icon/pinkheart.png"
alt=""
aria-hidden="true"
/>
<span>LG AI 청소년 캠프 1기</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
<section class="mt-[0.75em]" aria-label="Experience">
{
eventsByYear.map(({ year, events: yearEvents }) => (
<section
class="py-[0.55em]"
aria-labelledby={`experience-${year}`}
>
</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]"
<div class="flex items-center gap-3">
<h3
id={`experience-${year}`}
class="text-[0.62em] font-bold leading-none"
>
<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>
{year}
</h3>
<span class="text-[0.43em] font-medium tracking-[0.04em] text-foreground/45">
{yearEvents.length}{" "}
{yearEvents.length === 1
? "EVENT"
: "EVENTS"}
</span>
<div class="h-px flex-1 bg-foreground/10" />
</div>
</div>
</div>
</div>
<ol class="mt-[0.35em]">
{yearEvents.map((event) => (
<li class="grid min-w-0 grid-cols-[3.5em_minmax(0,1fr)] gap-x-[0.6em] border-b border-foreground/[0.07] py-[0.48em] last:border-b-0">
<time
class="pt-[0.08em] text-[0.55em] font-medium tabular-nums tracking-[0.02em] text-foreground/50"
datetime={event.date}
>
{getShortDate(event.date)}
</time>
<div class="min-w-0">
<div class="mb-[0.12em] flex items-center gap-[0.45em]">
<span class="text-[0.43em] font-semibold tracking-[0.04em] text-foreground/50">
{event.category}
</span>
{event.link && (
<svg
aria-hidden="true"
class="h-[0.52em] w-[0.52em] text-foreground/40"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M7 17 17 7" />
<path d="M7 7h10v10" />
</svg>
)}
</div>
{event.link ? (
<a
href={event.link}
target="_blank"
rel="noopener noreferrer"
class="text-[0.62em] leading-[1.35] underline decoration-foreground/20 underline-offset-2 transition-colors hover:decoration-foreground focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground"
>
{event.description}
</a>
) : (
<p class="text-[0.62em] leading-[1.35]">
{event.description}
</p>
)}
</div>
</li>
))}
</ol>
{year === currentYear.toString() && (
<div class="my-8 flex items-center gap-4">
<div class="flex-1 h-px bg-foreground/10" />
<span class="text-xs text-muted-foreground whitespace-nowrap">
✨ | D-{daysUntilYearEnd}동안
만들어나갈 멋진 것들을
기대해주세요.
</span>
<div class="flex-1 h-px bg-foreground/10" />
</div>
)}
</section>
))
}
</section>
</div>
</div>
<div
class="relative h-[min(150vw,720px)] min-h-[600px] overflow-hidden lg:h-auto lg:min-h-0"
class="relative order-first h-[min(150vw,720px)] min-h-[600px] overflow-hidden lg:sticky lg:top-0 lg:order-none lg:h-[calc(100svh-64px)] lg:min-h-0 lg:self-start"
aria-label="활동 사진"
>
<img
class="absolute inset-0 h-full w-full select-none pointer-events-none object-contain"
src="/side.png"
src="/side.avif"
alt="활동 사진 콜라주"
width="3840"
height="4320"