Communitygithub.com

iamsachinraj/Claude-Skills

Convierte un currículum, una foto profesional y una URL de LinkedIn en un sitio web de portafolio personal interactivo y animado (archivo HTML único) que se pueda compartir en LinkedIn. Úsalo cuando alguien solicite un sitio de portafolio, sitio web personal, currículum interactivo o 'sitio web a partir de mi currículum', o cuando adjunte un currículum y una foto pidiendo un sitio.

¿Qué es Claude-Skills?

Este skill automatiza la creación de un sitio web de portafolio profesional de una sola página a partir de tres entradas: un currículum (en cualquier formato), una foto de perfil y una URL de LinkedIn. La plantilla HTML predefinida incluye una animación de fondo de red, un efecto de escritura letra por letra para el nombre, roles que se tipean, tarjetas de casos de estudio apilables, habilidades cliqueables que iluminan una línea de tiempo profesional, modo claro/oscuro y diseño responsivo para móvil. El flujo de trabajo consiste en leer el currículum para identificar la persona combinada del candidato (no solo su último cargo, sino la trayectoria completa), escribir un archivo `content.json` siguiendo el esquema de referencia, y ejecutar un script Python (`build.py`) que fusiona el contenido y la foto en un único archivo HTML. El skill hace hincapié en usar solo hechos del currículum, sin inventar métricas ni resultados, y en mantener un estilo narrativo en primera persona, claro y seguro. Una vez generado, el portafolio se puede publicar como un artifacto privado, enviar como archivo o alojar gratuitamente en GitHub Pages o Netlify Drop. Está diseñado para agentes como Claude Code, Cursor o Codex que necesitan construir portafolios personalizados a partir de datos reales del usuario.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/iamsachinraj/Claude-Skills/tree/HEAD/career-portfolio

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

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 normal
  • scripts/build.py: fusiona content.json y la foto en un archivo HTML
  • references/content-schema.md: cada campo, guía de longitud y nombre de icono
  • examples/sample-content.json: un ejemplo completo funcional

1. Recopilar las tres entradas

Pregunta una vez, en conjunto, por lo que falte:

  1. Currículum: cualquier formato (PDF, DOCX, texto, pegado). Obligatorio.
  2. Foto: una foto de rostro bien iluminada y de frente. Opcional; sin ella el retrato muestra las iniciales.
  3. 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.phone vací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.html de 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__.

Skills relacionados