portfolio-skill: CV + repos → portfolio personal a medida

Portfolio Skill

Construye un portafolio que un reclutador, gerente de contratación o cliente recuerde después de cerrar la pestaña: una idea visual contundente, texto específico, movimiento con propósito e ingeniería que se sostenga cuando alguien abre DevTools.

El tema se elige por persona. Aquí no se fijan colores, fuentes ni estilo de diseño. Cada valor concreto en este archivo es un ejemplo del patrón, no un valor predeterminado para copiar.

---

1. Lista de Control de Calidad (verificar todo antes de terminar)

1. Una dirección artística, ejecutada de forma consistente. Un concepto nombrado guía la tipografía, el color, el diseño, el movimiento y el tono del texto. Nunca mezcles estilos no relacionados (glass + neón + brutalismo + gradientes) en un mismo sitio.
2. Contenido real y específico. Cada afirmación proviene del currículum, repositorios, perfiles o mensajes del usuario. Números concretos, nombres de tecnologías, roles, fechas. Sin lorem ipsum, sin métricas inventadas, sin "desarrollador apasionado que ama codificar".
3. El trabajo es el protagonista. Los 2-4 proyectos principales obtienen la mayor parte del espacio e idealmente su propia página de caso de estudio con algo interactivo. Todo lo demás vive en un índice escaneable y filtrable.
4. La tipografía lleva el diseño. Una fuente display expresiva + una fuente legible para texto + una fuente mono/utilidad opcional. Tamaños fluidos con clamp(). Inter, Roboto, Arial o las fuentes del sistema nunca son la voz display.
5. El movimiento está coreografiado, no espolvoreado. Una introducción, revelaciones al hacer scroll y 1-2 momentos característicos. Todo respeta prefers-reduced-motion y se degrada limpiamente.
6. Funciona en todas partes. De 360px a ultraancho, operable con teclado, contraste WCAG AA, primera pintura rápida, completamente legible sin WebGL ni animación JS.
7. Se despliega. Cero errores de tipo, la compilación de producción pasa, etiquetas meta/OG por ruta, enlace al currículum, ruta de contacto que entrega, configuración de despliegue.

---

2. Flujo de trabajo

1. Recopila material. Lee todo lo proporcionado: PDF/DOCX del currículum, sitio existente, READMEs, datos de GitHub, notas. Pregunta solo por lo esencial que falte (nombre, rol, audiencia objetivo, 2-4 proyectos emblemáticos, enlaces, preferencia visual). Si no se da preferencia, elige una dirección tú mismo y di cuál y por qué.
2. Elige el arquetipo y nivel de ambición (Sección 6A.2) que se ajuste a la persona y al cronograma, luego escribe un brief de diseño (Sección 3) antes de cualquier código de UI.
3. Construye la base (Sección 5): módulo de contenido, tokens, tipografía, enrutador, scroll suave.
4. Compón las páginas en un orden presentable: contenido -> tokens/tipografía -> navegación/pie de página -> héroe -> proyectos emblemáticos -> índice de trabajo -> sobre mí/habilidades/línea de tiempo -> contacto -> páginas de casos de estudio -> 404. Luego el movimiento (Sección 6). WebGL y los efectos característicos al final.
5. Verifica (Sección 9) en un navegador real a ~1440px y ~390px. Nunca declares terminado solo con leer el código.

Si el repositorio ya usa una tecnología (Next.js, Astro, SvelteKit, HTML plano), mantenla. Todos los patrones a continuación se traducen.

---

3. Dirección Artística

3.1 Deriva el tema de la persona

Pregunta: quién verá esto, qué deberían sentir en 5 segundos, ¿cómo se ve el trabajo de esta persona? Mapea eso a un concepto. Los colores de marca, fuentes o temas especificados por el usuario siempre tienen prioridad.

