Diseño de Portafolio

¿Qué hace Diseño de Portafolio?

Este skill reconstruye un diseño de portafolio específico para cualquier persona. El diseño es fijo y ya está ajustado. Tu trabajo es recolectar el material de la persona, redactar su copia en la voz adecuada, generar el sitio, comprobar que funciona y enviarlo cuando ella lo autorice.

Todo vive en esta carpeta del skill:

Ruta	Qué es
template/assets/	CSS, módulos JavaScript, fuentes y librerías de terceros (GSAP, Lenis) del sitio. Nunca se edita por persona: la copia lo incluye y lo adapta temáticamente.
scripts/build.mjs	Convierte un portfolio.json en el sitio estático terminado. Node 18+, sin dependencias.
scripts/prepare_photos.py	Recorta el retrato (eliminación de fondo) y cuadra la foto de Acerca de.
scripts/discover_github.mjs	Lista los repos públicos de un usuario de GitHub con resúmenes de README e imágenes de banner, para elegir proyectos.
scripts/snapshot_github.mjs	Guarda la lista de repos públicos a la que recurre el archivo.
scripts/render_images.py	Renderiza la tarjeta de compartir (og.jpg) y el icono táctil.
scripts/serve.py	Servidor de previsualización local para el sitio construido.
scripts/qa/run_all.py	Controles de calidad en navegador. Una construcción no está terminada hasta que pasa.
examples/portfolio.example.json	Una configuración completa para una persona ficticia, con imágenes de marcador de posición.
reference/	Esquema de configuración, guion de entrevista, sistema de diseño, reglas de redacción, controles de calidad, guía de despliegue.

En los comandos siguientes, scripts/... significa la carpeta de este skill (usa la ruta absoluta al ejecutarlos) y portfolio/... es la carpeta del proyecto de la persona en su directorio de trabajo.

Lee reference/config-schema.md antes de escribir una configuración y reference/copywriting.md antes de redactar cualquier texto.

Reglas básicas

• Nada se hace público sin un "sí" claro. No hay git push, ni despliegue, ni creación de repositorio hasta que la persona apruebe ese paso concreto. Construir y previsualizar localmente está bien.
• Privacidad. Solo se usan datos públicos de GitHub (ambos scripts de GitHub llaman a la API no autenticada a propósito). Antes de que el archivo se publique, muestra la lista de repos públicos que mostrará y pregunta cuáles ocultar. Nunca pongas un número de teléfono, dirección postal o repositorio privado en la página a menos que la persona lo solicite.
• Sus fotos son suyas. Trabaja con copias dentro de la carpeta del proyecto. No las subas a ningún sitio excepto al sitio que aprueben.
• El diseño es el producto. No añadas secciones, cambies fuentes ni reestilices componentes porque una persona pida algo vago. Ajusta contenido, preset de tema, mascota y copia. Si quieren algo estructural, di lo que costaría y confírmalo primero.
• La copia se escribe, no se rellena. Sus notas son material en bruto. Redacta cada línea en su voz, respeta los límites de longitud y muéstrasela antes de construir la versión final.

Flujo de trabajo

1. Verificar las herramientas

node --version          # 18 o más reciente
python --version        # 3.10 o más reciente
python -m pip install playwright pillow numpy
python -m playwright install chromium

La eliminación de fondo del retrato necesita python -m pip install "rembg[cpu]" (descarga un modelo de ~1 GB en la primera ejecución). Si no es posible, pide un retrato que ya tenga fondo transparente y usa --no-cutout.

Acuerda una carpeta de proyecto con la persona (por defecto: ./portfolio/ en el directorio actual). Estructura:

portfolio/
  portfolio.json      # la configuración que escribes
  photos/             # sus fotos originales (nunca se publican tal cual)
  work/               # banners y capturas de pantalla de proyectos
  site/               # salida de la construcción: esta carpeta es la que se despliega

2. Entrevistar

Sigue reference/interview.md. Se desarrolla en diez rondas cortas y usa AskUserQuestion para cada elección que tenga opciones sensatas (tema, mascota, qué repos destacar, qué enlaces van en el héroe). El material libre (notas biográficas, descripciones de proyectos) se pide en texto plano. Pregunta una ronda a la vez y ofrece redactar cualquier cosa que no quieran escribir.

Áreas, en orden:

