add responsive styles, missing blog

To fix: script async loading
11 years ago · 515a9791c7
parent 3a6bafa005
commit 515a9791c7
9 changed files with 1267 additions and 23 deletions
--- a/app/coffee/app.coffee
+++ b/app/coffee/app.coffee
@ -1,10 +1,10 @@
 angular
-  .module( 'myApp', ['myApp.filters', 'myApp.services', 'myApp.directives'])
+  .module( 'myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ui', 'ui.directives'])
  .config( ['$routeProvider', ($routeProvider)->

      $routeProvider.when('/', {templateUrl: 'partials/home.html', controller: MyCtrl1})
      $routeProvider.when('/freelance', {templateUrl: 'partials/freelance.html', controller: MyCtrl1})
-      $routeProvider.when('/projects', {templateUrl: 'partials/projects.html', controller: MyCtrl2})
+      $routeProvider.when('/projects', {templateUrl: 'partials/projects.html', controller: projectsCtrl})
      $routeProvider.when('/blog', {templateUrl: 'partials/blog.html', controller: MyCtrl2})
      $routeProvider.when('/contact', {templateUrl: 'partials/contact.html', controller: MyCtrl2})
      $routeProvider.otherwise({redirectTo: '/'})
--- a/app/coffee/controllers.coffee
+++ b/app/coffee/controllers.coffee
@ -1,4 +1,9 @@
 #Controllers
+#
+@projectsCtrl = ($scope)->
+
+
+projectsCtrl.$inject = ['$scope']

@dockCtrl = ($scope, $location)->
    $scope.icons = [
@ -23,6 +28,17 @@
            text: 'Get in touch'
    ]

+    $scope.hovered = false
+
+    $scope.hoverText = ($index)->
+        $scope.hovered = true
+        $scope.hoveredIndex = $index
+        console.log $scope.hovered
+
+    $scope.hoverOut = ()->
+        $scope.hovered = false
+        $scope.hoveredIndex = null
+
    $scope.selected = null

    defaultSelected = ()->
--- a/app/coffee/directives.coffee
+++ b/app/coffee/directives.coffee
@ -7,3 +7,12 @@ angular
    (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()
+          )
+  )
--- a/app/css/bootstrap-responsive.css
+++ b/app/css/bootstrap-responsive.css
--- a/app/index.html
+++ b/app/index.html
@ -3,6 +3,9 @@
 <head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+  <script src="lib/angular/angular.js"></script>
  <script>
    // include angular loader, which allows the files to load in any order
    /*
@ -10,8 +13,8 @@
     (c) 2010-2012 AngularJS http://angularjs.org
     License: MIT
    */
-    'use strict';(function(i){function d(c,a,e){return c[a]||(c[a]=e())}return d(d(i,"angular",Object),"module",function(){var c={};return function(a,e,f){e&&c.hasOwnProperty(a)&&(c[a]=null);return d(c,a,function(){function b(a,b,d){return function(){c[d||"push"]([a,b,arguments]);return g}}if(!e)throw Error("No module: "+a);var c=[],d=[],h=b("$injector","invoke"),g={_invokeQueue:c,_runBlocks:d,requires:e,name:a,provider:b("$provide","provider"),factory:b("$provide","factory"),service:b("$provide","service"),
-    value:b("$provide","value"),constant:b("$provide","constant","unshift"),filter:b("$filterProvider","register"),directive:b("$compileProvider","directive"),config:h,run:function(a){d.push(a);return this}};f&&h(f);return g})}})})(window);
+    //'use strict';(function(i){function d(c,a,e){return c[a]||(c[a]=e())}return d(d(i,"angular",Object),"module",function(){var c={};return function(a,e,f){e&&c.hasOwnProperty(a)&&(c[a]=null);return d(c,a,function(){function b(a,b,d){return function(){c[d||"push"]([a,b,arguments]);return g}}if(!e)throw Error("No module: "+a);var c=[],d=[],h=b("$injector","invoke"),g={_invokeQueue:c,_runBlocks:d,requires:e,name:a,provider:b("$provide","provider"),factory:b("$provide","factory"),service:b("$provide","service"),
+    //value:b("$provide","value"),constant:b("$provide","constant","unshift"),filter:b("$filterProvider","register"),directive:b("$compileProvider","directive"),config:h,run:function(a){d.push(a);return this}};f&&h(f);return g})}})})(window);

    // include a third-party async loader library
    /*!
@ -21,20 +24,20 @@
     * Follow our software http://twitter.com/dedfat
     * License: MIT
     */
+
    !function(a,b,c){function t(a,c){var e=b.createElement("script"),f=j;e.onload=e.onerror=e[o]=function(){e[m]&&!/^c|loade/.test(e[m])||f||(e.onload=e[o]=null,f=1,c())},e.async=1,e.src=a,d.insertBefore(e,d.firstChild)}function q(a,b){p(a,function(a){return!b(a)})}var d=b.getElementsByTagName("head")[0],e={},f={},g={},h={},i="string",j=!1,k="push",l="DOMContentLoaded",m="readyState",n="addEventListener",o="onreadystatechange",p=function(a,b){for(var c=0,d=a.length;c<d;++c)if(!b(a[c]))return j;return 1};!b[m]&&b[n]&&(b[n](l,function r(){b.removeEventListener(l,r,j),b[m]="complete"},j),b[m]="loading");var s=function(a,b,d){function o(){if(!--m){e[l]=1,j&&j();for(var a in g)p(a.split("|"),n)&&!q(g[a],n)&&(g[a]=[])}}function n(a){return a.call?a():e[a]}a=a[k]?a:[a];var i=b&&b.call,j=i?b:d,l=i?a.join(""):b,m=a.length;c(function(){q(a,function(a){h[a]?(l&&(f[l]=1),o()):(h[a]=1,l&&(f[l]=1),t(s.path?s.path+a+".js":a,o))})},0);return s};s.get=t,s.ready=function(a,b,c){a=a[k]?a:[a];var d=[];!q(a,function(a){e[a]||d[k](a)})&&p(a,function(a){return e[a]})?b():!function(a){g[a]=g[a]||[],g[a][k](b),c&&c(d)}(a.join("|"));return s};var u=a.$script;s.noConflict=function(){a.$script=u;return this},typeof module!="undefined"&&module.exports?module.exports=s:a.$script=s}(this,document,setTimeout)

    // load all of the dependencies asynchronously.
    $script([
-      'lib/angular/angular.js',
      'js/app.js',
      'js/services.js',
      'js/controllers.js',
      'js/filters.js',
      'js/directives.js',
-      //'//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js',
-      //'//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js',
      //'lib/jquery/jquery.min.js',
      'lib/less/less.min.js',
+      'lib/angular-ui/common/module.js',
+      'lib/angular-ui/modules/directives/event/event.js'
    ], function() {
      // when all is done, execute bootstrap angular application
      angular.bootstrap(document, ['myApp']);
@ -42,6 +45,7 @@
  </script>
  <link rel="stylesheet" href="css/app.css"/>
  <link rel="stylesheet/less" href="less/compile.less"/>
+  <link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" media="all" />
  <link rel="stylesheet" href="css/animate.min.css" type="text/css" />
  <style>
    [ng\:cloak], [ng-cloak], .ng-cloak {
@ -58,14 +62,13 @@
  <div class="container-fluid main ng-cloak">
      <div ng-view></div>
  </div>
-  <div class="dock animated fadeInUp ng-cloak" ng-controller="dockCtrl">
-      <div class="hoverText">
-          <h3>{{icons[selected].text}}</h3>
+  <div class="container-fluid dock animated fadeInUp ng-cloak" ng-controller="dockCtrl">
+      <div ng-class="hovered && 'hovered'"class="hoverText">
+          <h3>{{icons[hoveredIndex].text}}</h3>
      </div>
-      <a ng-click="switch($index)" ng-class="selected == $index && 'active'" ng-repeat="icon in icons" href="javascript:void(0);"><i ng-class="[icon.class, icon.icon]"></i></a>
+      <a ui-event="{ mouseover: 'hoverText($index)', mouseout: 'hoverOut()' }" ng-click="switch($index)" ng-class="selected == $index && 'active'" ng-repeat="icon in icons" href="javascript:void(0);"><i ng-class="[icon.class, icon.icon]"></i></a>
  </div>

-  <script src="lib/angular/angular.js"></script>

  <!-- Allows for coffeescript compiling on the fly.                                    -->
  <!-- Not recommended for production use. See http://coffeescript.org/#scripts.        -->
--- a/app/less/theme.less
+++ b/app/less/theme.less
@ -7,26 +7,40 @@ body {
    h4,
    h5 {
        font-family: @headingFont;
+        @media (max-width: 767px) { 
+            text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
+        }
    }

    h2 {
        font-size: 40px;
        font-weight: 400;
-        line-height: 25px;
+        line-height: 40px;
    }

 }

 .main {
    height: 70%;
-    width: 100%;
-    position: absolute;
    text-align: center;
    padding-top: 3%;
    padding-left: 0;
    padding-right: 0;

+
    .profil {
+        .qrcode {
+            display: block;
+            position: absolute;
+            left: 65%;
+            top: 30%;
+            opacity: 0;
+            .transition(all 500ms ease);
+        }
+
+        &:hover .qrcode {
+            opacity: 1;
+        }
        padding-top: 8%;

        h2 {
@ -39,16 +53,74 @@ body {
    }

    .freelance {
+
+        @media (max-width: 767px) {
+            padding-bottom: 16%;
+        }
        .row-fluid {
            div {
                padding: 10px;
            }
        }
    }
+
+
+    .contact {
+        padding-top: 10%;
+
+
+        a {
+            text-decoration: none !important;
+            color: @textColor;
+            .transition(all 200ms ease);
+            padding-left: .5em;
+            padding-right: .5em;
+
+            &:hover {
+                color: @contactColor;
+                .transition(all 50ms ease);
+                text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
+
+            }
+        }
+    }
+
+    .projects {
+        margin-top: 5%;
+
+
+        .details {
+            /*position: fixed;*/
+            /*right: 2%;*/
+            /*top: 20%;*/
+            &.github {
+                padding-top: 5%;
+            }
+        }
+
+        a {
+            text-decoration: none !important;
+            color: @textColor;
+
+            &:hover {
+                color: @projectsColor;
+            }
+        }
+        .title {
+            text-align: right;
+            padding-right: 3em;
+            .transition(all 200ms ease-out);
+            border-right: 5px solid @textColor;
+
+            h2 {
+                padding-bottom: .6em;
+            }
+        }
+    }
 }

 .dock {
-    .animation-delay(2s);
+    .animation-delay(1.5s);
    width: 100%;
    position: fixed;
    bottom: 0;
@ -59,6 +131,10 @@ body {
    .hoverText {
        top: -5%;
        display: none;
+
+        &.hovered {
+            display: block;
+        }
    }

    
@ -68,6 +144,7 @@ body {
        padding-left: 1.5em;
        padding-right: 1.5em;
        .transition(all 100ms ease);
+        display: inline-block;

        &:hover, &.active {
            text-decoration: none;
@ -96,7 +173,14 @@ body {

            &.contact {
                font-size: 4.5em;
-                position: absolute;
+            }
+
+            @media (max-width: 767px) {
+                font-size: 2em;
+
+            &.contact {
+                font-size: 1.5em;
+            }
            }
        }
    }
--- a/app/partials/contact.html
+++ b/app/partials/contact.html
@ -0,0 +1,14 @@
+<div class="contact row-fluid animated fadeIn">
+    Send an email to: <b><a href="mailto:chakib.benz@gmail.com">chakib.benz@gmail.com</a></b>
+   <br />
+   <hr />
+   <br />
+   <p>Or find me on :</p>
+   <br />
+   <a target="_blank" href="http://twitter.com/sp4ke"><i class="icon-twitter icon-2x"></i></a>
+   <a target="_blank" href="http://www.linkedin.com/pub/chakib-benziane/1b/728/151"><i class="icon-linkedin icon-2x"></i></a>
+   <a target="_blank" href="http://plus.google.com/101872645526916013771/posts"><i class="icon-google-plus icon-2x"></i></a>
+   <br />
+   <br />
+   <a class="contact-qrcode" href="javascript:void(0);" style="border:0 none;cursor:default;text-decoration:none;"><img src="http://api.qrserver.com/v1/create-qr-code/?data=BEGIN%3AVCARD%0AVERSION%3A2.1%0AFN%3AChakib%20Benziane%0AN%3ABenziane%3BChakib%0ATITLE%3AFreelance%20Developer%0ATEL%3BWORK%3BVOICE%3A(%2B33)%20615485453%0AEMAIL%3BWORK%3BINTERNET%3Achakib.benz%40gmail.com%0AURL%3Ahttp%3A%2F%2Fcbenz.com%0AADR%3A%3B%3B%3BParis%3B%3B%3BFrance%0AEND%3AVCARD%0A&#38;size=100x100&#38;color=a7a7a7&#38;prov=goqrme" alt="QR Code generator" title="" /></a>
+</div>
--- a/app/partials/home.html
+++ b/app/partials/home.html
@ -1,7 +1,8 @@
-<div class="profil animated fadeIn">
+<div class="profil animated fadeIn row-fluid">
    <h2>Chakib Benziane</h2>
    <p>Freelance</p>
    <p>Full Stack Developer</p>
    <p>Web Designer</p>
    <p>CTO & CoFounder of <a href="http://jib.li">Jib.li</a></p>
+<a class="qrcode" href="javascript:void(0);" style="border:0 none;cursor:default;text-decoration:none;"><img src="http://api.qrserver.com/v1/create-qr-code/?data=BEGIN%3AVCARD%0AVERSION%3A2.1%0AFN%3AChakib%20Benziane%0AN%3ABenziane%3BChakib%0ATITLE%3AFreelance%20Developer%0ATEL%3BWORK%3BVOICE%3A(%2B33)%20615485453%0AEMAIL%3BWORK%3BINTERNET%3Achakib.benz%40gmail.com%0AURL%3Ahttp%3A%2F%2Fcbenz.com%0AADR%3A%3B%3B%3BParis%3B%3B%3BFrance%0AEND%3AVCARD%0A&#38;size=155x155&#38;color=a7a7a7&#38;prov=goqrme" alt="QR Code generator" title="" /></a>
 </div>
--- a/app/partials/projects.html
+++ b/app/partials/projects.html
@ -1,5 +1,30 @@
-<p>This is the partial for view 2.</p>
-<p>
-  Showing of 'interpolate' filter:
-  {{ 'Current version is v%VERSION%.' | interpolate }}
-</p>
+<div class="projects row-fluid animated fadeIn ng-cloak">
+    <div class="title offset4 span2 ng-cloak">
+        <h2><a hover-show="jibli" target="_blank" href="http://jib.li">Jib.li</a></h2>
+        <h2><a hover-show="github" href="http://github.com/sp4ke"><i class="icon-github icon-2x"></i></a></h2>
+    </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>
+
+    </div>
+    <div class="details github span5 hide animated fadeIn">
+        My code on github
+    </div>
+</div>