// app.jsx — PM Portfolio for Ionut "Johnny" Pogacean // NASA Graphics Standards Manual (1976) × Linear restraint. const { useState, useEffect, useRef, useMemo } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "auto", "displayFont": "helvetica", "grain": 0.05, "marqueeSpeed": 60 } /*EDITMODE-END*/; // Resolve "auto" → "light"/"dark" based on local hour. // Day: 07:00–18:59. Night: 19:00–06:59. function resolveTheme(theme) { if (theme === "light" || theme === "dark") return theme; const h = new Date().getHours(); return h >= 7 && h < 19 ? "light" : "dark"; } // ── Content ────────────────────────────────────────────────────────────────── const NAME = "Ionuț \u201CJohnny\u201D Pogăcean"; const NAME_DISPLAY = ["IONUȚ", "POGĂCEAN"]; const YEAR_EST = "2016"; const EMAIL = "ionut.pogacean@gmail.com"; const POSITIONING = [ "Product manager for live media platforms. The newsroom tools, real-time graphics, and editorial systems global broadcasters use to ship moments to millions of viewers.", "Twenty years across Vizrt, Sky, and Fonn Group. Engineer before product."]; const TOOLS = [ "AHA", "JIRA", "CONFLUENCE", "FIGMA", "NOTION", "LOOKER", "SQL", "UNREAL ENGINE", "VIZ ENGINE", "AWS", "ANSIBLE"]; const PROJECTS = [ { no: "01", title: "Premier League Workflow Delivery", company: "Fonn Group", year: "2026", outcome: "Owning end-to-end delivery for Premier League and Sky News UK 2030 workflow deployments.", detail: "Translating complex broadcast requirements into structured delivery plans and measurable milestones. Acting as the primary bridge between client stakeholders and engineering, ensuring editorial priorities drive solution design over purely technical constraints." }, { no: "02", title: "Editorial \u0026 Control Solutions", company: "Vizrt", year: "2025", outcome: "Grew ARR 35% and the active customer base from 60 to 180+ enterprise users (3\u00d7).", detail: "Senior PM for the newsroom and control room tools used daily by broadcasters worldwide. Drove the strategy and vision for the portfolio, prioritising features through direct customer feedback loops and adoption analytics. Led cross-functional teams across product, engineering, design, QA, and marketing." }, { no: "03", title: "Virtual Productions on AWS", company: "Sky UK", year: "2021", outcome: "Spearheaded cloud and on-prem virtual production deployments; reduced support calls 25% via playbooks.", detail: "Designed automated workflows via Ansible, significantly reducing spin-up time and manual setup. Built technical playbooks and SOPs that freed teams to focus on product improvement over incident response." }, { no: "04", title: "Sky News US Election 2020", company: "Sky UK", year: "2020", outcome: "Shaped the on-air experience watched by millions, integrating real-time data, on-screen graphics, and AR.", detail: "Led the project delivery team responsible for architecture and deployment of real-time broadcast graphics solutions. Ensured reliability at scale during peak audience moments, working alongside editorial, design, and data teams." }, { no: "05", title: "Premier League Matchday Visuals", company: "Sky UK", year: "2019", outcome: "Delivered the matchday visual experience for millions of Sky Sports viewers.", detail: "Integrated Unreal Engine, Viz Engine, and optical tracking to enhance storytelling and engagement. Deployable virtual set, on-screen graphics, and live data integration for the Premier League season." }, { no: "06", title: "Eastern Europe Support Operations", company: "Vizrt", year: "2016", outcome: "Led support across 18 countries; delivered 25+ major implementation projects.", detail: "Managed a team of engineers across system installs, upgrades, training, and live support. Acted as regional liaison to Vizrt R\u0026D, ensuring customer feedback informed product development." }]; const BIO = [ "Specialism is real-time media platforms and broadcast technology. I work close to the engineering, the editorial workflows, and the live operations: writing specs that hold up under pressure, partnering on architecture before it ships, and translating complex technical capabilities into scalable tools that broadcasters use daily.", "Strongest on customer-driven roadmaps inside enterprise B2B SaaS, on legacy modernisation where downtime is not an option, and on the connective tissue between editorial intent and the systems that put it on screen. Comfortable when the answer is months of unglamorous infrastructure followed by one week of visible impact.", "Romanian, based in London. Engineer by training, product by trade. Twenty years inside live television leaves you with strong opinions about latency and very little patience for vague language."]; const SKILLS = [ ["DOMAIN", "Broadcast, live media, B2B SaaS"], ["STACK", "Aha! \u00b7 Jira \u00b7 SQL \u00b7 Figma \u00b7 Notion"], ["METHOD", "Discovery, JTBD, OKRs, roadmapping"], ["SHIPPED", "35% ARR \u00b7 200% customer growth"], ["TEAMS", "Cross-functional product, eng, design, QA"], ["LANGUAGES", "EN \u00b7 RO \u00b7 FR"], ["BASED", "London, UK"], ["EST.", "2016"]]; const NOW = [ { label: "WORKING ON", text: "Premier League and Sky News UK 2030 workflow deployments at Fonn Group." }, { label: "BUILDING", text: "A terminal app for running commands across multiple servers in parallel." }, { label: "RE-READING", text: "Empowered \u2014 Marty Cagan." }, { label: "EXPLORING", text: "AI automation in everyday product work." }]; const LINKS = [ { label: "LINKEDIN", href: "https://linkedin.com/in/ionutpogacean" }, { label: "EMAIL", href: "mailto:ionut.pogacean@gmail.com" }, { label: "CV", href: "#" }]; const LAST_UPDATED = "MAY 2026"; const FONTS = { helvetica: '"Helvetica Neue", "Helvetica", "Arial", system-ui, sans-serif', inter: '"Inter Tight", "Inter", system-ui, sans-serif', sohne: '"Space Grotesk", "Inter Tight", system-ui, sans-serif' }; // ── Helpers ────────────────────────────────────────────────────────────────── function CornerBrackets({ size = 14, inset = 0 }) { const s = size; const off = inset; const armV = { position: "absolute", background: "currentColor", width: 1, height: s }; const armH = { position: "absolute", background: "currentColor", width: s, height: 1 }; const wrap = (pos) => ({ position: "absolute", width: s, height: s, pointerEvents: "none", ...pos }); return (
); } function NoiseOverlay({ opacity }) { return ( ); } function SectionNo({ n, label }) { return (
{n} / {label}
); } // ── Sections ───────────────────────────────────────────────────────────────── function Hero({ marqueeSpeed }) { return (
PRODUCT MANAGER · LONDON · EST. {YEAR_EST}

