Construye un sitio web de solicitudes de empleo con Claude Code en una tarde

Convierte tu CV en PDF en un sitio web de archivo único, multilingüe y protegido con contraseña usando Claude Code Desktop — sin necesidad de programar.

Construye un sitio web de solicitudes de empleo con Claude Code en una tarde
También disponible en English, Deutsch, Français, Nederlands.

Todos los reclutadores reciben la misma pila de PDFs. Las mismas fuentes, el mismo diseño, el mismo formato de dos páginas. Casi nadie incluye un enlace a un sitio web limpio e interactivo que presenta la misma información mejor, funciona en cualquier dispositivo y transmite algo construido con intención. Puedes crear uno en una sola tarde con Claude Code Desktop, sin escribir una sola línea de código tú mismo.

El concepto

Adjuntas tu CV en PDF como siempre. Pero en la carta de presentación, añades una URL corta, una contraseña y una línea de explicación.

El reclutador abre el enlace, introduce la contraseña y ve tu CV como una página estructurada e interactiva: secciones claramente separadas, navegación fluida, diseño adaptado a móviles, varios idiomas. Sigue siendo tu CV. Solo que presentado de una forma más rápida de escanear y más difícil de olvidar.

¡Echa un vistazo a nuestro sitio web de ejemplo para Homer J. Simpson!

Por qué los reclutadores responden a esto

Los reclutadores no leen CVs. Los escanean. En segundos deciden si alguien encaja y si vale la pena mirar más a fondo.

Un sitio web bien construido cambia ese cálculo de inmediato. Destaca frente a PDFs idénticos. Demuestra iniciativa sin necesidad de proclamarla. Muestra competencia digital de forma práctica, no decorativa.

El objetivo no es la complejidad. Es reducir la fricción y causar una primera impresión más fuerte.

Lo que Claude Code hace por ti

No construyes nada manualmente. Dale a Claude Code tu CV como archivo y una instrucción clara. Lee tu contenido, lo estructura en secciones, construye el diseño y la maquetación, añade navegación y detalles de pulido, y genera un sitio web completo.

Tú lo revisas, pides cambios e iteras hasta que quede bien.

El flujo de trabajo

Sube tu CV

Abre Claude Code Desktop y coloca tu archivo de CV en el directorio de trabajo. No necesitas nada más.

Pide una versión web

Escribe tu prompt. Incluye instrucciones para un diseño profesional y limpio, secciones claras (Resumen, Experiencia, Formación, Habilidades, Idiomas, Contacto), navegación, diseño móvil, animaciones sutiles, protección con contraseña y soporte multilingüe.

Aquí tienes un prompt probado que puedes usar directamente. ¡Contiene todo lo que comentamos en este artículo!

La instrucción más importante: exigir explícitamente un único archivo HTML autocontenido.

Output a single self-contained index.html file with all CSS and JavaScript
inline. No external dependencies, no separate asset files.

Esa única restricción elimina casi toda la fricción técnica. Sin herramientas de build, sin dependencias, sin complejidad de hosting. Un solo archivo que puedes subir a cualquier parte y funciona.

Itera

Claude Code genera el sitio completo. Tú lo guías con lenguaje natural:

  • "Hazlo más minimalista"
  • "Mejora la legibilidad en la sección de experiencia"
  • "El espaciado entre secciones se siente demasiado apretado"
  • "Destaca las habilidades con más claridad"

La mayoría de las iteraciones tardan menos de un minuto.

Exporta

Acabas con un solo index.html. Contenido, diseño, comportamiento — todo dentro. Sin archivos adicionales.

Funcionalidades que vale la pena solicitar

Una buena versión de este sitio incluye varias cosas que requieren instrucciones deliberadas en el prompt.

Protección con contraseña

El sitio se abre con una pantalla de contraseña. La contraseña nunca se almacena en texto plano — solo un hash SHA-256 reside en el archivo. El acceso persiste únicamente durante la sesión del navegador.

Compartes la contraseña en tu carta de presentación. Esto crea una experiencia controlada y añade una intencionalidad que los CVs públicos genéricos no tienen.

La implementación tiene este aspecto:

// Hash stored in the file, never the plain password
const PASSWORD_HASH = "5e884898da28047151d0e56f8dc6292773603d0d6aabbdd62a11ef721d1542d8";

async function checkPassword(input) {
  const hash = await crypto.subtle.digest(
    'SHA-256',
    new TextEncoder().encode(input)
  );
  const hashHex = Array.from(new Uint8Array(hash))
    .map(b => b.toString(16).padStart(2, '0')).join('');
  return hashHex === PASSWORD_HASH;
}

El reclutador escribe la contraseña, el navegador la hashea del lado del cliente y la compara con el hash almacenado. Si coincide → el contenido del CV se hace visible. No se necesita servidor.

Una persona decidida podría extraer el contenido de tu CV del código fuente HTML independientemente del hash. Esto no es seguridad de nivel bóveda — es una barrera que mantiene fuera a los visitantes casuales y hace que la experiencia se sienta intencionada. Para una candidatura, es suficiente.

