Akame hair salon

Starting point:

Simulate being provided a concept from a designer by taking screenshots from premade template https://colorlib.com/wp/template/akame/ Write custom semantic HTML and SCSS to turn screenshots into a fully responsive page.

Development strategy:

• Gulp for compiling with live reload during development.
• BEM syntax for keeping CSS styles scoped for each component.
• Dev dependencies managed with NPM.
• Custom vanilla ES6 JavaScript to toggle mobile menu.

Result:

Highly maintainable and portable code.

Result Demo

Going further:

Simulate porting existing code as custom themes into Drupal, Wordpress, and Gatsby.js

Development strategy:

• Drupal: theme styling custom block types. View code on Github.
• Wordpress: theme with multiple custom Gutenberg blocks built with React. View code on Github.
• Gatsby.js: used individual React components. View code on Github.

Result:

Refactored code that works natively within each system.