SocialBar V1

Mi proyecto más reciente, que he desarrollado para mi portafolio de trabajo, es "SocialBar": una barra que incluye las redes sociales más populares actualmente, junto con dos redes sociales adicionales que considero importantes personalmente (Goodreads y StoryGraph). Estas últimas son relevantes porque es en ellas donde realizo mis actualizaciones y seguimientos de los libros que estoy abordando.

Este proyecto está realizado en React, junto con Tailwind CSS, Font Awesome y CSS propio, y se encuentra desplegado en Vercel.

Mi proyecto nace al observar Linktree (una de las páginas más importantes para desarrollar y desplegar una web de redes sociales) como un sitio idóneo para realizar el despliegue de tus redes sociales, pero que no desarrolla todas las posibilidades que el usuario, o en este caso, yo, quisiera de este sitio.

Es por ello que decidí realizar mi propia versión, adaptada a mis criterios y parámetros que considero relevantes al momento de realizar este tipo de página estática de redes sociales. Para ello, decidí en el primer momento que debería desarrollarse en React. Si bien la complejidad del sitio permite que este pueda desarrollarse desde HTML puro, es necesario mencionar que realizarlo en React cumple con la función de no ser tan engorroso visualmente para cualquiera que esté manipulando el código.

De esta forma, también decidí que sería idóneo utilizar Tailwind CSS para los estilos. Si bien no ofrece todas las posibilidades que estaría buscando para este proyecto, ya es un avance significativo de cara a lo que realmente quería desarrollar. En este sentido, comprendí desde el inicio la necesidad de desarrollar este proyecto también con CSS propio.

La última pieza de este juego eran los iconos. Inicialmente, manejé insertar los archivos SVG por medio de imágenes, pero estos perdían toda capacidad en su manejo para los hovers que desde el comienzo pensé en añadir. Es por ello por lo que, a mitad del desarrollo, sencillamente prescindí de ellos, dejando únicamente un archivo SVG que no poseía la librería de Font Awesome.

De esta forma, con Font Awesome, decidí que sería la mejor manera de trabajar en este proyecto, añadiendo color en aquellos íconos que lo necesiten y sin romper mi ideal de que cada link de cada red social tenga su propio color referente a esta red social. He ahí la importancia del CSS propio.

De esta manera, y finalmente, con todas las piezas listas, avancé en el desarrollo de este proyecto, realizando, al día de ayer, una versión utilizable que ha satisfecho mis criterios. Esta versión se encuentra actualmente disponible en SocialBar y puede ser visitada desde mi portafolio en el menú superior y desde la página de proyectos.

Para la implementación de este despliegue, decidí utilizar Vercel, pues esta es la plataforma en la que se encuentra desplegado mi portafolio y me parece adecuado que este proyecto se encuentre en la misma plataforma que el resto de mis proyectos.

Sin duda, realizar este proyecto es importante para reforzar mis habilidades trabajando en React y mejorar las habilidades empleadas para realizar este mismo proyecto con el uso de Tailwind CSS.

Tengo un único reto esperando resolverse en los próximos días: el diseño responsive. Si bien existe, pues Tailwind CSS facilita ello mediante sus estilos, algunas palabras o frases sobresalen indebidamente del espacio otorgado. Es por esto que he realizado un cambio a esto, esperando resolverlo pronto para una V1.1.