Made project image component more generic

static/src/js/app.js

@@ -1,5 +1,5 @@
 var React = require('react');
-var ProjectImages = require('./components/project-images');
+var ProjectImagesTypes = require('./components/project-images-types');
 
 $(function() { // https://css-tricks.com/snippets/jquery/smooth-scrolling/
   $('a[href*=#]:not([href=#])').click(function() {
@@ -20,4 +20,4 @@ $(window).load(function(){
     $(window).trigger('scroll').trigger('resize');
 });
 
-React.render(<ProjectImages />, document.getElementById('project-images'));
+React.render(<ProjectImagesTypes />, document.getElementById('project-images-types'));

static/src/js/components/project-image.js

@@ -7,7 +7,7 @@ var projectImage = React.createClass({
   render: function () {
     var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut';
     return (
-      <Col sm={4}>
+      <Col sm={4} className="project-image">
         <div className={"wrapper " + this.props.data.className}>
           <div className="project" 
             onMouseOver={this.props.onHover}

static/src/js/components/project-images-types.js

@@ -25,7 +25,7 @@ const DATA = [
 ];
 
 
-var projectImages = React.createClass({
+var projectImagesTypes = React.createClass({
   keys: [1,2,3],
   getInitialState: function () {
     return {
@@ -56,4 +56,4 @@ var projectImages = React.createClass({
   }
 });
 
-module.exports = projectImages;
+module.exports = projectImagesTypes;

static/src/less/homepage.less

@@ -48,68 +48,8 @@
         color: white;
         font-size: 40px;
       }
-      @media screen and (max-width: @screen-xs-max) {
+      .row {
-        .wrapper,
+      	margin-bottom: 10px;
-        .wrapper .project {
-          height: 275px;
-          width: 275px;
-        }          
-      }
-
-      @media screen and (min-width: @screen-sm-min) {
-        .wrapper,
-        .wrapper .project {
-          height: 200px;
-          width: 200px;
-        }
-      }
-      @media screen and (min-width: @screen-md-min) {
-        .wrapper,
-        .wrapper .project {
-          height: 280px;
-          width: 280px;
-        }
-      }
-      & > div {
-        margin: 10px 0;
-      }
-
-      .wrapper {
-        color: white;
-        margin: 0 auto;
-        cursor: pointer;
-        background-size: cover;
-        background-position: center;
-        .box-shadow(0px 4px 5px 2px rgba(0,0,0,0.7));
-
-        &:hover .project {
-          opacity: 1;
-        } 
-
-        &.college {
-          background-image: url(http://cdn.ttgtmedia.com/rms/computerweekly/39826_college-of-richard-collyer.gif);
-        }
-        &.personal {
-          background-image: url(http://www.inzeed.com/kaleidoscope/wp-content/uploads/2014/11/stock-footage-computer-code-background1.jpg);
-        }
-        &.work {
-          background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg);
-        }
-
-        & .project {
-          padding: 15px;
-          padding-top: 20%;
-          .transition(~"opacity 0.5s ease-in");
-          opacity: 0;
-          background-color: rgba(0,0,0,0.6);
-
-          p, a.btn {
-            font-size: 12px;
-          }
-          h4 {
-            font-size: 23px;
-          }
-        }
       }
     }
   }
@@ -124,3 +64,69 @@
     }
   }
 }
+
+/* @group project-images */
+.project-image {
+  @media screen and (max-width: @screen-xs-max) {
+    .wrapper,
+    .wrapper .project {
+      height: 275px;
+      width: 275px;
+    }          
+  }
+
+  @media screen and (min-width: @screen-sm-min) {
+    .wrapper,
+    .wrapper .project {
+      height: 200px;
+      width: 200px;
+    }
+  }
+  @media screen and (min-width: @screen-md-min) {
+    .wrapper,
+    .wrapper .project {
+      height: 280px;
+      width: 280px;
+    }
+  }
+
+  .wrapper {
+    color: white;
+    margin: 0 auto;
+    cursor: pointer;
+    background-size: cover;
+    background-position: center;
+    .box-shadow(0px 4px 5px 2px rgba(0,0,0,0.7));
+
+    &:hover .project {
+      opacity: 1;
+    } 
+
+    &.college {
+      background-image: url(http://cdn.ttgtmedia.com/rms/computerweekly/39826_college-of-richard-collyer.gif);
+    }
+    &.personal {
+      background-image: url(http://www.inzeed.com/kaleidoscope/wp-content/uploads/2014/11/stock-footage-computer-code-background1.jpg);
+    }
+    &.work {
+      background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg);
+    }
+
+    & .project {
+      padding: 15px;
+      padding-top: 20%;
+      .transition(~"opacity 0.5s ease-in");
+      opacity: 0;
+      background-color: rgba(0,0,0,0.6);
+      text-align: center;
+
+      p, a.btn {
+        font-size: 12px;
+      }
+      h4 {
+        font-size: 23px;
+      }
+    }
+  }
+}
+/* @end project-images */

templates/index.html

@@ -18,7 +18,7 @@
       </div>
     </div>
 
-    <div class="container-fluid" id="project-images"></div>
+    <div class="container-fluid" id="project-images-types"></div>
 
     <div class="container-fluid" id="twitter-feed">
       <div class="container">