Soporte multilingüe

El mismo CV disponible en alemán, inglés y francés. El cambio es instantáneo — sin recarga, sin páginas separadas.

Especialmente valioso en contextos suizos o internacionales, donde la flexibilidad lingüística transmite algo real sobre tu forma de trabajar.

Dile a Claude Code que lo implemente como un selector de idioma con un objeto de contenido:

const content = {
  de: { title: "Erfahrung", intro: "..." },
  en: { title: "Experience", intro: "..." },
  fr: { title: "Expérience", intro: "..." }
};

Una barra superior fija permite a los reclutadores saltar directamente a la sección que les interesa. La mayoría irán directos a Experiencia — la navegación convierte eso en un clic en lugar de hacer scroll por contenido que aún no necesitan.

Línea temporal de experiencia

En lugar de una lista densa, la experiencia aparece como una línea temporal vertical. Más fácil de escanear, progresión más clara, visualmente estructurada. La diferencia de legibilidad es significativa comparada con una lista plana de viñetas.

Animaciones al hacer scroll

Los pequeños detalles mejoran la sensación sin distraer. Las secciones aparecen con fade-in al hacer scroll, los elementos se muestran con un ligero retraso, un efecto de escritura introduce tu rol. Bien hecho, esto se siente pulido en vez de llamativo.

Dile a Claude Code que use Intersection Observer para las animaciones activadas por scroll en lugar de bibliotecas pesadas. Mantiene el archivo autocontenido y eficiente.

Ponlo online

Tienes un solo index.html. Ponerlo en línea lleva unos cinco minutos — y puedes tener una URL profesional, hosting y una dirección de correo a juego, todo en un mismo lugar por 5 $ al mes.

El camino sencillo: Fastmail

Fastmail es conocido sobre todo como un proveedor de correo rápido y privado. Lo que menos gente sabe: cuando registras un dominio a través de Fastmail, puedes alojar un sitio web estático directamente desde tus archivos de Fastmail — sin servidor, sin configuración, sin pipeline de despliegue.

El proceso completo:

  1. Regístrate en Fastmail — 5 $/mes, prueba gratuita de 30 días, 10 % de descuento el primer año con nuestro enlace.
  2. Registra tu dominio — elige tunombre.com durante el registro o añádelo después. Fastmail gestiona el DNS por ti.
  3. Sube tu archivo — ve a Files, crea una carpeta, sube tu index.html.
  4. Activa el hosting — en los ajustes de Fastmail, apunta tu dominio a esa carpeta. El SSL se provisiona automáticamente.
  5. Listo. Tu CV está en línea en tunombre.com.

Tu dirección de correo — email@tunombre.com — está incluida en el mismo plan. Puedes crear tantos alias como quieras: empleo@tunombre.com por ejemplo. Ponlo en tu CV. Una dirección de correo premium con dominio personal se ve deliberada, no accidental.

Añade un código QR a tu carta de presentación

Genera un código QR a partir de tu URL y colócalo en tu carta de presentación junto a una línea como:

"Una versión interactiva de mi CV está disponible en tunombre.com. También puedes escanear el código QR a continuación. Contraseña: morning47"

Acceso sin esfuerzo, especialmente para reclutadores que leen candidaturas desde el móvil.

La restricción que lo hace funcionar

La mayor parte de este artículo trata sobre el resultado. La decisión que lo hace utilizable es la restricción de un solo archivo.

Si le pides a Claude Code una app en React o un proyecto con archivos CSS y JS separados, introduces una complejidad de despliegue que anula el propósito. Un reclutador no puede abrir un enlace a un repositorio de GitHub de la misma forma que abre una URL directa.

Un archivo. Todo inline. Súbelo a cualquier parte. Funciona de inmediato. Eso es lo que hace que esto sea práctico en lugar de teórico.

No se trata de ser técnico

Este enfoque funciona porque cambia la percepción antes de que el reclutador lea una sola palabra de tu experiencia. Demuestra que vas más allá del mínimo, que presentas la información con claridad y que entiendes las herramientas modernas lo suficiente como para usarlas con un propósito real.

El esfuerzo es una tarde. La señal que transmite es desproporcionadamente fuerte. Y una vez construido, lo reutilizas en todas tus candidaturas — actualiza el contenido en index.html, vuelve a subir, listo.

Pega la URL de este artículo en Claude Code o en el asistente de IA que prefieras como contexto si te atascas durante la construcción.


Dónde ejecutar esto

Para correo electrónico en tu dominio personalizado, Fastmail cuesta 5 $/mes, soporta dominios y alias ilimitados, y tiene una prueba gratuita de 30 días con un 10 % de descuento el primer año. Mejor que pelearse con SMTP autoalojado para un dominio de candidaturas.

(Enlaces de afiliado — nos llevamos una pequeña comisión si te registras, sin coste adicional para ti.)