1. Identidad: nombre completo, alias o apodo que usan, un título corto, correo electrónico, ciudad y país (zona horaria para el reloj en vivo), idiomas.
2. Fotos: un retrato de cabeza y hombros (el recorte del héroe) y una segunda foto opcional para la sección Acerca de.
3. Enlaces: cada perfil que quieran listar; elige dos o cuatro para la fila del héroe.
4. Héroe y Acerca de: qué hacen en una frase, luego dos párrafos cortos sobre cómo trabajan.
5. Lo que construyen: cuatro tipos de trabajo, una palabra cada uno, con una línea de descripción y una animación hover (agents, automation, context, launch, code, data, design).
6. Proyectos: hasta seis proyectos destacados y hasta tres misiones secundarias. Ejecuta primero discover_github.mjs y propón candidatos.
7. Archivo: si mostrar todos los repos públicos y cuáles ocultar.
8. Stack: listas de herramientas agrupadas y las 12 a 24 herramientas que se convertirán en bolas en el foso.
9. Proceso, contacto, bandas: tres pasos de proceso, la línea de contacto, las dos bandas de cinta desplazables.
10. Apariencia y extras: preset de tema, mascota (nombre, voz o apagada), URL del sitio y dónde se alojará.

3. Reunir material del proyecto

node scripts/discover_github.mjs --user <usuario-github> --out portfolio/discovery.json
node scripts/discover_github.mjs --user <usuario-github> --out portfolio/discovery.json --download portfolio/work --repos RepoA,RepoB

La primera ejecución lista los repos públicos con su resumen de README, imágenes y enlaces en vivo. La segunda guarda la primera imagen del README de cada repositorio elegido. Cada proyecto destacado necesita al menos una imagen de previsualización. Buenas fuentes, en orden: el banner del README, una captura de pantalla de la app en vivo (usa Playwright a 1600x900), un banner generado al estilo de examples/assets/*.svg. Revisa cada imagen: sin secretos en las capturas, nada borroso, formato ancho (16:9 o cercano).

4. Preparar las fotos

python scripts/prepare_photos.py --portrait portfolio/photos/portrait.jpg \
  --about portfolio/photos/about.jpg --about-gray --out portfolio/photos/out

Abre el resultado y míralo. El recorte debe tener bordes limpios, sin parches transparentes y la cabeza cerca de la parte superior. Si la foto de Acerca de recorta mal una cara, reejecútala con --about-focus x,y (fracciones de 0 a 1 de la imagen). Apunta a person.photos.portrait y .about en la configuración a los archivos en out/.

5. Escribir la configuración y construir

Escribe portfolio/portfolio.json (esquema: reference/config-schema.md; ejemplo funcional: examples/portfolio.example.json). Las rutas dentro de él son relativas al archivo de configuración. Luego:

node scripts/build.mjs --config portfolio/portfolio.json --out portfolio/site
node scripts/snapshot_github.mjs --user <usuario-github> --site portfolio/site   # solo si el archivo está activo
python scripts/render_images.py --site portfolio/site

La construcción se detiene con un mensaje claro cuando falta un campo obligatorio. Las advertencias sobre iconos desconocidos significan que esa bola muestra su nombre como texto; elige un slug de data/simple-icons.json o déjalo.

6. Previsualizar

Sirve el sitio en segundo plano y dale a la persona la URL:

python scripts/serve.py --site portfolio/site --port 4321

Usa este servidor en lugar de python -m http.server: el servidor estándar corta las conexiones cuando la página solicita muchos archivos a la vez, lo que aparece como fallos aleatorios de QA. También envía cabeceras sin caché (una reconstrucción se muestra al recargar) y sirve 404.html para rutas desconocidas, como GitHub Pages.

7. Controles de calidad

python scripts/qa/run_all.py --url http://127.0.0.1:4321/ --out portfolio/qa

Todas las comprobaciones deben pasar (reference/quality-gates.md explica cada una y cómo solucionar los fallos habituales). Luego revisa tú mismo las capturas de pantalla en portfolio/qa/shots/, sección por sección, en escritorio y teléfono. Las comprobaciones automáticas detectan colisiones y desbordamientos; tus ojos detectan saltos de línea incómodos, imágenes débiles y copias mal leídas. Corrige, reconstruye, reejecuta. Ejecuta --full una vez antes de desplegar.

8. Revisar con la persona

Guíalos a través de la previsualización: héroe, Acerca de, filas, proyectos, archivo, foso, proceso, contacto, chat de la mascota. Recopila cambios, aplícalos a la configuración (no a los archivos construidos), reconstruye y reejecuta QA.

9. Desplegar (solo después de un "sí" claro)

Sigue reference/deploy.md: GitHub Pages (sitio de usuario o sitio de proyecto), dominio personalizado y la configuración de Cloudflare que importa. Después de desplegar, ejecuta las comprobaciones en vivo:

python scripts/qa/run_all.py --url https://su-dominio/ --only smoke,live --out portfolio/qa-live

Si la comprobación "email no reescrito" falla, la Ofuscación de Direcciones de Correo Electrónico de Cloudflare está activa y rompe el anillo "Hablemos"; la solución está en reference/deploy.md.

Cambiar cosas después

Edita portfolio.json, reconstruye, reejecuta QA, redepliega. Cada construcción sella nuevas cadenas ?v= en cada activo, por lo que los navegadores y CDNs recogen el cambio sin una purga manual de caché.