110 lines
4.6 KiB
TypeScript
Executable file
110 lines
4.6 KiB
TypeScript
Executable file
import { Radio, Tv, Cloud, Cable } from "lucide-react";
|
|
import ScrollReveal from "./ScrollReveal";
|
|
|
|
const capabilities = [
|
|
{
|
|
icon: Radio,
|
|
title: "Systems Design",
|
|
description:
|
|
"End-to-end broadcast facility design including signal flow engineering, equipment specification, and architectural documentation.",
|
|
},
|
|
{
|
|
icon: Cable,
|
|
title: "Integration",
|
|
description:
|
|
"Full system integration from rack builds and wiring to commissioning, testing, and operator training.",
|
|
},
|
|
{
|
|
icon: Cloud,
|
|
title: "Cloud & IP",
|
|
description:
|
|
"Cloud-native production architectures, SMPTE ST 2110, NDI, SRT, and hybrid on-prem/cloud workflows.",
|
|
},
|
|
{
|
|
icon: Tv,
|
|
title: "Broadcast Engineering",
|
|
description:
|
|
"Live production engineering, RF systems, video routing, and real-time broadcast operations.",
|
|
},
|
|
];
|
|
|
|
export default function About() {
|
|
return (
|
|
<section id="about" className="py-28 md:py-36 bg-white">
|
|
<div className="max-w-6xl mx-auto px-6">
|
|
{/* Section header */}
|
|
<ScrollReveal>
|
|
<div className="max-w-3xl mb-20">
|
|
<div className="w-10 h-px bg-accent mb-6" />
|
|
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
|
|
About
|
|
</p>
|
|
<h2 className="text-3xl md:text-4xl font-semibold text-primary leading-tight mb-8">
|
|
From live production to
|
|
<br />
|
|
systems architecture.
|
|
</h2>
|
|
<div className="space-y-5 text-muted leading-[1.8]">
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
Today, my focus is broadcast systems integration. As a principal
|
|
systems designer with{" "}
|
|
<a
|
|
href="https://broadcastmgmt.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-accent hover:text-accent-light transition-colors underline decoration-accent/30 underline-offset-4 hover:decoration-accent/60"
|
|
>
|
|
Broadcast Management Group
|
|
</a>
|
|
, I design production facilities for organizations including the{" "}
|
|
<strong className="font-medium text-primary">Washington Commanders</strong>,{" "}
|
|
<strong className="font-medium text-primary">CVS/Aetna</strong>,{" "}
|
|
<strong className="font-medium text-primary">UBS</strong>,{" "}
|
|
<strong className="font-medium text-primary">BetMGM</strong>,{" "}
|
|
<strong className="font-medium text-primary">Intuit</strong>, and{" "}
|
|
<strong className="font-medium text-primary">Monumental Sports</strong>—engineering
|
|
control rooms, studios, XR stages, and IP-based workflows across
|
|
sports, corporate, financial services, aerospace, and defense.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* Capabilities grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
|
{capabilities.map((cap, i) => (
|
|
<ScrollReveal key={cap.title} delay={i * 100}>
|
|
<div className="group">
|
|
<div className="w-11 h-11 rounded-lg bg-neutral-50 border border-neutral-100 flex items-center justify-center mb-5 group-hover:bg-accent/5 group-hover:border-accent/20 transition-all duration-300">
|
|
<cap.icon
|
|
size={20}
|
|
className="text-neutral-400 group-hover:text-accent transition-colors duration-300"
|
|
strokeWidth={1.5}
|
|
/>
|
|
</div>
|
|
<h3 className="text-sm font-semibold text-primary mb-2.5">
|
|
{cap.title}
|
|
</h3>
|
|
<p className="text-[13px] text-muted leading-relaxed">
|
|
{cap.description}
|
|
</p>
|
|
</div>
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|