// Main app — composes everything const { useState, useEffect } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "dark", "accentHue": 220, "density": "compact", "hexLayout": "linear", "heroPitch": 0 }/*EDITMODE-END*/; function App() { const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS); const R = window.RESUME; // Apply theme + accent + density to useEffect(() => { document.documentElement.setAttribute("data-theme", tweaks.theme); document.documentElement.setAttribute("data-density", tweaks.density); document.documentElement.style.setProperty("--accent-h", tweaks.accentHue); }, [tweaks.theme, tweaks.accentHue, tweaks.density]); const toggleTheme = () => setTweak("theme", tweaks.theme === "dark" ? "light" : "dark"); const [activeJob, setActiveJob] = useState(0); return ( <>

{/* NAV */}

{/* HERO */}

online · {R.location} — v.2026.04

Trent Bakow. {R.role} · 6+ yrs

{R.pitches[tweaks.heroPitch] || R.pitches[0]}

→ start a conversation ↓ resume.pdf github / {R.github}

~/identity.json

roleeng_manager · ai_platform

cloudaws · gcp · azure

since2019

basedutah, us

focusai systems · platform eng · team leadership

{/* BUILT */}

[ 01 / BUILT ]

What I've built.

Production systems. Independent products.
And one hackathon win.

{R.projects.map((p, i) => )}

{/* CAPABILITIES */}

[ 02 / CAPABILITIES ]

Capabilities.

Full stack from model to metal.

{Object.entries(R.stack).map(([cat, items]) => (

{cat}

{items.map(it =>

{it}

)}

))}

{/* IMPACT */}

[ 03 / IMPACT ]

Shipped impact.

Hover any metric for the full story.

{R.metrics.map((m, i) => )}

{/* AWS HEX */}

[ 04 / AWS ]

Services I run in production.

Hover any cell for how I've used it.

{/* CAREER */}

[ 05 / CAREER ]

Career.

Pick a role to inspect. Each bullet is a delivered outcome.

{R.timeline.map((t, i) => ( ))}

{R.timeline[activeJob].bullets.map((b, i) => (

{b.metric}

{b.text}

))}

{/* FOUNDATIONS */}

[ 06 / FOUNDATIONS ]

Foundations.

Formal education + active certifications.

{R.education.map((e, i) => ( ))} {R.certifications.map((c, i) => ( ))}

{/* FOOTER / CONTACT */} ); } function FoundationHex({ kind, img, top, title, sub, caption, captionMeta, href }) { const inner = (

{kind === "cert" && img ? ( {title}

{title}

) : ( <>

{top &&

{top}

}

{title}

{sub &&

{sub}

}

)}

); const wrapInner = ( <> {inner} {caption && (

{caption}

{captionMeta &&

{captionMeta}

}

)} ); if (href) { return {wrapInner}; } return

{wrapInner}

; } function ProjectCard({ p }) { return (

{p.name}

{p.badge}

{p.desc}

{p.tags.map(t => {t})}

); } function MetricCell({ m }) { const match = m.value.match(/^([+\-$~]?)(.+?)$/); const pre = match ? match[1] : ""; const rest = match ? match[2] : m.value; return (

{pre && {pre}}{rest}

{m.label}

{m.detail}

); } function Tweaks({ tweaks, setTweak }) { const { TweaksPanel, TweakSection, TweakRadio, TweakSlider, TweakSelect } = window; if (!TweaksPanel) return null; return ( setTweak("theme", v)} options={[{value:"dark", label:"Dark"}, {value:"light", label:"Light"}]} /> setTweak("accentHue", v)} /> setTweak("density", v)} options={[{value:"compact", label:"Compact"}, {value:"default", label:"Default"}, {value:"spacious", label:"Spacious"}]} /> setTweak("hexLayout", v)} options={[{value:"honey", label:"Honey"}, {value:"diamond", label:"Diamond"}, {value:"linear", label:"Linear"}]} /> setTweak("heroPitch", Number(v))} options={window.RESUME.pitches.map((p, i) => ({value: String(i), label: `Pitch ${i+1}`}))} /> ); } const root = ReactDOM.createRoot(document.getElementById("app")); root.render();