// Portfolio component — terminal/retro style
const { useState, useEffect, useRef, useMemo } = React;
// ============ DATA ============
const POSTS = [
{ date: "2026-04-18", title: "Auditando agent harnesses: cómo armé AgentPay y gané la hackathon de Anthropic", readTime: "12 min", words: 2840, tags: ["llms", "agents"] },
{ date: "2026-03-22", title: "Patrones de tool calling y MCP que usamos en Acelera", readTime: "8 min", words: 1620, tags: ["llms", "agents"] },
{ date: "2026-02-09", title: "RAG en producción: del prototipo al agente que entrega valor real", readTime: "15 min", words: 3210, tags: ["rag", "agents"] },
{ date: "2026-01-14", title: "Construyendo un agente que opera mi terminal sin volverse loco", readTime: "11 min", words: 2440, tags: ["llms", "rust"] },
{ date: "2025-12-02", title: "RAG es solo búsqueda vieja con esteroides (y eso está bien)", readTime: "6 min", words: 1180, tags: ["rag"] },
{ date: "2025-10-21", title: "Deployando Whisper.cpp en una Raspberry Pi 5", readTime: "9 min", words: 1890, tags: ["infra"] },
{ date: "2025-09-08", title: "Notas sobre vector DBs después de probar 6 en producción", readTime: "14 min", words: 3050, tags: ["rag", "infra"] },
{ date: "2025-07-30", title: "Cómo entrené un clasificador de spam con 200 ejemplos", readTime: "7 min", words: 1450, tags: ["llms"] },
{ date: "2025-06-12", title: "PyTorch vs JAX: el debate que ya nadie quiere tener", readTime: "10 min", words: 2120, tags: ["llms"] },
{ date: "2025-04-25", title: "Dataset cleaning es el 80% del trabajo y nadie lo quiere admitir", readTime: "5 min", words: 980, tags: ["rag"] },
];
const TAGS = ["llms", "rag", "infra", "rust"];
const PROJECTS = [
{ name: "agentpay", year: "2026", desc: "plugin de seguridad para claude code: intercepta operaciones financieras, detecta skills maliciosas y bloquea mcps. 1er puesto en anthropic & kaszek push to prod hackathon.", link: "github.com/MauroProto", tag: "[1er puesto]",
longDesc: "AgentPay es un plugin de seguridad para Claude Code que ganó el 1er puesto en el Anthropic & KASZEK Push to Prod Hackathon 2026. La idea: cuando un agente IA empieza a operar con plata, instalar skills nuevas o conectarse a MCPs externos, el riesgo deja de ser teórico. AgentPay se mete entre el agente y el sistema operativo para bloquear lo que no debería pasar y dejar pasar lo que sí.",
sections: [
{ title: "qué hace", body: "tres capas de defensa que corren en orden. (1) intercepción de operaciones financieras antes de ejecutarse para que el agente nunca pueda mover plata sin pasar por una validación explícita. (2) detección de skills maliciosas instaladas en el harness, comparando contra una lista de patrones conocidos y heurísticas de comportamiento. (3) bloqueo de MCPs sospechosos por reputación, firma o comportamiento sospechoso al conectarse." },
{ title: "stack", body: "claude code · plugins API · MCP · validación de skills · políticas declarativas. distribuido como plugin oficial vía marketplace." },
],
},
{ name: "lain agent", year: "2026", desc: "chat web con ia para optimizar prompts, mantener conversaciones con contexto y analizar imágenes. next.js + react + typescript.", link: "lainagent.com", tag: "[activo]",
longDesc: "Lain empezó como un chat wrapper y terminó siendo una plataforma con varios modos de razonamiento, sistema de memoria semántica entre conversaciones y un scaffolder que orquesta agentes en paralelo para generar proyectos completos. La idea es que el chat no se olvide de quién sos ni de qué hablaron antes, y que cuando le pidas un proyecto, lo arme.",
sections: [
{ title: "cómo funciona", body: "el usuario elige entre cuatro modos: chat directo, exploración lateral, optimización iterativa de prompts, y un scaffolder que descompone el proyecto en tareas y las dispara en paralelo a workers especializados. cada modo cambia cómo se planifica y se entrega la respuesta." },
{ title: "memoria", body: "cada conversación genera embeddings vectoriales que se guardan en postgres. cuando hacés una pregunta nueva, el sistema busca por similitud coseno en memorias previas de todos tus chats e inyecta el contexto relevante automáticamente. tres tipos de memoria: dentro del chat, entre chats, y vinculada a generaciones del scaffolder." },
{ title: "stack", body: "next.js · typescript · openai · prisma · postgresql · zustand · nextauth · jwt." },
],
},
{ name: "ml canvas", year: "2025", desc: "plataforma visual de machine learning con nodos interactivos. armás un pipeline arrastrando bloques y se ejecuta en python en el backend.", link: "github.com/MauroProto", tag: "[activo]",
longDesc: "ML Canvas nació de una frustración: los notebooks de Jupyter son lineales y el código se vuelve un desorden rápido. La solución fue un canvas infinito donde cada paso del pipeline de ML es un nodo visual que se conecta con otros arrastrando cables. Subís un CSV, lo conectás a un nodo de preprocesamiento, ese a un modelo, y el resultado a un nodo de visualización. Todo se ejecuta en Python en el backend, pero el usuario nunca toca código si no quiere.",
sections: [
{ title: "nodos", body: "trece tipos de nodos organizados en cuatro categorías. datos (subida de csv, split train/test). preprocesamiento (encoding, scaling, normalización, PCA, feature selection, imputación). modelos (logistic regression, random forest, svm, knn, xgboost, gradient boosting, decision tree, mlp, ridge, lasso, elastic net, svr, linear regression). visualización (curvas roc, matrices de confusión, histogramas y scatter plots con plotly)." },
{ title: "ejecución segura", body: "cuando se conecta el pipeline, el backend genera código python dinámicamente y lo corre en un sandbox con whitelist de librerías permitidas (scikit-learn, pandas, numpy, xgboost) y límites de memoria + timeout. los resultados se devuelven al frontend vía api y el canvas se autoguarda cada 30 segundos." },
{ title: "modos y asistente IA", body: "tres modos de trabajo: canvas visual con react flow, formulario paso a paso para principiantes, y editor python para usuarios avanzados. el chat con gpt tiene acceso al estado completo del canvas y memoria semántica entre sesiones para sugerir nodos, explicar métricas o modificar el pipeline." },
],
},
{ name: "huella del fuego", year: "2024", desc: "dashboard de incendios en argentina con datos satelitales nasa firms, mapas interactivos y modelos de ml. 3ra mención en el concurso 'contar con datos'.", link: "github.com/MauroProto", tag: "[3ra mención]",
longDesc: "Proyecto para la competencia de datos UdeSA. El objetivo era predecir riesgo de incendios forestales en las 21 provincias argentinas usando datos satelitales de NASA FIRMS. Entrené sobre un dataset de 2,184 muestras con 23 features (temperaturas, precipitaciones, NDVI, historial de focos, variables estacionales) y el modelo final fue un Random Forest que alcanzó 0.7947 de test accuracy y 0.790 de F1. El proyecto ganó la 3ra mención del concurso 'Contar con Datos'.",
sections: [
{ title: "pipeline de datos", body: "el pipeline descarga focos de calor de la api de nasa firms (satélite viirs, últimas 48hs), los cruza con datos meteorológicos históricos y calcula features derivados: lags de 1-3 meses, medias móviles, ciclos estacionales sin/cos, ndvi promedio por provincia y densidad histórica de focos. la actualización corre cada 24hs vía github actions." },
{ title: "modelo y resultados", body: "comparé random forest, xgboost y lightgbm con validación temporal (train hasta 2022, test en 2023). random forest ganó con 0.7947 de accuracy. el output son 252 predicciones (21 provincias × 12 meses) con un nivel de riesgo (bajo, medio, alto). features más importantes: temperatura máxima promedio, focos históricos del mismo mes y ndvi." },
{ title: "dashboard", body: "el frontend tiene cuatro páginas: mapa con leaflet mostrando focos activos en tiempo real, mapa de riesgo por provincia con visualización hexagonal h3, gráficos de tendencias con plotly, y una tabla filtrable por provincia y mes. deployado en vercel con datos actualizándose automáticamente." },
],
},
{ name: "neural network 3d", year: "2024", desc: "visualizador 3d interactivo para explicar capas, pesos, activaciones y forward propagation sobre mnist. three.js + pytorch.", link: "github.com/MauroProto", tag: "[activo]",
longDesc: "Quería entender visualmente qué pasa adentro de una red neuronal cuando clasifica un dígito. Entrené un MLP en PyTorch con arquitectura 784→128→64→10 sobre MNIST y Fashion-MNIST. Después exporté los pesos y construí un visualizador 3D con Three.js donde cada neurona es una esfera que se ilumina según su activación, y las conexiones entre neuronas son líneas cuya opacidad refleja el peso de la conexión.",
sections: [
{ title: "training", body: "el modelo se entrena en pytorch con soporte metal (mac) y cuda. en mnist alcanza ~98% accuracy y en fashion-mnist 0.789 de f1. el script de training exporta los pesos como json plano que el frontend parsea para hacer inferencia directamente en el browser sin backend." },
{ title: "visualización", body: "dibujás un número en un canvas html, la imagen se downscalea a 28×28 y pasa por el forward pass del modelo en javascript. en cada capa, las activaciones determinan el color y tamaño de cada neurona en la escena 3d. para no matar el rendimiento, las conexiones renderizadas se limitan a 25k (la capa 784→128 tiene 100k+ conexiones, así que se muestran las top por peso absoluto). cámara con orbit controls de three.js." },
],
},
{ name: "badger", year: "2025", desc: "copilot de seguridad para apps web con ia. escanea repos de github y detecta riesgos de auth, secrets, endpoints de ia, supabase y supply chain. vercel zero to agent.", link: "github.com/MauroProto", tag: "[activo]",
longDesc: "Badger es un copilot de seguridad pensado para apps web creadas con asistencia de IA, donde el código se genera rápido y no siempre se revisa con la misma rigurosidad que un desarrollo manual. Escanea un repositorio de GitHub sin ejecutar código y detecta riesgos típicos de stacks modernos: configuraciones de auth débiles, secrets expuestos, endpoints de IA mal asegurados, problemas de Supabase y dependencias del supply chain.",
sections: [
{ title: "escaneo", body: "el usuario conecta un repo de github y badger corre un análisis estático sobre el código sin ejecutarlo. identifica patrones de riesgo y devuelve un reporte priorizado por severidad, con sugerencias accionables y links al lugar exacto del repo donde está el problema." },
{ title: "stack", body: "static analysis · github api · reglas heurísticas para auth, secrets y endpoints de IA · cobertura específica para supabase y supply chain. construido durante el programa vercel zero to agent." },
],
},
{ name: "guard", year: "2026", desc: "supply-chain security cli en go para proyectos pnpm y github actions. integración con claude code para revisar dependencias, workflows, mcps y cambios riesgosos antes de prod.", link: "github.com/MauroProto/guard", tag: "[activo]",
longDesc: "Guard responde una sola pregunta antes de que un cambio de dependencias o CI entre al repositorio: ¿podemos confiar en este cambio? Es una CLI escrita en Go que combina cinco chequeos distintos en un solo comando: posture de repositorio, revisión de lockfile y dependencias, hardening de workflows, validación de políticas con excepciones, y output machine-readable pensado para CI y automatización.",
sections: [
{ title: "chequeos", body: "la cli toma el pnpm-lock.yaml y los workflows de .github/ y les aplica una cadena de reglas: paquetes sin 2fa, scripts de postinstall sospechosos, permisos excesivos en github actions, triggers riesgosos como pull_request_target, refs de actions sin pin, y compara los hallazgos contra políticas declaradas. el output es json + sarif para integrarse con github checks o codeql, más un formato legible en terminal." },
{ title: "plugin de claude code", body: "además de la cli headless, guard distribuye un plugin para claude code via marketplace.json. dentro de sesiones de edición el plugin corre scans focalizados (review-pr, baseline, policy lint) sin reemplazar a la cli, que queda como fuente de verdad para ci. arquitectura híbrida: cli first-class para pipelines, plugin para iteración interactiva." },
{ title: "instalación", body: "go install, script curl-pipe, o directamente desde el marketplace de claude code. requiere go 1.23+ para compilar desde fuente. distribución con binarios pre-compilados para macos, linux y windows." },
],
},
{ name: "synthetic", year: "2025", desc: "generador local de datasets sintéticos de q&a desde pdfs. chunking semántico, evaluación con llms y exportación lista para fine-tuning.", link: "github.com/MauroProto", tag: "[activo]",
longDesc: "Synthetic es una herramienta local para generar datasets sintéticos de Q&A a partir de PDFs. Toma uno o varios documentos, los parte en chunks usando segmentación semántica (no por número fijo de tokens), y le pide a un LLM que genere pares pregunta-respuesta para cada chunk. Después corre una pasada de evaluación con LLM para filtrar pares de baja calidad y exporta el dataset en un formato listo para fine-tuning.",
sections: [
{ title: "pipeline", body: "chunking semántico → generación de q&a con llm → evaluación automática para filtrar pares débiles → exportación en formato listo para fine-tuning. cada paso es independiente y configurable, así podés cambiar el modelo de generación o de evaluación sin tocar el resto." },
{ title: "uso", body: "todo corre localmente, así que sirve para datos sensibles que no querés mandar a apis externas durante el procesamiento. soporta múltiples pdfs en una sola corrida y permite resumir corridas anteriores si interrumpiste el proceso." },
],
},
{ name: "discord llm bot", year: "2024", desc: "bot opensource para discord con múltiples providers llm, memoria unificada entre chat y voz, elevenlabs stt/tts, streaming de respuestas y soporte mcp.", link: "github.com/MauroProto", tag: "[activo]",
longDesc: "Un bot open-source para Discord que funciona como puerta de entrada a múltiples providers LLM (OpenAI, Anthropic, etc.) desde el chat o desde un canal de voz. La memoria es unificada: lo que se conversa por texto está disponible en voz y al revés, así una conversación puede saltar de un canal a otro sin perder contexto.",
sections: [
{ title: "voz y streaming", body: "speech-to-text y text-to-speech con elevenlabs para que la voz suene natural. las respuestas se streamean al canal a medida que el modelo las genera, en lugar de esperar a tener el bloque completo. el usuario empieza a leer/escuchar la respuesta apenas el modelo arranca." },
{ title: "mcp y multi-provider", body: "soporte mcp para extender las capacidades del bot conectándolo con herramientas externas. los providers llm son intercambiables (openai, anthropic, etc.), así una misma conversación puede mezclar modelos según el contexto sin que el usuario tenga que pensar en eso." },
],
},
];
const NOW = [
{ what: "Trabajando en", detail: "Acelera — software factory de IA: agentes, arneses de agentes y productos digitales a medida" },
{ what: "Leyendo", detail: "papers de agent harnesses, evaluación de agentes y patrones de RAG en producción" },
{ what: "Aprendiendo", detail: "cursando la Maestría en IA en la Universidad de San Andrés" },
{ what: "Construyendo", detail: "AgentPay y nuevas integraciones de seguridad para harnesses de agentes" },
{ what: "Ubicación", detail: "Buenos Aires, AR · trabajando remoto con equipos globales" },
];
const USES = {
hardware: [
"MacBook Pro como laptop principal para Acelera",
"Workstation con GPU para entrenar modelos de ML/DL on-prem",
"Teclado HHKB Professional Hybrid Type-S",
"Monitor LG UltraFine 4K 27\"",
],
software: [
"Editor: Cursor + Claude Code para pair programming con agentes",
"Terminal: Ghostty con tmux y zsh + starship",
"Lenguajes: Python, TypeScript / JavaScript, SQL, Go",
"ML/AI stack: PyTorch, scikit-learn, XGBoost, LangChain, LangGraph, MCP",
"Notas: Obsidian con vault sincronizado por git",
],
};
const SOCIALS = [
{ label: "github", handle: "@MauroProto", url: "github.com/MauroProto" },
{ label: "linkedin", handle: "in/mauroprotocassina", url: "linkedin.com/in/mauroprotocassina" },
{ label: "email", handle: "contacto@mauroproto.com", url: "mailto:contacto@mauroproto.com" },
];
// ============ THEMES ============
const THEMES = {
magenta: {
bg: "#1a1625",
fg: "#e8e3f0",
dim: "#8a8398",
accent: "#ff2bbd",
accentSoft: "rgba(255, 43, 189, 0.15)",
accentText: "#0a0a0f",
border: "#2a2435",
},
phosphor: {
bg: "#0a1410",
fg: "#c8e8d0",
dim: "#6a8870",
accent: "#33ff66",
accentSoft: "rgba(51, 255, 102, 0.12)",
accentText: "#0a1410",
border: "#1a2820",
},
amber: {
bg: "#1a1208",
fg: "#f0d8a8",
dim: "#8a7050",
accent: "#ffaa33",
accentSoft: "rgba(255, 170, 51, 0.12)",
accentText: "#1a1208",
border: "#2a2018",
},
cream: {
bg: "#f4ede0",
fg: "#1a1208",
dim: "#7a6850",
accent: "#c2410c",
accentSoft: "rgba(194, 65, 12, 0.12)",
accentText: "#f4ede0",
border: "#d8cdb5",
},
};
// ============ ASCII HELPERS ============
function AsciiBars({ char = "|", count = 80, color }) {
const bars = useMemo(() => {
let s = "";
for (let i = 0; i < count; i++) {
s += Math.random() > 0.15 ? char : " ";
}
return s;
}, [count, char]);
return {bars};
}
function Divider({ color, char = ":" }) {
return
{char.repeat(200)}
;
}
// ============ TYPING EFFECT ============
function useTyping(text, speed = 40, delay = 0) {
const [out, setOut] = useState("");
const [done, setDone] = useState(false);
useEffect(() => {
setOut("");
setDone(false);
let i = 0;
const start = setTimeout(() => {
const id = setInterval(() => {
i++;
setOut(text.slice(0, i));
if (i >= text.length) {
clearInterval(id);
setDone(true);
}
}, speed);
}, delay);
return () => clearTimeout(start);
}, [text, speed, delay]);
return [out, done];
}
// ============ KEY SOUND ============
function useKeySound(enabled) {
const ctxRef = useRef(null);
return (volume = 0.05) => {
if (!enabled) return;
try {
if (!ctxRef.current) ctxRef.current = new (window.AudioContext || window.webkitAudioContext)();
const ctx = ctxRef.current;
if (ctx.state === "suspended") ctx.resume();
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.type = "square";
osc.frequency.value = 600 + Math.random() * 400;
gain.gain.value = volume;
gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.05);
osc.connect(gain);
gain.connect(ctx.destination);
osc.start();
osc.stop(ctx.currentTime + 0.05);
} catch (e) {}
};
}
// ============ NEURAL NET (decorative + hidden-layer nodes click → projects) ============
function NeuralNet({ theme, onProjectClick, projects }) {
const LAYERS = [3, 5, 4, 2];
const W = 480, H = 180;
const PAD_X = 36, PAD_Y = 24;
const [tick, setTick] = useState(0);
const [hover, setHover] = useState(null); // {layer, idx, projectIdx}
useEffect(() => {
const id = setInterval(() => setTick((t) => t + 1), 60);
return () => clearInterval(id);
}, []);
const nodes = useMemo(() => {
const arr = [];
LAYERS.forEach((count, li) => {
const x = PAD_X + (li / (LAYERS.length - 1)) * (W - 2 * PAD_X);
for (let i = 0; i < count; i++) {
const y = PAD_Y + ((i + 0.5) / count) * (H - 2 * PAD_Y);
arr.push({ layer: li, idx: i, x, y });
}
});
return arr;
}, []);
// hidden nodes (layers 1 and 2) → mapped to projects in order
const hiddenNodes = useMemo(() => nodes.filter((n) => n.layer === 1 || n.layer === 2), [nodes]);
const projectMap = useMemo(() => {
const map = new Map();
hiddenNodes.forEach((n, i) => {
if (i < projects.length) map.set(`${n.layer}-${n.idx}`, i);
});
return map;
}, [hiddenNodes, projects]);
const stepsPerLayer = 60;
const cycleLen = (LAYERS.length - 1) * stepsPerLayer;
const cycleT = tick % cycleLen;
const activeLayer = Math.floor(cycleT / stepsPerLayer);
const layerProgress = (cycleT % stepsPerLayer) / stepsPerLayer;
const edges = useMemo(() => {
const e = [];
for (let li = 0; li < LAYERS.length - 1; li++) {
const from = nodes.filter((n) => n.layer === li);
const to = nodes.filter((n) => n.layer === li + 1);
for (const a of from) for (const b of to) e.push({ a, b, layer: li });
}
return e;
}, [nodes]);
const labels = ["x", "h\u2081", "h\u2082", "\u0177"];
const isHidden = (n) => n.layer === 1 || n.layer === 2;
const projectIdx = (n) => projectMap.get(`${n.layer}-${n.idx}`);
const hoveredProject = hover != null ? projects[hover.projectIdx] : null;
return (
esta página está inspirada en nownownow.com. es lo que estoy haciendo ahora mismo, no hace 3 años.
{NOW.map((n) => (
{n.what}{n.detail}
))}
);
}
function Uses({ theme }) {
return (
uses
setup actual :: lo que uso día a día
$ hardware
{USES.hardware.map((h, i) => (
→{h}
))}
$ software
{USES.software.map((s, i) => (
→{s}
))}
);
}
function Contact({ theme, playKey }) {
return (
contacto
la mejor forma de contactarme es por email o twitter. respondo casi siempre, salvo que sea spam de reclutadores
(entonces probablemente también, pero más lento).