Hacer un portfolio responsive con CSS moderno requiere combinar media queries tradicionales con container queries, una técnica que adapta los componentes según el ancho de su contenedor padre y no solo del viewport. Aquí te muestro cómo aplicar ambas en un proyecto real para que tu web se vea bien en tablet, celular y pantallas muy pequeñas.

¿Cómo se configura el contenedor principal con container queries?

Antes de escribir cualquier regla, necesitas declarar qué elemento será el contenedor de referencia. En el proyecto se definió un contenedor principal con container-type: inline-size y se le asignó un nombre de contenedor, lo que permite escribir reglas que reaccionen al ancho de ese bloque específico.

El primer breakpoint que se trabaja es el de tablets, con un max-width: 768px. Desde ahí parten los ajustes que reorganizan la cuadrícula de proyectos y los ítems de habilidades.

¿Qué diferencia hay entre media query y container query? La media query responde al tamaño de la ventana del navegador. La container query responde al tamaño del contenedor padre, lo que te permite componentes verdaderamente reutilizables.

¿Cómo reorganizar la cuadrícula de proyectos en tablet?

La clase cuadricula-proyectos usa grid-template-columns para distribuir las tarjetas. Al llegar al breakpoint de tablet, se reescribe esa propiedad para que muestre una sola columna con 1fr.

Esto garantiza que, aunque falle una imagen o cambie el contenido, las tarjetas siempre se apilen verticalmente y mantengan el orden visual.

Para los ítems de habilidades, el ajuste fue distinto:

• Cambiar el ancho de cada item-habilidad al 50% del contenedor.
• Aplicar un espaciado intermedio entre ellos.
• Mantener la distribución horizontal mientras el espacio lo permita.

El resultado es que en tablet ves dos habilidades por fila en lugar de tres o cuatro, lo que mejora la legibilidad sin romper el grid.

¿Cómo se ajusta el gap del menú en tablets?

Dentro de una media query con max-width: 768px, se modifica el gap de los enlaces del menú usando una variable de espaciado pequeño. Así, el menú se compacta solo cuando entra al rango de tablet y vuelve a expandirse al salir.

¿Cómo adaptar el portfolio para celular y pantallas muy pequeñas?

Para celular, el problema principal era el menú de navegación. Cuando el ancho baja de cierto punto, los enlaces dejan de caber en horizontal y conviene apilarlos.

La solución fue una media query con max-width: 522px que aplica:

• flex-direction: column a los enlaces.
• Alineación vertical centrada.
• Un gap con la variable de espaciado pequeño.

Se probó primero con 280px, pero el diseño ya se rompía antes, así que mover el breakpoint a 522px tiene más sentido visual. Ningún celular real llega a ser tan delgado como 280px, salvo casos extremos.

¿Cuándo conviene usar container query en vez de media query? Cuando un componente debe adaptarse según el espacio que tiene disponible, no según el tamaño total de la pantalla. Es ideal para tarjetas, grids de habilidades o sidebars.

¿Cómo lograr que un ítem ocupe el 100% del contenedor?

Aquí entra de nuevo la container query. Usando el contenedor principal con max-width: 400px, se modifica item-habilidad para que tenga width: 90%. El 100% real se reduce un poco para dejar respiración lateral.

La ventaja es que esta regla no depende del viewport: si en otro contexto el contenedor mide menos de 400px, los ítems se apilan igual.

¿Cómo organizar la barra de navegación en pantallas pequeñas?

Para que el título Mi portfolio quede arriba y los enlaces debajo, se aplica a la barra-navegacion:

• flex-direction: column para apilar título y enlaces.
• gap con espaciado pequeño para separarlos sin amontonarlos.
• Centrado horizontal de todos los elementos.

Una mejora opcional sería ocultar los enlaces y mostrarlos solo al pasar el cursor sobre un ícono tipo hamburguesa. No se implementó por tiempo, pero queda como ejercicio recomendado para llevar el portfolio a un nivel más profesional.

¿Qué detalles vigilar al probar la responsividad?

Mientras achicas y agrandas la ventana, revisa que:

• Ningún elemento se solape con otro.
• Las animaciones de scroll sigan funcionando al bajar por las secciones.
• El menú no quede cortado en ningún breakpoint intermedio.
• Las tarjetas de proyectos mantengan proporción al cambiar de columnas.

La responsividad es un trabajo iterativo. Puedes seguir afinando durante horas, agregando una imagen lateral, un menú hamburguesa o transiciones más suaves entre breakpoints. ¿Qué mejora le sumarías tú a este portfolio?