Creando un Portfolio Profesional con Astro y Tailwind
Desarrollo Web Moderno con Astro
En este episodio, se explora el diseño y desarrollo de una landing page tipo portfolio optimizada utilizando Astro. El enfoque principal es la eficiencia y la simplicidad, evitando frameworks innecesarios para mantenerse cerca de la plataforma web.
Ventajas de Astro
• Facilidad de aprendizaje: Es ideal para quienes ya conocen HTML, CSS y JavaScript básico.
• Flexibilidad: Permite integrar diversas tecnologías (React, Svelte, Vue) o simplemente usar JavaScript nativo, lo que evita la dependencia a largo plazo de un solo ecosistema.
• Rendimiento superior: Al ser un framework content-driven, resulta imbatible en velocidad, ideal para portfolios y páginas de proyectos.
Configuración y Estilos
Para el desarrollo de la interfaz, se optó por Tailwind CSS debido a su capacidad de configuración rápida mediante comandos simples (astro add tailwind).
• Tipografía: Se implementó una fuente variable mediante Font Source para una carga óptima y control dinámico del grosor.
• Diseño minimalista: Siguiendo la premisa de "menos es más", se priorizó una arquitectura limpia y centrada, implementando un dark mode nativo.
• Componentes: Se hizo énfasis en la creación de componentes reutilizables, como Header, SocialPill, y SectionContainer, para lograr un código modular y mantenible.
"Astro para los portfolios, las landing page y tal, es que no hay nada mejor."
Accesibilidad y Despliegue
Un punto clave abordado fue la accesibilidad web.
• Se discutió la importancia de utilizar prefers-reduced-motion en las animaciones de scroll para mejorar la experiencia de usuarios que prefieren reducir el movimiento.
• Se destacó la optimización de imágenes (WebP) para reducir drásticamente el peso de los archivos manteniendo la calidad visual.
• Finalmente, se mostró la sencillez del despliegue mediante Netlify Drop, demostrando que un sitio estático bien optimizado tiene un rendimiento excelente y coste cero.