// 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": 100 } /*EDITMODE-END*/; // Resolve "auto" → "light"/"dark" based on local hour. // Day: 07:00–18:59. Night: 17:00–06:59. function resolveTheme(theme) { if (theme === "light" || theme === "dark") return theme; const h = new Date().getHours(); return h >= 7 && h < 17 ? "light" : "dark"; } // ── Content ────────────────────────────────────────────────────────────────── const NAME = "Ionut “Johnny” Pogacean"; const NAME_DISPLAY = ["IONUT", "POGACEAN"]; const YEAR_EST = "2016"; const EMAIL = "ionut.pogacean@gmail.com"; const POSITIONING = [ "Twenty years inside media and entertainment tech. Started as an engineer, became a product manager, and the engineering instinct never really left.", "Currently shipping at Fonn Group; before that, Sky and Vizrt." ]; const TOOLS = [ "AHA", "JIRA", "CONFLUENCE", "FIGMA", "NOTION", "LOOKER", "SQL", "UNREAL ENGINE", "VIZ ENGINE", "AWS", "ANSIBLE"]; const PROJECTS = [ { no: "01", title: "Workflow Delivery", company: "Fonn Group", year: "2026", outcome: "Owning end-to-end delivery for PLS 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 & Control Solutions", company: "Vizrt", year: "2025", outcome: "Grew ARR 35% and the active customer base from 60 to 180+ enterprise users (3×).", 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.", links: [ { label: "Watch on Vimeo", href: "https://vimeo.com/480808527" }, { label: "Watch on YouTube", href: "https://youtu.be/gUYMKHTaPMA" } ] }, { no: "05", title: "Premier League Matchday On-site Virtual Set", 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.", links: [{ label: "Watch on YouTube", href: "https://www.youtube.com/watch?v=SmiRoUEOPAk" }] }, { no: "06", title: "Sky News UK General Election 2019", company: "Sky UK", year: "2019", outcome: "Delivered the on-air graphics system for the Sky News UK General Election, watched by millions.", detail: "Real-time AR graphics integrated with Technocrane and Spidercam, alongside live data feeds for election results coverage. End-to-end delivery for a high-stakes overnight broadcast.", links: [{ label: "Watch on YouTube", href: "https://www.youtube.com/watch?v=nBRkC6wAkFU" }] }]; const BIO = [ "My strongest work has always been close to the engineering and creative teams. Specs that hold up when the deadline is a live broadcast. No take twos. Comfortable when the answer is months of unglamorous work followed by one week of visible impact.", "I have a pretty good sense of when to be firm and when to be flexible. I found collaboration and being heard gets the most traction and buy-in over dictating, because what matters is shipping the best product. Best idea should win.", "Based in London. Spent years doing improv on stage outside work, which turned out to be better PM training than any course. Listen first, commit to the choice, work with whatever your scene partner gives you."]; const SKILLS = [ ["DOMAIN", "Broadcast, Media and Entertainment, live media, B2B SaaS"], ["STACK", "Aha! · Jira · SQL · Figma · Notion"], ["METHOD", "Discovery, JTBD, OKRs, roadmapping"], ["SHIPPED", "35% ARR · 200% customer growth"], ["TEAMS", "Cross-functional product, Marketing, Engineering, Design, QA"], ["LANGUAGES", "EN · RO"], ["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: "READING", text: "Working Backwards: by Colin Bryar, Bill Carr"}, { label: "EXPLORING", text: "Learning more about custom Claude Skills: how to develop, maintain and improve them." }]; const POSTS = [ { no: "01", slug: "hello-and-welcome", date: "MAY 2026", title: "Hello, and welcome", excerpt: "A short note to kick things off." }, { no: "02", slug: "improv-and-pm", date: "MAY 2026", title: "Improv and Product Management", excerpt: "How improv comedy has influenced my approach to product management." } ] const LINKS = [ { label: "LINKEDIN", href: "https://linkedin.com/in/ionutpogacean" }, { label: "EMAIL", href: "mailto:ionut.pogacean@gmail.com?subject=Hello%2C%20Johnny" } ]; 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.links && p.links.map(l => {l.label} → )}
    {p.links ? : }
    {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 resolveThumbnail(url) { const yt = url.match(/[?&]v=([^&]+)/) || url.match(/youtu\.be\/([^?&]+)/); if (yt) return Promise.resolve(`https://img.youtube.com/vi/${yt[1]}/mqdefault.jpg`); const vimeo = url.match(/vimeo\.com\/(\d+)/); if (vimeo) { return fetch(`https://vimeo.com/api/oembed.json?url=${encodeURIComponent(url)}`) .then(r => r.json()).then(d => d.thumbnail_url).catch(() => null); } return Promise.resolve(null); } function VideoThumb({ links }) { const [srcs, setSrcs] = useState([]); useEffect(() => { Promise.all(links.map(l => resolveThumbnail(l.href))).then(setSrcs); }, [links]); if (!srcs.length) return ; return (
{links.map((link, i) => srcs[i] && )}
); } function About() { return (

About

Ionut Pogacean
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}.

    {NOW.map((row) =>
  • {row.label} {row.text}
    • )}
); } function Posts() { const visible = POSTS.slice(0, 3); if (visible.length === 0) return null; return (

Posts

Notes and thoughts on product, broadcast, and what catches my attention. Latest first.

    {visible.map((p) =>
  1. {p.no}

    {p.title}

    {p.date}
    {p.excerpt}
    2. )}
); } 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 hash = window.location.hash.slice(1); if (!hash) return; setTimeout(() => { const el = document.getElementById(hash); if (el) el.scrollIntoView({ block: "start" }); }, 50); }, []); 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 — ${resolved} (local ${String(h).padStart(2, "0")}:00)`; })(); return (
); } ReactDOM.createRoot(document.getElementById("root")).render();