Home

Portfolio - By Willy Antunez

En este documento voy a intentar dar una breve introducción sobre de qué se trata este proyecto y sus características.

Live preview del proyecto

Mira el proyecto cobrar vida en esta live preview desplegada en Github Pages:

https://willyantunez.github.io/willy-antunez-portfolio/

Diseño original en figma

Así es, todo estaba planeado

https://www.figma.com/file/8UyJPdu6Pm0cMGWuyequk4/Willy-Antunez---Portfolio?node-id=0%3A1&t=YxWql8e6gsi5J4Cs-1

Tecnologías utilizadas:

• React con Vite: Como framework de JavaScript, permitiéndome el uso de herramientas como los hooks, React context, custom Hooks, portal, etc.
• Preprocesador SCSS: Para escribir SCSS de una forma más eficiente utilizando le metodología BEM.
• formspree.io: Servicio en línea para el manejo de envió de formularios por email desde el Frontend.

¿Qué necesito para ejecutar este proyecto?

Para correr este proyecto solo necesitas tener instalado Node en tu computadora y una conexión a internet para poder ejecutar los comandos necesarios para correr el proyecto.

Cómo ejecutar este proyecto:

1. Clonar el repositorio o descargar los archivos del proyecto.
2. Utilizar el comando: npm install para descargar todas las dependencias
3. Correr el servidor de desarrollo con el comando: npm run dev

Componentes (Explicación breve)

En esta sección detallare un poco la funcionalidad de cada componente y sus dependencias, cabe resaltar que todos los componentes son completamente adaptables a cualquier tamaño de pantalla desde celulares pequeños hasta computadoras de pantalla grande. Todos los componentes están exportados por un archivo de barril en la carpeta components.

Start

En este componente cometí un error a propósito simplemente para poner mis habilidades a prueba, darle dos funciones diferentes a el componente (violando el principio de responsabilidad única):

• que funcionara como pantalla de desbloqueo en pantallas móviles
• y como Hero en pantallas grandes.

Props:

• id: para el smoth scroll y el scroll spy del navbar

Custom hooks utilizados:

• useMotion
• useUnlock

Navbar

El navbar posee las siguientes características:

• Scroll spy: se ve una pequeña sombra en los elementos a medida se va bajando en el sitio
• Smooth scroll: cuando tocas cualquiera de sus elementos te lleva de forma suave a el componente que estas buscando
• Se transforma en un menu desplegable (aside) cuando se está en dispositivos móviles

Custom hooks utilizados

• useIdScrollSpy

AboutMe

Este componente contiene mi foto y descripción, no posee muchas interacciones, solo el botón de descargar CV que consume el enlace de el Context. No utiliza ningún custom hook.

Props:

• id: para el smoth scroll y el scroll spy del navbar

Skills

Este componente tampoco contiene grandes interacciones solo consume las tech skills y soft skills de el context.

Props:

• id: para el smoth scroll y el scroll spy del navbar

Projects

Este compone consume los datos del context para mostrar los diferentes proyectos de la data.

Props:

• id: para el smoth scroll y el scroll spy del navbar

Componentes que utiliza:

• ProjectCard

ProjectCard

Es la card del proyecto que va en nuestro componente Projects. Ojo: utiliza el BASE_URL de las variables de entorno de vite para posibles despliegues a producción y consume las imágenes de la carpeta public.

Props: Recibe un objeto con las siguientes propiedades:

• title
• id: OJO: este id debe ser el mismo que el nombre del .png que está en la carpeta projects de la carpeta public para mostrar una vista previa, este id tambien es parte del src de esa imagen
• description
• repoUrl
• previewUrl (opcional)

Contact

Este componente contiene las vías para poder contactarme. Incluye un botón de whatsapp, mis redes sociales y un formulario para enviarme un email funcional.

Hooks que utiliza

• useForm
• useFormSpree

Otras dependencias

• configucarion del formulario: el archivo config.js que contiene un objeto con los nombres de los inputs, y sus expresiones regulares con mensajes de error que utiliza para validar el formulario.

Componentes que utiliza

• Modal: utiliza el modal para mostrar mensajes de confirmación para envió de email.

Modal:

El modal utiliza un portal para renderizarse en el div con el id "modal", esta envuelto por un HOC llamado ModalPortal que es el que hace el uso de la función createPortal de React.

Footer:

Es un componente completamente estático que solo muestra mi nombre y un mensaje de derechos de autor.

Custom hooks

Para este proyecto tuve la necesidad de utilizar varios custom hooks para facilitar la lectura de mis componentes. Todos los custom hooks están en la carpeta /src/hooks y estan exportado por un archivo de barril (index.js)

useMotion:

