• Cloudinary
• Figma
• Cloudflare
• Vercel
• Astro
• Sass
• Tailwind CSS
• TypeScript
• PyCharm
• JavaScript

Sofi Blog

Definición del proyecto

Este proyecto consistió en la creación de un blog de programación para Sofi Dev, streamer de programación de México. El objetivo del blog era ofrecer contenido informativo, educativo y de calidad a su comunidad de seguidores, ayudándoles a mejorar sus habilidades de programación y a mantenerse al día con las últimas tendencias en el desarrollo de software.

Actividades realizadas

1. #75 - Add new function for open images into dialog 📷🌷: implementación de una nueva funcionalidad dentro del detalle del post que permite abrir las imágenes en un diálogo modal para visualizarlas en tamaño completo.

2. #74 - add support into menu 🧪: corrección de un bug en el menú donde no se mostraba correctamente el enlace de la página de soporte.

3. #73 - Nuevos roles de contribuidor: incorporación de nuevos roles para los contribuidores del sitio y rediseño de la página de perfil de contribuidor para mejorar su presentación.

4. #71 - Adjust z-index and transitions in header and menu styles 🚀💜: ajuste del z-index del header y del menú y refinamiento de transiciones usando content-visibility y overflow: clip para lograr un renderizado más fluido de las animaciones.

5. #68 - Create animation menu details 🎨💻: creación de la animación de despliegue del menú con la etiqueta details, incluyendo refactor del controlador del hamburguesa y de los estilos del header.

6. #67 - New header and new Menu 🫶🏻💜: rediseño completo del header y construcción de un nuevo componente Menu que reemplaza al antiguo dropdown, simplificando la navegación del sitio.

7. #64 - New styles comments: rediseño visual del componente Comment para mejorar la legibilidad y el estilo tanto de los comentarios simples como de las respuestas anidadas.

8. #59 - Header styles list nav: ajustes de estilos en la lista de navegación del header e implementación de la página de resultados de búsqueda junto al servicio getResults que la alimenta.

9. #52 - Agregación de bordes en el apartado de post 🎨: incorporación de bordes a las imágenes y a los bloques de código dentro de los posts para mejorar la jerarquía visual del contenido.

10. #25 - Change styles the comments 🎨💻: actualización del estilo del organism Comments, refinando espaciados, tipografía y la integración visual con el resto del post.

11. #14 - New feature and add elements for render blog 🎨🐛: rediseño de las cards de post en la home y nueva visualización de la fecha de publicación dentro del listado del blog.

12. #13 - Update Header.astro: corrección de bugs en el dropdown del header y en el comportamiento del atributo target="_blank" de los enlaces del menú.

13. #12 - stylesChanges: avatar image 🎨: ajustes finos de estilos sobre la imagen del avatar dentro del componente PostCard.

14. #9 - button copy ready: implementación del botón “Copiar código” en los bloques de código de los posts del blog, incluyendo el script button-copy.ts que lo gestiona.

15. #4 - Remove Vercel File: limpieza del repositorio eliminando el directorio .vercel/output con artefactos de build que no debían estar versionados.

16. #3 - Update Settings 🍚🍤: configuración inicial del header, ajustes en el .gitignore y refinamiento de los estilos base de PostCard, Header y el listado de posts.

Resultados obtenidos

El blog se consolidó como un espacio funcional y atractivo donde la comunidad de Sofi Dev puede consumir contenido técnico de forma cómoda. Las contribuciones realizadas fortalecieron mis habilidades con Astro y WordPress como headless CMS, así como mis conocimientos en GraphQL y en el desarrollo de componentes web personalizados.

Conclusión

Contribuir al blog de Sofi Dev fue una experiencia muy enriquecedora dentro del mundo del open source y la colaboración con creadores de contenido. A través de cada Pull Request pude aportar mejoras concretas a un proyecto con impacto real sobre la comunidad hispanohablante de programación, aprendiendo a coordinarme con el flujo de trabajo del repositorio, a revisar feedback y a sostener una contribución constante a lo largo del tiempo. Espero seguir apoyando iniciativas como esta que aportan valor a la comunidad.