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,6 +48,25 @@
         color: white;
         font-size: 40px;
       }
+      .row {
+      	margin-bottom: 10px;
+      }
+    }
+  }
+  #twitter-feed {
+    height: 75vh;
+    text-align: center;
+    .twitter-icon {
+      & > div{
+        height: 200px;
+        width: 200px;
+      }
+    }
+  }
+}
+
+/* @group project-images */
+.project-image {
   @media screen and (max-width: @screen-xs-max) {
     .wrapper,
     .wrapper .project {
@@ -70,9 +89,6 @@
       width: 280px;
     }
   }
-      & > div {
-        margin: 10px 0;
-      }
 
   .wrapper {
     color: white;
@@ -102,6 +118,7 @@
       .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;
@@ -111,16 +128,5 @@
       }
     }
   }
-    }
-  }
-  #twitter-feed {
-    height: 75vh;
-    text-align: center;
-    .twitter-icon {
-      & > div{
-        height: 200px;
-        width: 200px;
-      }
-    }
-  }
 }
+/* @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">