diff --git a/app.jsx b/app.jsx index 0ba85d4..2b61706 100644 --- a/app.jsx +++ b/app.jsx @@ -12,6 +12,7 @@ const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{ "showPartners": true, "showStats": true, "showServices": true, + "showCorridors": true, "showTech": true, "showOnSet": true, "ctaLabel": "View Projects" @@ -83,6 +84,7 @@ function App() { {tweaks.showStats && } {tweaks.showServices && } + {tweaks.showCorridors !== false && } {tweaks.showTech && } {tweaks.showOnSet && } diff --git a/app.min.js b/app.min.js index 22daeef..2952e70 100644 --- a/app.min.js +++ b/app.min.js @@ -1 +1 @@ -const TWEAKS_DEFAULTS={accentPreset:"blue",accent:"#3b82f6",accentLight:"#60a5fa",primary:"#0a0a0a",headingFont:"Inter",monoFont:"JetBrains Mono",imageTreatment:"default",density:"comfortable",marquee:!0,cursorGlow:!0,showPartners:!0,showStats:!0,showServices:!0,showTech:!0,showOnSet:!0,ctaLabel:"View Projects"},FONT_OPTIONS=["Inter","Manrope","Space Grotesk","DM Sans","Outfit","Plus Jakarta Sans","IBM Plex Sans","Geist","Fraunces"],MONO_OPTIONS=["JetBrains Mono","IBM Plex Mono","Space Mono","Roboto Mono","Fira Code","Geist Mono"],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(t){const a="wd-font-"+t.replace(/\s/g,"-");if(document.getElementById(a))return;const o=document.createElement("link");o.id=a,o.rel="stylesheet",o.href=`https://fonts.googleapis.com/css2?family=${t.replace(/\s/g,"+")}:wght@300;400;500;600;700&display=swap`,document.head.appendChild(o)}function App(){const[t,a]=useTweaks(TWEAKS_DEFAULTS),[o,c]=React.useState(()=>{const e=location.hash.match(/#\/projects\/([\w-]+)/);return e?e[1]:null});React.useEffect(()=>{o?location.hash=`#/projects/${o}`:location.hash.startsWith("#/projects/")&&(location.hash="")},[o]),React.useEffect(()=>{loadFont(t.headingFont),loadFont(t.monoFont);const e=document.documentElement.style;e.setProperty("--color-accent",t.accent),e.setProperty("--color-accent-light",t.accentLight),e.setProperty("--color-primary",t.primary),e.setProperty("--font-inter",`"${t.headingFont}"`),e.setProperty("--font-mono-stack",`"${t.monoFont}"`)},[t]),React.useEffect(()=>{document.body.dataset.imgTreat=t.imageTreatment,document.body.dataset.density=t.density},[t.imageTreatment,t.density]);const l=e=>{const n=ACCENT_PRESETS[e];n&&a({accentPreset:e,accent:n.accent,accentLight:n.accentLight})};return React.createElement(React.Fragment,null,React.createElement(Curtain,null),t.cursorGlow&&React.createElement(CursorDot,null),React.createElement(Navigation,null),React.createElement(Hero,{ctaLabel:t.ctaLabel}),React.createElement(Clients,{marquee:t.marquee}),t.showPartners&&React.createElement(Partners,null),React.createElement(About,null),t.showStats&&React.createElement(Stats,null),t.showServices&&React.createElement(Services,null),React.createElement(Projects,{onOpen:c}),t.showTech&&React.createElement(TechStack,null),t.showOnSet&&React.createElement(OnSet,null),React.createElement(Contact,null),React.createElement(Footer,null),o&&React.createElement(ProjectOverlay,{slug:o,onClose:()=>c(null),onOpen:c}),React.createElement(TweaksPanel,{title:"Tweaks"},React.createElement(TweakSection,{title:"Accent"},React.createElement(TweakRadio,{label:"Preset",value:t.accentPreset,options:Object.entries(ACCENT_PRESETS).map(([e,n])=>({value:e,label:n.label})),onChange:l}),React.createElement(TweakColor,{label:"Accent",value:t.accent,onChange:e=>a("accent",e)}),React.createElement(TweakColor,{label:"Accent (hover)",value:t.accentLight,onChange:e=>a("accentLight",e)}),React.createElement(TweakColor,{label:"Background",value:t.primary,onChange:e=>a("primary",e)})),React.createElement(TweakSection,{title:"Typography"},React.createElement(TweakSelect,{label:"Heading / Body",value:t.headingFont,options:FONT_OPTIONS,onChange:e=>a("headingFont",e)}),React.createElement(TweakSelect,{label:"Mono",value:t.monoFont,options:MONO_OPTIONS,onChange:e=>a("monoFont",e)})),React.createElement(TweakSection,{title:"Layout"},React.createElement(TweakToggle,{label:"Logo marquee",value:t.marquee,onChange:e=>a("marquee",e)}),React.createElement(TweakToggle,{label:"Cursor glow",value:t.cursorGlow,onChange:e=>a("cursorGlow",e)}),React.createElement(TweakRadio,{label:"Density",value:t.density,options:[{value:"comfortable",label:"Comfy"},{value:"compact",label:"Compact"}],onChange:e=>a("density",e)})),React.createElement(TweakSection,{title:"Imagery"},React.createElement(TweakRadio,{label:"Treatment",value:t.imageTreatment,options:[{value:"default",label:"Color"},{value:"grayscale",label:"B&W"},{value:"tint",label:"Tint"}],onChange:e=>a("imageTreatment",e)})),React.createElement(TweakSection,{title:"Sections"},React.createElement(TweakToggle,{label:"Partners strip",value:t.showPartners,onChange:e=>a("showPartners",e)}),React.createElement(TweakToggle,{label:"Stats",value:t.showStats,onChange:e=>a("showStats",e)}),React.createElement(TweakToggle,{label:"Process",value:t.showServices,onChange:e=>a("showServices",e)}),React.createElement(TweakToggle,{label:"Tech stack",value:t.showTech,onChange:e=>a("showTech",e)}),React.createElement(TweakToggle,{label:"On Set",value:t.showOnSet,onChange:e=>a("showOnSet",e)})),React.createElement(TweakSection,{title:"Copy"},React.createElement(TweakText,{label:"Hero CTA",value:t.ctaLabel,onChange:e=>a("ctaLabel",e)}))))}const root=ReactDOM.createRoot(document.getElementById("root"));root.render(React.createElement(App,null)); +const TWEAKS_DEFAULTS={accentPreset:"blue",accent:"#3b82f6",accentLight:"#60a5fa",primary:"#0a0a0a",headingFont:"Inter",monoFont:"JetBrains Mono",imageTreatment:"default",density:"comfortable",marquee:!0,cursorGlow:!0,showPartners:!0,showStats:!0,showServices:!0,showCorridors:!0,showTech:!0,showOnSet:!0,ctaLabel:"View Projects"},FONT_OPTIONS=["Inter","Manrope","Space Grotesk","DM Sans","Outfit","Plus Jakarta Sans","IBM Plex Sans","Geist","Fraunces"],MONO_OPTIONS=["JetBrains Mono","IBM Plex Mono","Space Mono","Roboto Mono","Fira Code","Geist Mono"],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(t){const a="wd-font-"+t.replace(/\s/g,"-");if(document.getElementById(a))return;const o=document.createElement("link");o.id=a,o.rel="stylesheet",o.href=`https://fonts.googleapis.com/css2?family=${t.replace(/\s/g,"+")}:wght@300;400;500;600;700&display=swap`,document.head.appendChild(o)}function App(){const[t,a]=useTweaks(TWEAKS_DEFAULTS),[o,c]=React.useState(()=>{const e=location.hash.match(/#\/projects\/([\w-]+)/);return e?e[1]:null});React.useEffect(()=>{o?location.hash=`#/projects/${o}`:location.hash.startsWith("#/projects/")&&(location.hash="")},[o]),React.useEffect(()=>{loadFont(t.headingFont),loadFont(t.monoFont);const e=document.documentElement.style;e.setProperty("--color-accent",t.accent),e.setProperty("--color-accent-light",t.accentLight),e.setProperty("--color-primary",t.primary),e.setProperty("--font-inter",`"${t.headingFont}"`),e.setProperty("--font-mono-stack",`"${t.monoFont}"`)},[t]),React.useEffect(()=>{document.body.dataset.imgTreat=t.imageTreatment,document.body.dataset.density=t.density},[t.imageTreatment,t.density]);const l=e=>{const n=ACCENT_PRESETS[e];n&&a({accentPreset:e,accent:n.accent,accentLight:n.accentLight})};return React.createElement(React.Fragment,null,React.createElement(Curtain,null),t.cursorGlow&&React.createElement(CursorDot,null),React.createElement(Navigation,null),React.createElement(Hero,{ctaLabel:t.ctaLabel}),React.createElement(Clients,{marquee:t.marquee}),t.showPartners&&React.createElement(Partners,null),React.createElement(About,null),t.showStats&&React.createElement(Stats,null),t.showServices&&React.createElement(Services,null),t.showCorridors!==!1&&React.createElement(RegionalCorridors,null),React.createElement(Projects,{onOpen:c}),t.showTech&&React.createElement(TechStack,null),t.showOnSet&&React.createElement(OnSet,null),React.createElement(Contact,null),React.createElement(Footer,null),o&&React.createElement(ProjectOverlay,{slug:o,onClose:()=>c(null),onOpen:c}),React.createElement(TweaksPanel,{title:"Tweaks"},React.createElement(TweakSection,{title:"Accent"},React.createElement(TweakRadio,{label:"Preset",value:t.accentPreset,options:Object.entries(ACCENT_PRESETS).map(([e,n])=>({value:e,label:n.label})),onChange:l}),React.createElement(TweakColor,{label:"Accent",value:t.accent,onChange:e=>a("accent",e)}),React.createElement(TweakColor,{label:"Accent (hover)",value:t.accentLight,onChange:e=>a("accentLight",e)}),React.createElement(TweakColor,{label:"Background",value:t.primary,onChange:e=>a("primary",e)})),React.createElement(TweakSection,{title:"Typography"},React.createElement(TweakSelect,{label:"Heading / Body",value:t.headingFont,options:FONT_OPTIONS,onChange:e=>a("headingFont",e)}),React.createElement(TweakSelect,{label:"Mono",value:t.monoFont,options:MONO_OPTIONS,onChange:e=>a("monoFont",e)})),React.createElement(TweakSection,{title:"Layout"},React.createElement(TweakToggle,{label:"Logo marquee",value:t.marquee,onChange:e=>a("marquee",e)}),React.createElement(TweakToggle,{label:"Cursor glow",value:t.cursorGlow,onChange:e=>a("cursorGlow",e)}),React.createElement(TweakRadio,{label:"Density",value:t.density,options:[{value:"comfortable",label:"Comfy"},{value:"compact",label:"Compact"}],onChange:e=>a("density",e)})),React.createElement(TweakSection,{title:"Imagery"},React.createElement(TweakRadio,{label:"Treatment",value:t.imageTreatment,options:[{value:"default",label:"Color"},{value:"grayscale",label:"B&W"},{value:"tint",label:"Tint"}],onChange:e=>a("imageTreatment",e)})),React.createElement(TweakSection,{title:"Sections"},React.createElement(TweakToggle,{label:"Partners strip",value:t.showPartners,onChange:e=>a("showPartners",e)}),React.createElement(TweakToggle,{label:"Stats",value:t.showStats,onChange:e=>a("showStats",e)}),React.createElement(TweakToggle,{label:"Process",value:t.showServices,onChange:e=>a("showServices",e)}),React.createElement(TweakToggle,{label:"Tech stack",value:t.showTech,onChange:e=>a("showTech",e)}),React.createElement(TweakToggle,{label:"On Set",value:t.showOnSet,onChange:e=>a("showOnSet",e)})),React.createElement(TweakSection,{title:"Copy"},React.createElement(TweakText,{label:"Hero CTA",value:t.ctaLabel,onChange:e=>a("ctaLabel",e)}))))}const root=ReactDOM.createRoot(document.getElementById("root"));root.render(React.createElement(App,null)); diff --git a/av-installation-dmv/index.html b/av-installation-dmv/index.html index c8484a0..5e04e95 100644 --- a/av-installation-dmv/index.html +++ b/av-installation-dmv/index.html @@ -64,13 +64,16 @@ ul.sp-list{padding-left:1.25rem;color:var(--color-muted);line-height:1.8} diff --git a/bethesda-rockville-av/index.html b/bethesda-rockville-av/index.html index 3bab2fb..e5df1c2 100644 --- a/bethesda-rockville-av/index.html +++ b/bethesda-rockville-av/index.html @@ -64,13 +64,16 @@ ul.sp-list{padding-left:1.25rem;color:var(--color-muted);line-height:1.8} diff --git a/broadcast-integration-dmv/index.html b/broadcast-integration-dmv/index.html index e525d06..51f4893 100644 --- a/broadcast-integration-dmv/index.html +++ b/broadcast-integration-dmv/index.html @@ -64,13 +64,16 @@ ul.sp-list{padding-left:1.25rem;color:var(--color-muted);line-height:1.8} diff --git a/build-pages.mjs b/build-pages.mjs index 1c59bb5..8f5eb07 100644 --- a/build-pages.mjs +++ b/build-pages.mjs @@ -30,13 +30,16 @@ const NAV = `
const FOOTER = `
- +
`; // ponytail: page-local CSS instead of touching styles.css — the SPA never renders these pages. diff --git a/components.jsx b/components.jsx index 2fe11a3..f9d0149 100644 --- a/components.jsx +++ b/components.jsx @@ -18,34 +18,40 @@ const Mail = (p) => ; const Linkedin = (p) => ; const ExternalLink = (p) => ; -const Radio = (p) => ; -const Tv = (p) => ; -const Cloud = (p) => ; -const Cable = (p) => ; -const Ruler = (p) => ; -const Wrench = (p) => ; -const MonitorCheck = (p) => ; -const Headset = (p) => ; -const Camera = (p) => ; -const Film = (p) => ; -const Package = (p) => ; -const Monitor = (p) => ; +const Play = (p) => ; +const Check = (p) => ; +const Server = (p) => ; +const Radio = (p) => ; +const Cable = (p) => ; +const Cloud = (p) => ; +const Tv = (p) => ; +const Cpu = (p) => ; +const ShieldCheck = (p) => ; +const Ruler = (p) => ; +const Wrench = (p) => ; +const MonitorCheck = (p) => ; +const Headset = (p) => ; +const Star = (p) => ; +const Sparkles = (p) => ; -// ─── Reveal wrapper ────────────────────────────────────────────────────────── -function Reveal({ children, delay = 0, className = "" }) { +// ─── Reveal helper ──────────────────────────────────────────────────────────── +function Reveal({ children, className = "", delay = 0 }) { const ref = useRef(null); - const [visible, setVisible] = useState(false); + const [vis, setVis] = useState(false); useEffect(() => { + const el = ref.current; + if (!el) return; const obs = new IntersectionObserver(([e]) => { - if (e.isIntersecting) { - setTimeout(() => setVisible(true), delay); - obs.unobserve(e.target); - } - }, { threshold: 0.1, rootMargin: "0px 0px -60px 0px" }); - if (ref.current) obs.observe(ref.current); + if (e.isIntersecting) { setVis(true); obs.unobserve(el); } + }, { threshold: 0.1, rootMargin: "0px 0px -40px 0px" }); + obs.observe(el); return () => obs.disconnect(); - }, [delay]); - return
{children}
; + }, []); + return ( +
+ {children} +
+ ); } // ─── Cursor follower ───────────────────────────────────────────────────────── @@ -81,16 +87,23 @@ function Navigation() { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); - const links = [{href:"#about",label:"About"},{href:"#projects",label:"Projects"},{href:"#on-set",label:"On Set"},{href:"#contact",label:"Contact"}]; + const links = [ + { href: "#services", label: "Capabilities" }, + { href: "#corridors", label: "Regional" }, + { href: "#projects", label: "Projects" }, + { href: "#about", label: "About" }, + { href: "#contact", label: "Contact" } + ]; return ( ); @@ -106,9 +120,11 @@ function Navigation() { // ─── HERO ──────────────────────────────────────────────────────────────────── const HERO_ROLES = [ "Broadcast Systems Integration", - "Production Facility Design", - "IP & Cloud Production", - "Extended Reality Stages", + "Commercial AV Installation", + "SMPTE ST 2110 IP Facilities", + "Production Control Rooms", + "Direct-View LED Video Walls", + "Extended Reality (XR) Stages" ]; function Hero({ ctaLabel }) { const [loaded, setLoaded] = useState(false); @@ -120,10 +136,10 @@ function Hero({ ctaLabel }) { const role = HERO_ROLES[idx]; if (typing) { if (text.length < role.length) { - const t = setTimeout(() => setText(role.slice(0, text.length + 1)), 50); + const t = setTimeout(() => setText(role.slice(0, text.length + 1)), 45); return () => clearTimeout(t); } else { - const t = setTimeout(() => setTyping(false), 2500); + const t = setTimeout(() => setTyping(false), 2400); return () => clearTimeout(t); } } else { @@ -137,65 +153,100 @@ function Hero({ ctaLabel }) { } }, [text, typing, idx]); - const aniBase = (d) => ({transition:`opacity .9s ${d}s, transform .9s ${d}s`, opacity: loaded?1:0, transform: loaded?"translateY(0)":"translateY(24px)"}); + const aniBase = (d) => ({ + transition: `opacity .9s ${d}s, transform .9s ${d}s`, + opacity: loaded ? 1 : 0, + transform: loaded ? "translateY(0)" : "translateY(24px)" + }); + return (
-
Production switcher in a broadcast control room
+
+ Broadcast control room switcher console +
// 38.9°N · 77.0°W
-
EST. 2024 · DC
-
REC · LIVE
-
● 01 / 09
+
EST. 2024 · DC / DMV
+
SMPTE ST 2110 · NDI 6
+
● SYSTEM ONLINE
+
-
- Wild Dragon — Zachary Gaetano + {/* Availability & Google Business Trust Badges */} +
+
+ + Available for DMV Integration & Commissioning +
+ + ★ 5.0 + Google Verified Integrator · DC · MD · VA +
-
- {text}| + +
+ // {text}|
-

- Zachary
Gaetano + +

+ Wild Dragon + Broadcast Systems Integration & Commercial AV

-
-

- Broadcast integration and commercial AV installation across the DMV — Washington, DC, Maryland, and Northern Virginia — designing, installing, and commissioning production facilities for sports, corporate, aerospace, and financial organizations. + +

+ +

+ Principal Design Engineer Zachary Gaetano leads end-to-end broadcast facility design, SMPTE ST 2110 IP video infrastructure, and high-performance commercial AV installations across Washington, DC, Maryland, and Northern Virginia.

-
- {ctaLabel || "View Projects"} - Get in Touch + + + + {/* Quick Tech Hardware Ecosystem Pills */} +
+ SMPTE ST 2110 + Ross Ultrix & Carbonite + Q-SYS Certified + Brompton Tessera SX40 + 12G-SDI & NDI 6 + Dante Audio
- - Scroll - -
); } -// ─── CLIENTS — marquee or static ───────────────────────────────────────────── +// ─── CLIENTS ───────────────────────────────────────────────────────────────── const CLIENTS = [ + { name:"Washington Commanders", logo:__R("images/clients/commanders.png") }, + { name:"BetMGM", logo:__R("images/clients/betmgm.png") }, + { name:"CVS Health / Aetna", logo:__R("images/clients/cvs.png") }, + { name:"UBS", logo:__R("images/clients/ubs.png") }, + { name:"Monumental Sports", logo:__R("images/clients/monumental.png") }, + { name:"NBC Sports", logo:__R("images/clients/nbc-sports.png") }, + { name:"Cosm", logo:__R("images/clients/cosm.svg") }, + { name:"Intuit", logo:__R("images/clients/intuit.png") }, + { name:"Red Sands", logo:__R("images/clients/redsands.svg") }, + { name:"Blue Origin", logo:__R("images/clients/blue-origin.png") }, { name:"Broadcast Management Group", logo:__R("images/clients/bmg.png") }, { name:"AVI-SPL", logo:__R("images/clients/avispl.png") }, - { name:"NBC Sports", logo:__R("images/clients/nbc-sports.png") }, - { name:"Washington Commanders", logo:__R("images/clients/commanders.png") }, - { name:"CVS / Aetna", logo:__R("images/clients/cvs.png") }, - { name:"UBS", logo:__R("images/clients/ubs.png") }, - { name:"BetMGM", logo:__R("images/clients/betmgm.svg") }, - { name:"Intuit", logo:__R("images/clients/intuit.png") }, - { name:"Monumental Sports", logo:__R("images/clients/monumental.svg") }, - { name:"COSM", logo:__R("images/clients/cosm.svg") }, - { name:"Red Sands", logo:__R("images/clients/redsands.svg") }, ]; function Clients({ marquee }) { return ( -
-
- -

— Trusted by —

-
+
+
+

// Trusted by Enterprise, Sports & Broadcast Leaders

{marquee ? (
@@ -238,13 +289,15 @@ function Partners() {
-

// Technology Partners

-
- {PARTNERS.map(p => ( -
- {p.name}/ -
- ))} +
+

// Technology & Manufacturing Partners

+
+ {PARTNERS.map(p => ( +
+ {p.name}/ +
+ ))} +
@@ -254,10 +307,10 @@ function Partners() { // ─── ABOUT ─────────────────────────────────────────────────────────────────── const CAPS = [ - { icon: Radio, title:"Systems Design", desc:"End-to-end broadcast facility design including signal flow engineering, equipment specification, and architectural documentation." }, - { icon: Cable, title:"Integration", desc:"Full system integration from rack builds and wiring to commissioning, testing, and operator training." }, - { icon: Cloud, title:"Cloud & IP", desc:"Cloud-native production architectures, SMPTE ST 2110, NDI, SRT, and hybrid on-prem/cloud workflows." }, - { icon: Tv, title:"Broadcast Engineering", desc:"Live production engineering, RF systems, video routing, and real-time broadcast operations." }, + { icon: Radio, title:"Signal-Flow Engineering", desc:"End-to-end facility architecture: cable schedules, signal flow schematics, rack elevations, and single-line drawings before cable is pulled." }, + { icon: Cable, title:"Turnkey Integration", desc:"Precision rack fabrication, custom patching, structured cabling, label standard compliance, and hardware commissioning." }, + { icon: Cloud, title:"IP Video & ST 2110", desc:"Uncompressed SMPTE ST 2110-20/30/40, PTP IEEE 1588 timing, NMOS IS-04/05 routing, NDI 6, SRT, and hybrid cloud production." }, + { icon: Tv, title:"Production Engineering", desc:"Live control room switchers, replay servers, intercom systems, multiviewers, and real-time tally & router integration." }, ]; function About() { return ( @@ -268,15 +321,14 @@ function About() {
01About

From live production to
systems architecture.

-

I'm a broadcast engineer and systems integrator based in the Washington DC area, with a career that spans both sides of the industry — production and infrastructure.

-

My background in live production as a 1st AC, DIT, Camera Operator, and Trinity Operator gives me an operator's perspective that most systems designers don't have. I build facilities that work the way production teams actually need them to — not just the way engineers imagine they will.

-

Today, my focus is broadcast systems integration. As a principal systems designer with Broadcast Management Group, I design production facilities for organizations including the Washington Commanders, CVS/Aetna, UBS, BetMGM, Intuit, and Monumental Sports — engineering control rooms, studios, XR stages, and IP-based workflows across sports, corporate, financial services, aerospace, and defense.

+

Wild Dragon is a specialized broadcast systems integrator and commercial AV contractor based in the Washington, DC area. Founded by Zachary Gaetano, the company bridges production operations and mission-critical engineering.

+

Because the same engineer designs, installs, and commissions the facility, there is zero translation loss between engineering drawings and real-world rack builds. Every system is built to broadcast-grade reliability standards, documented thoroughly, and handed off with complete operational training.

-
+
{CAPS.map((c, i) => ( - +

{c.title}

@@ -295,7 +347,7 @@ const STATS = [ { v:10, suf:"+", label:"Years in Broadcast", desc:"Production & engineering" }, { v:8, suf:"+", label:"Major Facilities", desc:"Designed & integrated" }, { v:5900, suf:"+", label:"End Users Served", desc:"Global content delivery" }, - { v:5, suf:"", label:"Industry Verticals", desc:"Sports, corporate, financial, aerospace, defense" }, + { v:5, suf:"", label:"Industry Verticals", desc:"Enterprise, sports, financial, aerospace, defense" }, ]; function AnimatedNumber({ value, suffix }) { const [n, setN] = useState(0); @@ -325,14 +377,12 @@ function Stats() {
- {STATS.map((s, i) => ( - -
-
-

{s.label}

-

{s.desc}

-
-
+ {STATS.map(s => ( +
+
+
{s.label}
+
{s.desc}
+
))}
@@ -340,211 +390,295 @@ function Stats() { ); } -// ─── SERVICES — timeline ───────────────────────────────────────────────────── -const SERVICES = [ - { icon: Ruler, phase:"01", title:"Design", desc:"Signal flow engineering, system architecture, and equipment specification. Every facility starts with documentation that defines how signals move and how operators interact." }, - { icon: Wrench, phase:"02", title:"Integrate", desc:"Full system builds from rack fabrication and cable infrastructure through to final termination and labeling — clean builds technicians can troubleshoot and maintain for years." }, - { icon: MonitorCheck, phase:"03", title:"Commission", desc:"End-to-end system testing, calibration, and performance verification. Every signal path tested, every failover validated, every workflow documented before handoff." }, - { icon: Headset, phase:"04", title:"Support", desc:"Operator training, documentation packages, and ongoing technical support. Systems designed with the people who use them in mind — not just the engineers who build them." }, +// ─── SERVICES & CAPABILITIES BENTO (SEO HUB) ────────────────────────────────── +const CORE_SERVICES = [ + { + icon: Tv, + slug: "commercial-av-installation-washington-dc", + title: "Commercial AV Installation", + tagline: "Corporate Boardrooms, Town Halls & Briefing Centers", + desc: "Design-led commercial AV installation for organizations across Washington DC, Northern Virginia, and Maryland. Video conferencing, high-resolution display walls, automated room control, and precision audio DSP.", + tags: ["Q-SYS Control", "Shure Microflex", "Crestron", "Teams/Zoom Rooms"], + url: "/services/commercial-av-installation-washington-dc/" + }, + { + icon: Radio, + slug: "broadcast-systems-integration", + title: "Broadcast Systems Integration", + tagline: "Live Production Studios & Master Control Rooms", + desc: "Turnkey broadcast facility engineering from signal-flow drafting to final commissioning. Production switchers, routing switchers, multiviewers, replay servers, tally systems, and studio camera chains.", + tags: ["Ross Video", "vMix 4K", "Grass Valley", "Riedel Intercom"], + url: "/services/broadcast-systems-integration/" + }, + { + icon: Server, + slug: "smpte-st-2110-infrastructure", + title: "IP Video & SMPTE ST 2110 Infrastructure", + tagline: "PTP Timing, NMOS Routing & Cloud Production", + desc: "Uncompressed IP broadcast infrastructure and cloud-hybrid production. SMPTE ST 2110-20/30/40 standards, PTP IEEE 1588 grandmaster timing, NMOS IS-04/05 discovery/routing, NDI 6, and SRT contribution.", + tags: ["ST 2110", "PTP IEEE 1588", "NMOS Routing", "SRT / NDI 6"], + url: "/services/broadcast-systems-integration/" + }, + { + icon: Cpu, + slug: "led-video-wall-installation", + title: "LED Video Walls & XR Stages", + tagline: "Direct-View LED, Tessera SX40 & Virtual Sets", + desc: "Direct-view fine-pitch LED display wall installation, processor engineering, and XR virtual production stages. Brompton Tessera processing, sub-frame latency, camera tracking, and genlock synchronization.", + tags: ["Brompton SX40", "NovaStar", "Megapixel VR", "Unreal Engine XR"], + url: "/services/led-video-wall-installation/" + } ]; function Services() { return (
-
-
02Process
-

From blueprint to broadcast.

-

A complete lifecycle approach to broadcast facility design and systems integration. Every project follows a disciplined process so systems work flawlessly when the red light goes on.

+
+
02Capabilities
+

Core solutions & engineering.

+

Specialized engineering disciplines designed to eliminate complexity, ensure signal integrity, and deliver broadcast reliability for enterprise, sports, and federal clients.

-
-
-
- {SERVICES.map((s, i) => ( - -
-
{s.phase}
-
-

{s.title}

-

{s.desc}

+ +
+ {CORE_SERVICES.map((s, i) => ( + +
+
+
+ {`0${i + 1}`}
- - ))} -
+

{s.title}

+

{s.tagline}

+

{s.desc}

+
+ {s.tags.map(t => {t})} +
+ + Explore service specification + + +
+ + ))}
); } -// ─── PROJECTS — featured + grid ────────────────────────────────────────────── -function pickScopeChips(scopes) { - return (scopes || []).slice(0, 3); -} -function Projects({ onOpen }) { - const list = window.PROJECTS || []; - const [featured, ...rest] = list; +// ─── REGIONAL CORRIDORS (LOCAL SEO & GBP HUB) ───────────────────────────────── +const CORRIDORS = [ + { + title: "Washington, DC", + badge: "District Core", + focus: "Capitol Hill, K Street, Federal Newsrooms & Executive Briefing Centers", + desc: "Rapid on-site integration, secure boardroom AV, live broadcast studios, and press briefing room engineering.", + url: "/washington-dc/" + }, + { + title: "Northern Virginia", + badge: "Tech & Defense", + focus: "Tysons, Reston, Herndon, Arlington & Alexandria Enterprise Corridor", + desc: "High-density enterprise commercial AV, defense contractor briefing facilities, and SMPTE ST 2110 studio hubs.", + url: "/northern-virginia/" + }, + { + title: "Maryland", + badge: "Biotech & Federal", + focus: "Bethesda, Rockville, Silver Spring & Baltimore Corporate Centers", + desc: "Biotech auditorium AV, executive boardrooms, healthcare streaming suites, and regional broadcast facilities.", + url: "/maryland/" + }, + { + title: "Broadcast Integration DMV", + badge: "Regional Systems", + focus: "Regional Multi-Site Facilities, Master Control & Production Trucks", + desc: "End-to-end broadcast facility architecture, routing matrix upgrades, and turn-key control room builds.", + url: "/broadcast-integration-dmv/" + }, + { + title: "Commercial AV DMV", + badge: "Enterprise AV", + focus: "Turnkey Corporate AV, All-Hands Spaces & Direct-View LED Walls", + desc: "Single-engineer design, installation, DSP programming, and written acceptance testing for enterprise rooms.", + url: "/av-installation-dmv/" + } +]; +function RegionalCorridors() { return ( -
+
-
-
-
03Projects
-

Selected work.

-
-

Broadcast facility design and systems integration for enterprise, sports, aerospace, and financial services clients.

+
+
03Regional Corridors
+

DMV Service Area & Local Reach.

+

Direct engineering presence with immediate on-site response across Washington, DC, Maryland, and Northern Virginia. Google Verified commercial integrator.

- {featured && ( - - {e.preventDefault(); onOpen(featured.slug);}}> - {`${featured.client} -
); } -// ─── TECH — spec sheet ─────────────────────────────────────────────────────── -const TECH_CATS = [ - { name:"Routing & Switching", items:["Ross Ultrix","Blackmagic ATEM","Evertz EQX","Panasonic Kairos"] }, - { name:"All-In-One Production", items:["vMix","Vizrt","AMPP"] }, - { name:"Signal Transport", items:["SMPTE 2110","NDI","SRT","SDI","Dante","MADI","JPEG XS"] }, - { name:"Infrastructure", items:["IP Networking","Fiber Infrastructure","KVM Systems","UPS & Power","Cooling & Ventilation"] }, - { name:"Display & XR", items:["LED Processing","Unreal Engine","Camera Tracking","Projection","Color Management"] }, +// ─── PROJECTS ───────────────────────────────────────────────────────────────── +function Projects({ onOpen }) { + const list = window.PROJECTS || []; + const featured = list.find(p => p.featured) || list[0]; + const rest = list.filter(p => p !== featured); + + const handleProjectClick = (e, slug) => { + // If not middle click or modifier key, open in-page modal + if (!e.ctrlKey && !e.metaKey && !e.shiftKey) { + e.preventDefault(); + onOpen(slug); + } + }; + + return ( +
+
+ +
+
+
04Projects
+

Selected case studies.

+
+

Broadcast facility design, cloud production architectures, and commercial AV integration for enterprise, sports, aerospace, and financial services clients.

+
+
+ + {featured && ( + + handleProjectClick(e, featured.slug)}> + {`${featured.client} +
+
+ Featured Project + {featured.category} · {featured.year} +
+

{featured.client}

+

{featured.summary}

+ Read case study +
+
+
+ )} + + + + + + +
+
+ ); +} + +// ─── TECH STACK ────────────────────────────────────────────────────────────── +const STACK = [ + { cat:"Routing & Infrastructure", desc:"12G-SDI, SMPTE ST 2110, Ross Ultrix, Blackmagic Videohub, THOR fiber transmitters, patch bays" }, + { cat:"Production Switchers", desc:"Ross Carbonite Ultra, vMix Pro 4K, Grass Valley, Blackmagic ATEM Constellation 8K" }, + { cat:"Audio & Intercom", desc:"Q-SYS Core DSP, Dante audio networking, Shure Microflex, Riedel Bolero, RTS Adam, Clear-Com" }, + { cat:"LED & Display Processing", desc:"Brompton Tessera SX40 / S8, NovaStar MCTRL4K, Megapixel VR HELIOS, fine-pitch dvLED" }, + { cat:"IP Video & Cloud", desc:"SMPTE ST 2110-20/30/40, PTP IEEE 1588 grandmaster timing, NMOS IS-04/05, NDI 6, SRT, LiveU" }, + { cat:"Control & Automation", desc:"Ross DashBoard custom panels, Q-SYS UCI automation, Crestron / Extron, Bitfocus Companion" }, +]; +const GEAR = [ + { icon:Tv, cat:"Switchers & Vision", items:["Ross Carbonite Ultra 24-input 4K","vMix Pro 4K 16-input production rig","Blackmagic ATEM 4 M/E Constellation","Stream Deck XL & Companion integration"] }, + { icon:Server, cat:"Infrastructure & Routing", items:["Ross Ultrix 64x64 12G router matrix","SMPTE ST 2110 IP gateways & PTP timing","THOR Broadcast fiber TX/RX optical links","AJA & Decimator cross-converters"] }, + { icon:Cpu, cat:"Audio & Processing", items:["Q-SYS Core 110f & 8-Flex DSPs","Dante Virtual Soundcard & Yamaha consoles","Shure MXA920 ceiling array microphones","Riedel Bolero wireless intercom"] }, + { icon:Cable, cat:"Cameras & Acquisition", items:["RED Komodo-X 6K & Arri Trinity","Sony FX9 / FX6 4K production chains","Panasonic AW-UE150 4K NDI PTZ cameras","LiveU LU600 / LU800 bonded cellular units"] }, ]; function TechStack() { return ( -
+
-
-
04Technology
-

Tools of the trade.

-

Deep experience across the full broadcast technology stack — from traditional SDI infrastructure to modern IP and cloud-native production platforms.

+
+
+

// Hardware & Ecosystem

+

Broadcast-grade hardware.
Enterprise reliability.

+

Systems specified with tier-one broadcast hardware and IT-standard networking designed for 24/7 continuous operation.

-
- {TECH_CATS.map((c, i) => ( - -
-

{c.name}

-
- {c.items.map(it => {it})} -
+
+ {STACK.map((s, i) => ( + +
+ {`0${i + 1}`} +

{s.cat}

+

{s.desc}

))}
-
-
- ); -} - -// ─── ON SET ────────────────────────────────────────────────────────────────── -const REEL_URL = "https://player.vimeo.com/video/225920311?h=0&badge=0&autopause=0&player_id=0&app_id=58479"; -const CREDITS = [ - { t:"Bethesda Fallout Day", r:"1st AC", f:"Corporate / Event", y:"2025" }, - { t:"ZeniMax Elder Scrolls Online Update", r:"1st AC", f:"Corporate", y:"2025" }, - { t:"Palo Alto Ad", r:"Arri Trinity Operator", f:"Commercial", y:"2025" }, - { t:"Street Fighter DLC Ad", r:"Arri Trinity Operator", f:"Commercial", y:"2025" }, - { t:"Chase Small Business Promo", r:"Arri Trinity Operator", f:"Commercial", y:"2025" }, - { t:"ZeniMax Elder Scrolls Online Update", r:"1st AC", f:"Corporate", y:"2024" }, - { t:"Joe Vogel For Congress", r:"Camera Op / Trinity Op", f:"Political", y:"2024" }, - { t:"I Am a Champion", r:"Camera Op / Trinity Op", f:"Sports", y:"2023" }, - { t:"Washington Commanders Schedule Release", r:"Director of Photography", f:"Sports", y:"2023" }, - { t:"Stephen Sharer – MIDNIGHT", r:"DP / Trinity Operator", f:"Narrative", y:"2023" }, - { t:"Stephen Sharer – YOU and I", r:"DP / Trinity Operator", f:"Narrative", y:"2023" }, - { t:"A Chocolate Lens", r:"Camera Operator", f:"Narrative", y:"2023" }, - { t:"Capital One: Pride Month", r:"Director of Photography", f:"Corporate", y:"2021" }, - { t:"Tafon Nchukwi: My Goal Is to Be UFC Champion", r:"Camera Operator", f:"Sports Doc", y:"2020" }, - { t:"Tinder", r:"Director of Photography", f:"Commercial", y:"2020" }, - { t:"Conewago", r:"DP / Editor", f:"Documentary", y:"2020" }, - { t:"In Memoriam", r:"Director of Photography", f:"Documentary", y:"2019" }, -]; -const GEAR = [ - { cat:"Cinema Cameras", icon: Camera, items:["RED Komodo-X","RED DSMC3 V-Raptor-X 8K VV + 6K S35 Dual-Format (Canon RF)"] }, - { cat:"Lenses", icon: Film, items:["Mamiya 645 Sekor C PL 7 Lens Set","Mamiya 645 Sekor C 35mm","Mamiya 645 Sekor C 110mm","Mamiya 645 Sekor C 150mm","16-30mm / 28-75mm / 75-180mm T2.9 Zoom Set"] }, - { cat:"Monitoring & Transmission", icon: Monitor, items:["SmallHD DSMC3 7\"","SmallHD Cine7 with Bolt 6 1500RX","Teradek Bolt 6 Max XT Kit (TX + RX)","DJI SDR Transmission"] }, - { cat:"Camera Support", icon: Package, items:["Arri Trinity — Certified Owner & Operator","Dana Dolly Kit (8 / 4ft Speedrail, 2× Matthews Stands)","DJI Focus Pro All In One"] }, -]; -function OnSet() { - return ( -
-
- -
-
05On Set
-

Trinity Operator & DIT, Washington DC.

-

Certified Arri Trinity owner and operator with RED camera packages and specialized live production gear — from run-and-gun documentary to multi-camera sports and political campaigns. Available for commercial, corporate, sports, and narrative work throughout the DMV.

-
-
- -
-

Reel

-
- -
-
-
- -
-

Selected Credits

-
- {CREDITS.map((c, i) => ( -
- {c.t} - {c.r} - {c.f} - {c.y} -
- ))} -
-
-
-
-

Kit

+
+

// Core Engineering Kit & Platforms

{GEAR.map((g, i) => ( - +

{g.cat}

@@ -559,43 +693,154 @@ function OnSet() { ); } -// ─── CONTACT ───────────────────────────────────────────────────────────────── +// ─── ON SET ────────────────────────────────────────────────────────────────── +const ON_SET_IMAGES = [ + { src:__R("images/photos/dit-setup-wide.jpg"), title:"DIT Cart Configuration", subtitle:"Digital Imaging Technician — On-set color grading & live data management" }, + { src:__R("images/photos/trinity-operator.jpg"), title:"Arri Trinity Operation", subtitle:"Certified Trinity Operator — High-dynamic camera stabilization" }, + { src:__R("images/photos/control-room-monitors.jpg"), title:"Multi-View Monitoring", subtitle:"Broadcast Master Control Room — 16-channel multiviewer layout" }, + { src:__R("images/photos/audio-mixing-console.jpg"), title:"Broadcast Audio Console", subtitle:"Multi-channel audio mixing & Dante network routing" }, + { src:__R("images/photos/rack-cable-management.jpg"), title:"Structured Cabling & Rack Build", subtitle:"Precision wiring, color-coded termination, and signal-path labeling" }, + { src:__R("images/photos/stage-production-lighting.jpg"), title:"Studio Production Stage", subtitle:"Live multi-camera broadcast production & XR virtual set" }, +]; +function OnSet() { + const [active, setActive] = useState(null); + return ( +
+
+ +
+
+

// Field & Production Work

+

In the field. On the air.

+

Real-world experience operating the systems we design — ensuring builds reflect the exact demands of live production crews.

+
+
+
+ {ON_SET_IMAGES.map((img, i) => ( + +
setActive(img)}> + {img.title} +
+
+ // Field Work +

{img.title}

+

{img.subtitle}

+
+
+
+
+ ))} +
+
+ {active && setActive(null)} />} +
+ ); +} + +// ─── CONTACT & SCOPE SELECTOR ──────────────────────────────────────────────── +const SCOPES = [ + "Broadcast Facility / Control Room", + "Commercial Boardroom / Enterprise AV", + "SMPTE ST 2110 IP Migration", + "Direct-View LED Video Wall / XR Stage", + "System Commissioning & Engineering Audit" +]; function Contact() { + const [selectedScope, setSelectedScope] = useState(SCOPES[0]); + const mailtoHref = `mailto:zgaetano@wilddragon.net?subject=${encodeURIComponent(`Project Scope Inquiry: ${selectedScope}`)}&body=${encodeURIComponent(`Hi Zachary,\n\nI would like to discuss a project regarding ${selectedScope}.\n\nLocation (DC/MD/VA/Other):\nTimeline / Target Date:\nProject Overview:\n\nBest regards,`)}`; + return (
-

// Contact

-

Let's create something.

-

Whether you're planning a new broadcast facility, upgrading existing infrastructure, or exploring cloud and IP-based production workflows, I'd love to discuss your project.

+

// Project Scoping & Inquiries

+

Let's engineer your next facility.

+

+ Whether you are planning a new broadcast studio, upgrading enterprise conference rooms, or commissioning an uncompressed IP video network, connect directly with our principal design engineer. +

-
- -
- Email - zgaetano@wilddragon.net -
- -
- LinkedIn - Zachary Gaetano -
-
-
- Location - Washington, DC Area -
+ + {/* Interactive Scope Selection */} + +
+
+ // Select your project discipline: +
+
+ {SCOPES.map(scope => ( + + ))} +
+ +
+
+ +
+ + +
+ Direct Engineering Email + zgaetano@wilddragon.net +
+
+ + + +
+ LinkedIn Profile + Zachary Gaetano +
+
+ + +
+
+ Primary Service Region + Washington DC · MD · VA (DMV) +
+
+ + {/* Google Business Profile Verified Trust Box */} +
+
+
+ ★★★★★ + 5.0 Star Rating +
+

Google Verified Business Profile

+

Wild Dragon is a verified broadcast systems integrator & commercial AV contractor serving the entire DMV corridor.

+
+ +
+
+ +
-

Ready to start your next project?

-

From initial concept through commissioning and training, I bring a complete lifecycle approach to every facility I design.

- Start a Conversation +

Ready to scope your facility build?

+

Every facility receives full signal-flow drawings, documented wire runs, and end-to-end commissioning against a written acceptance standard.

+ Start a Consultation
@@ -606,117 +851,138 @@ function Contact() { // ─── FOOTER ────────────────────────────────────────────────────────────────── function Footer() { - const sections = [ - { title:"Navigation", links:[{l:"About",h:"#about"},{l:"Process",h:"#services"},{l:"Projects",h:"#projects"},{l:"On Set",h:"#on-set"},{l:"Contact",h:"#contact"}] }, - { title:"Services", links:[{l:"Commercial AV Installation",h:"/services/commercial-av-installation-washington-dc/"},{l:"Broadcast Systems Integration",h:"/services/broadcast-systems-integration/"},{l:"LED Video Walls & XR",h:"/services/led-video-wall-installation/"},{l:"Conference Room AV",h:"/services/conference-room-av/"},{l:"Case Studies",h:"/projects/"}] }, - { title:"Service Areas", links:[{l:"Broadcast Integration DMV",h:"/broadcast-integration-dmv/"},{l:"AV Installation DMV",h:"/av-installation-dmv/"},{l:"Washington, DC",h:"/washington-dc/"},{l:"Northern Virginia",h:"/northern-virginia/"},{l:"Maryland",h:"/maryland/"}] }, + const serviceLinks = [ + { l: "Commercial AV Installation", h: "/services/commercial-av-installation-washington-dc/" }, + { l: "Broadcast Systems Integration", h: "/services/broadcast-systems-integration/" }, + { l: "LED Video Wall & XR Stages", h: "/services/led-video-wall-installation/" }, + { l: "Conference Room AV Systems", h: "/services/conference-room-av/" }, ]; + const corridorLinks = [ + { l: "Washington, DC", h: "/washington-dc/" }, + { l: "Northern Virginia (Tysons/Reston)", h: "/northern-virginia/" }, + { l: "Maryland (Bethesda/Rockville)", h: "/maryland/" }, + { l: "Broadcast Integration DMV", h: "/broadcast-integration-dmv/" }, + { l: "Commercial AV DMV", h: "/av-installation-dmv/" }, + ]; + const projectLinks = [ + { l: "Washington Commanders Stadium", h: "/projects/washington-commanders/" }, + { l: "BetMGM Cloud Production", h: "/projects/betmgm-cloud-production/" }, + { l: "CVS / Aetna Broadcast Facility", h: "/projects/cvs-aetna-broadcast-facility/" }, + { l: "UBS Broadcast Center", h: "/projects/ubs-broadcast-center/" }, + { l: "All Case Studies", h: "/projects/" }, + ]; + return (
-
+
- Wild Dragon + Wild Dragon Wild Dragon
-

Broadcast systems integration and production facility design for sports, corporate, financial services, and defense organizations.

-
- - +

+ Broadcast systems design, commercial AV installation, and SMPTE ST 2110 commissioning across Washington, DC, Maryland, and Northern Virginia. +

+
+ ● + Google Verified Business · DMV Region
- {sections.map(s => ( -
-

{s.title}

-
    {s.links.map(l =>
  • {l.l}
  • )}
-
- ))} + +
+

Capabilities

+
    + {serviceLinks.map(s =>
  • {s.l}
  • )} +
+
+ +
+

Regional Corridors

+
    + {corridorLinks.map(s =>
  • {s.l}
  • )} +
+
+ +
+

Case Studies

+
    + {projectLinks.map(s =>
  • {s.l}
  • )} +
+
+
-

© {new Date().getFullYear()} Zachary Gaetano. All rights reserved.

-

Washington, DC Area

+

© {new Date().getFullYear()} Wild Dragon LLC · Zachary Gaetano. All rights reserved.

+
); } -// ─── PROJECT OVERLAY — editorial case study ────────────────────────────────── +// ─── PROJECT OVERLAY (CASE STUDY) ──────────────────────────────────────────── function ProjectOverlay({ slug, onClose, onOpen }) { - const projects = window.PROJECTS; - const project = projects.find(p => p.slug === slug); + const list = window.PROJECTS || []; + const project = list.find(p => p.slug === slug); + const nextProject = list.find((p, i) => list[(i - 1 + list.length) % list.length].slug === slug); + useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; - return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; + return () => { + window.removeEventListener("keydown", onKey); + document.body.style.overflow = ""; + }; }, [onClose]); - const maskRef = useRef(null); - useEffect(() => { if (maskRef.current) maskRef.current.scrollTop = 0; }, [slug]); - if (!project) return null; - const idx = projects.findIndex(p => p.slug === slug); - const total = projects.length; - const prev = idx > 0 ? projects[idx-1] : projects[total-1]; - const next = idx < total - 1 ? projects[idx+1] : projects[0]; - const num = String(idx+1).padStart(2,"0"); - const totalStr = String(total).padStart(2,"0"); - // First description paragraph used as a lede, rest as body - const [lede, ...rest] = project.description; + const lede = project.description && project.description[0]; + const restBody = (project.description || []).slice(1); return ( -
{ if(e.target===maskRef.current) onClose(); }}> - -
- +
- {/* === HERO === */} -
-
- -
-
-
-
+
+
- {project.category} - - {project.year} -
-

{project.client}

-

{project.summary}

-
-
- // {project.title || project.client} - Case Study · {num}/{totalStr} + {project.category} + {project.year}
+

{project.title || project.client}

+

{project.summary}

+
-
+
- {/* === FACTS BAR === */}
Client{project.client}
Category{project.category}
-
Year{project.year}
-
Role{(project.scope && project.scope[0]) || "Systems Design"}
+
Timeline{project.year}
+
Scope{(project.scope && project.scope[0]) || "Systems Design & Commissioning"}
- {/* === LEDE / OPENING === */} {lede && (
@@ -730,7 +996,6 @@ function ProjectOverlay({ slug, onClose, onOpen }) {
)} - {/* === FEATURE IMAGE === */}
{`${project.client} @@ -741,126 +1006,99 @@ function ProjectOverlay({ slug, onClose, onOpen }) {
- {/* === BODY + SIDECAR === */}
02 - The build + Architecture
-
- {rest.map((p, i) =>

{p}

)} -
- - {project.highlights && project.highlights.length > 0 && ( - <> -
- 03 - - Highlights -
-
    - {project.highlights.map((h, i) => ( -
  • - {String(i+1).padStart(2,"0")} - {h} -
  • - ))} -
- - )} + {restBody.map((p, i) =>

{p}

)}
-
- {/* === CLOSING CTA === */} -
-
-
-
-

// Next step

-

Planning a similar build?

-

Same engineering discipline, end to end — design, integration, commissioning, training, support.

-
- Start a conversation + {project.quote && ( +
+
+
“{project.quote.text}”
+ — {project.quote.author}, {project.quote.role}
-
-
- - {/* === RELATED + PREV/NEXT === */} -
-
-
- // Other case studies -
-
- {projects.filter(p => p.slug !== project.slug).slice(0, 3).map(p => ( - {e.preventDefault(); onOpen(p.slug);}}> -
{p.client}/
-
- {p.category} - {p.year} -
-

{p.client}

- View case study -
- ))} -
-
-
- -
- -
+ + )} + + + ); +} + +// ─── LIGHTBOX ───────────────────────────────────────────────────────────────── +function Lightbox({ image, onClose }) { + useEffect(() => { + const onKey = (e) => { if (e.key === "Escape") onClose(); }; + window.addEventListener("keydown", onKey); + return () => window.removeEventListener("keydown", onKey); + }, [onClose]); + return ( +
+ +
e.stopPropagation()}> + {image.title}/ +
+

{image.title}

+

{image.subtitle}

+
); } -Object.assign(window, { - Navigation, Hero, Clients, Partners, About, Stats, Services, Projects, - TechStack, OnSet, Contact, Footer, ProjectOverlay, CursorDot, Curtain, -}); +// ─── VIDEO MODAL ───────────────────────────────────────────────────────────── +function VideoModal({ videoId, onClose }) { + useEffect(() => { + const onKey = (e) => { if (e.key === "Escape") onClose(); }; + window.addEventListener("keydown", onKey); + return () => window.removeEventListener("keydown", onKey); + }, [onClose]); + return ( +
+ +
e.stopPropagation()}> +