El hook que más dolores de cabeza me causó, este hook es utilizado únicamente por el componente start para utilizar los sensores de movimiento de los dispositivos móviles para animar los elementos de este componente. Su principal complejidad radica en que funciona tanto para Android como para Iphone. HTTPS: necesita https para que puedan funcionar los sensores en Iphone (de lo contrario no obtendrá los permisos necesarios)

Entradas

• No necesita ninguna entrada.

¿Qué retorna?

• enableMotion: Funcion que solicita permiso al dispositivo para utilizar los sensores de movimiento
• showPermBtn: Funcion que nos dice si es necesario solicitar la interacción del usuario (boton) para pedir permiso para usar los sensores
• motion1: Nivel de movimiento 1 (se le asigna al atributo style de el elemento)
• motion2: Nivel de movimiento 2 (se le asigna al atributo style de el elemento)
• motion3: Nivel de movimiento 3 (se le asigna al atributo style de el elemento)

useUnlock:

Se encarga de la animación del efecto bloqueo y desbloqueo de el componente Start.

¿Que retorna?

• unLockEvents: objeto con los diferentes eventos (handleTouchEnd, handleTouchMove, handleTouchStart)
• elementMoving: valor con la posicion para asignar a la etiqueta style (valor del 0 al 100) (0: bloqueado, 100: desbloqueado)
• transitionSpeed: velocidad de movimiento cuando el componente se esta moviendo despues de haberlo soltado con el dedo
• isUp: true si el componente esta arriba false si esta abajo
• lock: funcion para efecto bloqueo (opcional: recibe velocidad de desbloqueo como string ej: ".4s")
• unLock: funcion para efecto desbloqueo (opcional: recibe velocidad de desbloqueo como string ej: ".4s")

useIdScrollSpy

Recibe un objeto de configuracion y retorna el elemento sobre el que está activo en el scroll (el que más aparece en pantalla o el primero).

¿Que recibe?

• un objeto con las siguientes características:

1. ids: un arreglo con todos los ids de los elementos en forma de string
2. initialValue: el elemento que aparece activo por defecto

¿Qué retorna?

• activeScrollElement: un string con el id del elemento mas visible en pantalla.

UseForm

Nos ayuda a manejar los elementos de el formulario de contacto, maneja las validaciones y el estado de los datos.

¿Qué recibe?

• Un Array de objetos, en el que cada objeto es la configuración para un input, ese objeto tiene las siguientes propiedades:

1. name: el nombre del input (obligatorio)
2. regexValidators: un array de arrays, cada array es un validador que tiene en su primera posicion una expresion regular que va a validar ese input y la segunda posicion es el mensaje en caso de que esa expresion falle (de false al hacerle un test)
3. initialValue: el valor inicial que puede tener ese input

¿Qué retorna?

• un objeto por cada input que le pasemos en el config, que contiene un value ([name].value) con el valor de el input actualmente y un notvalid ([name].notValid) que es undefined si es valido y un string con un mensaje de la razon por la que no es valido.
• formState: contiene todos los valores de los inputs
• onInputChange: Método que le vamos a poner a todos los inputs (va a leer el atributo name de cada input para saber cual es, ese name debe ser el mismo que le pasamos en la configuracion)
• isFormValid: es true o false, dependiendo de si algun input contiene un dato no válido.
• wasFormSubmited: es true o false dependiendo si el formulario ya fue llamado.
• setFormSubmited: es una funcion que setea el wasFormSubmited a true.

Context

En este projecto no fue necesario (al menos en primera instancia) el uso de Redux para manejar el estado, aunque sería bueno implementarlo en un futuro. Nuestro context maneja un único propósito y es comunicar a los componentes la data de mi perfil profesional (skills, contacto, etc) a travez de el profileContext.

profileContext

Esparce un archivo data.js que como si de una API se tratase esparce por los distintos componentes del sitio los datos de mi perfil profesional relativos a proyectos, habilidades e información de contacto, que está propensa a cambiar de una forma constante, si se quisiese modificar esos datos del sitio sería tan fácil como modificar el archivo data.js que se encuentra dentro de la carpeta /src/data.

Data.js

Lo unico que hace este archivo es exportar un objeto. este objeto contiene:

• cvUrl: url del cv
• social: contiene los enlaces a mis distintas redes sociales y perfil de github
• skills: contiene dos objetos:

1. techSkills: array de skills, cada skill tiene un name y un domainPercent
2. softSkills: array de skills, cada skill es un objeto que unicamente tiene un name

• Projects: array de proyectos, cada proyecto es un objeto con las siguientes caracteristicas:

1. title: nombre del proyecto
2. description: descripcion breve del proyecto
3. id: id del proyecto y nombre del archivo .png de la vista previa del proyecto ubicado en la carpeta /public/projects/
4. repoUrl: url del repositorio del proyecto
5. previewUrl: url de la preview del proyecto, este campo es opcional, si no se agrega el boton para ir a la vista previa no va a aparecer