218 lines
11 KiB
Text
218 lines
11 KiB
Text
---
|
|
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-[calc(100svh-64px)] 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)의 이펙트 제작과
|
|
플레이를<br /> 함께 다루는 대회, 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 후기 영상 재생"
|
|
>
|
|
<img
|
|
class="block h-full w-full object-cover"
|
|
src="/projects/epc-finale.avif"
|
|
alt="썸네일"
|
|
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"
|
|
>후기 영상
|
|
</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-[-10%] 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/3NY8vgxvKaU?autoplay=1&playsinline=1";
|
|
player.title = "EPC : Finale 방송화면에 이런 비밀이???";
|
|
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>
|