Los desarrolladores tienen el mal hábito de construir navajas suizas cuando lo único que necesitan es una hoja afilada. Acoplamos frameworks de frontend pesados antes de escribir la primera línea de HTML. Añadimos librerías de animación, herramientas de gestión de estado y pipelines de construcción lo suficientemente potentes como para dirigir una pequeña empresa. Luego nos preguntamos por qué nuestros sitios de portafolio tardan tres segundos en renderizar, por qué la navegación falla en dispositivos móviles y por qué los reclutadores abandonan la página antes de siquiera ver los proyectos en los que pasamos meses trabajando.
Tomé un camino diferente con mi último portafolio. Me alejé del ecosistema de dependencias interminables y construí todo el sitio con HTML semántico y CSS limpio. Sin frameworks de JavaScript. Sin pasos de construcción. Sin motores de animación de terceros. Solo la plataforma misma, el diseño manejado por CSS Grid y Flexbox, y una filosofía de diseño que trata la velocidad y la claridad como características principales en lugar de detalles secundarios.
El resultado es ligero, rápido y profesional. Así es exactamente como lo abordé.
Empezar con los cimientos
La mayoría de la sobreingeniería comienza en los cimientos. Un portafolio no necesita ser una aplicación de una sola página (SPA). Necesita mostrar tu trabajo, decirle a la gente cómo contactarte y no estorbar. Utilicé HTML semántico porque el navegador ya sabe cómo renderizar un nav, un article y un footer. Cuando usas el elemento correcto para el trabajo adecuado, obtienes accesibilidad, visibilidad en los motores de búsqueda y un comportamiento responsivo esencialmente gratis. También escribes menos código. Un div con cinco atributos ARIA es solo una imitación redundante de un button. Evité eso por completo.
Para el diseño, CSS Grid y Flexbox son más que suficientes. Grid maneja la estructura macro: las secciones generales de la página, la galería de proyectos, la alineación de los bloques principales. Flexbox gestiona las microinteracciones: los enlaces de navegación dentro de esa cápsula, centrar el texto dentro de las tarjetas, empujar un footer hacia la parte inferior del viewport. Juntos reemplazan cualquier razón que pudieras haber tenido para importar un framework de cuadrícula de doce columnas en 2018. El código sigue siendo legible. El archivo CSS sigue siendo pequeño.
Color, tipografía y moderación
Quería que el portafolio transmitiera calma en el momento en que cargara. El fondo utiliza una base clara con sutiles degradados radiales. Nada agresivo. El degradado tiene una opacidad baja, creando una profundidad suave que evita que la página se sienta plana sin llamar la atención de forma estridente. Se carga instantáneamente porque es puro CSS. No hay imágenes hero que comprimir, ni fallbacks WebP que gestionar, ni librerías de JavaScript para carga diferida (lazy-loading) que configurar.
La tipografía aporta la personalidad. Combiné Outfit con Ovo. Outfit, una sans-serif geométrica, se encarga de todo el texto de la interfaz de usuario (UI): etiquetas de navegación, texto de botones, cuerpo de texto, detalles meta. Es nítida en las pantallas y mantiene la legibilidad en tamaños pequeños. Ovo, una serif de contraste medio, sirve para los encabezados y titulares principales. La combinación le da a la página una sensación editorial tranquila. Parece diseñado, no basado en una plantilla. Lo más importante es que ambas fuentes se cargan desde una única llamada a un servicio de fuentes o mediante archivos autoalojados. No hay desplazamiento del diseño (layout shift), ni destellos de texto sin estilo, ni cambios de peso de fuente mediante scripts después del renderizado inicial.
El menú de cápsula flotante
La navegación es donde los portafolios suelen colapsar bajo su propio peso. Menús de superposición a pantalla completa, scripts de animación escalonada e iconos de hamburguesa que requieren cuarenta líneas de JavaScript para alternar una clase. Yo no quería nada de eso.
Construí un menú de cápsula flotante con efecto glassmorphic. Es un único contenedor horizontal, redondeado en los bordes, posicionado de forma fija (fixed) cerca de la parte superior del viewport. El glassmorphism proviene de un color de fondo semitransparente y una propiedad backdrop-filter: blur(). Flota sobre el contenido sin ocultarlo, proporciona acceso inmediato a cada sección y se contrae con elegancia en viewports más pequeños sin necesidad de un rediseño completo. El efecto luce moderno porque el navegador se encarga de la composición, no una librería de canvas.