Logo, una animación de memoji sonriendo

Proyecto: Portafolio personal y blog

Introducción

Aunque se recomienda 'no incluir' el mismo portafolio, la razón por la que está incluido es que este proyecto no es una simple plantilla de Squarespace, sino el siguiente paso en mi aprendizaje y me gustaría mostrarlo. Lo más importante que voy a aprender es NEXT.js, SSR rendering, APP Router y next-mdx-remote para cargar archivos markdown desde el servidor de Node.

Tipo:

  • Web App
  • Optimisada para móviles
  • Portafolio & Blog

Herramientas:

  • CSS & HTML
  • React 18
  • NEXT.js
  • Next-mdx-remote
  • Framer-motion
  • Git & GitHub
  • Vercel

En vivo:

Propósito del proyecto

Crear un lugar en internet propio, controlado por mí mismo y fuera de silos comerciales, un lugar donde puedo mostrar mis conocimientos en programación y escribir sobre lo que me interesa.

Poder presentarme de una manera correcta ante posibles oportunidades de empleo.

También es un blog, poder escribir sobre las cosas que me interesan y compartirlo con el mundo.

Mi papel en el proyecto

Utilizando la aplicación Figma, he creado el diseño y la interfaz de usuario.

Algunas ideas provienen del curso de React 'Joy of React' de Joshua Comeau. El curso me ha dado una buena base para empezar con NEXT.js y el renderizado SSR.

Excepto eso y la parte de reinicio de CSS, todo el código ha sido escrito por mí. Leer la documentación y buscarme la vida. Seguramente por eso hay errores de principiantes, pero la web funciona bien y he aprendido muchísimo.

Tres tarjetas de ofertas

Web stack y la explicación

Lugar de trabajo: Visual Studio Code. Framework NEXT.js.

Figma: diseño de UI y UX.

CSS: La transformación del diseño en una aplicación real se realizó utilizando API modernas de CSS. Para el layout he usado flexbox, grid y container query, lo cual fue realmente divertido aprender y usar.

NEXT APP Router: Rutas relativas, rutas anidadas, etc.

React: Componentes reutilizables, props. Uso de renderizado condicional. Control de formularios con estado a través de value y onChange. useEffect para algunas otras oportunidades. useState, useRef.

Next-mdx-remote: Por implementar para el blog como el siguiente paso, la idea es que lea los archivos markdown desde el mismo servidor.

Vercel: Implementación continua a través de GitHub.

Extras: Framer Motion para animaciones, React-Icons para iconos.

Git: Commits, Branches, Merge, Restore, Push.