# Portfolio de desarrollador: una web que demuestra criterio

[Canonical HTML page](https://gradiently.design/es/guide/developer-portfolio-design)

Un portfolio de desarrollador se juzga por el código que enlazas y el cuidado que se nota. Aquí tienes una estructura, un fondo de portada que puedes pegar, tarjetas de proyecto de lectura rápida y vistas previas de enlace con buen acabado.

## The short version

- Un buen portfolio de desarrollador tiene cuatro partes: una portada breve que dice qué construyes, de tres a seis tarjetas de proyecto, una sección breve sobre ti y una forma fácil de contactarte.
- Un fondo de portada hecho con degradados CSS superpuestos carga al instante y muestra gusto visual sin una imagen pesada.
- Cada tarjeta de proyecto debe indicar el problema, lo que construiste y el resultado, con enlaces al proyecto en vivo y al código.
- Una imagen Open Graph de 1200×630 hace que el enlace de tu portfolio se vea terminado cuando se comparte en candidaturas, chats y redes sociales.
- Menos proyectos, mejor explicados, hacen un portfolio más sólido que una larga cuadrícula de tutoriales.

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

| Sección | Qué hace | Limítala a |
| --- | --- | --- |
| Portada | Tu nombre y lo que construyes | Una línea, una frase de apoyo |
| Proyectos | Prueba de que sabes entregar | De tres a seis tarjetas |
| Sobre mí | Cómo trabajas, qué quieres hacer después | Un párrafo breve |
| Escritos o charlas | Muestra cómo piensas (opcional) | Tres enlaces |
| Contacto | Facilita el siguiente paso | Email, GitHub, LinkedIn |

Una página basta para la mayoría de desarrolladores. Añade páginas de proyecto solo para trabajos que merezcan una historia más larga.

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](https://gradiently.design/es/guide/hero-section-design) 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](https://gradiently.design/es/guide/website-hero-background) y [el degradado de malla en CSS](https://gradiently.design/es/guide/css-mesh-gradient) profundizan más.

Fondo de portada índigo profundo: `radial-gradient(ellipse at 20% 15%, #3b2a8f 0%, #0e1020 55%, #07080f 100%)`

La capa base: un único destello índigo que se funde en casi negro. Lo bastante sereno para texto blanco en cualquier punto.

```css
.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;
}
```

Una portada con dos destellos en CSS sencillo. Mantén el destello más brillante lejos de donde va el titular para que las palabras sigan legibles.

Si quieres movimiento, anima despacio, mantén quietas las palabras y respeta `prefers-reduced-motion`; [el movimiento reducido](https://gradiently.design/es/guide/reduced-motion) 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](https://gradiently.design/es/guide/css-noise-texture).

## 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.

### Tarjeta débil

- «App del tiempo» con una captura
- Una lista de ocho tecnologías
- No se sabe qué hiciste tú personalmente
- Un enlace de demo roto

### Tarjeta sólida

- «Rota: cambios de turno para un equipo de cafetería»
- El problema en una frase
- Tu parte y un resultado medible
- Enlace en vivo que funciona y un repositorio ordenado

```css
.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;
}
```

Una cuadrícula de tarjetas adaptable. Una proporción de imagen fija mantiene todas las tarjetas con la misma forma aunque las capturas sean distintas.

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](https://gradiently.design/es/guide/dynamic-og-images) muestra cómo generarlas al compilar; [el tamaño de la imagen Open Graph](https://gradiently.design/es/guide/open-graph-image-size) trata los recortes.

Una imagen Open Graph horizontal para un portfolio de desarrolladora con su nombre y una descripción en una línea

La vista previa de la página de inicio: el nombre y la línea, nada más.

Una imagen Open Graph a juego para un proyecto de portfolio llamado Rota sobre el mismo degradado

La vista previa de una página de proyecto con la misma composición y fondo.

## 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](https://gradiently.design/es/guide/personal-branding) 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.

## FAQ

### ¿Qué debe incluir un portfolio de desarrollador?

Una portada de una línea sobre lo que construyes, de tres a seis tarjetas de proyecto con problema, solución y resultado, una breve sección sobre ti y enlaces de contacto. Enlaza a proyectos en vivo y a su código.

### ¿Cuántos proyectos debe tener un portfolio de desarrollador?

De tres a seis proyectos bien explicados son más sólidos que una larga cuadrícula. Elige trabajos que muestren el tipo de empleo que quieres después.

### ¿Qué tamaño debe tener la imagen Open Graph de un portfolio?

1200×630 píxeles. Mantén el nombre y la descripción de una línea en el centro para que no se recorte nada en vistas previas cuadradas.

### ¿Debe tener un portfolio de desarrollador un fondo animado?

Solo si es sutil, no retrasa la página y respeta los ajustes de movimiento reducido. Un degradado CSS por capas da el mismo acabado con un coste de rendimiento casi nulo.