Plantilla de portfolio para desarrollador en HTML y CSS

Una plantilla de portfolio para desarrollador en HTML y CSS: proyectos con contexto, habilidades concretas y contacto sin dependencias.

Un portfolio que explica lo que sabes resolver

Esta plantilla portfolio desarrollador HTML está pensada para mostrar trabajo con contexto. Un visitante no debería adivinar qué hiciste al ver una colección de capturas. El diseño empieza con una propuesta breve, continúa con dos proyectos y termina con el perfil y el contacto. No incluye barras de habilidades con porcentajes inventados. Cada pieza ofrece espacio para contar un problema, una decisión técnica y una limitación que puedas defender en una entrevista.

Cómo convertirla en un archivo utilizable

Copia el documento completo de esta guía en un archivo llamado index.html. Ábrelo en el navegador y cambia primero el nombre, el encabezado y los textos de los proyectos. El CSS está incluido para que puedas practicar sin configurar herramientas de compilación. Cuando la página crezca, separa los estilos en un archivo propio. Mantén las rutas relativas ordenadas y verifica las mayúsculas de los nombres: un archivo que funciona en tu equipo puede fallar al publicarse en otro sistema.

Código completo para probar en tu navegador

Copia este documento en un archivo index.html, guarda los cambios y ábrelo en el navegador. Los nombres y datos de demostración se deben sustituir antes de publicarlo.

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NODO — Portfolio de desarrollo</title>
<style>

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;line-height:1.65}button,input,select,textarea{font:inherit}button,a,input{touch-action:manipulation}a{color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}img,svg{max-width:100%}button{color:inherit}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0}.links{display:flex;gap:24px;flex-wrap:wrap}.links a{text-decoration:none;font-size:.88rem}.brand{font-weight:900;letter-spacing:-.06em;font-size:1.65rem;text-decoration:none}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:14px 23px;border:1px solid currentColor;text-decoration:none;font-weight:700;border-radius:999px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}h1,h2,h3,p{margin-top:0}h1,h2{line-height:1.04;letter-spacing:-.055em}h1{font-size:clamp(3rem,7.5vw,6.5rem)}h2{font-size:clamp(2rem,4vw,3.7rem)}h3{line-height:1.2}p{max-width:64ch}.section{padding:88px 0}footer{padding:32px 0;font-size:.8rem}.demo{font-size:.72rem;opacity:.75}details{border-top:1px solid #8885;padding:18px 0}summary{cursor:pointer;font-weight:700}summary+p{margin:16px 0 0}dialog{border:0;border-radius:20px;width:min(760px,calc(100% - 32px));padding:24px}dialog::backdrop{background:#000b}.close{float:right;border:1px solid #8885;border-radius:50%;background:transparent;width:40px;height:40px}section[id]{scroll-margin-top:24px}[hidden]{display:none!important}.reveal{animation:arrive .6s both}@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.wrap{width:calc(100% - 32px)}.nav{align-items:flex-start}.links{gap:14px}.section{padding:56px 0}h1{font-size:clamp(2.6rem,13vw,4.5rem)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

body{background:#151715;color:#f1f2e9}.brand span{font-size:.7rem;color:#c4f467;vertical-align:top}.hero{min-height:680px;display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;padding:60px 0}.hero h1{font-weight:800}.hero em{font-family:Georgia,serif;font-weight:400;color:#c4f467}.hero p{color:#a8afa6;max-width:440px}.lime{background:#c4f467;border-color:#c4f467;color:#151715}.hero-art{position:relative;min-height:450px;display:grid;place-items:center;background:radial-gradient(ellipse,#64774742,transparent 65%)}.orbit{position:absolute;width:390px;height:390px;border:1px solid #65734d;border-radius:50%;transform:rotate(-25deg) scaleY(.7)}.orbit:before,.orbit:after{content:'';position:absolute;inset:25px;border:1px solid #65734d;border-radius:50%;transform:rotate(60deg)}.orbit:after{inset:50px;transform:rotate(120deg)}.code-card{position:relative;transform:rotate(-7deg);padding:34px 45px;border:1px solid #ffffff25;border-radius:20px;background:#252a24;box-shadow:0 40px 100px #0007;color:#a8afa6;font-family:monospace}.code-card b{display:block;margin:18px 0;color:#f1f2e9;font:700 3.1rem/1.08 Arial}.sticker{position:absolute;bottom:12px;right:0;background:#c4f467;color:#151715;border-radius:50%;width:110px;height:110px;display:grid;place-items:center;text-align:center;font-size:.7rem;font-weight:900;transform:rotate(12deg)}.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:32px}.section-head h2{font-size:2.6rem;margin:0;max-width:500px}.section-head h2 span{font-size:1rem;color:#a8afa6}.filters{display:flex;gap:8px}.filters button{padding:9px 15px;border:1px solid #58604f;border-radius:30px;background:transparent}.filters [aria-pressed=true]{background:#c4f467;color:#151715;border-color:#c4f467}.bento{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}.project{padding:20px;background:#20241e;border:1px solid #ffffff12;border-radius:24px;transition:transform .25s}.project:hover{transform:translateY(-5px)}.project.slim{grid-column:1/-1;display:flex;gap:30px;align-items:center;padding:36px}.slim h3{font-size:1.6rem;margin:0}.slim p{margin:0;max-width:300px;color:#a8afa6}.arrow-big{margin-left:auto;font-size:4rem;color:#c4f467}.mock{height:270px;border-radius:14px;overflow:hidden;padding:26px}.mock-a{background:#e4e2d5;color:#1c302c}.mini-nav{font-size:.65rem;letter-spacing:.12em}.mini-title{font:2.8rem/.98 Georgia;margin:35px 0 25px}.mini-grid{display:flex;gap:10px}.mini-grid i{height:60px;flex:1;background:#b9bfa9}.mini-grid i:nth-child(2){background:#899b88}.mini-grid i:nth-child(3){background:#385347}.mock-b{background:#d3b5e0;color:#382147;display:flex;flex-direction:column;justify-content:center;gap:12px}.task-pill{font-size:.65rem;font-weight:bold}.task{padding:13px;border-radius:10px;background:#fff8;font-size:.85rem}.project-label{display:flex;justify-content:space-between;gap:10px;padding-top:22px}.project-label h3{margin-bottom:7px}.project-label p{font-size:.8rem;color:#a8afa6;margin-bottom:10px}.project details{font-size:.85rem}.about{padding:70px 0;border-top:1px solid #ffffff25;border-bottom:1px solid #ffffff25}.about h2{margin:28px 0}.about-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;color:#a8afa6}.tags{display:flex;gap:10px;flex-wrap:wrap;align-content:start}.tags span{border:1px solid #ffffff30;border-radius:30px;padding:7px 13px;font-size:.85rem}.contact{padding:100px 0}.contact h2{color:#c4f467}.contact p{color:#a8afa6}@media(max-width:800px){.hero{grid-template-columns:1fr;padding-top:35px;gap:0}.hero-art{min-height:350px}.orbit{width:290px;height:290px}.code-card b{font-size:2.4rem}.sticker{right:5%;bottom:30px}.bento{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.project.slim{display:block}.slim p{margin:18px 0}.arrow-big{display:none}.about-row{grid-template-columns:1fr;gap:20px}}

</style>
</head>
<body>

<header class="wrap nav"><a class="brand" href="#">nodo<span>®</span></a><nav class="links" aria-label="Principal"><a href="#trabajos">Trabajo</a><a href="#perfil">Perfil</a><a href="#contacto">Contacto ↗</a></nav></header>
<main class="wrap"><section class="hero reveal"><div><p class="eyebrow">Alex · Desarrollo & diseño</p><h1>Buenas ideas.<br><em>Mejores</em><br>interfaces.</h1><p>Construyo experiencias digitales que hacen fácil lo que parecía complicado.</p><a class="button lime" href="#trabajos">Explorar proyectos <span>↘</span></a></div><div class="hero-art" aria-hidden="true"><div class="orbit"></div><div class="code-card">&lt;idea&gt;<br><b>pensar.<br>probar.<br>crear.</b><br>&lt;/idea&gt;</div><span class="sticker">DESIGNED<br>TO WORK</span></div></section>
<section id="trabajos" class="section"><div class="section-head"><h2>Trabajo seleccionado<span> / 03</span></h2><div class="filters" role="group" aria-label="Filtrar proyectos"><button type="button" data-filter="all" aria-pressed="true">Todo</button><button type="button" data-filter="web" aria-pressed="false">Web</button><button type="button" data-filter="ui" aria-pressed="false">UI</button></div></div><div class="bento"><article class="project wide" data-category="web"><div class="mock mock-a" aria-hidden="true"><div class="mini-nav">ARCHIVO / 01</div><div class="mini-title">Menos ruido.<br>Más ideas.</div><div class="mini-grid"><i></i><i></i><i></i></div></div><div class="project-label"><div><h3>Archivo Studio</h3><p>Biblioteca de recursos · Proyecto de práctica</p></div><span>01 ↗</span></div><details><summary>Decisiones del proyecto</summary><p>Jerarquía editorial, navegación con teclado y tarjetas que conservan un orden claro en móvil.</p></details></article><article class="project" data-category="ui"><div class="mock mock-b" aria-hidden="true"><span class="task-pill">HOY / EN FOCO</span><div class="task">✓ Preparar ideas</div><div class="task">○ Dar el siguiente paso</div><div class="task">○ Hacerlo sencillo</div></div><div class="project-label"><div><h3>En Foco</h3><p>Interfaz de tareas · Prototipo</p></div><span>02 ↗</span></div><details><summary>Qué aprendí</summary><p>Separar estado y presentación, explicar errores y conservar el foco después de una acción.</p></details></article><article class="project slim" data-category="web"><p class="eyebrow">Laboratorio / 03</p><h3>Pequeños detalles.<br>Grandes diferencias.</h3><p>Experimentos de CSS, accesibilidad y microinteracciones.</p><span class="arrow-big" aria-hidden="true">↗</span></article></div><p id="filter-status" role="status" class="demo"></p></section>
<section id="perfil" class="about"><span class="eyebrow">Mi forma de trabajar</span><h2>Primero entender.<br>Después construir.</h2><div class="about-row"><p>Empiezo por el contenido, diseño una estructura clara y pruebo cada interacción con personas y dispositivos distintos.</p><div class="tags"><span>HTML semántico</span><span>CSS Grid</span><span>JavaScript</span><span>Accesibilidad</span></div></div></section><section id="contacto" class="contact"><p class="eyebrow">¿Tienes una idea?</p><h2>Hagamos algo<br>que merezca existir.</h2><p>Añade aquí tu correo profesional o tu enlace real de contacto.</p></section></main><footer class="wrap"><span class="demo">Portfolio de demostración · Sustituye identidad, proyectos y contacto.</span></footer>

<script>

const projects=[...document.querySelectorAll('.project[data-category]')];
document.querySelectorAll('[data-filter]').forEach(button=>button.addEventListener('click',()=>{
 const filter=button.dataset.filter;
 document.querySelectorAll('[data-filter]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));
 projects.forEach(p=>p.hidden=filter!=='all'&&p.dataset.category!==filter);
 document.querySelector('#filter-status').textContent=projects.filter(p=>!p.hidden).length+' proyectos visibles.';
}));

</script>
</body>
</html>

Elegir proyectos con una historia distinta

Dos proyectos bien documentados pueden aportar más información que diez tarjetas casi idénticas. En uno puedes explicar cómo organizaste un catálogo; en otro, cómo resolviste un formulario o un estado de error. Indica si fue práctica personal, trabajo académico o encargo real. No atribuyas mejoras de conversión o rendimiento que no mediste. Si colaboraste, describe tu responsabilidad concreta y enlaza a la versión que permita comprobarla, siempre que tengas permiso para mostrar ese trabajo.

Qué hace la cuadrícula adaptable

La clase rejilla usa columnas automáticas con un mínimo que nunca supera el ancho disponible. Así puede presentar varias tarjetas en una pantalla amplia y una sola en móvil. El contenido conserva el mismo orden en ambos casos. No cambies el orden visual para esconder la estructura del HTML: el recorrido de teclado debe seguir siendo comprensible. Prueba títulos largos y proyectos con más texto para confirmar que las tarjetas no dependen de una cantidad exacta de líneas.

Información ampliada sin un componente pesado

details y summary permiten desplegar una explicación adicional sin escribir JavaScript. El resumen debe describir qué encontrará la persona, por ejemplo Decisiones de accesibilidad o Mi responsabilidad. Evita usarlo para esconder la información esencial del proyecto. El título, el objetivo y tu aportación principal deben verse inmediatamente. Si añades una captura, describe su contenido cuando aporte información y conserva una proporción que no provoque saltos mientras carga.

Contacto que funcione de verdad

El ejemplo no contiene un correo ficticio presentado como canal operativo. Sustituye el párrafo de contacto por tu dirección real y, si quieres, crea un enlace mailto. También puedes dirigir a un formulario funcional. No dibujes un formulario que muestre Enviado sin tener un servicio que procese los datos. Explica el tipo de oportunidad que buscas y una disponibilidad realista. Esa información ayuda más que una llamada genérica a construir experiencias extraordinarias.

Revisar contenido antes que decoración

Lee la página en voz alta y elimina frases que podrían describir a cualquier profesional. Cambia Desarrollo soluciones innovadoras por una explicación del producto, el usuario y el resultado verificable. Comprueba que cada enlace tiene un destino útil. Si un proyecto no tiene versión pública, presenta una descripción o captura autorizada en lugar de un botón roto. El portfolio debe permitir evaluar tu criterio, no solamente tu capacidad para reproducir una composición visual.

Pruebas para una entrega profesional

Recorre todos los enlaces con Tab y confirma el foco visible. Abre los desplegables con teclado, aumenta el zoom y prueba un ancho de móvil. Revisa errores de consola y recursos que no cargan. Antes de publicar, reemplaza todos los avisos de demostración y verifica que no queden datos de terceros. Después solicita a otra persona que encuentre tu mejor proyecto y tu contacto: si necesita instrucciones, simplifica la jerarquía antes de añadir más efectos.

Una ficha de proyecto que demuestra criterio

Cuando amplíes cada proyecto, utiliza una secuencia reconocible: contexto, problema, decisiones y resultado. Describe por qué elegiste una estructura o una interacción y qué alternativas descartaste por una razón concreta. No hace falta escribir una memoria extensa; unos párrafos con evidencia ayudan a evaluar tu trabajo. Si el resultado tiene limitaciones, explícalas con honestidad. Un prototipo que guarda datos solamente en el navegador puede ser una buena práctica, siempre que no se presente como una plataforma lista para gestionar clientes reales.

Enlaces al código y a la demostración

Un repositorio público y una versión navegable responden preguntas diferentes. El primero permite revisar organización y decisiones técnicas; la segunda muestra comportamiento. Si incluyes ambos, usa etiquetas claras y verifica sus permisos. No publiques secretos dentro del código para facilitar una demostración. Revisa también que las instrucciones del repositorio permitan arrancar el proyecto. Cuando una versión antigua deje de estar disponible, actualiza el enlace o conserva una explicación del caso en tu portfolio en lugar de enviar al visitante a un error.

Medir mejoras sin inventar resultados

Puedes describir una revisión de rendimiento o accesibilidad si documentas qué se comprobó, con qué herramienta y bajo qué condiciones. Una puntuación aislada no demuestra que todos los usuarios tengan una experiencia perfecta. Explica qué problema encontraste y cómo lo corregiste: una imagen sobredimensionada, un control sin nombre o un orden de foco confuso. Si no tienes datos de impacto comercial, no los sustituyas por porcentajes estimados. Mostrar un antes y un después técnico verificable ya aporta una evidencia valiosa de tu proceso.

Preparar una revisión desde otra cuenta

Abre el portfolio sin tu sesión de desarrollo y comprueba recursos, proyectos y contacto. Un enlace puede funcionar para ti porque tienes permisos y fallar para cualquier visitante. Revisa también el nombre que aparece al compartir la página y el título del navegador. Si publicas una demostración alojada aparte, confirma que no exige credenciales ni expone datos internos. El último repaso debe reproducir el acceso de la persona que evaluará tu trabajo. Esa prueba sencilla suele descubrir más problemas prácticos que añadir otra capa de animaciones a las tarjetas del proyecto.

Guías relacionadas para seguir practicando

Puedes ampliar esta práctica con Crear una cuadrícula adaptable y Publicar una web estática.