logo

Proyecto Portfolio

Decidi incluir el portfolio porque me parecio un proyecto interesante por las tecnologias que utilice para construirlo , Next JS (como Static Site Generator) y Strapi CMS para construir una api rest con la informacion de los proyectos entre otras tecnologias.

Tipo

App

Tecnologias

React JS

Next JS

Strapi CMS

Framer Motion

Sitio en vivoPortfolio

Objetivos & Meta

Decidí incluir el portfolio porque me pareció una app interesante por las tecnologías que utilice, lo construir con Next JS porque quería construir una aplicación web estática además utilice Framer motion para las animaciones junto con Styled components para los estilos.

En esta aplicación hay muchos tipos diferentes de animaciones como transiciones de página y animaciones en scroll entre otras.

Stack y Explicación

icono react
icono next-js
icono nextjs

Además de utilizar Next JS, Framer motion y Styled components me vi en la necesidad de tener una api donde pudiera guardar el contenido de los proyectos, para esto utilicé Strapi que es un headless cms, utilizar Next JS para construir una aplicación web estática junto con Strapi me dio mucha flexibilidad.

En lo que es despliegue originalmente había utilizado heroku (que tenia un free tier en su momento) pero este dejo de estar disponible por lo que me vi obligado a buscar otras alternativas y termine utilizando Railway para desplegar el backend de Strapi.

Problemas & Soluciones

Un problema con el que me encontré fue el de hacer funcionar el componente de Image que nos proporciona Next JS, como yo construí la aplicación como una aplicación web estática la optimización de imágenes no esta disponible cuando hacemos esto.

Para que el componente de Image pudiera funcionar realice la configuración necesaria para que el componente utilice Cloudinary para realizar las optimizaciones de las imágenes.

Otros Proyectos

Moderne App

Moderne es una aplicacion para una empresa ficticia de construccion de propiedades de alta tecnologia , en este proyecto el foco esta en animaciones utilizando tanto Framer Motion como CSS , consumir apis utilizando React Query ademas de utilizar Context api para tener un estado global interno.

Ver proyecto

Snapcode App

Snapcode es una aplicacion para crear snippets de codigo , descargarlos , guardarlos y borrarlos usando github como provider de autenticacion & supabase. En este proyecto el foco esta en la interaccion con el backend , autenticacion , rutas privadas y microinteracciones usando Framer Motion.

Ver proyecto