/* global React, ReactDOM */ const { useEffect, useRef, useState, useCallback, useMemo } = React; // ---------- TWEAK DEFAULTS ---------- const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#ff6a1a", "displayFont": "Instrument Serif", "cursorTrail": true, "grain": true, "heroVariant": "stacked", "projectCardStyle": "split", "carouselAuto": true }/*EDITMODE-END*/; // ---------- CAROUSEL DATA ---------- const CAROUSEL = [ { id: "c1", kind: "video", client: "Echo Studios", title: "The Long Way Home", type: "Documentary cut", duration: "12:04", year: "2025", metric: "1.2M views", color: "#1f2a1a", }, { id: "c2", kind: "tweet", handle: "@zacksiegel", date: "Apr 18, 2025", body: "shipped a one-week game jam build to 2,400 downloads in 36 hours. devlogs are the marketing.", stats: { likes: "4.2K", reposts: "612", replies: "188" }, }, { id: "c3", kind: "video", client: "Northbeam", title: "Founder, in 90 seconds", type: "Brand film", duration: "1:32", year: "2025", metric: "Series A launch reel", color: "#1a1f2a", }, { id: "c4", kind: "tweet", handle: "@zacksiegel", date: "Feb 03, 2025", body: "three years of editing taught me one thing — the cut should land before the viewer knows why. everything else is decoration.", stats: { likes: "11.8K", reposts: "1.9K", replies: "342" }, }, { id: "c5", kind: "video", client: "Lumen Labs", title: "Hollow Field — Reveal", type: "Game trailer", duration: "1:12", year: "2024", metric: "14k wishlists", color: "#2a1f1a", }, { id: "c6", kind: "tweet", handle: "@zacksiegel", date: "Nov 22, 2024", body: "hot take: the best brand accounts on here read like a person who's slightly tired and slightly amused. corporate voice is a tax you pay for being boring.", stats: { likes: "8.6K", reposts: "1.2K", replies: "294" }, }, ]; // ---------- DATA ---------- const SKILLS = [ { id: "social", num: "01", title: "Social Media Consulting", blurb: "Strategy, content systems, and growth playbooks for brands and creators who want to stop guessing.", deliverables: ["Audit & strategy", "Content pillars", "Posting cadence", "Analytics & iteration"], details: { overview: "I treat social like a system, not a hobby. Brands hire me when they're tired of posting into the void — I give them a content engine they can actually run, plus a strategy that compounds instead of starting over every quarter.", process: [ { step: "01", label: "Audit", body: "Three weeks deep on existing content, competitors, and audience signal. Output: a doc that says exactly what's working and what isn't." }, { step: "02", label: "Strategy", body: "Three to five content pillars, a posting cadence, and a measurement plan we agree on before anything ships." }, { step: "03", label: "Build", body: "Templates, recurring formats, and the first month of content produced with the team so they can keep the cadence solo." }, { step: "04", label: "Iterate", body: "Monthly check-ins for three months. Adjust pillars, double down on what's working, kill what isn't." }, ], wins: [ { metric: "+184%", body: "Follower growth for Northbeam over six months." }, { metric: "2.1M", body: "Organic views for Halo Run's relaunch month." }, { metric: "8k", body: "Waitlist signups for Sidequest pre-launch." }, ], }, }, { id: "games", num: "02", title: "Game Development", blurb: "Concept to ship — gameplay programming, systems design, and rapid prototyping in Unity and Godot.", deliverables: ["Prototyping", "Gameplay systems", "Shaders & FX", "Release & live ops"], details: { overview: "I ship games as a one-person studio and contract on systems work for bigger teams. My sweet spot is gameplay programming with a designer's eye — the kind of code that makes a mechanic feel right, not just function.", process: [ { step: "01", label: "Prototype", body: "One week, one core loop. If the prototype isn't fun, the polished version won't be either." }, { step: "02", label: "Vertical slice", body: "A polished five minutes that proves the art direction, the systems, and the marketing angle all at once." }, { step: "03", label: "Production", body: "Steady cadence, public devlogs, and a Steam page collecting wishlists from day one." }, { step: "04", label: "Ship", body: "Demo → release → patches. Live ops and community management included." }, ], wins: [ { metric: "14k+", body: "Wishlists for Hollow Field in three weeks of devlogs." }, { metric: "Top 12", body: "GMTK Jam 2024 — Splice, out of 4,300 entries." }, { metric: "92%", body: "Positive Steam reviews on Splice demo." }, ], }, }, { id: "esports", num: "03", title: "Esports", blurb: "Competitive player and content operator. Years in the scene mean I know what makes a clip travel, a stream stick, and a team feel like a team.", deliverables: ["Competitive play", "Team content", "Broadcasting", "Coaching"], details: { overview: "I came up competing and stayed for the production side. I know what coaches want from VOD reviews, what casters need from team comms, and what fans actually clip — which is why my content for orgs converts better than the agency stuff.", process: [ { step: "01", label: "Compete", body: "Active rostered player across regional and online leagues — gives me the firsthand context most content people lack." }, { step: "02", label: "Operate", body: "Team logistics, sponsor deliverables, social posting for orgs that need a player who can also run the back office." }, { step: "03", label: "Create", body: "Highlight reels, frag movies, vlog-style team content, broadcast packages." }, { step: "04", label: "Coach", body: "1:1 and small-group sessions on positioning, comms, and the mental side." }, ], wins: [ { metric: "T8", body: "Regional placement, 2025 season." }, { metric: "300k", body: "Combined views on a single team highlight reel." }, { metric: "12", body: "Orgs and creators I've produced content for." }, ], }, }, ]; const PIECES = [ { id: "p1", client: "Echo Studios", type: "Long-form", duration: "12:04", year: "2025", tag: "Documentary cut", color: "#1a2e1a" }, { id: "p2", client: "Halo Run", type: "Short / Reel", duration: "0:42", year: "2025", tag: "Hook + payoff", color: "#2e1a1a" }, { id: "p3", client: "Northbeam", type: "Brand film", duration: "1:58", year: "2025", tag: "Founder story", color: "#1a1a2e" }, { id: "p4", client: "Lumen Labs", type: "Trailer", duration: "1:12", year: "2024", tag: "Game launch", color: "#2e2a1a" }, { id: "p5", client: "Caliber", type: "Montage", duration: "3:20", year: "2024", tag: "Athlete reel", color: "#1a2a2e" }, { id: "p6", client: "Sidequest", type: "Short / Reel", duration: "0:58", year: "2024", tag: "Devlog edit", color: "#2a1a2e" }, ]; const CLIENT_WORK = [ { id: "cw1", client: "Northbeam", industry: "Marketing Analytics", role: "Social Strategy & Content", year: "2025", summary: "Built a founder-led content engine — weekly threads, monthly brand films, and a posting cadence the team could run without me.", deliverables: ["Strategy", "Content system", "Editing"], metric: "+184% follower growth", color: "#1a1f2a", }, { id: "cw2", client: "Lumen Labs", industry: "Indie Game Studio", role: "Gameplay Programming", year: "2025", summary: "Shipped the dialogue, inventory, and save systems for an upcoming narrative RPG. Three months of focused contract work.", deliverables: ["Unity", "C#", "Dialogue tooling"], metric: "Demo at Day of the Devs", color: "#2a1a1f", }, { id: "cw3", client: "Halo Run", industry: "DTC Beverage", role: "Brand & Video", year: "2024", summary: "Six-week sprint reshaping their TikTok presence — content pillars, a shoot day, and 30 short-form edits.", deliverables: ["Strategy", "Editing", "Motion"], metric: "2.1M organic views", color: "#1a2a1f", }, { id: "cw4", client: "Sidequest", industry: "Creator Tools", role: "Launch Consultant", year: "2024", summary: "Took a pre-launch SaaS from zero to 8k waitlist signups through devlog-style marketing across X and YouTube.", deliverables: ["Strategy", "Devlog series", "Editing"], metric: "8k waitlist signups", color: "#1f1a2a", }, ]; const PROJECTS = [ { id: "pr1", num: "01", name: "Hollow Field", kind: "Game · Atmospheric Roguelike", year: "2025", role: "Solo developer", summary: "A first-person scavenger built on a procedurally-grown wheat field. Shipped to 14k wishlists in three weeks of devlogs.", stack: ["Unity", "URP", "C#", "FMOD"], metric: "14k+ wishlists", accent: "#9eff00", details: { timeline: "Mar 2024 → Ongoing", status: "Steam Next Fest 2026", overview: "Hollow Field is a single-player scavenger set on a procedurally regrown wheat field that hides one bad thing per run. I'm building it solo — code, art direction, sound, marketing — and using a public devlog cadence to grow an audience before launch.", sections: [ { label: "Challenge", body: "Selling vibes is hard. The pitch is atmosphere first, mechanics second — which means every devlog has to do the work of a trailer." }, { label: "Outcome", body: "Three devlog episodes took the Steam page from zero to 14k wishlists in 22 days. The fourth pushed it past 18k. The wishlist-to-view ratio is sitting around 9%." }, ], tools: ["Unity 2023", "URP", "C#", "FMOD Studio", "Houdini", "Aseprite", "Blender", "Substance"], gallery: [ { color: "#1f2a1a", label: "Field — wide shot" }, { color: "#2a241a", label: "Inventory UI" }, { color: "#1a1f2a", label: "Devlog #3 thumbnail" }, ], links: [ { label: "Steam page", url: "#" }, { label: "Devlog playlist", url: "#" }, { label: "Press kit", url: "#" }, ], }, }, { id: "pr2", num: "02", name: "Splice", kind: "Game · Co-op Puzzler", year: "2024", role: "Design & Programming", summary: "Two players share one rope. A jam game that grew into a 6-month project with a polished demo and Steam page.", stack: ["Godot", "GDScript", "Steamworks"], metric: "Top 12 of 4,300", accent: "#9eff00", details: { timeline: "Jul 2024 → Jan 2025", status: "Demo on Steam", overview: "Splice started as a 48-hour entry to GMTK Game Jam and placed Top 12 out of 4,300 entries. The mechanic — two players physically share one rope — was strong enough that I shipped a six-month polish pass and a public demo.", sections: [ { label: "Challenge", body: "Online co-op with physics-driven rope state was the hard part. Tick-rate mismatches caused desyncs that broke the puzzle." }, { label: "Outcome", body: "The demo has a 92% positive rating across 340 reviews. Steam wishlist conversion sits at 14% on demo visitors." }, ], tools: ["Godot 4", "GDScript", "Steamworks SDK", "Aseprite"], gallery: [ { color: "#1a2a2a", label: "Co-op puzzle 04" }, { color: "#2a1f2a", label: "Menu screen" }, ], links: [ { label: "Play demo on Steam", url: "#" }, { label: "Jam page", url: "#" }, ], }, }, { id: "pr3", num: "03", name: "Field Notes", kind: "Content System · Personal Brand", year: "2024 — ongoing", role: "Creator & operator", summary: "A weekly devlog series that doubles as the marketing engine for everything else. Built the system, run the cadence.", stack: ["Notion", "DaVinci", "Premiere", "Riverside"], metric: "30k followers", accent: "#9eff00", details: { timeline: "Feb 2024 → Ongoing", status: "Weekly cadence", overview: "Field Notes is the content backbone of everything I do — devlogs, thread posts, podcast clips. The point isn't volume, it's compounding: every game release, every esports run, every consulting engagement gets stitched into the same audience.", sections: [ { label: "Challenge", body: "Consistency. The first nine months were unglamorous — 1k → 4k followers — but the system held and the audience finally caught on." }, { label: "Outcome", body: "30k+ followers across X and YouTube. The list of inbound consulting briefs is now long enough that I can choose who I work with." }, ], tools: ["Notion", "DaVinci Resolve", "Premiere", "Riverside", "Buffer"], gallery: [ { color: "#1a2a1f", label: "Episode index" }, { color: "#2a2a1a", label: "Thread template" }, { color: "#1f1a2a", label: "Analytics dash" }, ], links: [ { label: "YouTube channel", url: "#" }, { label: "X / @zacksiegel", url: "#" }, { label: "Substack archive", url: "#" }, ], }, }, ]; // ---------- HOOKS ---------- function useScrollY() { const [y, setY] = useState(0); useEffect(() => { let raf = 0; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { setY(window.scrollY); raf = 0; }); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return y; } function useReveal() { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }); }, { threshold: 0.15, rootMargin: "0px 0px -10% 0px" } ); io.observe(ref.current); return () => io.disconnect(); }, []); return [ref, shown]; } // ---------- COMPONENTS ---------- function Reveal({ children, delay = 0, as: Tag = "div", className = "", style = {} }) { const [ref, shown] = useReveal(); return ( {children} ); } function Cursor({ enabled }) { const dot = useRef(null); const ring = useRef(null); useEffect(() => { if (!enabled) return; let mx = window.innerWidth / 2, my = window.innerHeight / 2; let rx = mx, ry = my; let raf = 0; let hovering = false; const onMove = (e) => { mx = e.clientX; my = e.clientY; }; const onOver = (e) => { const t = e.target; hovering = !!(t.closest && t.closest("[data-magnet], a, button")); if (ring.current) ring.current.dataset.hover = hovering ? "1" : "0"; }; const tick = () => { rx += (mx - rx) * 0.18; ry += (my - ry) * 0.18; if (dot.current) dot.current.style.transform = `translate3d(${mx - 3}px, ${my - 3}px, 0)`; if (ring.current) ring.current.style.transform = `translate3d(${rx - 18}px, ${ry - 18}px, 0)`; raf = requestAnimationFrame(tick); }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseover", onOver); raf = requestAnimationFrame(tick); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseover", onOver); cancelAnimationFrame(raf); }; }, [enabled]); if (!enabled) return null; return ( <>
); } function Magnet({ children, strength = 18, className = "", style = {} }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const onMove = (e) => { const r = el.getBoundingClientRect(); const x = e.clientX - (r.left + r.width / 2); const y = e.clientY - (r.top + r.height / 2); el.style.transform = `translate(${(x / r.width) * strength}px, ${(y / r.height) * strength}px)`; }; const onLeave = () => { el.style.transform = "translate(0,0)"; }; el.addEventListener("mousemove", onMove); el.addEventListener("mouseleave", onLeave); return () => { el.removeEventListener("mousemove", onMove); el.removeEventListener("mouseleave", onLeave); }; }, [strength]); return ( {children} ); } // ---------- SECTIONS ---------- function TopNav() { return ( ); } function Hero({ accent, displayFont, variant }) { const y = useScrollY(); const [vh, setVh] = useState(typeof window !== "undefined" ? window.innerHeight : 800); useEffect(() => { const onR = () => setVh(window.innerHeight); window.addEventListener("resize", onR); return () => window.removeEventListener("resize", onR); }, []); const progress = Math.min(1, y / vh); const t = (a, b) => a + (b - a) * progress; return (
Portfolio · v.2026
Stony Point, NY · 41.2°N
Currently building → Hollow Field
Zachary Siegel

