// Shared hooks and small components used across the three variations.
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;
// ─── Typewriter terminal ────────────────────────────────────────────────────
function useTypewriterLines(lines, opts = {}) {
const speed = opts.speed ?? 18;
const pause = opts.pause ?? 280;
const [rendered, setRendered] = useState([]);
const [cursorOn, setCursorOn] = useState(true);
useEffect(() => {
let cancelled = false;
let timeouts = [];
setRendered([]);
async function run() {
const out = [];
for (let i = 0; i < lines.length; i++) {
const ln = lines[i];
if (cancelled) return;
if (ln.o !== undefined) {
// output line — stream char by char fast
const text = ln.o;
let cur = "";
for (let c = 0; c < text.length; c++) {
if (cancelled) return;
cur += text[c];
await new Promise((r) => timeouts.push(setTimeout(r, 6)));
if (!cancelled) setRendered([...out, { kind: "o", text: cur }]);
}
out.push({ kind: "o", text });
} else {
// command line: prompt + typed command
const prompt = ln.p ?? "$ ";
const cmd = ln.c ?? "";
await new Promise((r) => timeouts.push(setTimeout(r, pause)));
let cur = "";
for (let c = 0; c < cmd.length; c++) {
if (cancelled) return;
cur += cmd[c];
await new Promise((r) => timeouts.push(setTimeout(r, speed)));
if (!cancelled) setRendered([...out, { kind: "c", prompt, text: cur }]);
}
out.push({ kind: "c", prompt, text: cmd });
}
}
}
run();
return () => {
cancelled = true;
timeouts.forEach(clearTimeout);
};
}, [JSON.stringify(lines), speed, pause]);
useEffect(() => {
const id = setInterval(() => setCursorOn((c) => !c), 530);
return () => clearInterval(id);
}, []);
return { rendered, cursorOn };
}
// ─── Reveal-on-scroll wrapper ───────────────────────────────────────────────
function Reveal({ children, delay = 0, y = 14, className = "", as: Tag = "div", style = {} }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setTimeout(() => setShown(true), delay);
io.disconnect();
}
});
},
{ threshold: 0.08, rootMargin: "0px 0px -40px 0px" }
);
io.observe(el);
return () => io.disconnect();
}, [delay]);
return (
{children}
);
}
// ─── Custom cursor (terminal block) ─────────────────────────────────────────
function CustomCursor({ accent = "oklch(0.78 0.19 145)", enabled = true }) {
const [pos, setPos] = useState({ x: -100, y: -100 });
const [hover, setHover] = useState(false);
const [visible, setVisible] = useState(false);
useEffect(() => {
if (!enabled) return;
const move = (e) => {
setPos({ x: e.clientX, y: e.clientY });
setVisible(true);
const t = e.target;
const interactive = t && (t.closest("a, button, [data-cursor='hover'], input, textarea"));
setHover(!!interactive);
};
const leave = () => setVisible(false);
window.addEventListener("mousemove", move);
window.addEventListener("mouseleave", leave);
return () => {
window.removeEventListener("mousemove", move);
window.removeEventListener("mouseleave", leave);
};
}, [enabled]);
if (!enabled) return null;
return (
<>
);
}
// ─── Photo placeholder/real ────────────────────────────────────────────────
function ProfilePhoto({ src = "assets/maxwell.png", size = 120, accent, square = false, ring = true }) {
return (
);
}
// ─── Demo com respostas pré-definidas (sem API) ─────────────────────────────
const CANNED = {
en: {
fixed: {
"What's Maxwell's strongest stack?": "PHP 8.x / Laravel 12 + Vue 3 / TypeScript is where I'm most battle-tested — 6+ years, platforms serving 3M+ users with zero critical incidents. PostgreSQL, Redis, Kafka/RabbitMQ and Docker round out the core.",
"How does he use AI in production?": "Daily workflow: Claude Code for PR acceleration (~30% faster), custom MCP servers to automate repetitive tasks, RAG pipelines for document-heavy features, and autonomous agents for code review and test generation. It's tooling, not theatre.",
"Why hire a senior PHP dev in 2026?": "Because most products still run on PHP, and running it well — Clean Architecture, zero-downtime migrations, distributed messaging — is a rare skill. I also ship AI-native features on top of that foundation, so you get both.",
},
fallback: [
"That's a good question. I've shipped systems at this scale before — happy to walk through specifics on a call.",
"Clean Architecture + SOLID + TDD is the baseline. Everything else (AI, messaging, cloud) plugs in on top of that foundation.",
"I work async, ship daily commits, and communicate in plain English. US/Canada timezone overlap is easy from GMT-3.",
"Available immediately for senior FullStack contracts — PJ/Contractor, 100% remote, flexible hours.",
"My SDD workflow means specs drive tests, tests drive code. Fewer surprises, more predictable delivery.",
"6+ years, 3M+ users, 700+ tenants, 0 critical post-release incidents in 2025. The numbers speak for themselves.",
"Laravel 12, PHP 8.5, Vue 3, TypeScript, PostgreSQL, Redis, Kafka, RabbitMQ, Docker, AWS, GCP, Anthropic — all in production, not just on a resume.",
"I'd love to chat. Fastest way: maxwellmezadre@gmail.com — I reply within 24h.",
],
},
pt: {
fixed: {
"Qual a stack mais forte do Maxwell?": "PHP 8.x / Laravel 12 + Vue 3 / TypeScript é onde tenho mais batalha — 6+ anos, plataformas com 3M+ usuários e zero incidentes críticos. PostgreSQL, Redis, Kafka/RabbitMQ e Docker completam o core.",
"Como ele usa IA em produção?": "Workflow diário: Claude Code pra acelerar PRs (~30% mais rápido), servidores MCP customizados pra automatizar tarefas repetitivas, pipelines RAG pra features pesadas em documentos, e agentes autônomos pra code review e geração de testes. É tooling, não teatro.",
"Por que contratar um PHP sênior em 2026?": "Porque a maioria dos produtos ainda roda em PHP, e rodar bem — Clean Architecture, migrações zero-downtime, mensageria distribuída — é skill rara. Eu também shipto features AI-native em cima dessa base, então você leva os dois.",
},
fallback: [
"Boa pergunta. Já entreguei sistemas nessa escala antes — posso detalhar numa call.",
"Clean Architecture + SOLID + TDD é o baseline. Todo o resto (IA, mensageria, cloud) pluga em cima dessa fundação.",
"Trabalho async, commito diariamente e me comunico em inglês com times US/Canadá. Timezone GMT-3 tem bastante overlap.",
"Disponível imediatamente pra contratos FullStack sênior — PJ, 100% remoto, horário flexível.",
"Meu workflow SDD significa que specs geram testes, testes geram código. Menos surpresas, entrega mais previsível.",
"6+ anos, 3M+ usuários, 700+ tenants, 0 incidentes críticos pós-release em 2025. Os números falam por si.",
"Laravel 12, PHP 8.5, Vue 3, TypeScript, PostgreSQL, Redis, Kafka, RabbitMQ, Docker, AWS, GCP, Anthropic — tudo em produção, não só no currículo.",
"Adoro conversar. Forma mais rápida: maxwellmezadre@gmail.com — respondo em até 24h.",
],
},
};
function ClaudeDemo({ copy, accent, dense = false, lang = "en", onCmd = null }) {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState("");
const [busy, setBusy] = useState(false);
const scrollRef = useRef(null);
const canned = CANNED[lang] || CANNED.en;
useEffect(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}, [messages, busy]);
const send = (q) => {
const question = (q ?? input).trim();
if (!question || busy) return;
setInput("");
// Intercept /commands — reply in chat with relevant content
if (question.startsWith("/")) {
const cmd = question.slice(1).toLowerCase().trim();
const cmdReplies = {
en: {
about: "I'm Maxwell Mezadre — Senior FullStack Developer based in Rio Grande do Sul, Brazil (GMT-3). 6+ years shipping production systems for US, Canada and Brazil clients. I specialize in PHP/Laravel, Vue 3, distributed systems and AI-native engineering. Available immediately, 100% remote, PJ/Contractor.",
stack: "Primary: PHP 8.x · Laravel 12 · Livewire 3 · Vue 3 · TypeScript · Tailwind · PostgreSQL · Redis · Kafka · RabbitMQ · Docker · AWS · GCP · Anthropic · MCP. Also comfortable with: Node.js · React · MySQL · MongoDB · Azure · Pest · PHPUnit · Elixir · Go.",
contact: "📧 maxwellmezadre@gmail.com · GitHub: github.com/maxwellmezadre · LinkedIn: linkedin.com/in/maxwell-mezadre · Available for PJ contracts, replies within 24h.",
experience: "Sep 2025–Now: Senior FullStack @ US/Canada Consultancy. Jan 2023–Sep 2025: Senior PHP @ Brazilian Real Estate SaaS (3M+ users, 700+ agencies). Nov 2021–Dec 2022: Mid PHP @ same platform. Sep 2019–Nov 2021: Junior PHP + RPA @ Real Estate & Financial Cooperative.",
projects: "01 AI Chargeback Engine · 02 Multi-Currency CRM · 03 Healthcare CRM SaaS · 04 Real Estate Platform (3M+ users) · 05 PHP 5.6→8.x Migration (zero downtime, -60% bugs) · 06 AI Agent + RAG Pipeline.",
matrix: "↑↑↓↓←→←→BA — you found it. Activating matrix mode…",
ai: "I use Claude Code, custom MCP servers, RAG pipelines and autonomous agents daily. ~30% faster PR throughput. AI isn't decoration — it's my actual workflow. SDD: specs → tests → code, all accelerated by AI tooling.",
sdd: "Spec-Driven Development: every feature starts from a written spec → derived contracts (OpenAPI) → tests generated from acceptance criteria → implementation against those tests. Result: predictable delivery, full coverage, no surprises.",
},
pt: {
about: "Sou Maxwell Mezadre — Desenvolvedor FullStack Sênior baseado no RS, Brasil (GMT-3). 6+ anos entregando sistemas em produção para clientes US, Canadá e Brasil. Especialista em PHP/Laravel, Vue 3, sistemas distribuídos e engenharia AI-native. Disponível imediatamente, 100% remoto, PJ.",
stack: "Primário: PHP 8.x · Laravel 12 · Livewire 3 · Vue 3 · TypeScript · Tailwind · PostgreSQL · Redis · Kafka · RabbitMQ · Docker · AWS · GCP · Anthropic · MCP. Também: Node.js · React · MySQL · MongoDB · Azure · Pest · PHPUnit · Elixir · Go.",
contact: "📧 maxwellmezadre@gmail.com · GitHub: github.com/maxwellmezadre · LinkedIn: linkedin.com/in/maxwell-mezadre · Disponível para contratos PJ, resposta em até 24h.",
experience: "Set 2025–Atual: FullStack Sênior @ Consultoria US/Canadá. Jan 2023–Set 2025: PHP Sênior @ SaaS Imobiliária (3M+ usuários, 700+ imobiliárias). Nov 2021–Dez 2022: PHP Pleno @ mesma plataforma. Set 2019–Nov 2021: PHP Jr + RPA @ Imobiliária & Cooperativa Financeira.",
projects: "01 Motor IA de Chargeback · 02 CRM Multi-Moeda · 03 CRM SaaS de Saúde · 04 Plataforma Imobiliária (3M+ usuários) · 05 Migração PHP 5.6→8.x (zero downtime, -60% bugs) · 06 Agente IA + Pipeline RAG.",
matrix: "↑↑↓↓←→←→BA — você achou. Ativando modo matrix…",
ai: "Uso Claude Code, servidores MCP customizados, pipelines RAG e agentes autônomos diariamente. ~30% mais rápido nos PRs. IA não é decoração — é meu workflow real. SDD: specs → testes → código, tudo acelerado por IA.",
sdd: "Spec-Driven Development: toda feature começa com uma spec escrita → contratos derivados (OpenAPI) → testes gerados das ACs → implementação contra esses testes. Resultado: entrega previsível, cobertura total, sem surpresas.",
},
};
const replies = cmdReplies[lang] || cmdReplies.en;
const reply = replies[cmd] ?? (lang === "pt"
? `Comando não encontrado. Tente /about, /stack, /contact, /experience, /projects, /ai, /sdd, /matrix.`
: `Command not found. Try /about, /stack, /contact, /experience, /projects, /ai, /sdd, /matrix.`);
setMessages((m) => [
...m,
{ role: "user", content: question },
{ role: "assistant", content: reply },
]);
if (cmd === "matrix" && onCmd) setTimeout(() => onCmd("matrix"), 800);
return;
}
setMessages((m) => [...m, { role: "user", content: question }]);
setBusy(true);
// Simulate a short typing delay
const delay = 480 + Math.random() * 400;
setTimeout(() => {
const fixed = canned.fixed[question];
const reply = fixed ?? canned.fallback[Math.floor(Math.random() * canned.fallback.length)];
setMessages((m) => [...m, { role: "assistant", content: reply }]);
setBusy(false);
}, delay);
};
return (