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:
- Rendimiento: El enfoque "Zero JavaScript por defecto" de Astro asegura cargas de página ultrarrápidas
- Islas de Componentes: Capacidad de usar componentes React solo donde sea necesario
- Soporte Nativo para Markdown: Perfecto para posts de blog y gestión de contenido
- 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
- Diseño Responsive: Enfoque mobile-first usando Tailwind CSS
- Integración de Blog: Funcionalidad de blog incorporada con soporte Markdown
- Arquitectura Basada en Componentes: Componentes modulares y reutilizables
- 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
- Empezar Simple: Comenzar con funcionalidades core y añadir complejidad gradualmente
- La Documentación es Clave: La documentación de Astro es excelente y fue crucial para el desarrollo
- Diseño de Componentes: Pensar cuidadosamente en los límites y reusabilidad de componentes
- 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.
Top comments (0)