WIP about me

app/img/subtle_grunge/subtle_grunge/readme.txt

@@ -0,0 +1,8 @@
+
+
+========================================================
+ This pattern is downloaded from www.subtlepatterns.com 
+ If you need more, that's where to get'em.
+ ========================================================
+ 
+ 

app/index.html

@@ -31,10 +31,10 @@
       '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',
+      //'//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',
     ], function() {
       // when all is done, execute bootstrap angular application
       angular.bootstrap(document, ['myApp']);
@@ -61,7 +61,7 @@
               <div class="animated fadeInLeft ng-cloak portrait">
                   <img src="img/me_tiny.png" alt="my portrait"/>
                   <p>Chakib Benziane</p>
-                  <p class="baseline">Freelance <span class="select">WebApp</span> Developer</p>
+                  <p class="baseline">Freelance <span class="select">Web</span> & <span class="select">DevOps</span></p>
               </div>
               <div class="animated fadeInUp ng-cloak">
                   <p>Who Am I<p>
@@ -82,7 +82,7 @@
               height: 100px;
               "></div>
       </div>
-      <div class="content" ng-view></div>
+      <div class="content animated fadeInLeft ng-cloak" ng-view></div>
   </div>
 
 

app/less/theme.less

@@ -1,5 +1,7 @@
 body, html {
     height: 100%;
+    background-image: url('/img/subtle_grunge.png');
+    background-color: @white;
 }
 
 .wrapper {
@@ -11,11 +13,10 @@ body, html {
 }
 
 .left-menu{
-    background: @white;
     -webkit-box-flex: 2.2;
     width: 100%;
     border-left: 5px solid @orange;
-    opacity: 0.5;
+    opacity: 0.7;
     .transition(opacity 300ms ease);
 
     &:hover{
@@ -29,7 +30,7 @@ body, html {
     /*background: @darkGrey;*/
     /*background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/stressed_linen.png);*/
     padding: 4.5em;
-    p {
+    p, li {
         font: 300 18px/28px @textFont;
         color: @darkGrey;
     }
@@ -40,9 +41,7 @@ body, html {
     h1 {
         font: 400 40px/40px @titleFont;
     }
-    * {
-        -webkit-animation-delay: 2.3s;
-    }
+    -webkit-animation-delay: 2.3s;
 }
 
 .menu-wrapper {
@@ -52,9 +51,9 @@ body, html {
 }
 
 .menu-wrapper {
-    text-align: center;
 
     div {
+        padding-left: 2em;
         -webkit-box-flex: 1;
         height: 100%;
 
@@ -85,18 +84,16 @@ body, html {
         cursor: pointer;
         .transition(all 300ms ease);
         border-left: 0px solid @orange;
-        opacity: 0.7;
+        color:  lighten(@darkGrey, 10%);
 
         &:first-letter {
-            font-weight: 400;
+            /*font-weight: 400;*/
             color: @orange;
         }
-        &:hover:first-letter {
-            font-weight: 700;
-        }
-
         &:hover {
-            opacity: 1;
+            color: @orange;
+            text-shadow: 0px 1px 1px @white;
+
         }
     }
 
@@ -111,6 +108,8 @@ body, html {
 }
 
 .portrait {
+    padding-left: 0 !important;
+
     img {
         width: 70px;
         height: 70px;
@@ -134,8 +133,7 @@ body, html {
             font-weight: 300;
         }
         .select{
-            text-decoration: underline;
-            cursor: pointer;
+            color: @orange;
         }
     }
 }

app/partials/who_am_i.html

@@ -1,3 +1,35 @@
-<h1 class="animated fadeInLeft ng-cloak">Who Am I</h1>
-<p class="animated fadeInLeft ng-cloak">At this point I can no longer avoid giving a first, provisional statement of my own hypothesis concerning the origin of the “bad conscience”: it may sound rather strange and needs to be pondered, lived with, and slept on for a long time. I regard the bad conscience as the serious illness that man was bound to contract under the stress of the most fundamental change he ever experienced—that change which occurred when he found himself finally enclosed within the walls of society and of peace. The situation that faced sea animals when they were compelled to become land animals or perish was the same as that which faced these semi-animals, well adapted to the wilderness, to war, to prowling, to adventure: suddenly all their instincts were disvalued and “suspended.” From now on they had to walk on their feet and “bear themselves” whereas hitherto they had been borne by the water: a dreadful heaviness lay upon them. They felt unable to cope with the simplest undertakings; in this new world they no longer possessed their former guides, their regulating, unconscious and infallible drives: they were reduced to thinking, inferring, reckoning, coordinating cause and effect, these unfortunate creatures; they were reduced to their “consciousness,” their weakest and most fallible organ! I believe there has never been such a feeling of misery on earth, such a leaden discomfort and at the same time the old instincts had not suddenly ceased to make their usual demands. Only it was hardly or rarely possible to humor them: as a rule they had to seek new and, as it were, subterranean gratifications. 
-This is the partial for view 1.</p>
+<h1>Who Am I</h1>
+<p>
+I am a freelance DevOps, web technologies adorator and entrepreneur
+currently living in Paris.</p>
+
+<p>
+I usually wear many hats and my background experience and skills 
+gave me a web developer and DevOps profile 
+</p>
+
+<p>
+I specialize in web applications development and DevOps in 
+linux/python environments.
+</p>
+
+<h3>I will</h3>
+<ul>
+    <li>Design and build web applications from scratch</li>
+    <li>Help you choose the right technology for the right task</li>
+    <li>Express your idea and prototype it</li>
+    <li>Fix or enhance your development stack</li>
+    <li>Teach you how to use web technologies to achieve your dreams</li>
+</ul>
+
+<h3>I prefer</h3>
+<ul>
+    <li>Working in a linux environment</li>
+    <li>Managing code with git</li>
+    <li>Being part of projects that don't harm people</li>
+</ul>
+
+
+<p>
+I am also CTO and co-founder of <a href="http://jib.li">Jib.li</a>.
+</p>