// components.jsx // ── Constants ─────────────────────────────────────────────────────────────── const REDUCED_MOTION = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const FADE_MS = 360; // ── HandwrittenReveal ─────────────────────────────────────────────────────── // Static stub: renders children immediately, fires onComplete so Hero stage-gates advance const HandwrittenReveal = ({ children, onComplete }) => { const called = React.useRef(false); React.useLayoutEffect(() => { if (!called.current) { called.current = true; onComplete?.(); } }, []); return <>{children}; }; // ── IteratedTitle ─────────────────────────────────────────────────────────── // Static: renders the final title directly in Sanchez via section-header class const IteratedTitle = ({ final, dark = false }) => (

{final}

); // ── Annotation / SideNotedSpan ─────────────────────────────────────────────── // Static stubs: render children only, all SVG scribbles and margin notes dropped const SideNotedSpan = ({ children }) => <>{children}; const Annotation = ({ children }) => <>{children}; // ── FadeSection ───────────────────────────────────────────────────────────── const EASE_OUT_STRONG = 'cubic-bezier(0.23, 1, 0.32, 1)'; const FadeSection = ({ children, className, style, id, 'data-dark-section': dataDark }) => { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); React.useEffect(() => { if (!ref.current) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } }, { threshold: .1 }); obs.observe(ref.current); return () => obs.disconnect(); }, []); // Respect prefers-reduced-motion: skip translateY, shorten duration const motion = REDUCED_MOTION ? { opacity: visible ? 1 : 0, transition: 'opacity 0.2s ease-out' } : { opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(30px)', transition: `opacity 0.5s ${EASE_OUT_STRONG}, transform 0.5s ${EASE_OUT_STRONG}` }; return (

{children}

); }; // ── TrenchcoatWord ─────────────────────────────────────────────────────────── const TrenchcoatWord = () => <>trenchcoat; // ── Hero ───────────────────────────────────────────────────────────────────── const Hero = () => { const [stage, setStage] = React.useState(0); return (

{/* "Hi, I'm" */}

setStage(1)}> Hi, I'm

{/* "Erik Dohnberg." */}

{/* Erik /} {stage >= 1 && ( setStage(2)}> Erik )} {/ Dohnberg. */} {stage >= 2 && ( setStage(3)}> Dohnberg. )}

{/* Role */} {stage >= 3 && (

Senior Product Manager · Toronto

)} {/* Tagline */}

{stage >= 3 && (

setStage(4)}> Every industry thinks its problems are unique.

{stage >= 4 && (

setStage(5)}> They're mostly{' '} the same problems {' '}in a .

)}

{/* Links */}

= 5 ? 1 : 0, transform: stage >= 5 ? 'translateY(0)' : 'translateY(8px)', transition: `opacity 0.6s ${EASE_OUT_STRONG} 0.3s, transform 0.6s ${EASE_OUT_STRONG} 0.3s`, }}> LinkedIn ↗ Substack ↗

{/* Scroll hint */}

= 5 ? 0.4 : 0, transition: 'opacity 0.8s ease 0.8s', fontFamily: "'Caveat', cursive", fontSize: '18px', color: '#333', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px', }}> scroll ↓

); }; // ── FloatingUI ─────────────────────────────────────────────────────────────── const FloatingUI = () => { const [showScrollTop, setShowScrollTop] = React.useState(false); const [overDark, setOverDark] = React.useState(false); React.useEffect(() => { const h = () => { setShowScrollTop(window.scrollY > window.innerHeight * .8); const ds = document.querySelectorAll('[data-dark-section]'), by = window.innerHeight - 60; let d = false; ds.forEach(s => { const r = s.getBoundingClientRect(); if (r.top < by && r.bottom > by) d = true; }); setOverDark(d); }; window.addEventListener('scroll', h, { passive: true }); h(); return () => window.removeEventListener('scroll', h); }, []); return ( ); }; // ── TopBar ──────────────────────────────────────────────────────────────────── const TopBar = () => { const [show, setShow] = React.useState(false); const [overDark, setOverDark] = React.useState(false); React.useEffect(() => { const h = () => { setShow(window.scrollY > window.innerHeight * .6); const ds = document.querySelectorAll('[data-dark-section]'); let d = false; ds.forEach(s => { const r = s.getBoundingClientRect(); if (r.top < 60 && r.bottom > 0) d = true; }); setOverDark(d); }; window.addEventListener('scroll', h, { passive: true }); h(); return () => window.removeEventListener('scroll', h); }, []); const tc = overDark ? '#f5f0e8' : '#333'; return (

); }; // ── About ───────────────────────────────────────────────────────────────────── const About = () => (