{NAME_DISPLAY[0]} {NAME_DISPLAY[1]}

{POSITIONING[0]}

{POSITIONING[1]}

FILE  PORTFOLIO / 2026
REV.  14
SHEET  01 OF 05
); } function Marquee({ items, speed }) { const duration = Math.max(15, 9000 / speed); const repeated = [...items, ...items, ...items]; return ( ); } function Work() { const [hover, setHover] = useState(null); return (

Selected work

Six projects, 2019–2025. One-line outcomes; ask for the long version.

    {PROJECTS.map((p, i) =>
  1. setHover(i)} onMouseLeave={() => setHover(null)} onFocus={() => setHover(i)} onBlur={() => setHover(null)} tabIndex={0}>
    {p.no}

    {p.title}

    {p.company}
    {p.outcome}
    {p.detail}
    {p.year}
    2. )}
); } function Thumb({ i }) { const variants = [ , , , {[0, 1, 2].map((r) => [0, 1, 2, 3].map((c) => ) )} , {[[14, 42], [20, 36], [28, 30], [36, 38], [42, 22], [48, 26], [54, 16], [60, 20], [66, 12]].map(([x, y], j) => )} , {[0, 1, 2, 3].map((j) => {j < 3 && } )} ]; return variants[i % variants.length]; } function About() { return (

About

JOHNNY
{BIO.map((p, i) =>

{p}

)}
SPECIFICATIONS REV. 14 / {LAST_UPDATED}
{SKILLS.map(([k, v]) =>
{k}
{v}
)}
); } function NowSection() { return (

Now

As of {LAST_UPDATED.toLowerCase()}.

    {NOW.map((row) =>
  • {row.label} {row.text}
    • )}
); } function Contact() { return (

Get in touch

{EMAIL} ↗
© {NAME.toUpperCase()} · LONDON
LAST UPDATED {LAST_UPDATED}
SHEET 05 OF 05 · END
); } function Nav() { return ( ); } // ── App ────────────────────────────────────────────────────────────────────── function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [resolved, setResolved] = useState(() => resolveTheme(t.theme)); useEffect(() => { const update = () => setResolved(resolveTheme(t.theme)); update(); const id = setInterval(update, 60_000); return () => clearInterval(id); }, [t.theme]); useEffect(() => { const root = document.documentElement; if (resolved === "dark") { root.style.setProperty("--bg", "#10131A"); root.style.setProperty("--bg-alt", "#171B23"); root.style.setProperty("--ink", "#DDE2EA"); root.style.setProperty("--ink-mute", "#7A7E86"); root.style.setProperty("--rule", "rgba(221,226,234,0.14)"); } else { root.style.setProperty("--bg", "#E2E2DA"); root.style.setProperty("--bg-alt", "#D6D6CD"); root.style.setProperty("--ink", "#0A0A0C"); root.style.setProperty("--ink-mute", "#6A6A66"); root.style.setProperty("--rule", "rgba(10,10,12,0.14)"); } root.style.setProperty("--font-display", FONTS[t.displayFont] || FONTS.helvetica); }, [resolved, t.displayFont]); const autoLabel = (() => { if (t.theme !== "auto") return null; const h = new Date().getHours(); return `Auto \u2014 ${resolved} (local ${String(h).padStart(2, "0")}:00)`; })(); return (
); } ReactDOM.createRoot(document.getElementById("root")).render();