One of the landing pages of the website

The homepage of the website

Responsive website

All the website (apart from a couple of some sections, that still need to be refactored) is fully responsive. The CSS is implemented on a mobile-first approach, with one single HTML codebase and four possible different breakpoints: phone, tablet, desktop, widescreen.

The signup page of the Find a Pro section

The Find a Pro section as whitelabel application

The section "Find a Pro" has been developed as a standalone application and deployed as a white-labeled product for Zoopla and Primelocation. Using a single HTML/Django codebase and single set of Sass files, I was able to generate three different CSS files, three different styles/themes only using custom Sass variables.

The Calculators section

The Academy section

The Web Applications / Dashboards

Once registered a professional has access to his own dashboard, where he can update his company information, choose the services he offers, add his team and branches, upload examples of past projects. The web applications are fully responsive, to work perfectly also on a mobile device. In the future these application may be embedded as web views into native applications.

Data Entry

Starting from the designer's visuals, I have developed an entire set of custom controls: text inputs, selectors, toggles, wysiwyg editors, file uploaders, etc. The complexity lies in the double layout (only vertical on mobile, double-columns on tablet/desktop) combined with horizontal lines separating each "row/cell" of the form. Using advanced CSS selectors I was able to avoid using Javascript for this scope, and rely only on CSS properties and styles.

SVG Icons

All the user-interface icons are SVG. They are designed and then exported from Sketch, optimised an processed by Gulp in an SVG sprite, then inlined in the HTML files and referenced with "use xlink:href". In this way the icons can be coloured simply using normal CSS properties.

Empty states

Great care has been put in handling every possible empty state, giving the users a better experience, finding the right balance between a delightful UI, a clear call-to-action and extra contextual informations.

Multi-columns layout

For certain pages, the layout required a more complex structure. Instead of using a grid-based layout I simply relied on the "calc()" CSS property to have the browser automatically calculate and adjust the size of the columns, floated side-by-side.

GitHub activity

One year of hard work summarised in one screenshot.
Notice: these are private repositories, so they're not visible online.

Visual Regression tests

I have implemented an entire suite of Visual Regression tests – based on PantomCSS, CasperJS, PhantomJS and Gulp – that covers the website, the web-apps and especially the styleguide (above: the test for the styleguide pages).

Visual Regression tests

An example of a failed test, due to a wrong padding of the containing box module.

Explosion of CSS selectors

The blind adoption of the BEM methodology combined with a (wrong) use of Sass @extends took to these insane outcomes, where the resulting CSS selectors were simply un-manageable and un-debuggable. Not only: the size of the generated CSS file was around 1.2MB! After one year of hard refactoring, using a modular and "atomic" approach, I've been able to reduce the size of the CSS files to around ~100KB max each (and the CSS selectors are back to being human-readable).

Front-End Task Automation

This is how it looked like the front-end build process (run on Grunt). After the refactoring the whole process has been converted in Gulp, streamlined and greatly simplified.