update projects

cof/controllers.coffee

@@ -1,6 +1,11 @@
 #Controllers
 #
 @projectsCtrl = ($scope)->
+    $scope.carousels = 
+        uman: [
+            '/img/uman1.png',
+            '/img/uman2.png'
+        ]
 
 
 projectsCtrl.$inject = ['$scope']

cof/directives.coffee

@@ -0,0 +1,59 @@
+# Directives 
+
+
+angular
+  .module('myApp.directives', [])
+  .directive('appVersion', ['version', (version)->
+    (scope, elm, attrs)->
+      elm.text(version)
+  ])
+  .directive('hoverShow', ()->
+      link: (scope, elm, attrs)->
+          elm.bind('mouseover', {attrs: attrs}, (ev)->
+              elm.closest('.projects').find('.' + ev.data.attrs.hoverShow).show()
+          )
+          elm.bind('mouseout', {attrs: attrs}, (ev)->
+              elm.closest('.projects').find('.' + ev.data.attrs.hoverShow).hide()
+          )
+  )
+
+  .directive('customScroll', ()->
+    link: (scope, elm, attrs)->
+      $(elm).mCustomScrollbar 
+        theme: 'dark-2'
+  )
+
+  .directive('carousel', ()->
+    scope: 
+      carousel: '='
+    link: (scope, elm, attrs)->
+      carousel = scope.carousel
+      img = elm.find('img')[0]
+      cIndex = 0
+      img.src = carousel[cIndex]
+
+      setInterval(->
+          $(img).toggleClass('fadeIn fadeOut')
+
+          setTimeout(->
+              $(img).hide()
+            ,
+              100
+          )
+
+          if cIndex < carousel.length - 1
+            cIndex += 1
+          else
+            cIndex = 0
+
+          img.src = carousel[cIndex]
+          setTimeout(->
+              $(img).toggleClass('fadeOut fadeIn')
+              $(img).show()
+            ,
+              200
+            )
+        ,
+          4500
+        )
+  )

coffee/directives.coffee

@@ -1,18 +0,0 @@
-# Directives 
-
-
-angular
-  .module('myApp.directives', [])
-  .directive('appVersion', ['version', (version)->
-    (scope, elm, attrs)->
-      elm.text(version)
-  ])
-  .directive('hoverShow', ()->
-      link: (scope, elm, attrs)->
-          elm.bind('mouseover', {attrs: attrs}, (ev)->
-              elm.closest('.projects').find('.' + ev.data.attrs.hoverShow).show()
-          )
-          elm.bind('mouseout', {attrs: attrs}, (ev)->
-              elm.closest('.projects').find('.' + ev.data.attrs.hoverShow).hide()
-          )
-  )

css/bootstrap.css

@@ -7534,6 +7534,34 @@ body h2 {
   line-height: 40px;
 }
 