Persona / señal	Direcciones de ejemplo (elige una, o inventa)
Backend / sistemas / infraestructura	Papel editorial + tinta; dibujo técnico/plano; brutalismo de terminal; cuadrícula suiza con acentos de visualización de datos
Frontend / desarrollador creativo	Tipografía cinética audaz; inmersivo liderado por WebGL; pegatina/zine divertida; monocromo de alto contraste con un neón
Producto / diseñador UX	Espacios en blanco tranquilos de galería; estudio cálido (crema, terracota, serifa suave); revista de casos de estudio
ML / investigación / datos	Cuaderno de laboratorio (papel cuadriculado, anotaciones mono); revista científica; observatorio oscuro con líneas trazadas
Desarrollador móvil	Escaparate enfocado en el dispositivo; superficies táctiles suaves; pulido de tienda de aplicaciones con maquetas de teléfono en vivo
Fotógrafo / artista	Imagen a sangre completa con mínimo cromo; cine oscuro; cuadrícula de hoja de contactos
Fundador / generalista	Editorial seguro; tipografía de manifiesto; credibilidad basada en métricas
Estudiante / principios de carrera	Limpio, enérgico, honesto; enfatiza proyectos y trayectoria de aprendizaje sobre títulos de trabajo

Evita los valores predeterminados que parecen generados por IA: degradados de púrpura a azul sobre blanco, tarjetas genéricas de glassmorphism, héroe centrado con "Hola, soy X" + emoji de saludo, tres tarjetas de características iguales, blobs 3D de stock.

3.2 Plantilla de brief de diseño (escribe esto primero)

Concepto:        <nombre + una oración de intención>
Audiencia:       <quién, qué deben llevarse>
Paleta:          bg, bg-2, fg, fg-2, muted, line, accent (+ acentos por proyecto si se usan)
Tipografía:      display / texto / mono (con alternativas), relación de escala
Gramática de diseño: cuadrícula, espaciado, ritmo de sección, reglas/bordes vs tarjetas
Movimiento:      personalidad (nítido/elástico/lento/mecánico), facilidad principal, duraciones
Característica:  los 1-2 momentos que la gente recordará
Textura:         grano / líneas de cuadrícula / ninguna / shader

3.3 Tokens (la estructura es fija, los valores son por tema)

:root {
  /* paleta: reemplaza valores por tema */
  --bg: #eeeae2;  --bg-2: #e5e0d5;
  --fg: #121210;  --fg-2: #2a2925;
  --muted: #6d695f;
  --line: rgba(18,18,16,.14);
  --accent: #ff4d1c;
  /* voces tipográficas */
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --text: 'Geist', 'Helvetica Neue', sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  /* ritmo */
  --gutter: clamp(1.1rem, 3.2vw, 2.75rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* alias a nivel de página para que las páginas de casos de estudio puedan re-tematizar sobrescribiendo estos */
  --page-bg: var(--bg); --page-fg: var(--fg); --page-muted: var(--muted);
  --page-line: var(--line); --page-accent: var(--accent);
}

Los componentes solo hacen referencia a --page-*. Una página de caso de estudio establece nuevos valores --page-* en su <main> y toda la UI (botones, reglas, cursor, selección) se re-tematiza gratis.

3.4 Reglas tipográficas

• Combina con contraste: display serif + texto grotesco, o display grotesco pesado + mono, o display condensado + texto humanista. Carga a través de Google Fonts o woff2 autoalojado con display=swap y preconnect.
• Escala fluida con clamp, p. ej. h-xl: clamp(3.6rem, 14.5vw, 15rem), h-lg: clamp(2.8rem, 8vw, 8.5rem), h-md: clamp(2.1rem, 5vw, 4.6rem), lede: clamp(1.05rem, 1.45vw, 1.3rem).
• Display: interlineado ajustado (0.85-0.95) y tracking negativo (-0.02 a -0.04em). Cuerpo: interlineado 1.5-1.65, max-width 38-62ch.
• Metadatos en mono mayúsculas pequeñas con un ligero tracking ("(02) Trabajo seleccionado", "2024 - Presente").
• Usa cursivas o un cambio de peso en una palabra de un titular para dar voz ("Los que demo primero.").
• font-variant-numeric: tabular-nums para contadores y estadísticas.

3.5 Gramática de diseño

• Héroe a sangre completa (min-height: 100svh), contenido anclado en la parte inferior izquierda o en una cuadrícula, no centrado.
• Encabezados de sección como una regla fina con etiqueta mono numerada a la izquierda y contexto a la derecha.
• Prefiere reglas finas y cuadrículas sobre tarjetas con sombra (a menos que el concepto sea táctil/suave).
• Varía el ritmo de la sección: declaración grande, índice denso, carrete horizontal, división en dos columnas. Nunca seis secciones idénticas en fila.
• --gutter consistente en todas partes; padding de sección clamp(5rem, 13vw, 11rem).

3.6 Opciones de textura

Grano de película (data-URI SVG feTurbulence en body::after, opacidad 0.04-0.08, pointer-events:none), líneas de cuadrícula de plano, gradientes radiales sutiles o un campo WebGL. Elige una; no apiles.

---

4. Estrategia de Contenido

4.1 Arquitectura de la información

Inicio (una sola página con scroll):

1. Héroe: nombre, posicionamiento de una línea, texto introductorio de 1-2 oraciones, CTA principal (ver trabajo) + secundario (currículum / contacto), fila de metadatos pequeños (rol, áreas de enfoque, ubicación, disponibilidad).
2. Declaración / Sobre mí: 2-4 oraciones con la voz de la persona, más 3-4 estadísticas que sean ciertas (proyectos entregados, años, usuarios, estrellas, CGPA si es estudiante).
3. Proyectos emblemáticos: 2-4 proyectos estrella, tarjetas grandes, cada una enlazando a una página de caso de estudio.
4. Índice de trabajo: todos los demás proyectos como filas (número, nombre, resumen de una línea, tecnologías, año/enlace), filtrables por tipo.
5. Habilidades: habilidades agrupadas (p. ej., Backend, Móvil, IA, Herramientas), solo cosas que puedan defender en una entrevista.
6. Trayectoria / línea de tiempo: educación, roles, logros notables.
7. Contacto: titular CTA grande, correo electrónico, formulario, enlaces a redes sociales, descarga de currículum.

Página de caso de estudio por proyecto emblemático: héroe temático (nombre, eslogan, rol, tecnologías, enlaces), problema, lo que se construyó, una demo interactiva (simulador, patio de juegos, maqueta en vivo, diagrama de arquitectura que se pueda pasar el ratón), decisiones clave/compensaciones, métricas/resultados, luego un traspaso al "siguiente proyecto" y contacto.

Página 404 con la misma voz.

4.2 Reglas de redacción

• Primera persona, lenguaje sencillo, específico. Lidera con lo que se construyó y por qué es importante, luego cómo.
• Bueno: "Conecta tus propias cuentas de AWS, GCP y Azure y sus niveles gratuitos actúan como un solo disco." Malo: "Una solución cloud revolucionaria que aprovecha tecnología de punta."
• Relleno prohibido: apasionado, puntero, aprovechar, sin fisuras, robusto, innovador, viaje, profundizar, "me encanta codificar".
• Cada métrica tiene una fuente o se omite. Nunca fabriques.
• El microtexto tiene personalidad pero se mantiene claro. ("Perdido en el carrete." en 404, "Desplázate para ver" como pista).

4.3 Módulo de contenido único

Todo el texto y los datos viven en src/content.ts. Los componentes nunca codifican texto biográfico.

export const PROFILE = { name, role, location, email, github, linkedin, resume: '/resume.pdf', statement };
export type Metric = { value: string; label: string };
export type Flagship = {
  slug: string; path: string; index: string; name: string; kicker: string; tagline: string;
  summary: string; role: string; stack: string[]; metrics: Metric[]; repo: string;
  accent: string; bg: string; fg: string;          // tema por proyecto
};
export const FLAGSHIPS: Flagship[] = [ /* 2-4 */ ];
export type WorkKind = 'Systems' | 'AI' | 'Mobile' | 'Web'; // adaptar a la persona
export const WORKS: { name: string; blurb: string; stack: string[]; kind: WorkKind; year: string; href: string; route?: string }[] = [];
export const CAPABILITIES: { title: string; items: string[] }[] = [];
export const PATH: { when: string; what: string; detail: string }[] = [];
export const STATS: Metric[] = [];

---

5. Arquitectura

5.1 Tecnología predeterminada

Vite + React + TypeScript; CSS plano con propiedades personalizadas (Tailwind permitido si el equipo lo prefiere); gsap + @gsap/react (ScrollTrigger); lenis para scroll suave; three solo si la dirección usa WebGL; nodemailer para contacto; desplegar en Vercel/Netlify.

5.2 Estructura

index.html                 fuentes, meta/OG base, texto de respaldo sin script
public/                    favicon.svg, resume.pdf, og-image
src/content.ts             todo el texto y datos
src/index.css              tokens, tipografía, diseño, componentes, responsivo, movimiento reducido
src/lib/smooth.ts          Lenis + ticker de GSAP, bandera de movimiento reducido, velocidad de scroll
src/lib/motion.tsx         useReveals, useHeroIntro, <Split>, useMeta
src/lib/router.tsx         enrutador de historial + transición de cortina + <Link>
src/components/Chrome.tsx  Navegación, menú móvil, cursor, precargador, pie de página/contacto
src/components/Field.tsx   fondo de héroe con WebGL (opcional)
src/components/CaseShell.tsx andamio compartido de caso de estudio
src/pages/*.tsx            Inicio, una página por proyecto emblemático, NoEncontrado
api/contact.ts             manejador de correo sin servidor
vercel.json                reescrituras SPA

5.3 Enrutamiento

Un pequeño enrutador de historial es suficiente para un portafolio y te permite tener transiciones propias:

• normalizePath (eliminar barra final, minúsculas).
• navigate(to): misma ruta + hash -> scroll suave al ancla; ruta diferente -> reproducir cortina, cambiar página mientras está cubierta, scroll al inicio, luego revelar.
• Escuchar popstate; llamar a ScrollTrigger.refresh() después de cada cambio de ruta; manejar #hash pendiente después del cambio.
• <Link>: externo (http, mailto) renderiza un ancla simple con target="_blank" rel="noopener noreferrer"; interno intercepta el clic a menos que metaKey/ctrlKey/shiftKey o botón no primario, para que la nueva pestaña aún funcione.
• Next.js/Astro: usar su enrutador e implementar la cortina en un layout/hook de transición.

5.4 SEO por ruta

useMeta(title, description, themeColor) actualiza document.title, descripción, og:*, twitter:*, theme-color y canónico en cada ruta. index.html contiene valores predeterminados completos más un resumen de texto <noscript>. Agrega tarjeta de Twitter summary_large_image y una imagen OG si es posible. Considera el esquema JSON-LD Person.

5.5 API de contacto (sin servidor, api/contact.ts)

Requisitos:

• Solo POST (405 en caso contrario), Cache-Control: no-store.
• Campo honeypot (p. ej., website oculto): si está completo, devuelve 200 y descarta.
• Recorta y limita la longitud de cada campo; valida el correo electrónico con una expresión regular simple; longitud mínima del mensaje.
• Elimina \r\n de cualquier cosa utilizada en encabezados/asunto (inyección de encabezados); escapa HTML en cualquier cosa en el cuerpo HTML.
• replyTo = remitente; from = tu usuario SMTP.
• Límite de tasa de mejor esfuerzo por IP (p. ej., 3 por 10 minutos a través de una Mapa en memoria, IP de x-forwarded-for).
• Si faltan las variables de entorno SMTP, devuelve 503 con un mensaje amigable "envíame un correo directamente"; la UI debe mostrar el correo como respaldo.
• Variables de entorno: SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS, CONTACT_TO. Proporciona .env.example. Nunca confirmes secretos.
• Formulario frontend: estados idle/enviando/enviado/error, estado aria-live="polite", botón de envío deshabilitado mientras se envía, etiquetas en cada entrada.

5.6 Despliegue

Vercel vercel.json:

{ "cleanUrls": true,
  "rewrites": [{ "source": "/((?!api/|assets/|.*\..*).*)", "destination": "/" }] }

Netlify: /* /index.html 200 en _redirects. El currículum vive en public/resume.pdf; cada botón de currículum enlaza allí con download.

---

6. Sistema de Movimiento

6.1 Principios

• Una facilidad de la casa (p. ej., expo.out / cubic-bezier(.16,1,.3,1)), duraciones 0.6-1.4s para revelaciones, 0.3-0.6s para hovers.
• Animar solo transform, opacity, clip-path. Nunca animar propiedades de diseño.
• Las revelaciones enmascaradas (texto que surge de un cuadro overflow:hidden) se ven premium; los desvanecimientos simples se ven baratos.
• Coreografía: la introducción del héroe espera a que el precargador/cortina se despeje (compartir intro.delay).
• Cada efecto está controlado por prefersReduc

...

[truncado para traducción]