/* ===== 양푸른 게임 사운드 디자인 포트폴리오 — App ===== */ const { useState, useEffect, useRef, useMemo } = React; const LS_SETTINGS = "yp_settings_v4"; const LS_PROJECTS = "yp_projects_v4"; function load(key, fb) { try { const r = localStorage.getItem(key); return r ? JSON.parse(r) : fb; } catch (e) { return fb; } } function save(key, v) { try { localStorage.setItem(key, JSON.stringify(v)); } catch (e) {} } const ytThumb = (id) => `https://img.youtube.com/vi/${id}/hqdefault.jpg`; const ytEmbed = (id) => `https://www.youtube.com/embed/${id}`; const ytWatch = (id) => `https://youtu.be/${id}`; const CAT_STYLE = { "사운드 디자인": "text-accent border-accent/50", "BGM": "text-emerald-300 border-emerald-400/40", "Foley": "text-orange-300 border-orange-400/40", "Engine": "text-sky-300 border-sky-400/40", "Voice": "text-fuchsia-300 border-fuchsia-400/40", }; function Tag({ children, className = "" }) { return {children}; } function Collapsible({ title, subtitle, defaultOpen = false, children }) { const [open, setOpen] = useState(defaultOpen); return (
{open &&
{children}
}
); } /* ---------- DSP 비주얼라이저 ---------- */ function Visualizer({ live }) { const ref = useRef(null); const st = useRef({ bars: [], t: 0 }); useEffect(() => { const c = ref.current; if (!c) return; const ctx = c.getContext("2d"); let raf; const N = 64; if (st.current.bars.length !== N) st.current.bars = Array.from({ length: N }, () => Math.random()); const resize = () => { const r = c.getBoundingClientRect(); c.width = r.width * devicePixelRatio; c.height = r.height * devicePixelRatio; }; resize(); window.addEventListener("resize", resize); const draw = () => { const w = c.width, h = c.height; ctx.clearRect(0, 0, w, h); const b = st.current.bars; st.current.t += 0.05; const t = st.current.t; const bw = w / b.length; for (let i = 0; i < b.length; i++) { const tg = live ? (0.25 + 0.75 * Math.abs(Math.sin(i * 0.35 + t) * Math.cos(i * 0.12 - t * 0.7))) : (0.06 + 0.10 * Math.abs(Math.sin(i * 0.3 + t * 0.4))); b[i] += (tg - b[i]) * 0.2; const bh = Math.max(2 * devicePixelRatio, b[i] * h * 0.92), x = i * bw, y = h - bh; const g = ctx.createLinearGradient(0, y, 0, h); g.addColorStop(0, `rgba(204,255,0,${live ? 0.9 : 0.5})`); g.addColorStop(1, "rgba(204,255,0,0.05)"); ctx.fillStyle = g; ctx.fillRect(x + 1, y, bw - 2, bh); } raf = requestAnimationFrame(draw); }; draw(); return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); }; }, [live]); return ; } /* ---------- 헤더 ---------- */ function Header({ settings }) { const nav = [["#about", "소개"], ["#works", "포트폴리오"], ["#career", "경력·자격"], ["#contact", "연락처"]]; return (
{settings.role} {settings.brandKr}
작업물 보기 {/* ADMIN 진입은 헤더에 노출하지 않는다 — 주소창에 #/admin 으로 직접 접근 */}
); } /* ---------- 히어로 ---------- */ function Hero({ settings }) { const [live, setLive] = useState(false); return (
{settings.role} · {settings.brandEn}

{settings.brandKr}

{settings.heroDesc}

FOCUSED ON
{settings.focusedOn.join(" · ")}
TOOLS
{settings.tools.join(", ")}
BASED IN
{settings.location}
{settings.statusLabel}
{settings.status}
▚ 실시간 사운드 스펙트럼 · DSP VISUALIZER
96kHz / 24bit−14.0 LUFS {live ? "● LIVE" : "○ STANDBY"}
{settings.playlistUrl && ( ▶ 포트폴리오 재생목록 보기 (YouTube) )}
개별 작업 보기 ↓
Pipeline & Middleware
{settings.pipeline.map((p) => {p})}
); } /* ---------- 스탯 ---------- */ function Stats({ stats }) { return (
{stats.map((s, i) => (
{s.value}
{s.label}
{s.sub}
))}
); } /* ---------- 소개 / 강점 / 역량 ---------- */ function About() { return (
◈ About & Strengths

왜 양푸른인가

소리를 ‘만드는 것’에서 끝나지 않고, 게임 엔진 안에서 ‘작동하게’ 만드는 사운드 디자이너입니다. 녹음·디자인·구현·현장 운영까지 오디오의 전 과정을 스스로 책임집니다.

{window.STRENGTHS.map((s, i) => (
{s.icon}

{s.title}

{s.desc}

))}

역량 · Skills

{window.SKILLS.map((s) => (
{s.group}
{s.items.map((it) => {it})}
))}

자격증 · Certifications

    {window.CERTS.map((c, i) => (
  • {c.date} {c.name} {c.org}
    • ))}
); } /* ---------- 작업물 카드 ---------- */ function WorkCard({ p, onOpen }) { const [imgOk, setImgOk] = useState(true); return ( ); } /* ---------- 작업물 섹션 ---------- */ function Works({ projects, onOpen }) { const [cat, setCat] = useState("ALL"); const [q, setQ] = useState(""); const [tag, setTag] = useState(null); const [tagsOpen, setTagsOpen] = useState(false); const cats = window.CATEGORIES; const TAG_PREVIEW = 8; // 사용 빈도순 정렬 — 자주 쓰인 태그가 앞에 오도록 const allTags = useMemo(() => { const count = new Map(); projects.forEach((p) => (p.tags || []).forEach((t) => count.set(t, (count.get(t) || 0) + 1))); return Array.from(count.entries()).sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([t]) => t); }, [projects]); // 접혀 있어도 선택된 태그는 항상 보이게 const shownTags = useMemo(() => { if (tagsOpen) return allTags; const head = allTags.slice(0, TAG_PREVIEW); return tag && !head.includes(tag) ? [...head, tag] : head; }, [allTags, tagsOpen, tag]); const filtered = useMemo(() => { const query = q.trim().toLowerCase(); return projects.filter((p) => { if (cat !== "ALL" && !(p.cats || []).includes(cat)) return false; if (tag && !(p.tags || []).includes(tag)) return false; if (!query) return true; return [p.title, p.kind, p.summary, p.desc, ...(p.tags || []), ...(p.tools || [])].join(" ").toLowerCase().includes(query); }); }, [projects, cat, tag, q]); return (
◈ Selected Works

게임 사운드 포트폴리오

상용 게임 사운드 작업부터 트레일러·컷신 사운드 리디자인, Unreal·Wwise 기반 인터랙티브 오디오까지. 카드를 클릭하면 실제 영상이 재생됩니다.

{cats.map((c) => ( ))}
setQ(e.target.value)} placeholder="제목, 미들웨어(Wwise, Reaper) 등…" className="w-full rounded-full border border-line bg-ink-2 px-4 py-2 text-sm text-neutral-200 outline-none focus:border-accent/60 sm:w-72" />
{shownTags.map((t) => ( ))} {allTags.length > TAG_PREVIEW && ( )} {tag && ( )}
{filtered.map((p) => )}
{filtered.length === 0 &&
일치하는 작업물이 없습니다.
}
); } /* ---------- 상세 모달 ---------- */ function ProjectModal({ p, onClose }) { useEffect(() => { const k = (e) => e.key === "Escape" && onClose(); window.addEventListener("keydown", k); document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", k); document.body.style.overflow = ""; }; }, [onClose]); if (!p) return null; return (
e.stopPropagation()}>