wow
This commit is contained in:
parent
961ad3351c
commit
0d5c3f88a8
7 changed files with 212 additions and 339 deletions
|
|
@ -1,25 +1,26 @@
|
|||
---
|
||||
import { events } from "@/lib/events";
|
||||
import AboutRow from "@/components/AboutRow.astro";
|
||||
|
||||
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)),
|
||||
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 [, 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),
|
||||
(new Date(currentYear + 1, 0, 1).getTime() - Date.now()) /
|
||||
(1000 * 60 * 60 * 24),
|
||||
);
|
||||
---
|
||||
|
||||
|
|
@ -31,104 +32,62 @@ const daysUntilYearEnd = Math.ceil(
|
|||
>
|
||||
<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)]"
|
||||
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)] text-base"
|
||||
>
|
||||
<div
|
||||
id="experience"
|
||||
class="max-w-[654px] break-keep text-[24px] leading-[1.2] tracking-[-0.02em] lg:leading-none"
|
||||
>
|
||||
<p id="about-title">
|
||||
저는 <b>{years.length}년간 {events.length}개</b>의
|
||||
개성있는 조각들을 모아왔어요.
|
||||
</p>
|
||||
<p>
|
||||
안녕하세요, 정보보안과 소프트웨어 엔지니어링을 주로하고 있는
|
||||
암냥입니다.
|
||||
</p>
|
||||
<p>저는...</p>
|
||||
<section class="mt-[0.75em]">
|
||||
<div class="mt-[0.5em] flex flex-col gap-[0.34em]">
|
||||
<AboutRow 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>
|
||||
</AboutRow>
|
||||
|
||||
<section class="mt-[0.75em]" aria-label="Experience">
|
||||
{
|
||||
eventsByYear.map(({ year, events: yearEvents }) => (
|
||||
<section
|
||||
class="py-[0.55em]"
|
||||
aria-labelledby={`experience-${year}`}
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<h3
|
||||
id={`experience-${year}`}
|
||||
class="text-[0.62em] font-bold leading-none"
|
||||
>
|
||||
{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>
|
||||
|
||||
<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>
|
||||
<AboutRow year="2026" connector="wave">
|
||||
<img
|
||||
class="h-[1em] w-[1em] shrink-0"
|
||||
src="/about/sunrin.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>선린인터넷고등학교 정보보호과</span>
|
||||
</AboutRow>
|
||||
<AboutRow year="2026" connector="line">
|
||||
<img
|
||||
class="h-[1em] w-[1em] shrink-0 object-contain"
|
||||
src="/about/adofai.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>ADOFAI.gg Development Team</span>
|
||||
</AboutRow>
|
||||
<AboutRow year="2025" connector="line">
|
||||
<img
|
||||
class="h-[1em] w-[1em] shrink-0 object-contain"
|
||||
src="/about/whitehat.avif"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>화이트햇스쿨 3기 이수</span>
|
||||
</AboutRow>
|
||||
</div>
|
||||
</section>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in a new issue