Expert360

Technical Test for Expert360

Getting Started

To run this project you will already need:

• Node
• Node-Sass
• Grunt-cli

To build this project:

• npm install
• grunt build

Grunt Tasks

• grunt svg optimises svgs and create svg-defs
• grunt build prepare files for production and output to dist folder

With more time

As with any project there are always ways to improve and things you wish you had time for. Below I have listed a number of things I would want to do before I considered this build production ready.

• the fonts should be loaded in a more performant way and in a way that prevents FOUT e.g. https://github.com/bramstein/fontfaceobserver/.
• section navigation should be hidden behind a burger menu at smaller breakpoints.
• responsive layouts at the smaller breakpoints need more tweaking, the layout is breaking properly at the main breakpoints, but additional content specific breakpoints need to be created, especially relating to the c-banner and c-profile-card.
• completion indicator needs tweaking at the 25% empty value. Additionally this should be more robust so that completion values in smaller than 25% increments could be shown.
• improve plus and minus icons, should be thinner line icon, current ones are too heavy for the design.
• social sharing icons should have a white fill behind each logo.
• avatar images should use srcset and provide a retina image as well.
• svg should be used for the caret icon in the "back to homepage" link.
• Expert360 logo should be an svg instead of a png.
• optimise SVG grunt tasks. svgmin may not be needed as svgstore has many optimisation options available to it. svgstore should also be set up to automatically pull the latest svg-def into the top of the designated div.
• more could be done to reduce the size of the scally framework e.g. should be able to remove unused width classes from being generated by the generate-percentage-breakpoints mixin. (gzip still keeps this pretty small)
• more extensive browser testing.
• styleguide needs to be excluded from the build process (update grunt task)
• styleguide should be cleaned up, and expanded as a test to make sure that each component works as intended on its own.