There is a lot of mess in html. Let's clean it up finally.

Thumbnails on work page are too big. The grid could also be fixed instead of fluid. Let's give it a try.

Instead of "I'm a designer who loves code." use ""I'm a designer, developer & entrepreneur. Add info about technology, code, design and business being my passions and obsessions since an early age.

Video on pexels: https://videos.pexels.com/videos/cg-animation-of-black-hole-905
Screen:

Implement animated typed text for content–h1, h2 and h3–on homepage.

Plugin: http://www.mattboldt.com/demos/typed-js/
NPM: https://www.npmjs.com/package/typed.js
Wiki: https://github.com/mattboldt/typed.js/

Implement this beautiful loader.

Add case studies for following projects:

• - Harley
• - Barber Shop
• - Sumava
• - Avengers
• - Material
• - Maelstrom
• - Trinity
• - Nemesis
• - Devero

Inspiration:

• http://www.mizko.net/case-studies
• http://madebynu.ro/
• https://weareabstrakt.com/work/charnos/

• https://fonts.google.com/specimen/Inconsolata

Move the faq text from about page to FAQ page.

Rewrite code used on website to ES7 syntax.

I design & develop digital products people love to use.

On iPhone, it looks like inputs have rounded borders.

Split gulp file into smaller modules located in "gulp" directory. Use gulpfile only to create the top tier tasks.

• - Fix html warnings
• - Fix Sass warnings & errors (docs)
• - Fix JS warnings & errors
• - Fix comma-dangle error in console (.eslintrc) (docs)

First, switch buttons - work should be on the right. Second, Replace "Contact" with "About".

Let's try this small plugin for cleaning unused CSS.

NPM: https://www.npmjs.com/package/gulp-purifycss

Something for inspiration - http://blstr.co/creative/

Link to potential solution: http://stackoverflow.com/questions/4411551/if-browser-is-internet-explorer-run-an-alternative-script-instead

Some code is flagged with warning by linters (sass-lint and eslint).

Example of sass-lint rule exception:

// sass-lint:disable no-vendor-prefixes
html {
  font-size: 16px;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
// sass-lint:enable no-vendor-prefixes

Example of eslint rule exception:

/* eslint-enable no-unused-vars */
const lazyload = new LazyLoad();
/* eslint-enable no-unused-vars */

• use html lint
• maybe replace current html5 lint with htmllint
• use css lint

There is a lot of repeating CSS.

Add "Controller" suffix to ever controller in main.js.

Reduce the "Subject" options to "I need a designer", "I need developer", "I need designer & developer", "I need consultation" and "Other".

Rewrite gulpfile to ES7.

Install and implement sequence, postcsss, cssnext and cssnano plugins. Remove autoprefixer since it is included in cssnext.

On desktop, use something like following snippet. On tablet and mobile (<768 px), use current, hidden, full-width navigation.

.nav--main {
  /* position: fixed; */
  /* top: 0; */
  /* right: 0; */
  /* z-index: 4; */
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  overflow-y: auto;
  width: 100%;
  max-width: calc(100% - 108px);
  height: 100%;
  text-align: center;
  /* background: #212121; */
  transition: transform .25s cubic-bezier(.4,0,1,1);
  /* transform: translateX(100%); */
}

@media screen and (min-width: 556px) {
.nav--main {
  /* max-width: 20rem; */
  /* box-shadow: -6px 0 6px hsla(0,0%,8%,.35); */
  -ms-transform: translateX(328px);
  /* transform: translateX(328px); */
}
}

@media screen and (max-width: 767px) {
.nav--main li:nth-child(n+2) {
  margin-top: .35rem;
}
}

@media screen and (min-width: 768px) {
.nav--main li:nth-child(n+2) {
  margin-left: 21px;
}
}

.nav--main a {
  font-size: 1rem;
  /* color: #fff; */
}

Inspiration: http://www.mizko.net/

// Polyfill for forEach in Edge & IE
if (document.documentMode || /Edge/.test(navigator.userAgent)) {
if (typeof NodeList.prototype.forEach === 'function') return false;

    NodeList.prototype.forEach = Array.prototype.forEach;
  }

Rename settings, controllers and switches in main.js. Rename "anchors" to "appAnchors", "controllers" to "appControllers" and "switches" to "appSwitches". This will help avoid possible collisions with 3rd party scripts and also fix eslint "sort-keys" warning.