SNEAK: Creative portoflio

Front-end development challenge

Website layout and develop the home of this design.

Details of challenge

Conditions

La fuente es Google Montserrat and Questrial.

Las imágenes para el portafolio puede usar https://unsplash.com/

La versión responsive debe llevar un estilo de menú mobile.

• no se pueden utilizar frameworks css.
• no se puede utilizar jquery, ni frameworks javascript.
• Puede utilizar run taskers, y preprocesadores css
• la sección la grilla de portafolio, debe traerse dinámicamente con un json.
• usar hml5
• usar javascript en las últimas versiones es6, es7, es8.

Design

Results

El MVP se puede probar aquí demo.

Todos los enlaces y botones son funcionales (excepto los iconos del pie de página [footer]).

Como usar

En este proyecto se usa yarn como gestor de dependencias de Node.js, en concreto la versión 1.22.x.

Se hace uso de mecánismo de variables de entorno con dotenv, por lo tanto la url y llave de la api de imágenes se deben colocar en un archivo local llamado env, siguiendo la misma estructura de .env.example

Instalar las dependencias

yarn install

Ejecutar el modo de desarrollo en local

yarn dev

Compilar el proyecto para production

yarn build

Realizar el despliegue en GitHub pages

Este commando requeire que previamente se cuente con el proyecto compilado para producción yarn build

yarn deploy:gh-pages

Comandos extras

Elimina las carpetas y sus archivos que se generan al ejecutar el modo de desarrollo o la compilación de producción.

yarn clean

Estructura de archivos y directorios

• Directorio raíz
  • .gitignore
  • package.json
  • .nvmrc: archivo de configuración del Node Version Manager (NVM).
  • .env.example: indica como ejemplo que datos debe llevar el archivo de variables de entorno.
  • public: se alojan las imágenes, fuentes o cualquier asset.
  • readmeAssets: cualquier asset a usar solamente para documentar el README.md.
  • src
    • index.html: es el archivo de inicio
    • index.js: contiene todo el javascript requerido hasta el momento (se debería separar en componentes)
    • styles: tiene todos los estilos organizados por carpetas, según el sistema de diseño creado para este proyecto. Es inspirado en parte por framework css como bootstrap, foundation o tailwind.
    • components (futuro): debería contener en carpetas individuales los archivos de lógica y estilos de cualquier sección que merezca el esfuerzo a ser tratada como un componente

Herramientas y tecnologías empleadas

• HTML5
• JavaScript: vanilla / nativo
• Sass: para los estilos
• Parcel v2: Parcel is a compiler for all your code, regardless of the language or toolchain.
• Pexels: API de imágenes (limitaciones de uso)

Notas al aire

En caso de NO usar Sass y haber usado CSS3 nativo, ¿Parcel v2, se puede omitir su uso?

Sí, es posible. Pero sería necesario retirar el uso automático que entrega Parcel v2 en este proyecto de:

• uso de las variables de entorno con archivos .env
• inicio de un servidor de desarrollo
• compilar el proyecto optimizado para producción
• Hot Module Replacement (HMR)

Algunas dimensiones, proporciones y colores no se respetaron exactamente al diseño, ¿Por qué?

1. Lo primero y más importante fue que el diseño se replanteó para ser mobile-first.
2. El tamaño de algunos elementos eran muy pequeños, y es agotador para muchos usuarios dar clic en esas zonas reducidas.
3. Los colores se ajustaron lo necesario para cumplir al menos con el contraste doble-A (AA) de accesibilidad web.

¿Algo más que sea medianamente interesante de revisar en el repositorio fuera del código?

• El histórico de despliegues
• Control de ramas: esto si no se quiere inspeccionar el flujo de trabajo direcamente con GIT en local.
• histórico de issues
• histórico de PR