Página Web para Jesus Aristigueta
Este proyecto consistió en elaborar una página web completa para un perfil profesional, con un diseño limpio y moderno, optimizado para carga de contenido rápido y dinámico; ofreciendo secciones dedicadas a un blog personal, un portafolio de proyectos realizados e información detallada del perfil técnico y profesional.
Table of contents
Open Table of contents
Detalles del proyecto
Requerimiento
Para este proyecto se solicitó un sitio web responsive, moderno y sencillo utilizando las tendencias actuales en desarrollos web. Este sitio debe contener una página de introducción de bienvenida, una sección dedicada a un portafolio de proyectos realizados que puede incluir imágenes, código y enlaces a repositorios públicos, de igual forma debe contener una sección dedicada a un blog personal donde se podrán realizar publicaciones de tipo informativas, guías o tutoriales, noticias, etc., esta sección también puede contener imágenes, enlaces externos, código de programación, etc. Finalmente debe contener una sección donde se detalle el perfil profesional del usuario, en este se destacarán los detalles más importantes de su síntesis curricular, además, debe permitir la descarga del fichero PDF completo del mencionado CV.
Tecnologías a utilizar
Para este proyecto se decidió utilizar el framwork Astro para la generación de contenido estático; esto permite que el sitio pueda estructurarse en componentes reutilizables, carga en el navegador muy rápida y además no representa riesgos de ataques a back-end o APIs como sucedería con los manejadores de contenido o CMS tradicionales. Aun así, permite la flexibilidad y versatilidad de crear y actualizar el contenido muy fácilmente, agregando ficheros por cada publicación según sea necesario.
Se decidió utilizar la estrucutra Markdown para los ficheros de contenido ya que gracias a la identificación mediante Frontmatter, se puede categorizar y agregar los metadatos necesarios a cada página de contenido, facilitando significativamente la carga del mismo. Esto permite al usuario solo crear el contenido de la publicación sin preocuparse por los estilos, formato, colores, etc. ya que todo este contenido es transformado por Astro en estáticos HTML finales para ser consumidos por el navegador web.
Debido a la gran flexibilidad que ofrece este framework CSS con clases utilitarias, se decidió implementar Tailwind CSS en este proyecto, ya que permite de una forma fácil y amigable de aplicar estilos CSS a cada elemento del sitio web, además de que posee una integración muy amigable con Astro.
Para este proyecto, se implementaron algunos componentes creados en React.JS, permitiendo agregar dinamismo en el renderizado de los listados de publicaciones de proyectos y publicaciones del blog. De igual forma se crearon clases utilitarias que integradas con Astro, permiten la generación de todas las rutas del contenido de forma automatizada una vez se genere el proyecto para producción.
Se decidió adoptar TypeScript como buena práctica de Astro, permitiendo declarar de forma segura todas las variables globales del proyecto, así como las variables utilizadas en los props de cada componente, garantizando que los tipos de datos sean consistentes, lo que permite detectar errores rápidamente en las etapas de desarrollo.
Desarrollo
Para desarrollar este proyecto se inició desde las bases de funcionamiento de Astro, creación de proyecto, parametrización y personalización de la estructura de ficheros, posteriormente se diseñaron los Layout base para la estructura global del sitio y de cada sección utilizando las bases de TailwindCSS, es decir, diseñar el sitio web Mobile first.
Como referencia se tomó el proyecto de plantilla Astro Paper la cual está correctamente estructurada para la generación de todas las rutas y ficheros estáticos del sitio web.
Para dar mantenimiento al sitio web y dinamismo en la generación del contenido, se crearon carpetas de tipo content (Colecciones de Astro) en formato Markdown para la gestión del contenido; solo debe crearse un nuevo fichero con todos los metadatos relevantes y el contenido, posteriormente, el proyecto realizará automáticamente toda la generación de los ficheros estáticos al momento de crear la versión de producción.
Resultado final
Para el despliegue final de este proyecto se decidió utilizar un repositorio privado en GitHub para la gestión de todos los ficheros base y de desarrollo del proyecto. Además se configuró un sitio web en Cloudflare Pages integrado a este repositorio, una vez que se sincronizan los cambios en el repositorio, automáticamente se dispara un proceso en Cloudflare Pages para generar la versión de producción, actualizándose de forma inmediata los cambios cuando este proceso termina.
Resultados obtenidos en Google Lighthouse
Alcance
Con este proyecto se logran satisfacer los requerimientos iniciales para este sitio web, facilitando el mantenimiento y actualización del contenido del sitio, permitiendo además la inclusión de nuevas secciones en el futuro sin que represente tiempos de desarrollo extendidos.