// flow-early.jsx — Steps 01-04: Goal, Connect, Scan, Direction function cleanConnectedSources(value) { if (!value || typeof value !== "object") return {}; const serialized = JSON.stringify(value); if (/okonkwo|mayaokonkwo/i.test(serialized)) return {}; return Object.entries(value).reduce((next, [id, item]) => { if (!item || typeof item !== "object" || !item.value) return next; next[id] = { value: item.value }; return next; }, {}); } // ── Step 01: Goal ────────────────────────────────────────────────────────── function GoalScreen() { const [flow, setFlow] = useFlow(); const [, navigate] = useHashRoute(); const [selected, setSelected] = React.useState(flow.goal || null); const onSelect = (g) => { setSelected(g); setFlow({ goal: g }); }; const onContinue = () => { if (selected) navigate("/connect"); }; return (
What do you want this portfolio to help you do?} sub="Pick the closest one. We'll tune everything — voice, what we feature, what we hide — to match. You can change it later." >
{window.GOALS.map((g, i) => ( ))}
g.id === selected).label} — continue` : "Pick one to continue"} onContinue={selected ? onContinue : null} />
); } // ── Step 02: Connect Sources ─────────────────────────────────────────────── function ConnectScreen() { const [flow, setFlow] = useFlow(); const [, navigate] = useHashRoute(); const [connected, setConnected] = React.useState(() => cleanConnectedSources(flow.connected)); const [openInput, setOpenInput] = React.useState(null); const connectedKey = JSON.stringify(flow.connected || {}); React.useEffect(() => { setConnected(cleanConnectedSources(flow.connected)); }, [connectedKey]); React.useEffect(() => { const onConnected = (event) => setConnected(cleanConnectedSources(event.detail)); window.addEventListener("folio:connected", onConnected); return () => window.removeEventListener("folio:connected", onConnected); }, []); const toggle = (id) => { setOpenInput(openInput === id ? null : id); }; const setValue = (id, val) => { const next = { ...connected, [id]: val ? { value: val } : undefined }; Object.keys(next).forEach(k => next[k] === undefined && delete next[k]); setConnected(next); setFlow({ connected: next }); }; const count = Object.keys(connected).length; const canContinue = count > 0; return (
Bring what already exists.} sub="Add the work Folio is allowed to read: GitHub, resume, LinkedIn PDF export, portfolio links, and a picture. Nothing is posted anywhere." >
{window.SOURCES.map(s => { const isConnected = !!connected[s.id]; const isOpen = openInput === s.id; return (
{isOpen && (
{ if (e.key === "Enter") { setValue(s.id, e.target.value); setOpenInput(null); } if (e.key === "Escape") setOpenInput(null); }} />
)}
); })}
{/* Right rail — connected summary */}
CONNECTED · {count}
{count === 0 ? (

Add at least one source. Start with a resume, GitHub, LinkedIn PDF, a link, or your picture.

) : (
{Object.entries(connected).map(([id, v]) => { const s = window.SOURCES.find(x => x.id === id); return (
{s.label}
{v.value}
); })}
)}
TAKES ABOUT 60 SECONDS
Or, build from a name and role only — manual mode.
); } function SourceGlyph({ id, small = false }) { const sz = small ? 24 : 32; const map = { github: , linkedin_pdf: , resume: , links: , image: , }; const initial = (window.SOURCES.find(s => s.id === id)?.label || "?")[0]; return (
{map[id] || initial}
); } // ── Step 03: AI Scan ─────────────────────────────────────────────────────── function ScanScreen() { const [flow] = useFlow(); const [, navigate] = useHashRoute(); const [progress, setProgress] = React.useState(0); const [logIdx, setLogIdx] = React.useState(0); const persona = window.PERSONAS[flow.persona || "maya"]; const sourceCount = Object.keys(cleanConnectedSources(flow.connected)).length; const log = [ "Loading approved source items from your Folio workspace…", "Parsing resume, GitHub, LinkedIn URL, and image signals where connected…", "Extracting project names, roles, skills, dates, and links…", "Checking each generated claim against saved source citations…", "Detecting positioning from the strongest approved evidence…", "Selecting projects and proof points by relevance…", "Preparing template-specific portfolio sections…", "Flagging anything that needs your review…", "Saving the generation state to your draft workspace…", "Done. Found your strongest work.", ]; React.useEffect(() => { let p = 0; const id = setInterval(() => { p += 1.6; if (p >= 100) { setProgress(100); clearInterval(id); setTimeout(() => navigate("/direction"), 900); return; } setProgress(p); setLogIdx(Math.min(log.length - 1, Math.floor((p / 100) * log.length))); }, 80); return () => clearInterval(id); }, []); return (
STEP 03 — READING YOUR WORK

Finding your strongest work.

Reading {sourceCount} {sourceCount === 1 ? "source" : "sources"}. Don't refresh — we're nearly there.

{/* Progress bar */}
{Math.floor(progress)}% 00:{String(Math.max(0, Math.floor(60 - progress * 0.6))).padStart(2, "0")} REMAINING
{/* Live log */}
{log.slice(0, logIdx + 1).map((l, i) => (
{i === logIdx ? "▸" : "✓"} {l}
))}
); } function ScanRingLoader() { return (
F
); } // ── Step 04: Direction (3 positioning options) ──────────────────────────── function DirectionScreen() { const [flow, setFlow] = useFlow(); const [, navigate] = useHashRoute(); const persona = window.PERSONAS[flow.persona || "maya"]; const [selected, setSelected] = React.useState(flow.direction || persona.positioning.find(p => p.recommended).id); const onPick = (id) => { setSelected(id); setFlow({ direction: id }); }; return (
Three drafts. Pick the one that sounds like you.} sub={`Based on what we read, here are three angles that fit. Your work appears differently in each. You can edit anything later.`} >
{persona.positioning.map((p, i) => { const isSel = selected === p.id; return ( ); })}
navigate("/design")} rightHint="Pick a design →" />
); } function Field({ isSel, label, value }) { return (
{label}
{value}
); } // ── Shared flow footer ───────────────────────────────────────────────────── function FlowFooter({ back, onContinue, rightHint, continueLabel = "Continue" }) { const [, navigate] = useHashRoute(); return (
{back ? ( ) :
}
{rightHint && (
{rightHint}
)} {onContinue && ( )}
); } Object.assign(window, { GoalScreen, ConnectScreen, ScanScreen, DirectionScreen, FlowFooter });