// Portfolio components - part 1: hero variants + shared UI const { useState, useEffect, useRef, useMemo } = React; // --------- Typing effect hook ---------- function useTyping(lines, speed = 28, startDelay = 200, enabled = true) { const [rendered, setRendered] = useState(enabled ? [] : lines); const [done, setDone] = useState(!enabled); useEffect(() => { if (!enabled) { setRendered(lines); setDone(true); return; } setRendered([]); setDone(false); let cancelled = false; let lineIdx = 0; let charIdx = 0; const out = []; const step = () => { if (cancelled) return; if (lineIdx >= lines.length) { setDone(true); return; } const full = lines[lineIdx]; if (full.instant) { out.push(full); lineIdx++; charIdx = 0; setRendered([...out]); setTimeout(step, full.pause ?? 60); return; } const text = full.prompt ? (full.cmd || '') : (typeof full === 'string' ? full : full.text); if (charIdx <= text.length) { const partial = full.prompt ? { ...full, cmd: text.slice(0, charIdx) } : typeof full === 'string' ? text.slice(0, charIdx) : { ...full, text: text.slice(0, charIdx) }; out[lineIdx] = partial; setRendered([...out]); charIdx++; setTimeout(step, speed); } else { lineIdx++; charIdx = 0; setTimeout(step, (typeof full === 'object' && full.pause) ? full.pause : 120); } }; const t = setTimeout(step, startDelay); return () => { cancelled = true; clearTimeout(t); }; }, [enabled, lines, speed, startDelay]); return [rendered, done]; } // --------- Icons (Lucide-style inline) ---------- const Icon = ({ name, size = 18 }) => { const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" }; const paths = { github: , linkedin: <>, mail: <>, download: <>, external: <>, arrow: <>, instagram: <>, link: <>, phone: , map: <>, terminal: <>, code: <>, star: , gitbranch: <>, cpu: <>, zap: , briefcase: <>, book: <>, folder: , tool: , copy: <>, check: , users: <>, letterboxd: <>, lastfm: <>, }; return ; }; // --------- Hero: Terminal ---------- function HeroTerminal({ lang, data, animations }) { const lines = useMemo(() => { const isPT = lang === 'pt'; const promptPrefix = { prompt: true }; return [ { prompt: true, cmd: isPT ? 'whoami' : 'whoami', pause: 220 }, { text: isPT ? `Guilherme B. Pagano - Engenheiro de Dados & Software` : `Guilherme B. Pagano - Data & Software Engineer`, out: true, pause: 300 }, { prompt: true, cmd: 'cat about.md', pause: 220 }, { text: `Rust + Python · Linux · Industrial systems · ML from scratch`, out: true, accent: true, pause: 260 }, { prompt: true, cmd: 'ls ~/projects/featured', pause: 220 }, { text: 'courier/ lunakbd/ nn-from-scratch/ cellular-automata/', out: true, listing: true, pause: 260 }, { prompt: true, cmd: isPT ? 'echo $AVAILABILITY' : 'echo $AVAILABILITY', pause: 200 }, { text: isPT ? 'aberto para conversas · colabs · ideias interessantes' : 'open to conversations · collabs · interesting ideas', out: true, green: true, pause: 200 }, { instant: true, prompt: true, cmd: '', final: true }, ]; }, [lang]); const [rendered, done] = useTyping(lines, 22, 150, animations); const renderLine = (l, i) => { if (!l) return null; if (l.prompt) { return (

╭─ gbpagano@arch ~/portfolio

╰─ $ {l.cmd && {l.cmd}} {l.final && done && }

); } if (l.out) { const cls = "term-out" + (l.accent ? " term-key" : ""); const style = l.accent ? { color: "var(--accent)" } : l.green ? { color: "var(--ctp-green)" } : l.listing ? { color: "var(--ctp-blue)" } : {}; return

{typeof l === 'string' ? l : (l.text || '')}

; } return

{typeof l === 'string' ? l : (l.text || '')}

; }; return (

ghostty - zsh

{rendered.map(renderLine)}

GitHub {lang==='pt'?'Baixar currículo':'Download resume'} {lang==='pt'?'Entrar em contato':'Get in touch'}

); } // --------- Hero: Big Type ---------- function HeroBig({ lang, data }) { const isPT = lang === 'pt'; return (

{isPT?'Disponível para conversas':'Open to conversations'} {data.location[lang]}

Guilherme
Pagano. {isPT?'engenheiro de dados & software':'data & software engineer'}

> {isPT?'rust · wasm · kubernetes · controle industrial':'rust · wasm · kubernetes · industrial control'}

{data.blurb[lang]}

{isPT?'Ver projetos':'See projects'} GitHub CV

{isPT?'Baseado em':'Based in'}

Uberlândia, BR

{isPT?'Atualmente':'Currently'}

IHM Stefanini

{isPT?'Foco':'Focus'}

Rust · WASM · K8s

{isPT?'Experiência':'Experience'}

3.5 {isPT?'anos':'years'}

); } // --------- Hero: Code Running ---------- function HeroCode({ lang, data, animations }) { const isPT = lang === 'pt'; const [step, setStep] = useState(0); useEffect(() => { if (!animations) { setStep(5); return; } const t = setInterval(() => setStep(s => Math.min(s + 1, 5)), 400); return () => clearInterval(t); }, [animations]); return (

> cargo run --release

{isPT ? (<>Construindo sistemas que rodam em Rust, escalam em Kubernetes e pensam em WebAssembly.) : (<>Building systems that run in Rust, scale in Kubernetes, and think in WebAssembly.)}

{data.blurb[lang]}

{isPT?'Projetos':'Projects'} @gbPagano

RUST pid_loop.rs

{`${step>=0?'':''}`}// PID tuning, client-side, via WASM{`
`}pub fn tune(loop_: &Loop) -> Gains {`{
    `}let model = Model::identify(loop_);{`
    `}let gains = model.autotune(Method::IMC);{`
    `}assert!(gains.is_stable());{`
    gains
}

`}fn main() {`{
    `}println!("running {} tests...", 1284);{`
    `}println!("✓ all passed");{`
}`}

); } window.HeroTerminal = HeroTerminal; window.HeroBig = HeroBig; window.HeroCode = HeroCode; window.Icon = Icon;

Guilherme Pagano. {isPT?'engenheiro de dados & software':'data & software engineer'}

{isPT ? (<>Construindo sistemas que rodam em Rust, escalam em Kubernetes e pensam em WebAssembly.) : (<>Building systems that run in Rust, scale in Kubernetes, and think in WebAssembly.)}

Guilherme
Pagano. {isPT?'engenheiro de dados & software':'data & software engineer'}