diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..ccdda087
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "typescript.check.workspaceVersion": false
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 3a43c6a2..dabfd770 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,10 @@
-# angular2-webpack
+# angular2-webpack extended with bourbon.io
+This is an extended version of the base repo. It includes the bourbon.io sass library and implements some bourbon/refill patterns.
+Also shows example to use the different events handling in Angular2 context.
+
+Note:
+* the port has been changed to 9000.
+
 
 [![Dependency Status](https://david-dm.org/preboot/angular2-webpack/status.svg)](https://david-dm.org/preboot/angular2-webpack#info=dependencies) [![devDependency Status](https://david-dm.org/preboot/angular2-webpack/dev-status.svg)](https://david-dm.org/preboot/angular2-webpack#info=devDependencies)
 [![Join the chat at https://gitter.im/preboot/angular2-webpack](https://badges.gitter.im/preboot/angular2-webpack.svg)](https://gitter.im/preboot/angular2-webpack?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
diff --git a/package.json b/package.json
index eb3e2739..9ed24560 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "clean-start": "npm run clean-install && npm start",
     "watch": "webpack --watch --progress --profile",
     "build": "rimraf dist && webpack --progress --profile --bail",
-    "server": "webpack-dev-server --inline --progress --port 8080",
+    "server": "webpack-dev-server --inline --progress --port 9000",
     "webdriver-update": "webdriver-manager update",
     "webdriver-start": "webdriver-manager start",
     "lint": "tslint --force \"src/**/*.ts\"",
@@ -33,7 +33,10 @@
     "@angular/platform-browser": "2.4.2",
     "@angular/platform-browser-dynamic": "2.4.2",
     "@angular/router": "3.4.2",
+    "bourbon": "^4.2.7",
+    "bourbon-neat": "^1.8.0",
     "core-js": "^2.4.1",
+    "normalize-scss": "^6.0.0",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.1",
     "zone.js": "^0.7.2"
@@ -43,12 +46,13 @@
     "@angularclass/hmr-loader": "^3.0.2",
     "@types/core-js": "^0.9.0",
     "@types/jasmine": "^2.2.29",
+    "@types/lodash": "4.14.50",
     "@types/node": "^6.0.38",
     "@types/selenium-webdriver": "2.53.33",
     "angular2-template-loader": "^0.6.0",
     "autoprefixer": "^6.3.2",
     "awesome-typescript-loader": "^3.0.0-beta.17",
-    "codelyzer": "1.0.0-beta.3",
+    "codelyzer": "2.0.0-beta.4",
     "copy-webpack-plugin": "^4.0.0",
     "css-loader": "^0.26.1",
     "extract-text-webpack-plugin": "^2.0.0-beta.4",
@@ -78,8 +82,8 @@
     "shelljs": "^0.7.0",
     "style-loader": "^0.13.0",
     "ts-helpers": "^1.1.1",
-    "tslint": "^3.4.0",
-    "tslint-loader": "^2.1.0",
+    "tslint": "^4.3.1",
+    "tslint-loader": "^3.3.0",
     "typedoc": "^0.5.1",
     "typescript": "2.0.10",
     "url-loader": "^0.5.6",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 208e6687..00ca5f9f 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,9 +1,12 @@
+<app-navigation></app-navigation>
+<!--
 <header>
   <nav>
     <a [routerLink]="['']">Home</a>
     <a [routerLink]="['about']">About</a>
   </nav>
 </header>
+-->
 <main>
   <h1>Hello from {{api.title}}!</h1>
 
@@ -11,6 +14,19 @@ <h1>Hello from {{api.title}}!</h1>
   <img src="http://github.com/img/angular.png">
 
   <router-outlet></router-outlet>
+
+  <div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque, ante vel rutrum pharetra, magna arcu vestibulum nulla, sed dapibus mauris nibh eu ante. Curabitur pharetra, ante quis tristique suscipit, magna mi semper magna, egestas ullamcorper dolor dui nec velit. Vivamus semper mauris sit amet mattis rutrum. Nulla ut molestie nunc, quis efficitur mi. Sed ut fringilla odio. Ut sagittis tincidunt sapien, a rhoncus augue consectetur sit amet. Fusce auctor quam vitae sapien porta consequat. Proin sed porta tellus. Quisque convallis sem sed diam auctor, eget vehicula odio sodales. Donec aliquet ante elit. Mauris facilisis faucibus iaculis. Cras sit amet arcu porttitor, porttitor sapien sed, euismod augue. Pellentesque dui nisl, posuere et tortor quis, porta elementum lorem. Vestibulum vitae nulla eget diam fringilla porttitor.</p>
+
+<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec malesuada velit bibendum nisl accumsan, non feugiat augue suscipit. Fusce ultrices pulvinar sapien, vel tristique eros bibendum sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla at nisi risus. Nullam imperdiet urna eget ligula lacinia condimentum. In hac habitasse platea dictumst. Curabitur quis velit at metus accumsan sodales. Fusce cursus molestie sem a vestibulum. Quisque feugiat, turpis at porta euismod, enim massa facilisis risus, in commodo nibh ex non purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultrices volutpat accumsan.</p>
+
+<p>Nulla porta pretium nisi, scelerisque volutpat velit. Curabitur sagittis magna in dolor scelerisque fermentum. Sed tincidunt sollicitudin semper. Donec blandit diam lorem, sed lobortis lectus rutrum convallis. Pellentesque pharetra mauris non metus lacinia, non varius urna efficitur. Maecenas ac tortor nec tortor venenatis mollis a non urna. Nulla vestibulum, nibh ut hendrerit ultrices, elit quam lobortis sem, at vulputate velit nisl eu lorem. Suspendisse a tellus interdum, pulvinar lacus a, venenatis nulla.</p>
+
+<p>In fermentum tellus velit, sit amet vehicula orci ullamcorper sit amet. Fusce blandit interdum tellus, nec facilisis neque auctor eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam mattis eget felis et auctor. Pellentesque vel odio ante. Vivamus facilisis tellus ut volutpat feugiat. Ut vitae blandit odio. Ut faucibus risus eu molestie molestie. Maecenas vitae ante viverra, tincidunt magna at, congue est. Quisque vel turpis vel elit rhoncus consequat.</p>
+
+<p>Suspendisse potenti. Nunc in consectetur neque. Donec a urna in lacus varius lobortis. Mauris in augue eget erat hendrerit laoreet et in nunc. Praesent auctor lacus vel viverra porttitor. Duis porttitor mattis tempus. Mauris dolor magna, sagittis et justo sed, ornare aliquet metus. Suspendisse sollicitudin, ligula eu fermentum volutpat, metus dolor commodo magna, vel fringilla est lorem quis orci. Sed at faucibus erat, eget maximus risus. Mauris laoreet massa ornare ultricies pharetra. Duis eros odio, malesuada a efficitur ac, maximus ac urna. Cras facilisis enim sagittis, congue tellus sed, ultrices purus. Duis nunc est, laoreet ut libero vitae, ullamcorper maximus lectus. Donec vestibulum laoreet accumsan. Nulla sed nisl commodo metus consectetur vehicula et convallis sem.</p>
+  </div>
+  
 </main>
 <footer>
   <a [href]="url">Webpack Angular 2 Starter</a>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 895a09ab..334e1a25 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,3 +1,9 @@
+@import 'http://github.com/normalize';
+@import 'http://github.com/bourbon';
+@import 'http://github.com/neat';
+
+@include normalize();
+
 // styles applied on :host are applied on the current component, "app" in this case
 :host {
   display: block;
@@ -14,6 +20,7 @@ header {
 }
 
 main {
+  @include outer-container(80%);
   padding: 1em;
   font-family: Arial, Helvetica, sans-serif;
   text-align: center;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4fc43212..6124d1eb 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -7,7 +7,7 @@ import '../style/app.scss';
 @Component({
   selector: 'my-app', // <my-app></my-app>
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   url = 'https://github.com/preboot/angular2-webpack';
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cea4ed87..0cd93ff8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,6 +4,9 @@ import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
+import { NavigationComponent } from './navigation/navigation.component';
+import { ParallaxComponent } from './parallax/parallax.component';
+import { PortfolioComponent } from './portfolio/portfolio.component';
 import { HomeComponent } from './home/home.component';
 import { AboutComponent } from './about/about.component';
 import { ApiService } from './shared';
@@ -20,6 +23,9 @@ import { removeNgStyles, createNewHosts } from '@angularclass/hmr';
   ],
   declarations: [
     AppComponent,
+    NavigationComponent,
+    PortfolioComponent,
+    ParallaxComponent,
     HomeComponent,
     AboutComponent
   ],
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index e85ed304..8d20e73f 100644
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -2,10 +2,12 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { HomeComponent } from './home/home.component';
 import { AboutComponent } from './about/about.component';
+import { PortfolioComponent } from './portfolio/portfolio.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
-  { path: 'about', component: AboutComponent}
+  { path: 'about', component: AboutComponent},
+  { path: 'portfolio', component: PortfolioComponent}
 ];
 
 export const routing = RouterModule.forRoot(routes);
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 604d9e1d..0e573e3a 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,3 +1,4 @@
+<parralax-hero></parralax-hero>
 <p>
   Home Works!
 </p>
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
new file mode 100644
index 00000000..9c7957ab
--- /dev/null
+++ b/src/app/login/login.component.html
@@ -0,0 +1,14 @@
+<div class="modal">
+  <label for="modal-1">
+    <div class="modal-trigger">Click for Modal</div>
+  </label>
+  <input class="modal-state" id="modal-1" type="checkbox" />
+  <div class="modal-fade-screen">
+    <div class="modal-inner">
+      <div class="modal-close" for="modal-1"></div>
+      <h1>Modal Title</h1>
+      <p class="modal-intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi  minima.</p>
+      <p class="modal-content">Body text lorem ipsum dolor ipsum dolor sit sit possimus amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias eriam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam. Body text lorem ipsum dolor ipsum dolor sit sit possimus amet.</p>
+    </div>
+  </div>
+</div>
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
new file mode 100644
index 00000000..831c6ad7
--- /dev/null
+++ b/src/app/login/login.component.scss
@@ -0,0 +1,160 @@
+@import 'http://github.com/bourbon';
+@import 'http://github.com/neat';
+
+.modal {
+  $base-border-color: #dcdcdc !default;
+  $base-border-radius: 3px !default;
+  $base-background-color: #fff !default;
+  $base-font-size: 1em !default;
+  $base-line-height: 1.5em !default;
+  $action-color: #477dca !default;
+  $dark-gray: #333 !default;
+  $light-gray: #ddd !default;
+  $medium-screen: 40em !default;
+  $large-screen: 53.75em !default;
+  $base-font-color: $dark-gray !default;
+  $modal-padding: 3em;
+  $modal-background: $base-background-color;
+  $modal-close-color: $light-gray;
+  $modal-image-height: 135px;
+  $modal-image-width: $modal-image-height;
+  $modal-trigger-image-width: 300px;
+
+  label {
+    cursor: pointer;
+    margin-bottom: 0;
+  }
+
+  label img {
+    border-radius: $modal-trigger-image-width / 2;
+    display: block;
+    max-width: $modal-trigger-image-width;
+  }
+
+  .modal-state {
+    display: none;
+  }
+
+  .modal-trigger {
+    padding: 0.8em 1em;
+  }
+
+  .modal-fade-screen { // overlay
+    @include position(fixed, 0);
+    background-color: rgba(#000, 0.85);
+    opacity: 0;
+    padding-top: 0.6em;
+    text-align: left;
+    transition: opacity 0.25s ease;
+    visibility: hidden;
+    z-index: 99999999999;
+
+    @include media($large-screen) {
+      padding-top: 10em;
+    }
+
+    .modal-bg {
+      @include position(absolute, 0);
+      cursor: pointer;
+    }
+  }
+
+  .modal-close {
+    @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
+    @include size(1.5em);
+    background: $modal-background;
+    cursor: pointer;
+
+    &::after,
+    &::before {
+      @include position(absolute, 3px 3px 0 50%);
+      @include size(0.15em 1.5em);
+      background: $modal-close-color;
+      content: "";
+      display: block;
+      margin: -3px 0 0 -1px;
+      transform: rotate(45deg);
+    }
+
+    &:hover::after,
+    &:hover::before {
+      background: darken($modal-close-color, 10%);
+    }
+
+    &::before {
+      transform: rotate(-45deg);
+    }
+  }
+
+  .modal-inner {
+    background: $modal-background;
+    border-radius: $base-border-radius;
+    margin: auto;
+    margin-top: 0;
+    max-height: 95%;
+    overflow: auto;
+    padding: $modal-padding / 2;
+    position: relative;
+    transition: opacity 0.25s ease;
+    width: 95%;
+
+    @include media($medium-screen) {
+      max-height: 70%;
+      padding: $modal-padding;
+      width: 60%;
+    }
+
+    @include media($large-screen) {
+      width: 50%;
+    }
+
+    h1 {
+      color: $base-font-color;
+      text-align: left;
+      text-transform: capitalize;
+    }
+
+    p {
+      color: $base-font-color;
+      line-height: $base-line-height;
+    }
+
+    .modal-intro {
+      margin-bottom: 1em;
+    }
+
+    .modal-content {
+      color: $base-font-color;
+
+      @include media($medium-screen) {
+        columns: 2 8em;
+      }
+    }
+
+    a.cta {
+      color: $base-background-color;
+      display: inline-block;
+      margin-right: 0.5em;
+      margin-top: 1em;
+
+      &:last-child {
+        padding: 0 2em;
+      }
+    }
+  }
+
+  .modal-state:checked + .modal-fade-screen {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .modal-state:checked + .modal-fade-screen .modal-inner {
+    top: 0.5em;
+  }
+}
+
+.modal-open {
+  overflow: hidden;
+}
+
+// Based on code by Kasper Mikiewicz
diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
new file mode 100644
index 00000000..baa5edc3
--- /dev/null
+++ b/src/app/login/login.component.ts
@@ -0,0 +1,21 @@
+import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
+
+@Component({
+    selector: 'login-modal',
+    templateUrl: './login/login.component.html',
+    styleUrls: ['./login/login.component.scss']
+})
+export class LoginComponent implements AfterViewInit {
+    @ViewChild('parallaxImage') modalInner: ElementRef;
+    @ViewChild('parallaxWindow') pWindow: ElementRef;
+    public checked: boolean;
+
+
+    constructor() {
+        this.checked = false;
+    }
+
+    ngAfterViewInit() {
+
+    }
+}
\ No newline at end of file
diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html
new file mode 100644
index 00000000..c1cc644c
--- /dev/null
+++ b/src/app/navigation/navigation.component.html
@@ -0,0 +1,38 @@
+<header class="centered-navigation" role="banner">
+  <div class="centered-navigation-wrapper">
+    <a href="/service/javascript:void(0)" class="mobile-logo">
+      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo image">
+    </a>
+    <a href="/service/javascript:void(0)" id="js-centered-navigation-mobile-menu" class="centered-navigation-mobile-menu">MENU</a>
+    <nav role="navigation">
+      <ul id="js-centered-navigation-menu" class="centered-navigation-menu show">
+        <li class="nav-link"><a [routerLink]="['']">Home</a></li>
+        <li class="nav-link"><a [routerLink]="['portfolio']">Portfolio</a></li>
+        <li class="nav-link logo">
+          <a href="/service/javascript:void(0)" class="logo">
+            <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo image">
+          </a>
+        </li>
+        <li id="js-centered-more" class="nav-link more"><a href="/service/javascript:void(0)">Submenu test</a>
+          <ul class="submenu">
+            <li><a [routerLink]="['']">Submenu Item</a></li>
+            <li><a [routerLink]="['']">Another Item</a></li>
+            <li class="more"><a href="/service/javascript:void(0)">Item with submenu</a>
+              <ul class="submenu fly-out-right">
+                <li><a [routerLink]="['']">Sub-submenu Item</a></li>
+                <li><a [routerLink]="['']">Another Item</a></li>
+              </ul>
+            </li>
+            <li class="more"><a [routerLink]="['']">Another submenu</a>
+              <ul class="submenu fly-out-right">
+                <li><a [routerLink]="['']">Sub-submenu</a></li>
+                <li><a [routerLink]="['']">An Item</a></li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="nav-link"><a [routerLink]="['']">Sign up</a></li>
+      </ul>
+    </nav>
+  </div>
+</header>
diff --git a/src/app/navigation/navigation.component.scss b/src/app/navigation/navigation.component.scss
new file mode 100644
index 00000000..12a2c760
--- /dev/null
+++ b/src/app/navigation/navigation.component.scss
@@ -0,0 +1,273 @@
+@import 'http://github.com/bourbon';
+@import 'http://github.com/neat';
+
+.centered-navigation {
+  $base-border-radius: 3px !default;
+  $dark-gray: #333 !default;
+  $large-screen: 53.75em !default;
+  $base-font-color: $dark-gray !default;
+  $centered-navigation-padding: 1em;
+  $centered-navigation-logo-height: 2em;
+  $centered-navigation-background: #E7F1EC;
+  $centered-navigation-color: transparentize($base-font-color, 0.3);
+  $centered-navigation-color-hover: $base-font-color;
+  $centered-navigation-height: 60px;
+  $centered-navigation-item-padding: 1em;
+  $centered-navigation-submenu-padding: 1em;
+  $centered-navigation-submenu-width: 12em;
+  $centered-navigation-item-nudge: 2.2em;
+  $horizontal-bar-mode: $large-screen;
+
+  background-color: $centered-navigation-background;
+  border-bottom: 1px solid darken($centered-navigation-background, 6%);
+  min-height: $centered-navigation-height;
+  width: 100%;
+  z-index: 9999;
+
+  // Mobile view
+
+  .mobile-logo {
+    display: inline;
+    float: left;
+    max-height: $centered-navigation-height;
+    padding-left: $centered-navigation-padding;
+
+    img {
+      max-height: $centered-navigation-height;
+      opacity: 0.6;
+      padding: 0.8em 0;
+    }
+
+    @include media($horizontal-bar-mode) {
+      display: none;
+    }
+  }
+
+  .centered-navigation-mobile-menu {
+    color: $centered-navigation-color;
+    display: block;
+    float: right;
+    line-height: $centered-navigation-height;
+    margin: 0;
+    padding-right: $centered-navigation-submenu-padding;
+    text-decoration: none;
+    text-transform: uppercase;
+
+    @include media ($horizontal-bar-mode) {
+      display: none;
+    }
+
+    &:focus,
+    &:hover {
+      color: $centered-navigation-color-hover;
+    }
+  }
+
+  // Nav menu
+
+  .centered-navigation-wrapper {
+    @include outer-container;
+    @include clearfix;
+    position: relative;
+    z-index: 999;
+  }
+
+  ul.centered-navigation-menu {
+    clear: both;
+    display: none;
+    margin: 0 auto;
+    overflow: visible;
+    padding: 0;
+    -webkit-transform-style: preserve-3d; // stop webkit flicker
+    width: 100%;
+    z-index: 99999;
+
+    &.show {
+      display: block;
+    }
+
+    @include media ($horizontal-bar-mode) {
+      display: block;
+      text-align: center;
+    }
+  }
+
+  // The nav items
+
+  .nav-link:first-child {
+    @include media($horizontal-bar-mode) {
+      margin-left: $centered-navigation-item-nudge;
+    }
+  }
+
+  ul li.nav-link {
+    background: $centered-navigation-background;
+    display: block;
+    line-height: $centered-navigation-height;
+    overflow: hidden;
+    padding-right: $centered-navigation-submenu-padding;
+    text-align: right;
+    width: 100%;
+    z-index: 9999;
+
+    a {
+      color: $centered-navigation-color;
+      display: inline-block;
+      outline: none;
+      text-decoration: none;
+
+      &:focus,
+      &:hover {
+        color: $centered-navigation-color-hover;
+      }
+    }
+
+    @include media($horizontal-bar-mode) {
+      background: transparent;
+      display: inline;
+      line-height: $centered-navigation-height;
+
+      a {
+        padding-right: $centered-navigation-item-padding;
+      }
+    }
+  }
+
+  li.logo.nav-link {
+    display: none;
+    line-height: 0;
+
+    @include media($horizontal-bar-mode) {
+      display: inline;
+    }
+  }
+
+  .logo img {
+    margin-bottom: -$centered-navigation-logo-height / 3;
+    max-height: $centered-navigation-logo-height;
+    opacity: 0.6;
+  }
+
+  // Sub menus
+
+  li.more.nav-link {
+    padding-right: 0;
+
+    @include media($large-screen) {
+      padding-right: $centered-navigation-submenu-padding;
+    }
+
+    > ul > li:first-child a  {
+      padding-top: 1em;
+    }
+
+    a {
+      margin-right: $centered-navigation-submenu-padding;
+    }
+
+    > a {
+      padding-right: 0.6em;
+    }
+
+    > a::after {
+      @include position(absolute, auto -0.4em auto auto);
+      color: $centered-navigation-color;
+      content: "\25BE";
+    }
+  }
+
+  li.more {
+    overflow: visible;
+    padding-right: 0;
+
+    a {
+      padding-right: $centered-navigation-submenu-padding;
+    }
+
+    > a {
+      padding-right: 1.6em;
+      position: relative;
+
+      @include media($large-screen) {
+        margin-right: $centered-navigation-submenu-padding;
+      }
+
+      &::after {
+        content: "›";
+        font-size: 1.2em;
+        position: absolute;
+        right: $centered-navigation-submenu-padding / 2;
+      }
+    }
+
+    &:focus > .submenu,
+    &:hover > .submenu {
+      display: block;
+    }
+
+    @include media($horizontal-bar-mode) {
+      padding-right: $centered-navigation-submenu-padding;
+      position: relative;
+    }
+  }
+
+  ul.submenu {
+    display: none;
+    padding-left: 0;
+
+    @include media($horizontal-bar-mode) {
+      left: -$centered-navigation-submenu-padding;
+      position: absolute;
+      top: 1.5em;
+    }
+
+    .submenu.fly-out-right {
+      @include media($horizontal-bar-mode) {
+        left: $centered-navigation-submenu-width - 0.2em;
+        top: 0;
+      }
+    }
+
+    .submenu.fly-out-left {
+      @include media($horizontal-bar-mode) {
+        left: -$centered-navigation-submenu-width + 0.2em;
+        top: 0;
+      }
+    }
+
+    li {
+      display: block;
+      padding-right: 0;
+
+      @include media($horizontal-bar-mode) {
+        line-height: $centered-navigation-height / 1.3;
+
+        &:first-child > a {
+          border-top-left-radius: $base-border-radius;
+          border-top-right-radius: $base-border-radius;
+        }
+
+        &:last-child > a {
+          border-bottom-left-radius: $base-border-radius;
+          border-bottom-right-radius: $base-border-radius;
+          padding-bottom: 0.7em;
+        }
+      }
+
+      a {
+        background-color: darken($centered-navigation-background, 3%);
+        display: inline-block;
+        text-align: right;
+        text-decoration: none;
+        width: 100%;
+
+        @include media($horizontal-bar-mode) {
+          background-color: $centered-navigation-background;
+          padding-left: $centered-navigation-submenu-padding;
+          text-align: left;
+          width: $centered-navigation-submenu-width;
+        }
+      }
+    }
+  }
+}
diff --git a/src/app/navigation/navigation.component.spec.ts b/src/app/navigation/navigation.component.spec.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/navigation/navigation.component.ts b/src/app/navigation/navigation.component.ts
new file mode 100644
index 00000000..7c006977
--- /dev/null
+++ b/src/app/navigation/navigation.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-navigation',
+    templateUrl: './navigation.component.html',
+    styleUrls: ['./navigation.component.scss']
+})
+export class NavigationComponent {
+}
diff --git a/src/app/parallax/parallax.component.html b/src/app/parallax/parallax.component.html
new file mode 100644
index 00000000..df8472b8
--- /dev/null
+++ b/src/app/parallax/parallax.component.html
@@ -0,0 +1,6 @@
+<div id="js-parallax-window" #parallaxWindow class="parallax-window">
+  <div class="parallax-static-content">
+    <b>Angular2 with Bourbon.io support</b>
+  </div>
+  <div id="js-parallax-background" #parallaxImage class="parallax-background"></div>
+</div>
diff --git a/src/app/parallax/parallax.component.scss b/src/app/parallax/parallax.component.scss
new file mode 100644
index 00000000..34cd5495
--- /dev/null
+++ b/src/app/parallax/parallax.component.scss
@@ -0,0 +1,35 @@
+@import 'http://github.com/bourbon';
+@import 'http://github.com/neat';
+
+$parallax-window-height: 30em;
+$parallax-background-height: $parallax-window-height * 2;
+
+.parallax-window {
+  max-height: $parallax-window-height;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.parallax-static-content {
+  color: black;
+  //color: #9A9A8A;
+  padding: 8em 0;
+  position: relative;
+  z-index: 9;
+}
+
+.parallax-background {
+  background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png") repeat;
+  background-position: top;
+  background-size: cover;
+  background-color: beige;
+  height: $parallax-background-height;
+  left: 0;
+  position: absolute;
+  top: - $parallax-window-height / 3;
+  width: 100%;
+}
+
+// Based on http://codepen.io/skeurentjes/
diff --git a/src/app/parallax/parallax.component.spec.ts b/src/app/parallax/parallax.component.spec.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/parallax/parallax.component.ts b/src/app/parallax/parallax.component.ts
new file mode 100644
index 00000000..9ab61ba7
--- /dev/null
+++ b/src/app/parallax/parallax.component.ts
@@ -0,0 +1,55 @@
+import { Component, AfterViewInit, ViewChild, HostListener, ElementRef, Renderer } from '@angular/core';
+// import { StyledDirective } from './styled.directive';
+
+@Component({
+    selector: 'parralax-hero',
+    templateUrl: './parallax.component.html',
+    styleUrls: ['./parallax.component.scss']
+})
+export class ParallaxComponent implements AfterViewInit {
+    @ViewChild('parallaxImage') pImage: ElementRef;
+    @ViewChild('parallaxWindow') pWindow: ElementRef;
+
+    constructor(private renderer: Renderer) {}
+
+    @HostListener('window:scroll', ['$event'])
+        scroll(event) {
+            // console.log('Call from child');
+            this.parallax();
+        };
+
+    ngAfterViewInit () {
+        console.log('ngAfterViewInit()'); // document ready
+        if ( document.querySelector('#js-parallax-window') ) {
+            this.parallax();
+        }
+    }
+
+    parallax() {
+        if ( this.pWindow.nativeElement ) {
+            console.log('Todo parallax()');
+
+            let wRect = this.pWindow.nativeElement.getBoundingClientRect();
+
+            let plxWindowTopToPageTop = wRect.top + document.body.scrollTop;
+
+            let windowTopToPageTop = window.scrollY;
+
+            let plxWindowTopToWindowTop = plxWindowTopToPageTop - windowTopToPageTop;
+
+            let bRect = this.pImage.nativeElement.getBoundingClientRect();
+
+            let plxBackgroundTopToPageTop = bRect.top;
+
+            let windowInnerHeight = window.innerHeight;
+            let plxBackgroundTopToWindowTop = plxBackgroundTopToPageTop - windowTopToPageTop;
+            // let plxBackgroundTopToWindowBottom = windowInnerHeight - plxBackgroundTopToWindowTop;
+
+            let plxSpeed = 0.15;
+            let top = - (plxWindowTopToWindowTop * plxSpeed) + 'px';
+
+            this.renderer.setElementStyle(this.pImage.nativeElement, 'top', top);
+        }
+    }
+
+}
diff --git a/src/app/parallax/styled.directive.ts b/src/app/parallax/styled.directive.ts
new file mode 100644
index 00000000..7156f9f4
--- /dev/null
+++ b/src/app/parallax/styled.directive.ts
@@ -0,0 +1,45 @@
+import { Directive, ElementRef, Renderer, HostListener } from '@angular/core';
+
+@Directive({
+    selector: '[styled]'
+})
+export class StyledDirective {
+    constructor(public el: ElementRef, public renderer: Renderer, public property: string, public value: string) {
+        renderer.setElementStyle(el.nativeElement, property, value);
+    }
+
+    @HostListener('window:scroll', ['$event'])
+        scroll(event) {
+            console.log('Call from child');
+            this.parallax();
+        };
+
+    parallax() {
+        if( document.querySelector('#js-parallax-window') ) {
+            console.log('Todo parallax()');
+            var plxBackground = document.querySelector('#js-parallax-background');
+            var plxWindow = document.querySelector('#js-parallax-window');
+
+            var plxWindowTopToPageTop = plxWindow.clientTop;
+            var windowTopToPageTop = window.scrollY;
+            var plxWindowTopToWindowTop = plxWindowTopToPageTop - windowTopToPageTop;
+
+            var plxBackgroundTopToPageTop = plxBackground.clientTop;
+            var windowInnerHeight = window.innerHeight;
+            var plxBackgroundTopToWindowTop = plxBackgroundTopToPageTop - windowTopToPageTop;
+            var plxBackgroundTopToWindowBottom = windowInnerHeight - plxBackgroundTopToWindowTop;
+
+            var plxSpeed = 0.35;
+
+            let top = - (plxWindowTopToWindowTop * plxSpeed) + 'px';
+            this.setTop(top);
+
+            // plxBackground.elem
+            // plxBackground.style('top', - (plxWindowTopToWindowTop * plxSpeed) + 'px');
+        }
+    }
+
+    setTop(top: string) {
+        this.renderer.setElementStyle(this.el.nativeElement, 'top', top);
+    }    
+}
\ No newline at end of file
diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html
new file mode 100644
index 00000000..11d05843
--- /dev/null
+++ b/src/app/portfolio/portfolio.component.html
@@ -0,0 +1,32 @@
+<div class="flex-boxes">
+  <a href="/service/javascript:void(0)" class="flex-box flex-box-big">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
+    <h1 class="flex-title">A Wide Flex Box Item</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nostrum, libero! Laborum distinctio necessitatibus voluptates eaque officiis, unde illo, earum voluptatum rerum, reiciendis ipsa ex dolorem a dicta, maxime aliquam.</p>
+  </a>
+  <a href="/service/javascript:void(0)" class="flex-box">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
+    <h1 class="flex-title">Flex Box Item</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum molestiae fugiat tenetur fugit atque dignissimos, fugiat natus vitae.</p>
+  </a>
+  <a href="/service/javascript:void(0)" class="flex-box">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
+    <h1 class="flex-title">A Flex Box Item</h1>
+    <p>Lorem adipisicing elit. Voluptas consectetur tempora quis nam, officia tenetur blanditiis in illo dolor?</p>
+  </a>
+  <a href="/service/javascript:void(0)" class="flex-box flex-box-big">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
+    <h1 class="flex-title">Another Wide Item</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quis ipsum, officia, aperiam tenetur dolor molestiae voluptate perferendis dolorem vel ex, unde fugit blanditiis sapiente.</p>
+  </a>
+  <a href="/service/javascript:void(0)" class="flex-box">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
+    <h1 class="flex-title">Flex Box Item</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo obcaecati in provident illo.</p>
+  </a>
+  <a href="/service/javascript:void(0)" class="flex-box">
+    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="">
+    <h1 class="flex-title">Last Flex Box Item</h1>
+    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
+  </a>
+</div>
diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss
new file mode 100644
index 00000000..93dde506
--- /dev/null
+++ b/src/app/portfolio/portfolio.component.scss
@@ -0,0 +1,80 @@
+@import 'http://github.com/bourbon';
+@import 'http://github.com/neat';
+
+.flex-boxes {
+  $base-border-radius: 3px !default;
+  $base-background-color: white !default;
+  $dark-gray: #333 !default;
+  $light-gray: #DDD !default;
+  $base-font-color: $dark-gray !default;
+  $flex-box-border-color: $light-gray;
+  $flex-box-border: 1px solid $flex-box-border-color;
+  $flex-box-background: lighten($light-gray, 10%);
+  $flex-box-gutter: 0.4em;
+  $flex-box-width: 18em;
+  $flex-box-color: transparentize($base-font-color, 0.3);
+  $flex-box-top-colors:
+    tomato,
+    #72BFBF,
+    #92B1E3,
+    #E3D743,
+    #CCC,
+    #F6C05C;
+
+  @include clearfix;
+  align-items: stretch;
+  clear: both;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  text-align: center;
+  @include outer-container(80%);
+
+  .flex-box {
+    align-self: stretch;
+    background: $flex-box-background;
+    border-radius: $base-border-radius;
+    box-shadow: inset 0 0 1px $flex-box-border-color, 0 2px 4px darken($base-background-color, 10%);
+    display: block;
+    flex: 2 2 15em;
+    margin: $flex-box-gutter;
+    padding: 2em 2em 3em 2em;
+    text-decoration: none;
+    transition: all 0.2s ease-in-out;
+
+    @for $i from 1 to 7 { // assign colors from $flex-box-top-colors list
+      &:nth-child(#{$i}) {
+        $color-from-list: nth($flex-box-top-colors, $i);
+        border-top: 6px solid $color-from-list;
+
+        &:focus,
+        &:hover {
+          background-color: transparentize($color-from-list, 0.9);
+        }
+      }
+    }
+
+    img {
+      display: block;
+      height: 3em;
+      margin: 0 auto 1em;
+      opacity: 0.4;
+    }
+
+    .flex-title {
+      color: $flex-box-color;
+      font-size: 1.2em;
+      margin-bottom: 0.5em;
+    }
+
+    p {
+      color: transparentize($flex-box-color, 0.1);
+      line-height: 1.5em;
+      margin: auto;
+    }
+  }
+
+  .flex-box-big {
+    flex: 1 1 40em;
+  }
+}
diff --git a/src/app/portfolio/portfolio.component.spec.ts b/src/app/portfolio/portfolio.component.spec.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts
new file mode 100644
index 00000000..371443b6
--- /dev/null
+++ b/src/app/portfolio/portfolio.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-portfolio',
+    templateUrl: './portfolio.component.html',
+    styleUrls: ['./portfolio.component.scss']
+})
+export class PortfolioComponent {
+}
diff --git a/src/public/img/footer_lodyas.png b/src/public/img/footer_lodyas.png
new file mode 100644
index 00000000..8b1d3924
Binary files /dev/null and b/src/public/img/footer_lodyas.png differ
diff --git a/src/style/app.scss b/src/style/app.scss
index d73ea23c..d8b8665b 100644
--- a/src/style/app.scss
+++ b/src/style/app.scss
@@ -1,6 +1,6 @@
 // styles in src/style directory are applied to the whole page
 body {
-    background: #0147A7;
+    background: url('http://github.com/img/footer_lodyas.png') #0147A7;
     color: #fff;
 }
 a {
diff --git a/webpack.config.js b/webpack.config.js
index 5327254a..e472f6cf 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -57,7 +57,7 @@ module.exports = function makeWebpackConfig() {
    */
   config.output = isTest ? {} : {
     path: root('dist'),
-    publicPath: isProd ? '/' : 'http://localhost:8080/',
+    publicPath: isProd ? '/' : 'http://localhost:9000/',
     filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
     chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
   };
@@ -189,6 +189,11 @@ module.exports = function makeWebpackConfig() {
          */
         sassLoader: {
           //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
+          includePaths: [
+            require('bourbon').includePaths,
+            require('bourbon-neat').includePaths,
+            path.resolve(__dirname, "node_modules/normalize-scss/sass")
+            ]
         },
         /**
          * PostCSS