/cheil-recruitment-task

Assignment for front-end dev recruitment

Primary LanguageVue

Cheil recruitment task

About:

This app was written in Vue.js framework. It's made out of reusable, self-contained Vue components. Whole app is bundled by webpack to static dist folder, that can be easily hostet on basicly any server. Production code is automatically minified and optimized.
For images, this site is using Google's webp format. Webp's are much more lightweight than standard formats, however they are not supported by most browsers, so in that case fallback png's are send to the client.
This app is also fully functional PWA. It means that you can add this site to homescreen of your mobile device, and use it almost as native app. It also register service worker for cache management, so if you once open the app, you can use it offline.
For live demo you can go to cheil-recruitment-task.ranyboskie.pl

How to use:

make sure you have npm 6.4.0 and node > 9.0.0 installed
clone this repository and install dependencies with npm i
run npm run dev to compile frontend and start local dev server
run npm run prod to compile production bundle to dist folder

Folder structure:

src - all source files
src/css - scss styles
src/css/style.scss - global styles
src/js - vue app and main.js entry point
src/js/components - reusable vue components
src/images - static png and webp images
views - template for html-webpack-plugin
dist - compiled production bundle
webpack - whole webpack config

Additional notes:

  • although original design suggest to use #99999 color for fonts in 'Who we are' section, it does not comply with WCAG 2.0 AAA Color Contrast standard, so in my implementation i've used #575757 instead.