HuanEnzie/cinematic-portfolio

Portafolio Cinematográfico

Portafolio de una sola página, con tono oscuro, inspirado en los portafolios de editores y artistas VFX: una letra gigante detrás de la foto de la persona, el nombre al frente, título bicolor (blanco y un color de acento). Al entrar, tiene un efecto de 30 agentes que construyen cada bloque (habilidad agent-build-effect, ya incluida en template/vendor/).

template/
  index.html        estructura de la página, no requiere edición
  data.js           TODO el contenido, solo modificar este archivo
  styles.css        estilo visual; el color se cambia mediante variables o `accent` en data.js
  portfolio.js      construye la página desde data.js y luego inicia el efecto de agentes
  vendor/           agent-build.js + .css
  assets/           foto de la persona recortada + imágenes de las tarjetas de habilidades (ejemplo: 6 imágenes oscuras/rojas)
scripts/cutout.py   recorta el fondo de la foto (rembg)
references/image-prompts.md   prompts para las imágenes de las tarjetas, con estilo consistente

Proceso

1. Preguntar toda la información necesaria antes de empezar

Preguntar de forma concisa en un solo mensaje, lo que el usuario aún no haya proporcionado:

• Nombre corto para mostrar en grande (una palabra es lo mejor), nombre completo, cargo, una frase de presentación.
• Foto de la persona: foto desde la rodilla hacia arriba o de cuerpo completo, fondo no demasiado desordenado, postura ligeramente inclinada. Puede ser foto real o render 3D.
• De 3 a 6 habilidades o proyectos que quiera destacar (nombre, descripción breve, tecnologías). Si tiene proyectos reales con enlaces, agregar href en la tarjeta.
• Trayectoria (trabajo, educación), habilidades, proceso de trabajo, cita.
• Reconocimientos o prensa (si no tiene, omitir toda la sección).
• Contacto: correo electrónico, ubicación, botón de llamado a la acción.
• Idioma de la página, color de acento (por defecto rojo #ff3b30), texto de fondo (por defecto PORTFOLIO).

No inventar cifras, premios o menciones de prensa. Si el usuario no tiene una sección, eliminarla de data.js y la página la omitirá automáticamente.

2. Copiar la plantilla

Copiar toda la carpeta template/ al lugar que el usuario desee (por ejemplo, ./my-portfolio/). No modificar la plantilla original dentro de la habilidad.

3. Recortar el fondo de la foto

pip install rembg pillow
python -I <skill>/scripts/cutout.py foto-original.jpg mi-portafolio/assets/photo.webp

El modelo predeterminado isnet-general-use es ligero (~180 MB, se descarga una vez). Solo probar birefnet-portrait si el equipo tiene mucha RAM: este modelo pesa ~1 GB y ha agotado la memoria con imágenes de 1440px. Revisar una vez sobre fondo gris (componer fondo gris con PIL y luego leer la imagen). Debe conservar cabello, gafas y objetos en la mano. Establecer hero.photo como assets/photo.webp.

4. Imágenes para las tarjetas de habilidades

La plantilla incluye 6 imágenes oscuras/rojas (agente, automatización, web, chatbot, hoja de cálculo, video). Se pueden reutilizar si coinciden con el contenido de la tarjeta. Si se desean imágenes personalizadas, seguir references/image-prompts.md: mantener el estilo, solo cambiar el tema. Si se cambia el color de acento, cambiar también el código de color en el prompt. Preguntar al usuario antes de generar imágenes en lote (consume límite de su cuenta).

Si no hay imagen que coincida, omitir el campo image de esa tarjeta; la tarjeta se verá bien sin imagen. No usar la misma imagen para dos tarjetas con contenido diferente.

5. Rellenar data.js

• hero.name: una palabra, se pondrá en mayúsculas automáticamente. Si el nombre tiene más de 7 caracteres, reducir el tamaño en .pf-name.
• hero.stats: solo escribir números reales (número de habilidades, años, tecnologías, etc.).
• El título de cada sección tiene dos partes: title (blanco) y accent (color de acento). Deben ser cortos y contundentes: "No solo código." / "Soluciones que funcionan."
• agents.labels: traducir según el idioma de la página. Ejemplo en español: { status: "{agents} agente · {edits} ediciones", building: "Construyendo página", done: "Página construida", skip: "Saltar" }.
• El texto se inserta mediante textContent, por lo que no se puede incluir HTML (es intencional, por seguridad).

6. Verificar (primero con números, luego con imágenes)

Abrir index.html directamente en el navegador (funciona con file://) o ejecutar cualquier servidor estático. Usar Playwright a 1440×900 y 390×844 con ?agents:

({
  sections: document.querySelectorAll(".pf-section").length,
  overflowX: document.documentElement.scrollWidth > innerWidth,   // debe ser false
  photo: document.querySelector(".pf-photo img")?.naturalWidth,    // > 0
  waiting: document.querySelectorAll('[data-ab="wait"]').length,   // debe ser 0 después de hacer scroll completo
})

Hacer scroll con window.scrollTo en pasos de 600px, esperando aproximadamente 1 segundo entre cada paso, luego verificar que waiting sea 0 y que no haya errores en la consola. Tomar una captura de la sección hero en cada tamaño para evaluar la apariencia. Atención: la frase de presentación no debe superponerse a la persona, y en móvil la cara no debe quedar tapada por el texto.

7. Publicar en línea

La carpeta es un sitio web estático: arrastrar y soltar en Netlify Drop, vercel deploy, GitHub Pages o Cloudflare Pages. No requiere compilación.

Integrar en un proyecto existente de Next.js / React

Reutilizar styles.css, cambiar :root por .pf. Reescribir la parte de renderizado como componente de servidor, manteniendo los nombres de clase. Agregar el efecto usando AgentBuild.tsx de la habilidad agent-build-effect, con la misma lista de targets que en portfolio.js. Puntos encontrados al hacer la versión Next:

• Header fijo tipo sticky: dar a la página un margin-top negativo igual a la altura del header para que el hero quede debajo del header.
• Imagen next/image con fill necesita un contenedor padre con position: relative, de lo contrario la imagen cubre toda la página.
• La fuente Anton tiene caracteres para español. Si se aloja localmente, descargar los 3 subsets: latin, latin-ext, y vietnamese si es necesario.
• El servidor de desarrollo Turbopack a veces omite cambios de CSS hechos con sed. Editar con herramientas de edición o sobrescribir el archivo para que lo detecte.