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

222
src/components/EPCProjects.astro Normal file
View file

@ -0,0 +1,222 @@
---
const videoUrl =
"https://www.youtube.com/live/5HDW7u3xt6Y?si=SgPxg83YMdeqGo3t&t=8366";
const roles = ["Broadcast Manager", "ARG Creator", "Developer"];
---
<section
id="projects"
class="min-h-full snap-start bg-background text-foreground"
aria-labelledby="projects-title"
>
<div class="grid min-h-full grid-cols-1 lg:grid-cols-2">
<div
class="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] break-keep">
<h2
id="projects-title"
class="mt-5 text-[clamp(32px,3.1vw,54px)] font-bold leading-[1.2] tracking-[-0.04em]"
>
무대 뒤에서,<br />경험을 만들면서...
</h2>
<p
class="mt-6 max-w-[32rem] text-base leading-relaxed text-foreground/65"
>
불과 얼음의 춤(A Dance of Fire and Ice)의 이펙트 제작과
플레이를 함께 다루는 대회, Effect Playing Contest. 2025와
Finale 시즌에 참여하며 방송부터 ARG, 개발까지 함께했어요.
</p>
<ul
class="mt-6 flex flex-wrap gap-x-4 gap-y-2 text-[13px] font-semibold"
aria-label="담당 역할"
>
{
roles.map((role) => (
<li class="border-b-2 border-[#ff92ad]/60 pb-1">
{role}
</li>
))
}
</ul>
<div class="mt-10 space-y-7">
<article
class="border-t border-foreground/15 pt-5"
aria-labelledby="epc-finale-title"
>
<div
class="mb-2 flex items-center gap-3 text-xs font-medium text-foreground/50"
>
<span>01</span><span>2026 · FINALE</span>
</div>
<h3
id="epc-finale-title"
class="text-[clamp(21px,1.7vw,28px)] font-bold tracking-[-0.025em]"
>
Effect Playing Contest : Finale
</h3>
<p
class="mt-3 text-sm leading-[1.85] text-foreground/65"
>
달성이 주관하고 ADOFAI.gg가 공동 주최하는 EPC의
마지막 시즌이에요.<br /> 방송 화면 개발과 운영을 맡고,
대회의 퍼즐을 경험하는 ARG를 제작했었어요.
</p>
<a
href="https://www.youtube.com/playlist?list=PLZeYZotn5_IM15cD3W2y5SAtI83xXE226"
target="_blank"
rel="noopener noreferrer"
class="mt-4 inline-block text-sm font-semibold underline decoration-foreground/25 underline-offset-4 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring"
>Finale 영상 플레이리스트 <span aria-hidden="true"
>↗</span
></a
>
</article>
<article
class="border-t border-foreground/15 pt-5"
aria-labelledby="epc-2025-title"
>
<div
class="mb-2 flex items-center gap-3 text-xs font-medium text-foreground/50"
>
<span>02</span><span>2025</span>
</div>
<h3
id="epc-2025-title"
class="text-[clamp(21px,1.7vw,28px)] font-bold tracking-[-0.025em]"
>
Effect Playing Contest 2025
</h3>
<p
class="mt-3 text-sm leading-[1.85] text-foreground/65"
>
이펙트 제작자와 플레이어가 각자의 실력을 선보이는
리듬 게임 대회입니다. 방송 화면의 대부분의 기능을
개발하고, 방송 운영을 담당했습니다.
</p>
<a
href="https://www.youtube.com/playlist?list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD"
target="_blank"
rel="noopener noreferrer"
class="mt-4 inline-block text-sm font-semibold underline decoration-foreground/25 underline-offset-4 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring"
>2025 영상 플레이리스트 <span aria-hidden="true"
>↗</span
></a
>
</article>
</div>
</div>
</div>
<div
class="grid min-w-0 items-center overflow-hidden px-4 pt-8 pb-[52px] lg:sticky lg:top-0 lg:h-[calc(100svh-64px)] lg:min-h-[560px] lg:self-start lg:py-6 lg:pr-7 lg:pl-0"
aria-label="EPC 방송과 ARG 작업 사진"
>
<div class="relative mx-auto aspect-[0.98] w-full max-w-[880px]">
<figure
class="absolute top-[9%] left-[6%] z-[2] m-0 w-[80%] -rotate-[5deg]"
>
<div
class="aspect-video overflow-hidden rounded-xl bg-[#18141f] shadow-[0_12px_36px_#00000014]"
id="epc-video"
>
<button
class="group relative block h-full w-full cursor-pointer border-0 bg-transparent p-0 text-white focus-visible:outline-2 focus-visible:outline-offset-[-5px] focus-visible:outline-[#ff92ad]"
type="button"
aria-label="EPC Finale 결승 방송을 2시간 19분 26초부터 재생"
>
<img
class="block h-full w-full object-cover"
src="/projects/epc-finale-broadcast.avif"
alt="EPC Finale의 두 선수 경기 화면과 실시간 판정을 보여주는 방송 화면"
width="655"
height="387"
loading="lazy"
decoding="async"
/>
<span
class="absolute top-1/2 left-1/2 grid aspect-square w-[clamp(40px,4vw,64px)] -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full border border-[#ffffff80] bg-[#17121d99] pl-[3px] backdrop-blur-[8px] transition-colors duration-200 group-hover:bg-[#17121de6] motion-reduce:transition-none"
aria-hidden="true">▶</span
>
<span
class="absolute inset-x-0 bottom-0 flex justify-between gap-2 bg-gradient-to-b from-transparent to-[#000c] px-4 pt-[30px] pb-3 text-left text-[clamp(10px,1vw,14px)] font-semibold"
>Finale 결승 방송 <span
class="font-normal opacity-80"
>02:19:26부터 재생</span
></span
>
</button>
</div>
<img
class="absolute top-[-13%] left-[-5%] z-[3] pointer-events-none h-auto w-[13%] aspect-[94/131] rotate-[10deg]"
src="/projects/tape.svg"
alt=""
width="94"
height="131"
/>
<img
class="absolute top-[-13%] right-[-5%] z-[3] pointer-events-none h-auto w-[13%] aspect-[94/131] rotate-[100deg]"
src="/projects/tape.svg"
alt=""
width="94"
height="131"
/>
</figure>
<figure
class="absolute top-[47%] left-[21%] z-[1] m-0 w-[70%] rotate-[5deg] pointer-events-none select-none"
>
<img
class="block h-auto w-full pointer-events-none overflow-hidden rounded-2xl shadow-[0_12px_36px_#00000014] focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring"
src="/projects/IMG_0170.avif"
alt="점자로 보이는 단서가 적힌 찢어진 종이와 태블릿, 펜이 놓인 ARG 작업 사진"
width="2880"
height="2160"
loading="lazy"
decoding="async"
/>
<img
class="absolute bottom-0 left-[-6%] z-[3] pointer-events-none h-auto w-[13%] aspect-[94/131] rotate-90"
src="/projects/tape.svg"
alt=""
width="94"
height="131"
/>
<img
class="absolute top-[-9%] right-[-5%] z-[3] pointer-events-none h-auto w-[13%] aspect-[94/131] rotate-[100deg]"
src="/projects/tape.svg"
alt=""
width="94"
height="131"
/>
</figure>
</div>
</div>
</div>
</section>
<script>
const videoFrame = document.getElementById("epc-video");
const playButton = videoFrame?.querySelector("button");
playButton?.addEventListener(
"click",
() => {
if (!videoFrame) return;
const player = document.createElement("iframe");
player.src =
"https://www.youtube-nocookie.com/embed/5HDW7u3xt6Y?start=8366&autoplay=1&playsinline=1";
player.title =
"EPC Finale Playing Section Tournament Finals — 2:19:26부터 재생";
player.allow =
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
player.allowFullscreen = true;
player.referrerPolicy = "strict-origin-when-cross-origin";
player.className = "block h-full w-full border-0";
videoFrame.replaceChildren(player);
player.focus();
},
{ once: true },
);
</script>