protfolio projects update

css/bootstrap.css

@@ -7534,6 +7534,12 @@ body h2 {
   line-height: 40px;
 }
 
+body img,
+body video {
+  width: 100% !important;
+  height: auto !important;
+}
+
 .btc-address {
   cursor: pointer;
   border-bottom: 1px dashed;
@@ -7632,10 +7638,6 @@ body h2 {
           transition: all 50ms ease;
 }
 
-.main .projects {
-  margin-top: 5%;
-}
-
 .main .projects .left-panel {
   height: 37rem;
   overflow: hidden;
@@ -7654,10 +7656,31 @@ body h2 {
   padding-top: 5%;
 }
 
+.main .projects .details.morrisby .demo {
+  margin-top: 40px;
+}
+
+.main .projects .details.morrisby video {
+  top: 47%;
+  left: 50%;
+  width: 74% !important;
+  -webkit-transform: translate(-50%, -50%);
+     -moz-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
 .main .projects .details img {
   width: 100%;
 }
 
+.main .projects .details .demo {
+  position: relative;
+}
+
+.main .projects .details .demo video {
+  position: absolute;
+}
+
 .main .projects a {
   color: #a7a7a7;
   text-decoration: none;

js/directives.js

@@ -41,9 +41,10 @@
         cIndex = 0;
         img.src = carousel[cIndex];
         return setInterval(function() {
-          $(img).toggleClass('fadeIn fadeOut');
           setTimeout(function() {
-            return $(img).hide();
+            return $(img).css({
+              opacity: 0.1
+            });
           }, 100);
           if (cIndex < carousel.length - 1) {
             cIndex += 1;
@@ -52,8 +53,9 @@
           }
           img.src = carousel[cIndex];
           return setTimeout(function() {
-            $(img).toggleClass('fadeOut fadeIn');
-            return $(img).show();
+            return $(img).css({
+              opacity: 1
+            });
           }, 200);
         }, 4500);
       }

less/theme.less

@@ -18,6 +18,11 @@ body {
         line-height: 40px;
     }
 
+    img, video {
+        width: 100% !important;
+        height: auto !important;
+    }
+
 }
 
 .btc-address {
@@ -114,7 +119,6 @@ body {
     }
 
     .projects {
-        margin-top: 5%;
 
         .left-panel {
             height: 37rem;
@@ -130,9 +134,32 @@ body {
                 padding-top: 5%;
             }
 
+            &.morrisby {
+                .demo {
+                    margin-top: 40px;
+                }
+
+                video {
+                    width: 74% !important;
+                    left: 50%;
+                    -webkit-transform: translate(-50%, -50%);
+                    -moz-transform: translate(-50%, -50%);
+                    transform: translate(-50%, -50%);
+                    top: 47%;
+                }
+            }
+
             img {
                 width: 100%
             }
+
+            .demo {
+                position: relative;
+
+                video {
+                    position: absolute;
+                }
+            }
         }
 
         a {

partials/home.html

@@ -1,8 +1,8 @@
 <div class="profil animated fadeIn row-fluid">
     <h2>Chakib Benziane</h2>
     <p>Frontend Engineer</p>
+    <p>UI/UX Designer</p>
     <p>Full Stack Developer</p>
-    <p>Web Designer</p>
     <br><hr>
     <div class="container bitcoin">
     	<div class="row">

partials/projects.html

@@ -38,7 +38,7 @@
 
              <h5>UX</h5>
              <p>
-                I used sliders on video content for easier user experience on different platforms
+                Optimised the user experience for easy and touch enabled video content scrolling
              </p>
 
              <h5>Technologies</h5>
@@ -65,6 +65,12 @@
             </p>
             <p>Technologies: <em>Angular JS, Bootstrap, Less</em></p>
         </div>
+
+        <hr>    
+        <div class="demo">
+            <img src="/img/ipad-landscape-black.png" alt="">
+            <video preload="" loop="loop" autoplay="" src="//media.sp4ke.com/morrisby.mp4"></video>
+        </div>
         
     </div>