Este proyecto es una implementación basada en el video tutorial "Build and Deploy a Fullstack Responsive Portfolio Website" del canal JavaScript Mastery. El objetivo del proyecto es aprender a crear y desplegar un portafolio digital flexible y bien diseñado para destacar tus habilidades ante empleadores o clientes potenciales.
Este tutorial permite tener un primer contacto con Sanity.io, una plataforma para contenido estructurado que te permite gestionar texto, imágenes y otros datos mediante APIs. Además, de aprender las mejores prácticas de ReactJS, la estructura de archivos y carpetas, el uso de SCSS, animaciones utilizando la biblioteca de animaciones tan popular como, Framer Motion.
Sanity es un moderno CMS (Sistema de Gestión de Contenidos) sin cabeza que utiliza contenido estructurado para reutilizar infinitamente el contenido en cualquier canal y un enfoque componible para ayudar a las empresas a conectarse con cualquier tecnología de terceros, fuente de datos y marco de trabajo de front end.
Con Sanity, puedes gestionar tu texto, imágenes y otros medios con APIs. También puedes utilizar la aplicación de página única de código abierto Sanity Studio para configurar rápidamente un entorno de edición que puedes personalizar. Con Sanity, tienes acceso a una gran cantidad de APIs, bibliotecas y herramientas que te ayudan a aprovechar los beneficios de tener todo tu contenido disponible como una única fuente de verdad.
Sanity permite aprovechar las siguientes características:
- **Almacenamiento de datos en tiempo real de Sanity para contenido estructurado y APIs de soporte para activos, gestión de usuarios y más.
- **Sanity Studio es una interfaz de usuario para gestionar contenido. Es una aplicación de página única React de código abierto que puedes personalizar y alojar donde quieras.
- **También hay SDKs, bibliotecas y herramientas que te permiten consultar tu contenido e integrarlo con sitios web, servicios y otras aplicaciones; donde necesites contenido.
Framer Motion es una biblioteca de animaciones y gestos simple pero poderosa para React. Impulsa las increíbles animaciones e interacciones en Framer. Sin código, máxima velocidad. Está basado en JavaScript y utiliza una sintaxis declarativa que permite a los usuarios escribir menos código. Framer Motion tiene licencia MIT y se puede encontrar en GitHub.
El componente principal de Framer Motion es el componente de movimiento, que es similar a un elemento HTML o SVG simple con capacidades de animación. Tiene las siguientes características: Animación, Variantes, Gestos, Arrastre, Desplazamiento, Ruta. Framer Motion simplifica el proceso de implementar animaciones complejas. Por ejemplo, se puede utilizar para crear una bandeja de notificaciones animada, animar un SVG o implementar arrastrar y soltar.
Algunos beneficios de Framer Motion incluyen: Integración fácil con aplicaciones React, Sintaxis más fácil de entender y usar, ya que utiliza menos líneas de código.
React Icons es una biblioteca versátil y completa de iconos populares que pueden ser fácilmente implementados en tus proyectos de React. Abarca numerosas bibliotecas de iconos, proporcionándote una amplia variedad de opciones para elegir.