// Hero + Terminal boot sequence const { useState, useEffect, useRef } = React; function TerminalBoot({ lines }) { const [visible, setVisible] = useState(0); const [typed, setTyped] = useState(""); useEffect(() => { let cancelled = false; setVisible(0); setTyped(""); async function run() { for (let i = 0; i < lines.length; i++) { if (cancelled) return; const body = lines[i].body; // type each char quickly for (let c = 0; c <= body.length; c++) { if (cancelled) return; setTyped(body.slice(0, c)); await new Promise(r => setTimeout(r, 8)); } if (cancelled) return; setVisible(v => v + 1); setTyped(""); await new Promise(r => setTimeout(r, 120)); } } run(); return () => { cancelled = true; }; }, [lines]); return ( ); } function Hero({ t, lang }) { return (

{lang === "ja" ? ( <> Shunsuke
Maeda 前田隼輔 @duck8823 · ~/portfolio ) : ( <> Shunsuke
Maeda 前田隼輔 · Software Engineer @duck8823 · ~/portfolio )}

{t.intro.label}

github hatena speakerdeck slideshare instagram

{t.intro.meta.map((m, i) => (

{m.k} {(m.k === "status") ? {m.v} : m.v}

))}

); } Object.assign(window, { TerminalBoot, Hero });