Zachary Gaetano
2104388ea1
Replaces the Next.js app with the standalone bundle exported from claude.ai/design — same content/SEO, but the site is now a flat static directory: index.html + a few .jsx/.js files + images/, plus a fully self-contained single-file build at standalone.html. Why: the previous Next.js repo had .next/ and node_modules/ committed (~460MB) and edits required a rebuild loop. The design bundle lets content/layout tweaks ship by editing data.js, projects-data.js, components.jsx, or styles.css directly. - index.html single-page entry (React 18 + Babel via unpkg CDN) - styles.css all styles - data.js site copy - projects-data.js case studies - components.jsx sections + project overlay - tweaks-panel.jsx in-page Tweaks panel - llms.txt machine-readable site summary - images/ photos and logos referenced by relative path - standalone.html single-file portable build (all assets inlined)
358 lines
19 KiB
HTML
358 lines
19 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<!-- Inlined resource deps (referenced from JS) -->
|
|
<meta name="ext-resource-dependency" content="images/dragon-mark.png" data-resource-id="images/dragon-mark.png" />
|
|
<meta name="ext-resource-dependency" content="images/wild-dragon-logo.png" data-resource-id="images/wild-dragon-logo.png" />
|
|
<meta name="ext-resource-dependency" content="images/photos/production-switcher.jpg" data-resource-id="images/photos/production-switcher.jpg" />
|
|
<meta name="ext-resource-dependency" content="images/photos/commanders-stadium.jpg" data-resource-id="images/photos/commanders-stadium.jpg" />
|
|
<meta name="ext-resource-dependency" content="images/photos/betmgm-production.jpg" data-resource-id="images/photos/betmgm-production.jpg" />
|
|
<meta name="ext-resource-dependency" content="images/photos/cvs-aetna.jpg" data-resource-id="images/photos/cvs-aetna.jpg" />
|
|
<meta name="ext-resource-dependency" content="images/photos/bmg-control-room.jpg" data-resource-id="images/photos/bmg-control-room.jpg" />
|
|
<meta name="ext-resource-dependency" content="images/photos/control-room-live.jpg" data-resource-id="images/photos/control-room-live.jpg" />
|
|
<meta name="ext-resource-dependency" content="images/photos/tent-production.jpg" data-resource-id="images/photos/tent-production.jpg" />
|
|
<meta name="ext-resource-dependency" content="images/photos/xr-monitor.jpg" data-resource-id="images/photos/xr-monitor.jpg" />
|
|
<meta name="ext-resource-dependency" content="images/clients/bmg.png" data-resource-id="images/clients/bmg.png" />
|
|
<meta name="ext-resource-dependency" content="images/clients/avispl.png" data-resource-id="images/clients/avispl.png" />
|
|
<meta name="ext-resource-dependency" content="images/clients/nbc-sports.png" data-resource-id="images/clients/nbc-sports.png" />
|
|
<meta name="ext-resource-dependency" content="images/clients/commanders.png" data-resource-id="images/clients/commanders.png" />
|
|
<meta name="ext-resource-dependency" content="images/clients/cvs.png" data-resource-id="images/clients/cvs.png" />
|
|
<meta name="ext-resource-dependency" content="images/clients/ubs.png" data-resource-id="images/clients/ubs.png" />
|
|
<meta name="ext-resource-dependency" content="images/clients/betmgm.svg" data-resource-id="images/clients/betmgm.svg" />
|
|
<meta name="ext-resource-dependency" content="images/clients/intuit.png" data-resource-id="images/clients/intuit.png" />
|
|
<meta name="ext-resource-dependency" content="images/clients/monumental.svg" data-resource-id="images/clients/monumental.svg" />
|
|
<meta name="ext-resource-dependency" content="images/clients/cosm.svg" data-resource-id="images/clients/cosm.svg" />
|
|
<meta name="ext-resource-dependency" content="images/clients/redsands.svg" data-resource-id="images/clients/redsands.svg" />
|
|
<meta name="ext-resource-dependency" content="images/clients/thor-logo.png" data-resource-id="images/clients/thor-logo.png" />
|
|
<meta name="ext-resource-dependency" content="images/clients/ross-video.png" data-resource-id="images/clients/ross-video.png" />
|
|
<meta name="ext-resource-dependency" content="images/clients/filmtools.png" data-resource-id="images/clients/filmtools.png" />
|
|
<meta name="ext-resource-dependency" content="images/clients/forecast.png" data-resource-id="images/clients/forecast.png" />
|
|
<meta name="ext-resource-dependency" content="images/clients/vmix.png" data-resource-id="images/clients/vmix.png" />
|
|
<meta name="ext-resource-dependency" content="images/partners/red-digital.png" data-resource-id="images/partners/red-digital.png" />
|
|
<script>window.__R = function(p){ return (window.__resources && window.__resources[p]) || p; };</script>
|
|
|
|
|
|
<!-- Primary SEO -->
|
|
<title>Zachary Gaetano | Broadcast Systems Design, Integration & Commissioning — Wild Dragon</title>
|
|
<meta name="description" content="Zachary Gaetano — Principal Design Engineer and Lead Commissioner specializing in broadcast systems integration, IP/SMPTE ST 2110 facility design, cloud production, and XR stages. Projects for UBS, CVS/Aetna, Washington Commanders, BetMGM, Intuit, Monumental Sports, NBC Sports, and COSM. Washington DC / DMV." />
|
|
<meta name="keywords" content="broadcast systems integration, broadcast systems design, principal design engineer, lead commissioner, broadcast engineering, SMPTE ST 2110, IP broadcast infrastructure, cloud production, headless broadcast facility, control room design, XR virtual production, LED volume, Ross Video integrator, vMix systems designer, NDI, SRT, JPEG XS, Washington DC broadcast engineer, DMV broadcast integrator, Arri Trinity operator, DIT, RED Komodo-X, Wild Dragon" />
|
|
<meta name="author" content="Zachary Gaetano" />
|
|
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
|
|
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
|
|
<meta name="geo.region" content="US-DC" />
|
|
<meta name="geo.placename" content="Washington, DC" />
|
|
<link rel="canonical" href="https://www.wilddragon.net/" />
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content="Wild Dragon" />
|
|
<meta property="og:locale" content="en_US" />
|
|
<meta property="og:url" content="https://www.wilddragon.net/" />
|
|
<meta property="og:title" content="Zachary Gaetano | Broadcast Systems Design, Integration & Commissioning" />
|
|
<meta property="og:description" content="Principal Design Engineer and Lead Commissioner — broadcast facility design, IP/SMPTE ST 2110 infrastructure, cloud production, and XR stages for enterprise, sports, and financial clients." />
|
|
<meta property="og:image" content="https://www.wilddragon.net/images/wild-dragon-logo.jpg" />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta property="og:image:alt" content="Wild Dragon — Broadcast Systems Integration" />
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Zachary Gaetano | Broadcast Systems Design, Integration & Commissioning" />
|
|
<meta name="twitter:description" content="Principal Design Engineer and Lead Commissioner. Broadcast facility design, IP infrastructure, cloud production, and XR stages." />
|
|
<meta name="twitter:image" content="https://www.wilddragon.net/images/wild-dragon-logo.jpg" />
|
|
|
|
<!-- Icons & theme -->
|
|
<meta name="theme-color" content="#0a0a0a" />
|
|
<link rel="icon" href="images/dragon-mark.png" type="image/png" />
|
|
<link rel="apple-touch-icon" href="images/dragon-mark.png" />
|
|
|
|
<!-- Performance hints -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="preconnect" href="https://player.vimeo.com" />
|
|
<link rel="dns-prefetch" href="//vimeo.com" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<style>:root{--font-inter:"Inter";--font-mono-stack:"JetBrains Mono"}</style>
|
|
|
|
<!-- Structured data -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@graph": [
|
|
{
|
|
"@type": "Person",
|
|
"@id": "https://www.wilddragon.net/#person",
|
|
"name": "Zachary Gaetano",
|
|
"jobTitle": "Principal Design Engineer & Lead Commissioner — Broadcast Systems",
|
|
"url": "https://www.wilddragon.net/",
|
|
"image": "https://www.wilddragon.net/images/wild-dragon-logo.jpg",
|
|
"sameAs": [
|
|
"https://www.linkedin.com/in/zachary-gaetano-05962386/",
|
|
"https://vimeo.com/zachary_gaetano"
|
|
],
|
|
"worksFor": {
|
|
"@type": "Organization",
|
|
"name": "Broadcast Management Group",
|
|
"url": "https://broadcastmgmt.com"
|
|
},
|
|
"address": {
|
|
"@type": "PostalAddress",
|
|
"addressRegion": "DC",
|
|
"addressCountry": "US"
|
|
},
|
|
"knowsAbout": [
|
|
"Broadcast Systems Integration",
|
|
"Broadcast Systems Design",
|
|
"Production Facility Design",
|
|
"Control Room Engineering",
|
|
"SMPTE ST 2110",
|
|
"NDI",
|
|
"SRT",
|
|
"JPEG XS",
|
|
"Cloud Production",
|
|
"Headless Broadcast Facilities",
|
|
"IP Broadcast Infrastructure",
|
|
"Extended Reality Production",
|
|
"LED Volume Integration",
|
|
"Ross Video",
|
|
"vMix",
|
|
"Arri Trinity Operation",
|
|
"Digital Imaging Technician (DIT)",
|
|
"RED Cinema Cameras"
|
|
]
|
|
},
|
|
{
|
|
"@type": "ProfessionalService",
|
|
"@id": "https://www.wilddragon.net/#organization",
|
|
"name": "Wild Dragon",
|
|
"description": "Broadcast systems design, integration, and commissioning for sports, corporate, financial services, and defense organizations.",
|
|
"url": "https://www.wilddragon.net/",
|
|
"logo": "https://www.wilddragon.net/images/wild-dragon-logo.jpg",
|
|
"image": "https://www.wilddragon.net/images/wild-dragon-logo.jpg",
|
|
"founder": { "@id": "https://www.wilddragon.net/#person" },
|
|
"areaServed": "United States",
|
|
"address": {
|
|
"@type": "PostalAddress",
|
|
"addressRegion": "DC",
|
|
"addressCountry": "US"
|
|
},
|
|
"contactPoint": {
|
|
"@type": "ContactPoint",
|
|
"email": "zgaetano@wilddragon.net",
|
|
"contactType": "sales",
|
|
"areaServed": "US",
|
|
"availableLanguage": "English"
|
|
},
|
|
"knowsAbout": [
|
|
"Broadcast Systems Integration",
|
|
"SMPTE ST 2110",
|
|
"Cloud Production",
|
|
"Control Room Design",
|
|
"XR / Virtual Production",
|
|
"IP Broadcast Infrastructure"
|
|
]
|
|
},
|
|
{
|
|
"@type": "WebSite",
|
|
"@id": "https://www.wilddragon.net/#website",
|
|
"url": "https://www.wilddragon.net/",
|
|
"name": "Wild Dragon",
|
|
"publisher": { "@id": "https://www.wilddragon.net/#organization" },
|
|
"inLanguage": "en-US"
|
|
},
|
|
{
|
|
"@type": "VideoObject",
|
|
"@id": "https://www.wilddragon.net/#showreel",
|
|
"name": "Zachary Gaetano — Trinity Operator & DIT Showreel",
|
|
"description": "Showreel for Zachary Gaetano — certified Arri Trinity operator and DIT based in the Washington DC area. Commercial, sports, documentary, and narrative work shot on RED Komodo-X and Arri Trinity.",
|
|
"thumbnailUrl": "https://vumbnail.com/225920311.jpg",
|
|
"embedUrl": "https://player.vimeo.com/video/225920311",
|
|
"contentUrl": "https://vimeo.com/225920311",
|
|
"uploadDate": "2017-01-01",
|
|
"creator": { "@id": "https://www.wilddragon.net/#person" }
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
|
|
<script src="data.js"></script>
|
|
<script src="projects-data.js"></script>
|
|
<script type="text/babel" src="components.jsx"></script>
|
|
<script type="text/babel" src="tweaks-panel.jsx"></script>
|
|
|
|
<script type="text/babel">
|
|
const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
|
|
"accentPreset": "blue",
|
|
"accent": "#3b82f6",
|
|
"accentLight": "#60a5fa",
|
|
"primary": "#0a0a0a",
|
|
"headingFont": "Inter",
|
|
"monoFont": "JetBrains Mono",
|
|
"imageTreatment": "default",
|
|
"density": "comfortable",
|
|
"marquee": true,
|
|
"cursorGlow": true,
|
|
"showPartners": true,
|
|
"showStats": true,
|
|
"showServices": true,
|
|
"showTech": true,
|
|
"showOnSet": true,
|
|
"ctaLabel": "View Projects"
|
|
}/*EDITMODE-END*/;
|
|
|
|
const FONT_OPTIONS = ["Inter","Manrope","Space Grotesk","DM Sans","Outfit","Plus Jakarta Sans","IBM Plex Sans","Geist","Fraunces"];
|
|
const MONO_OPTIONS = ["JetBrains Mono","IBM Plex Mono","Space Mono","Roboto Mono","Fira Code","Geist Mono"];
|
|
|
|
const ACCENT_PRESETS = {
|
|
blue: { accent:"#3b82f6", accentLight:"#60a5fa", label:"Blue" },
|
|
ember: { accent:"#e25822", accentLight:"#f3895a", label:"Ember" },
|
|
amber: { accent:"#f59e0b", accentLight:"#fbbf24", label:"Amber" },
|
|
ruby: { accent:"#dc2626", accentLight:"#f87171", label:"Ruby" },
|
|
mono: { accent:"#e5e5e5", accentLight:"#ffffff", label:"Mono" },
|
|
};
|
|
|
|
function loadFont(family) {
|
|
const id = "wd-font-" + family.replace(/\s/g,"-");
|
|
if (document.getElementById(id)) return;
|
|
const l = document.createElement("link");
|
|
l.id = id; l.rel = "stylesheet";
|
|
l.href = `https://fonts.googleapis.com/css2?family=${family.replace(/\s/g,"+")}:wght@300;400;500;600;700&display=swap`;
|
|
document.head.appendChild(l);
|
|
}
|
|
|
|
function App() {
|
|
const [tweaks, setTweak] = useTweaks(TWEAKS_DEFAULTS);
|
|
const [openSlug, setOpenSlug] = React.useState(() => {
|
|
const m = location.hash.match(/#\/projects\/([\w-]+)/);
|
|
return m ? m[1] : null;
|
|
});
|
|
|
|
React.useEffect(() => {
|
|
if (openSlug) location.hash = `#/projects/${openSlug}`;
|
|
else if (location.hash.startsWith("#/projects/")) location.hash = "";
|
|
}, [openSlug]);
|
|
|
|
React.useEffect(() => {
|
|
loadFont(tweaks.headingFont);
|
|
loadFont(tweaks.monoFont);
|
|
const r = document.documentElement.style;
|
|
r.setProperty("--color-accent", tweaks.accent);
|
|
r.setProperty("--color-accent-light", tweaks.accentLight);
|
|
r.setProperty("--color-primary", tweaks.primary);
|
|
r.setProperty("--font-inter", `"${tweaks.headingFont}"`);
|
|
r.setProperty("--font-mono-stack", `"${tweaks.monoFont}"`);
|
|
}, [tweaks]);
|
|
|
|
// Image treatment via class on body
|
|
React.useEffect(() => {
|
|
document.body.dataset.imgTreat = tweaks.imageTreatment;
|
|
document.body.dataset.density = tweaks.density;
|
|
}, [tweaks.imageTreatment, tweaks.density]);
|
|
|
|
const onAccentPreset = (key) => {
|
|
const p = ACCENT_PRESETS[key];
|
|
if (!p) return;
|
|
setTweak({ accentPreset: key, accent: p.accent, accentLight: p.accentLight });
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Curtain/>
|
|
{tweaks.cursorGlow && <CursorDot/>}
|
|
<Navigation/>
|
|
<Hero ctaLabel={tweaks.ctaLabel}/>
|
|
<Clients marquee={tweaks.marquee}/>
|
|
{tweaks.showPartners && <Partners/>}
|
|
<About/>
|
|
{tweaks.showStats && <Stats/>}
|
|
{tweaks.showServices && <Services/>}
|
|
<Projects onOpen={setOpenSlug}/>
|
|
{tweaks.showTech && <TechStack/>}
|
|
{tweaks.showOnSet && <OnSet/>}
|
|
<Contact/>
|
|
<Footer/>
|
|
|
|
{openSlug && <ProjectOverlay slug={openSlug} onClose={()=>setOpenSlug(null)} onOpen={setOpenSlug}/>}
|
|
|
|
<TweaksPanel title="Tweaks">
|
|
<TweakSection title="Accent">
|
|
<TweakRadio label="Preset" value={tweaks.accentPreset}
|
|
options={Object.entries(ACCENT_PRESETS).map(([k,v]) => ({value:k, label:v.label}))}
|
|
onChange={onAccentPreset} />
|
|
<TweakColor label="Accent" value={tweaks.accent} onChange={v => setTweak("accent", v)} />
|
|
<TweakColor label="Accent (hover)" value={tweaks.accentLight} onChange={v => setTweak("accentLight", v)} />
|
|
<TweakColor label="Background" value={tweaks.primary} onChange={v => setTweak("primary", v)} />
|
|
</TweakSection>
|
|
<TweakSection title="Typography">
|
|
<TweakSelect label="Heading / Body" value={tweaks.headingFont} options={FONT_OPTIONS} onChange={v => setTweak("headingFont", v)} />
|
|
<TweakSelect label="Mono" value={tweaks.monoFont} options={MONO_OPTIONS} onChange={v => setTweak("monoFont", v)} />
|
|
</TweakSection>
|
|
<TweakSection title="Layout">
|
|
<TweakToggle label="Logo marquee" value={tweaks.marquee} onChange={v => setTweak("marquee", v)} />
|
|
<TweakToggle label="Cursor glow" value={tweaks.cursorGlow} onChange={v => setTweak("cursorGlow", v)} />
|
|
<TweakRadio label="Density" value={tweaks.density}
|
|
options={[{value:"comfortable",label:"Comfy"},{value:"compact",label:"Compact"}]}
|
|
onChange={v => setTweak("density", v)} />
|
|
</TweakSection>
|
|
<TweakSection title="Imagery">
|
|
<TweakRadio label="Treatment" value={tweaks.imageTreatment}
|
|
options={[{value:"default",label:"Color"},{value:"grayscale",label:"B&W"},{value:"tint",label:"Tint"}]}
|
|
onChange={v => setTweak("imageTreatment", v)} />
|
|
</TweakSection>
|
|
<TweakSection title="Sections">
|
|
<TweakToggle label="Partners strip" value={tweaks.showPartners} onChange={v => setTweak("showPartners", v)} />
|
|
<TweakToggle label="Stats" value={tweaks.showStats} onChange={v => setTweak("showStats", v)} />
|
|
<TweakToggle label="Process" value={tweaks.showServices} onChange={v => setTweak("showServices", v)} />
|
|
<TweakToggle label="Tech stack" value={tweaks.showTech} onChange={v => setTweak("showTech", v)} />
|
|
<TweakToggle label="On Set" value={tweaks.showOnSet} onChange={v => setTweak("showOnSet", v)} />
|
|
</TweakSection>
|
|
<TweakSection title="Copy">
|
|
<TweakText label="Hero CTA" value={tweaks.ctaLabel} onChange={v => setTweak("ctaLabel", v)} />
|
|
</TweakSection>
|
|
</TweaksPanel>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById("root"));
|
|
root.render(<App/>);
|
|
</script>
|
|
|
|
<style>
|
|
/* image treatments */
|
|
body[data-img-treat="grayscale"] .hero-bg img,
|
|
body[data-img-treat="grayscale"] .proj-img img,
|
|
body[data-img-treat="grayscale"] .po-image img { filter: grayscale(1); }
|
|
body[data-img-treat="tint"] .hero-bg img,
|
|
body[data-img-treat="tint"] .proj-img img,
|
|
body[data-img-treat="tint"] .po-image img { filter: grayscale(.4) sepia(.3) hue-rotate(180deg) saturate(1.3); }
|
|
body[data-density="compact"] section.about, body[data-density="compact"] section.services,
|
|
body[data-density="compact"] section.projects, body[data-density="compact"] section.tech,
|
|
body[data-density="compact"] section.contact, body[data-density="compact"] section.onset { padding-top: 4.5rem; padding-bottom: 4.5rem; }
|
|
</style>
|
|
|
|
<template id="__bundler_thumbnail" data-bg-color="#0a0a0a">
|
|
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="1200" height="800" fill="#0a0a0a"/>
|
|
<g transform="translate(600,400)" fill="none" stroke="#3b82f6" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M -180 -40 L -60 -160 L 60 -160 L 180 -40 L 60 80 L -60 80 Z"/>
|
|
<circle cx="0" cy="-30" r="38"/>
|
|
<path d="M -90 130 L 90 130"/>
|
|
</g>
|
|
<text x="600" y="640" text-anchor="middle" fill="#e5e5e5" font-family="Inter, Arial, sans-serif" font-size="44" font-weight="600" letter-spacing="6">WILD DRAGON</text>
|
|
<text x="600" y="690" text-anchor="middle" fill="#888" font-family="Inter, Arial, sans-serif" font-size="22" letter-spacing="3">BROADCAST SYSTEMS</text>
|
|
</svg>
|
|
</template>
|
|
</body>
|
|
</html>
|