Social media, games, and esports.

I help brands sound like themselves online, ship games as a one-person studio, and compete and create in the esports scene.

See the work
); } function WorkCarousel({ auto }) { const [idx, setIdx] = useState(0); const [paused, setPaused] = useState(false); const total = CAROUSEL.length; useEffect(() => { if (!auto || paused) return; const t = setInterval(() => setIdx((i) => (i + 1) % total), 5200); return () => clearInterval(t); }, [auto, paused, total]); const go = (n) => setIdx(((n % total) + total) % total); const prev = () => go(idx - 1); const next = () => go(idx + 1); // touch const touch = useRef({ x: 0, t: 0 }); const onTS = (e) => { touch.current = { x: e.touches[0].clientX, t: Date.now() }; }; const onTE = (e) => { const dx = e.changedTouches[0].clientX - touch.current.x; if (Math.abs(dx) > 40) (dx < 0 ? next : prev)(); }; return ( ); } function VideoSlide({ item }) { return (
{item.type}
{item.duration}
[ video — replace with embed ]
{item.client}
{item.year}

{item.title}

↗ {item.metric}
); } function TweetSlide({ item }) { return (
ZS
Zachary Siegel
{item.handle}

{item.body}

{item.date}
{item.stats.replies} Replies
{item.stats.reposts} Reposts
{item.stats.likes} Likes
— Post

Field notes,
in public.

Threads, hot takes, and devlogs that double as the marketing engine.

View on X →
); } function About() { return (
[ portrait — replace with photo ]
— About

I'm Zack. I work across three crafts that all answer the same question: how do you make people feel something on a screen?

For brands, that's a content system that compounds. For games, it's a loop that rewards curiosity. For video, it's the cut you didn't see coming. Different timelines, same instinct.

  • 6+years editing
  • 3games shipped
  • 40+brands consulted
); } function Skills() { const [openId, setOpenId] = useState(null); const toggle = (id) => setOpenId((cur) => (cur === id ? null : id)); return (
— Skills

Three crafts.
One operator.
{SKILLS.map((s, i) => ( toggle(s.id)} /> ))}
); } function SkillRow({ s, expanded, onToggle }) { return (
); } function SkillDetails({ s }) { const d = s.details; if (!d) return null; return (
— Overview

{d.overview}

{d.wins && (
Selected wins
    {d.wins.map((w, i) => (
  • {w.metric} {w.body}
    • ))}
)}
How I work
    {d.process.map((p) => (
  1. {p.step} {p.label}

    {p.body}

    2. ))}
); } function ClientWork() { return (
— Client Work · Built for others

Hired hands.
Shipped things.
{CLIENT_WORK.map((c, i) => ( ))}
); } function ClientCard({ c, num }) { return (
{num}
{c.client.charAt(0)}
{c.client}
{c.industry}
{c.year}
{c.role}

{c.summary}

    {c.deliverables.map((d) =>
  • {d}
    • )}
↗ {c.metric}
); } function Pieces() { return (
— Pieces · Selected video edits

Cuts I made for other people's stories.
{PIECES.map((p, i) => ( ))}
); } function PieceCard({ p }) { return (
{p.duration}
{p.client}
{p.type} · {p.year}
{p.tag}
 ); } function Projects({ style }) { const [openId, setOpenId] = useState(null); const toggle = (id) => setOpenId((cur) => (cur === id ? null : id)); return (
— Projects · Made for myself

The things I build
when nobody's asking.
{PROJECTS.map((pr, i) => ( toggle(pr.id)} /> ))}
); } function ProjectRow({ pr, style, expanded, onToggle }) { const rowRef = useRef(null); const onClick = (e) => { // don't trigger when an inner link/button is clicked inside the detail panel if (e.target.closest(".project-details a, .project-details button")) return; onToggle(); }; const onKey = (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onToggle(); } }; return (
); } function ProjectRowMinimal({ pr, expanded }) { return (
{pr.num}
{pr.name}
{pr.kind}
{pr.year}
); } function ProjectRowSplit({ pr, expanded }) { return (
{pr.num}
{pr.year}
{pr.role}

{pr.name}

{pr.kind}

{pr.summary}

    {pr.stack.map((s) =>
  • {s}
    • )}
[ {pr.name.toUpperCase()} — keyart ]
↗ {pr.metric}
); } function ExpandIcon({ open }) { return (