About

I'm a Senior PM based in Toronto. I've shipped products in multiple industries including social media, healthcare, heavily regulated supply-chain software, food operations software, and D2C retail. The contexts look different, but the actual problems — user adoption, competitor pressure, regulatory fog, constant prioritization under uncertainty — show up time and time again. Once you've seen the pattern enough times, you can focus on the craft of good product strategy and delivery.

I've been building AI-powered products since 2023 — ML-curated content feeds at 500px, LLM-integrated decision tools, and ML Forecasting Models for enterprise food operators. I'm outcome-driven, not output-driven. Code is cheaper than ever. What you choose to build is the whole game. I do my best work on small teams with clear ownership, leadership that's still close to the work, and a bias toward shipping.

The point isn't just shipping. It's making someone's day less painful — for the user, and for the team building it.

); // ── Writing ─────────────────────────────────────────────────────────────────── const Writing = () => { const [subEmail, setSubEmail] = React.useState(''); const [subStatus, setSubStatus] = React.useState('idle'); // idle | submitting | done const handleSubscribe = e => { e.preventDefault(); if (!subEmail || subStatus === 'submitting') return; setSubStatus('submitting'); const form = document.createElement('form'); form.method = 'POST'; form.action = 'https://heyerikd.substack.com/api/v1/free'; form.target = '_blank'; form.style.display = 'none'; const field = document.createElement('input'); field.name = 'email'; field.value = subEmail; form.appendChild(field); document.body.appendChild(form); form.submit(); document.body.removeChild(form); setSubStatus('done'); }; return (

Most of what I know I learned from other people in the tech scene. This is me trying to pay it forward. Notes on product, AI, leadership, and the parts of the work that don't fit neatly into a roadmap. New posts land on Substack.

{[ { title: "AI Made Your Junior Team Faster. It Also Made Your Job Harder.", desc: "The work didn't disappear. It just moved upstairs.", href: "https://substack.com/@heyerikd/note/p-198350792" }, { title: "Turning your org's strategic drift into product leverage", desc: "The best PM moves don't look heroic. They look like timing." }, { title: "The whiteboard remembers what transcripts don't", desc: "AI gives you retrieval infrastructure. Whiteboarding gives you encoded memory. They are not substitutes." }, ].map((card, i) => { const inner = ( <> {card.href ? ( Read ↗ ) : ( coming soon )}

{card.title}

{card.desc}

); return card.href ? ( {inner} ) : (

{inner}

); })}

{subStatus === 'done' ? (

check your inbox ✓

) : ( <>

No digests, no roundups. New posts straight to your inbox.

)}

); }; // ── Side Projects ───────────────────────────────────────────────────────────── const SideProjects = () => (

Side Projects

Staying on the cutting edge isn't a posture — it's a habit. The fastest way I've found to actually understand a new tool or model is to build something with it. These are the things I'm tinkering on in my (admittedly limited) spare time, mostly to learn.

Helm

Keep strategy on course.

A work-in-progress experiment: an AI layer that connects to the tools a team already uses — meetings, Slack, planning docs — through their existing authentication and permissions, with their choice of AI model (Claude, ChatGPT, or others). It distills those conversations into a clear, structured record of what the team is trying to achieve and why. No new data silo, no vendor lock-in. When day-to-day decisions start drifting from that intent, Helm flags it.

Early prototype, source-available. Nights-and-weekends pace.

→ github.com/erikdohnberg/helm

); // ── ProjectScreenshot ───────────────────────────────────────────────────────── // TODO: Add real screenshots for each project in PROUD_WORK_PROJECTS. // Replace the placeholder container in ProudWork with: // <project title> screenshot