+.btc-address {
+  cursor: pointer;
+  border-bottom: 1px dashed;
+}
+
+.container.bitcoin {
+  margin-top: 5rem;
+}
+
+.container.bitcoin .row > div img {
+  width: 40px;
+  padding-right: 30px;
+  opacity: .7;
+  -webkit-filter: grayscale(100%);
+     -moz-filter: grayscale(100%);
+          filter: grayscale(100%);
+  -webkit-transition: all 500ms ease-in-out;
+     -moz-transition: all 500ms ease-in-out;
+       -o-transition: all 500ms ease-in-out;
+          transition: all 500ms ease-in-out;
+}
+
+.container.bitcoin .row > div img:hover {
+  -webkit-filter: grayscale(0);
+     -moz-filter: grayscale(0);
+          filter: grayscale(0);
+}
+
 .main {
   height: 70%;
   padding-top: 3%;
@@ -7608,6 +7636,11 @@ body h2 {
   margin-top: 5%;
 }
 
+.main .projects .left-panel {
+  height: 37rem;
+  overflow: hidden;
+}
+
 .main .projects .details {
   /*position: fixed;*/
 
@@ -7621,19 +7654,29 @@ body h2 {
   padding-top: 5%;
 }
 
+.main .projects .details img {
+  width: 100%;
+}
+
 .main .projects a {
   color: #a7a7a7;
-  text-decoration: none !important;
+  text-decoration: none;
+}
+
+.main .projects a.nolink {
+  cursor: default;
 }
 
 .main .projects a:hover {
   color: #57ddf7;
 }
 
+.main .projects a:hover:not(.nolink) {
+  text-decoration: underline !important;
+}
+
 .main .projects .title {
-  padding-right: 3em;
   text-align: right;
-  border-right: 5px solid #a7a7a7;
   -webkit-transition: all 200ms ease-out;
      -moz-transition: all 200ms ease-out;
        -o-transition: all 200ms ease-out;

js/app.js

@@ -1,6 +1,5 @@
-// Generated by CoffeeScript 1.4.0
+// Generated by CoffeeScript 1.7.1
 (function() {
-
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ui', 'ui.directives']).config([
     '$routeProvider', function($routeProvider) {
       $routeProvider.when('/', {

js/controllers.js

@@ -1,7 +1,10 @@
-// Generated by CoffeeScript 1.4.0
+// Generated by CoffeeScript 1.7.1
 (function() {
-
-  this.projectsCtrl = function($scope) {};
+  this.projectsCtrl = function($scope) {
+    return $scope.carousels = {
+      uman: ['/img/uman1.png', '/img/uman2.png']
+    };
+  };
 
   projectsCtrl.$inject = ['$scope'];
 

js/directives.js

@@ -1,6 +1,5 @@
-// Generated by CoffeeScript 1.4.0
+// Generated by CoffeeScript 1.7.1
 (function() {
-
   angular.module('myApp.directives', []).directive('appVersion', [
     'version', function(version) {
       return function(scope, elm, attrs) {
@@ -22,23 +21,43 @@
         });
       }
     };
-  }).directive('customScroll', function(){
+  }).directive('customScroll', function() {
     return {
       link: function(scope, elm, attrs) {
-        $(elm).mCustomScrollbar({
+        return $(elm).mCustomScrollbar({
           theme: 'dark-2'
         });
       }
-    }
-  }).directive('copyToClipboard', [function () {
+    };
+  }).directive('carousel', function() {
     return {
-      restrict: 'A',
-      link: function (scope, iElement, iAttrs) {
-        iElement.on('click', function(){
-        window.prompt("Copy to clipboard: Ctrl+C, Enter", iElement[0].innerText);
-        })
+      scope: {
+        carousel: '='
+      },
+      link: function(scope, elm, attrs) {
+        var cIndex, carousel, img;
+        carousel = scope.carousel;
+        img = elm.find('img')[0];
+        cIndex = 0;
+        img.src = carousel[cIndex];
+        return setInterval(function() {
+          $(img).toggleClass('fadeIn fadeOut');
+          setTimeout(function() {
+            return $(img).hide();
+          }, 100);
+          if (cIndex < carousel.length - 1) {
+            cIndex += 1;
+          } else {
+            cIndex = 0;
+          }
+          img.src = carousel[cIndex];
+          return setTimeout(function() {
+            $(img).toggleClass('fadeOut fadeIn');
+            return $(img).show();
+          }, 200);
+        }, 4500);
       }
     };
-  }]);
+  });
 
 }).call(this);

js/filters.js

@@ -1,6 +1,5 @@
-// Generated by CoffeeScript 1.4.0
+// Generated by CoffeeScript 1.7.1
 (function() {
-
   angular.module('myApp.filters', []).filter('interpolate', [
     'version', function(version) {
       return function(text) {

js/services.js

@@ -1,6 +1,5 @@
-// Generated by CoffeeScript 1.4.0
+// Generated by CoffeeScript 1.7.1
 (function() {
-
   angular.module('myApp.services', []).value('version', '0.1');
 
 }).call(this);

less/theme.less

@@ -129,15 +129,28 @@ body {
             &.github {
                 padding-top: 5%;
             }
+
+            img {
+                width: 100%
+            }
         }
 
         a {
-            text-decoration: none !important;
+            
+            &.nolink {
+                cursor: default
+            }
+
+            text-decoration: none;
             color: @textColor;
 
             &:hover {
                 color: @projectsColor;
             }
+
+            &:hover:not(.nolink) {
+                text-decoration: underline !important
+            }
         }
         .title {
             text-align: right;

partials/projects.html

@@ -2,6 +2,9 @@
     <div custom-scroll class="title offset1 span5 ng-cloak left-panel">
         <h4>projects</h4>
         <hr>
+        <h2><a hover-show="uman" href="http://u-manfilms.tv/">Uman films </a><small>(fr)</small></h2>
+        <h2><a class="nolink" hover-show="morrisby" href="">Morrisby <small>(uk)</small></a></h2>
+        <h2><a class="nolink" hover-show="zapawa" href="">Zapawa <small>(uk)</small></a></h2>
         <h2><a hover-show="jibli" target="_blank" href="http://jib.li">Jib.li</a></h2>
         <h2><a hover-show="github" target="_blank" href="http://github.com/sp4ke"><i class="icon-github icon-2x"></i></a></h2>
         <h4>talks</h4>
@@ -9,6 +12,7 @@
         <h2><a hover-show="devops" target="_blank" href="http://www.slideshare.net/spykspyel/python-dev-ops">Python & DevOps</a></h2>
         <h2><a hover-show="promises" target="_blank" href="http://sp4ke.com/angular-promises/slides/template.html">Angular then Promises</a></h2>
         <h4>hacks</h4>
+        <hr>
         <h3><a hover-show="tmp-browse" target="_blank" href="https://github.com/sp4ke/tmpbrowse">tmpbrowse</a></h4>
         <h3><a hover-show="howto" target="_blank" href="https://github.com/sp4ke/howto">howto</a></h4>
         <h3><a hover-show="catdog-hunter" target="_blank" href="https://chrome.google.com/webstore/detail/catdog-hunter/cffhajgcjcbifcefedhkeekflnjpmdlh">CatDog Hunter</a></h4>
@@ -17,26 +21,96 @@
         <br>
         <br>
     </div>
+
+
+
+
+    <!-- Project Details  -->
+
+    <div class="details uman span5 hide animated fadeIn">
+        <h4>Design - Development</h4>
+        <hr>
+        <div class="text-left">
+            <h5>Design</h5>
+            <p>The client works in the video making industry. I made a minimalistic and 
+            pure design to make the video content stands out.
+             </p>
+
+             <h5>UX</h5>
+             <p>
+                I used sliders on video content for easier user experience on different platforms
+             </p>
+
+             <h5>Technologies</h5>
+             <small>Bootstrap, Angular, Less</small>
+             <hr>
+             <div class="span10 text-center" carousel="carousels.uman">
+                <img class="animated fadeIn" alt="">
+             </div>
+        </div>
+    </div>
+
+    <div class="details morrisby span5 hide animated fadeIn">
+        <h4>Frontend App Development - Assessment/Questionnaire</h4>
+        <hr>
+        <div class="text-left">
+            <p>
+                Developped the frontend side of a questionnaire and an assessment application. 
+            </p>
+            <p>
+                The apps were designed for browsers and tablets.
+            </p>
+            <p>
+                The apps were targeted to school environments. Developped an offline and cache aggressive algorithms to make the assessment user experience smooth even in bad connectivity situations. 
+            </p>
+            <p>Technologies: <em>Angular JS, Bootstrap, Less</em></p>
+        </div>
+        
+    </div>
+
+    <div class="details zapawa span5 hide animated fadeIn">
+        <h4>Frontend UI/UX - Prototyping</h4>
+        <hr>
+        <div class="text-left">
+            <p>My role was to prototype an online food delivery service on the frontend side.</p>
+
+            <p>I worked on UX/UI to get the best food order user experience.</p> 
+            <p>A backoffice for restaurants was also prototyped for tablets. </p>
+
+            <br>
+            <p>Technologies: <em>Bootstrap, Angular JS, Less</em></p>
+            <hr>
+            <div class="images">
+                <img src="/img/zapawa.png" alt="">
+            </div>
+
+        </div>
+    </div>
+
+
     <div class="details jibli span5 hide animated fadeIn">
-        <p>
-        As a CTO and CoFounder on the project, 
-        I designed this service all the way up from 
-        backend to frontend. 
-
-        I managed a team of developers to prototype and
-        build the web service using Agile Development methods.
-        </p>
-        <p>
-        I also designed the UI using HTML5 and Less
-        </p>
-
-        <p>
-        Some of the technologies used on this project:
-        </p>
-        <em>Django, AngularJS, MongoDB, django tastypie, uwsgi,
-            ZeroMQ, Celery
-        </em>
+        <h4>Fullstack development</h4>
+        <hr>
+        <div class="text-left">
+            <p>
+                As a CTO and CoFounder on the project, 
+                I designed this service all the way up from 
+                backend to frontend. 
+
+                I managed a team of developers to prototype and
+                build the web service using Agile Development methods.
+            </p>
+            <p>
+                I also designed the UI using HTML5 and Less
+            </p>
 
+            <p>
+                Some of the technologies used on this project:
+            </p>
+            <em>Django, AngularJS, MongoDB, django tastypie, uwsgi,
+                ZeroMQ, Celery
+            </em>
+        </div>
     </div>
     <div class="details github span5 hide animated fadeIn">
         My code on github