DEV Community

Cover image for Construyendo un Portfolio Moderno con Astro y Tailwind CSS
Joaquín Gutiérrez
Joaquín Gutiérrez

Posted on

2

Construyendo un Portfolio Moderno con Astro y Tailwind CSS

Introducción

¡Hola comunidad dev! 👋 Hoy quiero compartir mi experiencia construyendo mi portfolio personal usando Astro, un generador de sitios estáticos moderno, junto con Tailwind CSS para el diseño. Os contaré sobre el stack tecnológico, los desafíos encontrados y las lecciones aprendidas durante el proceso de desarrollo.

Stack Tecnológico

  • Astro (v4.16): El framework principal que impulsa el portfolio
  • Tailwind CSS (v3.4): Para el diseño y la responsividad
  • React (v18.3): Para componentes interactivos
  • TypeScript: Para seguridad de tipos y mejor experiencia de desarrollo

¿Por qué Astro?

Elegí Astro por varias razones convincentes:

  1. Rendimiento: El enfoque "Zero JavaScript por defecto" de Astro asegura cargas de página ultrarrápidas
  2. Islas de Componentes: Capacidad de usar componentes React solo donde sea necesario
  3. Soporte Nativo para Markdown: Perfecto para posts de blog y gestión de contenido
  4. Experiencia de Desarrollo Sencilla: Recarga en caliente de módulos y excelentes herramientas de desarrollo

Estructura del Proyecto

El portfolio sigue una estructura limpia y mantenible, básicamente es la creada por Astro:

  • /src/pages: Páginas basadas en rutas usando el enrutamiento basado en archivos de Astro
  • /src/components: Componentes UI reutilizables
  • /public: Activos estáticos como imágenes y fuentes
  • /src/layouts: Layouts y plantillas de página

Características Principales

  1. Diseño Responsive: Enfoque mobile-first usando Tailwind CSS
  2. Integración de Blog: Funcionalidad de blog incorporada con soporte Markdown
  3. Arquitectura Basada en Componentes: Componentes modulares y reutilizables
  4. Seguridad de Tipos: Integración completa con TypeScript para mejor calidad de código

Desafíos y Soluciones

1. Curva de Aprendizaje

Viniendo de frameworks tradicionales, el enfoque de Astro sobre hidratación parcial e islas de componentes fue nuevo. La solución fue profundizar en la documentación y experimentar con diferentes aproximaciones. Si eres nuevo, empieza por la documentación oficial y su tutorial, lo agradecerás.

2. Estrategia de Estilos

Decidir entre módulos CSS, styled-components y Tailwind CSS fue desafiante, básicamente porque nunca había tocado Tailwind. Finalmente elegí Tailwind por su enfoque utility-first y excelente integración con Astro.

3. Integración de TypeScript

Configurar TypeScript y sus definiciones de tipos requirió bastante tiempo inicial, pero los beneficios a largo plazo en calidad de código y experiencia de desarrollo lo hicieron valer la pena.

Despliegue

El portfolio está desplegado en Netlify, aprovechando sus ventajas:

  • Despliegue continuo desde Git
  • HTTPS automático
  • CDN global

Lecciones Aprendidas

  1. Empezar Simple: Comenzar con funcionalidades core y añadir complejidad gradualmente
  2. La Documentación es Clave: La documentación de Astro es excelente y fue crucial para el desarrollo
  3. Diseño de Componentes: Pensar cuidadosamente en los límites y reusabilidad de componentes
  4. Rendimiento Primero: Las optimizaciones de rendimiento por defecto de Astro son fantásticas

Mejoras Futuras

  • Implementar soporte para modo oscuro
  • Añadir más características interactivas usando islas de React
  • Integrar un CMS headless para mejor gestión de contenido
  • Mejorar la optimización SEO

Conclusión

Construir este portfolio con Astro y Tailwind CSS ha sido una excelente experiencia de aprendizaje. La combinación de herramientas y frameworks modernos hizo posible crear un sitio web rápido, mantenible y amigable para el desarrollador.

Preguntas y feedback son siempre bienvenidos en los comentarios.

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay