Sitio web de portafolio profesional
Construye un portafolio de una página pulido a partir de tres entradas: un currículum, una foto profesional y una URL de perfil de LinkedIn. El diseño es fijo y ya está terminado (fondo de red animado, nombre letra por letra, roles que se tipean, tarjetas de casos de estudio apilables, habilidades cliqueables que iluminan una línea de tiempo profesional, modo claro y oscuro, diseño móvil). Tu trabajo es el contenido: leer el currículum, escribir un content.json, ejecutar el script de construcción.
Archivos en este skill:
assets/template.html: el diseño terminado; no lo edites para uso normalscripts/build.py: fusionacontent.jsony la foto en un archivo HTMLreferences/content-schema.md: cada campo, guía de longitud y nombre de iconoexamples/sample-content.json: un ejemplo completo funcional
1. Recopilar las tres entradas
Pregunta una vez, en conjunto, por lo que falte:
- Currículum: cualquier formato (PDF, DOCX, texto, pegado). Obligatorio.
- Foto: una foto de rostro bien iluminada y de frente. Opcional; sin ella el retrato muestra las iniciales.
- URL de LinkedIn: se usa para los enlaces de contacto.
No solicites nada más al principio. Las páginas de LinkedIn suelen bloquear la lectura automatizada, así que trata la URL como un enlace, no como una fuente de datos; el currículum es la fuente de verdad. Si puedes leer el perfil y aporta hechos, úsalos.
2. Leer el currículum y encontrar la personalidad
Lee todo el currículum. Luego, antes de escribir nada, decide la personalidad combinada: una identidad que abarque todos los roles importantes que la persona ha tenido, no solo su último puesto. Ejemplo: "líder de éxito del cliente que diseña onboarding, gestiona operaciones de CS basadas en datos y construye equipos comprometidos", en lugar de "Director de CS". Rara vez la gente quiere un sitio sobre un solo rol; quieren el hilo conductor de su carrera.
Identifica:
- las 4–8 identidades que aportan (estas se convierten en la línea de tipeo)
- el hilo constante entre roles (se convierte en el título de liderazgo y los pilares)
- 3–5 historias con un problema, acción y resultado claros (casos de estudio)
- cada número mencionado (estadísticas, indicadores, destacados)
- herramientas, plataformas, certificaciones, educación
3. Escribir content.json
Sigue references/content-schema.md; refleja la forma de examples/sample-content.json. Reglas:
- Solo hechos del currículum. Nunca inventes métricas, empleadores, fechas, tamaños de equipo ni resultados. Si un caso de estudio no tiene un resultado declarado, describe el resultado cualitativamente. Usa el indicador solo para un porcentaje real declarado.
- Primera persona, claro y seguro. Frases cortas, sin acumulación de palabras de moda, sin "apasionado", "orientado a resultados" ni "dinámico".
- Respeta las guías de longitud; el texto largo rompe el ritmo del diseño.
- Las habilidades deben apuntar a IDs de roles reales, y cada habilidad debe mapearse a cada rol donde el currículum la muestre.
- Ordena los roles profesionales del más reciente al más antiguo; marca el rol actual como
current: true. - Deja
contact.phonevacío a menos que la persona indique que lo incluya.
Guárdalo como content.json en el directorio de trabajo.
4. Construir
python3 <directorio-del-skill>/scripts/build.py --content content.json --photo <ruta-de-la-foto> --out portfolio.html
Pillow (pip install pillow) recorta y comprime la foto; sin él la foto se incrusta tal cual. Corrige cada ERROR; lee cada WARNING y corrígelo a menos que sea intencional.
5. Verificar
Si puedes abrir un navegador o tomar capturas de pantalla, observa el héroe en anchos de escritorio y móvil, desplázate por toda la página una vez y alterna el modo oscuro. Verifica que el recorte de la foto muestre el rostro (ajusta person.photoPosition) y que ningún texto se desborde. De lo contrario, vuelve a leer content.json comparándolo con las guías de longitud.
6. Entregar
- Si puedes publicar un artifact o página web, publica
portfolio.htmlde forma privada y proporciona el enlace, explicando que ellos deciden cuándo compartirlo. - De lo contrario, envíales el archivo.
Luego, diles brevemente:
- qué personalidad usaste para construir el sitio, para que puedan redirigirlo
- que pueden solicitar cualquier cambio de texto y lo reconstruirás
- cómo compartirlo: publicar/compartir el enlace del artifact, o alojar el archivo único gratuitamente en GitHub Pages o Netlify Drop, y luego agregar el enlace a la sección Destacados de su perfil de LinkedIn
Ediciones
Para cambios de texto, edita content.json y reconstruye; nunca edites a mano el HTML generado. Los cambios de diseño (colores, fuentes, secciones) van en assets/template.html; mantén intactos los marcadores de posición /*__PORTFOLIO_DATA__*/null, "/*__PHOTO__*/", __TITLE__ y __DESCRIPTION__.