// Recommended capture: 1440×1080px (4:3), saved to /images/ // ── Proud Work ──────────────────────────────────────────────────────────────── const PROUD_WORK_PROJECTS = [ { title: '500px\'s AI-Personalized Content Feeds', tagline: 'The platform\'s largest content discovery overhaul in years — shipped to a global community of 15M+ creators.', body: ( <> 500px's first AI-personalized feed — replacing legacy Popular and Fresh streams with a unified "For You" experience that mixed recommended photos, photo stories, photographers, and AI-curated{' '} Mood Galleries {'. '}Shipped to 15M+ creators across 195 countries. The Mood Galleries feature was designed to take manual curation off the content team's plate so they could spend their time supporting photographers and growing the community instead. ), role: '— Senior PM at 500px, 2023.', link: { href: 'https://500px.com/explore', label: '→ Live' }, }, { title: 'ABB Optical\'s Optometrist-First Lens-Ordering Platform', tagline: 'A direct-to-consumer contact lens platform that gave optometrists a stake in the purchases their patients were already making elsewhere.', body: ( <> The only PM on the project. Built as a 1-800-Contacts competitor, but with{' '} the optometrist back in the loop {' '}— better margins for doctors, better continuity of care for patients, lower friction than the incumbents. ABB, the buying group behind Hello Abby, represents 23,000+ independent eye care professionals and 700M+ lens purchases annually. Published results: 3× lift in direct-to-patient sales, 300% over initial revenue target during MVP launch.

🏆 MarCom Gold Award — Medical Website Category, 2023 ), role: '— PM at Bounteous, 2022–2023.', link: { href: 'https://helloabby.com', label: '→ helloabby.com' }, }, { title: 'HomeVisit\'s Pivot to Virtual Property Marketing', tagline: 'Real estate visual marketing platform — photography, video, 3D tours, and single property websites.', body: ( <> Navigated a mid-roadmap pivot when in-person showings collapsed at the start of the pandemic — shipped configurable per-agent single property websites as demand for virtual property content spiked. The work shipped through the most active US housing cycle since 2006. ), role: '— PM at Intersect / CoreLogic, 2019–2022.', link: { href: 'https://homevisit.com', label: '→ homevisit.com' }, }, { title: 'Establishing a Product Practice for the New Cannabis Industry', tagline: 'Seed-to-sale compliance platform for 70%+ of Canada\'s licensed producers — built during the legalization of recreational cannabis.', body: ( <> The first PM hired at Ample — joined when the company was 25 people and helped grow the product discipline to 6 PMs as headcount scaled past 120. The work happened during the formative years of legal recreational cannabis in Canada: the market grew from $1.19B in 2019 to $3.92B by 2021 (Statistics Canada), and Ample was the primary compliance platform for 70%+ of the country's licensed producers throughout. ), role: '— PM at Ample Organics, 2017–2019.', link: { href: 'https://ampleorganics.com', label: '→ ampleorganics.com' }, }, ]; const ProudWork = () => { const [idx, setIdx] = React.useState(0); const total = PROUD_WORK_PROJECTS.length; const project = PROUD_WORK_PROJECTS[idx]; return (

Four industries. Real products that shipped, with real teams.

{/* TODO: Restore two-column grid (screenshot + text) once real screenshots are added. Add:

*/}

{project.title}

{project.tagline}

{project.body}

{project.role}

{project.link && {project.link.label}}

{/* Carousel nav */}

{idx + 1}/{total}

Full timeline on LinkedIn ↗

); }; // ── Testimonials ────────────────────────────────────────────────────────────── const Testimonials = () => (

What it's like working with me

{[ { quote: "While at 500px, Erik delivered a complex content feed experience working with the AI teams, development, and design to launch a personalized feed of posts and photos to millions of users. Erik is one of the good ones and would be a great addition to any growing product team.", name: "James Manson", title: "VP of Products at 500px, Erik's direct manager" }, { quote: "Erik consistently proved himself as the go-to problem solver when the team faced ambiguity, changing priorities, or tight deadlines. I have no reservations in saying that Erik would make an immediate and transformative impact on any team he joins.", name: "Anas Herzallah", title: "Associate Product Manager at Bounteous, Erik's direct report" }, { quote: "Erik's communication-first mindset to product management ensures that the right opinions are heard up front. Combine that with his focus on ruthlessly defining problems before solving them and you are set up for success.", name: "Will Badger", title: "Product Manager at Ample Organics, peer" }, ].map((t, i) => (

"{t.quote}"

— {t.name}, {t.title}

))}

); // ── Footer ──────────────────────────────────────────────────────────────────── const Footer = () => { const [visible, setVisible] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } }, { threshold: .3 }); obs.observe(ref.current); return () => obs.disconnect(); }, []); return ( ); }; // ── App ─────────────────────────────────────────────────────────────────────── const App = () => (

); ReactDOM.createRoot(document.getElementById('root')).render();