Desde hace tiempo me apetecía tener una pagina web donde poder ir mostrando mis proyectos y experiencias y tener la libertad de diseñarla como yo quisiera.
El proyecto hace referencia a la página web que estás navegando ahora. La construí utilizando Astro, Tailwind CSS y Vanilla JavaScript. Ya tenía algo de esperiencia con desarrollo web, pero no con estas nuevas tecnologías ni con la ayuda de los LLMs.
Secciones
La página web consta de cuatro secciones. Sobre mí, Proyectos, Viajes y Más. La sección Sobre mí muestra la información en tarjetas, siguiendo el diseño de linkedin para mostrar cambio de puestos en una misma empresa. Las secciones de Proyectos y Más, dan un pequeño resumen, y luego al clicar sobre la tarjeta entras en información más detallada.
La sección mas interesante es la de Viajes. Cuenta con una interfaz que combina una línea de tiempo de desplazamiento horizontal con un globo terráqueo interactivo en 3D.
Sobre la línea de tiempo puedes deslizar hacia los lados y aparece marcada la fecha de inicio del viaje correspondiente:
Al seleccionar diferentes viajes, el globo 3D gira automáticamente para centrarse en la ubicación específica. A la inversa, al interactuar con los pines en el globo, la línea de tiempo se sincroniza con la fecha correspondiente.
En el siguiente video podemos ver un ejemplo de como interaccionan las dos componentes:
Tecnologías
- Framework: Astro
- Estilos: Tailwind CSS
- Interactividad: Vanilla JavaScript, Three.js (para el globo)