Merge branch 'arup'

src/app/home/portfolio-index.service.js

@@ -3,6 +3,11 @@ class PortfolioIndexService {
     'ngInject';
 
     this.data = [
+      {
+        title : 'Arup',
+      	image : 'assets/images/projects/arup/arup-thumbnail.jpg',
+        state  : 'arup'
+      },
       {
         title : 'Pladis',
       	image : 'assets/images/projects/pladis/pladis-thumbnail.jpg',

src/app/index.route.js

@@ -26,6 +26,14 @@ function routerConfig ($stateProvider, $urlRouterProvider) {
     // *
 
     // Projects
+    .state('arup', {
+      url: '/arup',
+      views: {
+        'content': {
+          templateUrl: 'app/projects/arup/arup.html'
+        }
+      }
+    })
     .state('pladis', {
       url: '/pladis',
       views: {

src/app/projects/arup/arup.html

@@ -0,0 +1,63 @@
+<!-- Opening section -->
+<header class="row project-header arup-header">
+  <div class="small-12 columns height-fix">
+    <div class="project-header-copy">
+      <h1 class="project-title">Arup</h1><br>
+      <div class="client">Client: <a href="http://www.arup.com">Arup</a> | Agency: <a href="http://www.think.eu">TH_NK</a></div>
+      <br>
+      <div class="project-link">
+        <a href="http://arup-prototype-demo.s3-website-us-east-1.amazonaws.com/">Presentation demo</a>
+      </div>
+    </div>
+  </div>
+</header>
+
+<section>
+  <div class="row">
+    <div class="small-12 columns">
+      <div class="project-intro">
+        <h2 class="section-title">The back story</h2>
+        <p>Arup was a pitch prototype for the redesign of <a href="http://www.arup.com">arup.com</a>. Making extensive use subtle animation to set itself apart apart from the competition and combined with an ambitious backend, TH_NK ultimately successfully won the pitch.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section>
+  <div class="row">
+    <ul class="small-block-grid-1  media">
+      <li>
+        <figure style="max-width: 900px; margin: 0 auto;">
+          <img ng-src="assets/images/projects/arup/arup-jumbotron@2x.jpg" />
+          <figcaption></figcaption>
+        </figure>
+      </li>
+    </ul>
+  </div>
+</section>
+
+<section>
+  <div class="row">
+    <div class="small-12 columns">
+      <div class="text-wrap">
+        <h2 class="section-title">Technical details</h2>
+        <ul>
+          <li>
+            Animation scrolling handled by <a href="http://scrollmagic.io/">ScrollMagic.js</a>
+          </li>
+					<li>
+						<a href="http://greensock.com/gsap">Greensock GSAP animations</a>
+					</li>
+					<li>
+						<a href="http://kenwheeler.github.io/slick/">Slick carousel</a>
+					</li>
+          <li>
+            <a href="https://gulpjs.com/">Gulp.js front-end tooling</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+
+<div class="footer-hack"></div>

src/app/projects/arup/arup.scss

@@ -0,0 +1,4 @@
+.arup-header {
+  background-image: url('../assets/images/projects/arup/arup-banner.jpg');
+  background-position: center center;
+}