¡Bienvenidos al backstage de mi sitio web!

🚀

En esta pagina os contare la tecnología que impulsa mi web y cómo todo este alboroto tecnológico funciona en la práctica 😎

Nuestro héroe: Astro 🌟

Mi sitio web se construyó con el poderoso Astro, un todoterreno para crear páginas web. En pocas palabras, Astro se encarga de dar vida a mi sitio y de hacer que todo se vea espectacular. Es como el director de una película, ¡pero para páginas web! 🎬

Dependencias básicas

• Astro: Nuestro protagonista principal, que hace posible todo esto.
• Axios: Es el chico que se encarga de hablar con otras páginas y servicios para traerme información.
• Date-fns y Date-fns-tz: Los encargados de mantener el tiempo bajo control.
• Dotenv: El responsable de los secretos y configuraciones privadas.
• Markdown-it y Marked: Los expertos en darle estilo a los textos.
• Node-fetch: El mensajero que trae información desde el servidor.
• React-icons: Los diseñadores de los íconos que ves por aquí.
• Sanitize-html: El que se asegura de que el contenido sea seguro y se vea bien.
• Tailwind CSS: El maestro del diseño, aportando elegancia y eficiencia al aspecto del sitio.

¡Automatizando con estilo! 💻

Ahora, aquí viene lo emocionante. He creado unos “scripts” mágicos que se encargan de automatizar muchas tareas. 🧙‍♂️

• GitHub 🐙: Mantengo mi código en GitHub y estos scripts se aseguran de que todo esté actualizado.
• YouTube 📺: Me conecto con YouTube para traer contenido fresco.
• Spotify 🎵: ¡La música es esencial! Mantengo mi playlist actualizada automáticamente.
• Wakatime ⏱️: Registro cuánto tiempo paso programando, ¡es como mi diario personal de coder!
• Y más: También me conecto con GitLab, Azure DevOps, Unsplash, Anilist, Telegram, Dev.to y Ko-fi. ¡No se me escapa nada! 😅

Diagrama interactivo con ReactFlow 🌐

El corazón de mi página web es un diagrama interactivo creado con ReactFlow. Este diagrama es como un mapa que ilustra de manera visual la arquitectura y el flujo de datos de mi sitio web. Permíteme guiarte a través de los elementos clave de este diagrama:

1. Código de Astro en GitHub 🚀: Mi proyecto se encuentra alojado en un repositorio de GitHub. Aquí es donde reside todo el código fuente que alimenta mi sitio web. Astro, que es el marco principal de desarrollo, se encarga de darle vida.

2. Integración con Vercel 🛠️: Vercel es un servicio que se sincroniza con mi repositorio de GitHub. Cuando se detecta un cambio en el código fuente, Vercel lanza el proceso de construcción, conocido como “build”. Esto asegura que mi sitio web esté siempre actualizado y listo para brindarte la última información.

3. Llamadas a diversas APIs y scraping 📡: Durante el proceso de construcción, se llevan a cabo diversas acciones, como llamadas a APIs y “scraping” de datos. Estos procesos extraen información valiosa de fuentes externas, como YouTube, GitHub, Azure DevOps, GitLab, Unsplash, Anilist, Spotify, Wakatime, Telegram, Dev.to y Ko-fi. Así, mi sitio siempre ofrece contenido fresco y actualizado.

4. Integración en real time con Better Stack y Shipshape 📈: Los datos generados durante la construcción de mi sitio se envían en real time a las plataformas de Better Stack y Shipshape. Estas herramientas proporcionan un seguimiento continuo y análisis del rendimiento y la actividad en mi página. Esto me ayuda a comprender mejor cómo los usuarios interactúan con mi contenido y a tomar decisiones basadas en datos.

5. Conexión en real time con Giscus y Discord 💬: Mi sitio web también se conecta en real time con Giscus y Discord. Esto significa que puedes interactuar conmigo y con otros visitantes en real time. Puedes dejar comentarios, preguntas o simplemente charlar. Es una forma de mantener una experiencia interactiva y social en mi página.

En resumen, mi sitio web es como un festival de tecnología, donde Astro es el jefe de escena, los scripts hacen su magia y el diagrama interactivo de ReactFlow ilustra todo el proceso. ¡Gracias por ser parte de esta aventura tecnológica! 😄🌐