Portfolio de desarrollador: una web que demuestra criterio

Un buen portfolio de desarrollador es una web pequeña y rápida con cuatro partes: una portada que dice en una línea qué construyes, de tres a seis tarjetas de proyecto que explican el problema y tu papel en resolverlo, una breve sección sobre ti y un enlace de contacto. El criterio se nota en los detalles: un fondo de portada sereno, tarjetas coherentes, tipografía legible y una vista previa de enlace con buen acabado cuando un reclutador pega tu URL en un canal de selección. No necesitas un escaparate de frameworks. Necesitas una página que se note cuidada.

La estructura de un portfolio de desarrollador

Di lo que construyes, no lo que eres. «Construyo procesos de pago rápidos para tiendas online» dice más a un lector que «Desarrollador full stack». Si estás al principio de tu carrera, «Construyo aplicaciones web accesibles con React y Postgres» es honesto y concreto. El diseño de la sección principal de una web tiene más sobre cómo escribir esa primera línea.

Un fondo de portada que demuestra criterio

Muchos portfolios usan una página blanca lisa o un fondo animado pesado que retrasa todo lo demás. Un término medio es un degradado CSS por capas: dos o tres suaves destellos radiales sobre un fondo oscuro o pálido. Son unas pocas líneas de código, no tiene coste de red y aun así se ve cuidado. El fondo de portada de una web y el degradado de malla en CSS profundizan más.

.hero {
  min-height: 70vh;
  color: #f4f4f8;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgb(56 189 248 / 0.28), transparent 70%),
    radial-gradient(ellipse 50% 60% at 15% 20%, rgb(124 58 237 / 0.45), transparent 70%),
    linear-gradient(180deg, #0e1020 0%, #07080f 100%);
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  max-width: 18ch;
}

Si quieres movimiento, anima despacio, mantén quietas las palabras y respeta prefers-reduced-motion; el movimiento reducido explica cómo. Un poco de grano encima oculta el banding en degradados oscuros grandes, como se explica en la textura de ruido en CSS.

Tarjetas de proyecto que explican el impacto

Una tarjeta de proyecto tiene segundos para justificar un clic. Dale a cada una las mismas cuatro partes: un título, un problema en una frase, lo que construiste y el resultado, y enlaces al proyecto en vivo y al código. Los resultados no tienen que ser espectaculares. «Lo usa a diario nuestro equipo de 30 personas» o «Reduje la carga de página de 4 s a 1,2 s» valen cuando son ciertos y tuyos.

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.card {
  border-radius: 1rem;
  padding: 1.5rem;
  background: linear-gradient(160deg, #161a2e 0%, #0f1222 100%);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.card img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

Las capturas se ven más terminadas cuando están sobre el mismo fondo. Coloca cada una sobre el fondo de tu portada con un poco de margen, en lugar de mostrar capturas de navegador sin tratar y de tamaños distintos.

Imágenes Open Graph para tu portfolio

El enlace de tu portfolio se pegará en candidaturas, mensajes de reclutadores, canales de Slack y publicaciones en redes. Cada uno muestra la imagen Open Graph, de 1200×630 píxeles. Una tarjeta vacía o una captura recortada echa a perder el cuidado que pusiste en la web. Crea una para la página de inicio y, si tienes páginas de proyecto, una por proyecto con la misma composición. Las imágenes OG dinámicas muestra cómo generarlas al compilar; el tamaño de la imagen Open Graph trata los recortes.

Cómo escribir las secciones sobre ti y de contacto

Mantén la sección sobre ti en un párrafo breve en primera persona: qué disfrutas construyendo, cómo te gusta trabajar y qué buscas después. Una frase sobre la vida fuera del código está bien; una biografía completa, no. Termina la página con una forma evidente de contactarte, normalmente una dirección de email escrita completa, además de GitHub y LinkedIn. Un formulario de contacto añade fricción para un reclutador que solo quiere copiar tu dirección en un mensaje. Si te postulas a puestos con sensibilidad de diseño, la marca personal te ayuda a mantener la web, el CV y los perfiles con un mismo estilo.

Pequeños detalles que se leen como criterio

• Una sola familia tipográfica, dos grosores. Una buena sans para todo, una monoespaciada solo para el código.
• Una medida de 60 a 75 caracteres para el texto, para que los párrafos sean cómodos de leer.
• Contraste real: el texto debe cumplir WCAG AA frente a su fondo.
• Un favicon que combine con los colores de la portada.
• Carga rápida: un portfolio de desarrollador que tarda cuatro segundos en aparecer ya argumenta por sí solo.
• Un tema oscuro y uno claro solo si vas a mantener ambos bien.

Si prefieres no dibujar a mano las imágenes de vista previa y los marcos de capturas, Gradiently puede crearlos sobre un Mark, un fondo degradado vivo que mantiene legibles tus palabras, y con Pro adaptar un diseño a la vista previa de enlace, una publicación de LinkedIn y una cabecera de X de una vez. También puede conectarse a ChatGPT y Claude, para que pidas un conjunto de vistas previas de proyecto mientras escribes los casos de estudio.