Added react component for projects

static/src/js/app.js

@@ -1,7 +1,6 @@
 var React = require('react');
 var ProjectImages = require('./components/project-images');
 
-
 $(window).load(function(){
     $(window).trigger('scroll').trigger('resize');
     var s = skrollr.init();

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

@@ -0,0 +1,32 @@
+var React = require('react');
+var ReactBootstrap = require('react-bootstrap');
+var Row = ReactBootstrap.Row;
+var Col = ReactBootstrap.Col;
+
+var projectImage = React.createClass({
+  render: function () {
+    var contents = this.props.isHovered ? 
+    (
+      <span>
+        <h4>{this.props.data.title}</h4>
+        <p>{this.props.data.text}</p>
+        <a href={this.props.data.link} className="btn btn-default">
+          Find out more
+        </a> 
+      </span>    
+    ) : null;
+    return (
+      <Col sm={4}>
+        <div className="wrapper" >
+          <div className={"project " + this.props.data.className} 
+            onMouseOver={this.props.onHover}
+            onMouseLeave={this.props.onLeave} >
+            { contents }            
+          </div>
+        </div>
+      </Col>
+    );
+  }
+});
+
+module.exports = projectImage;

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

@@ -1,13 +1,32 @@
 var React = require('react');
+var ReactBootstrap = require('react-bootstrap');
+var Row = ReactBootstrap.Row;
+var ProjectImage = require('./project-image');
 
-const projectData = [
+const DATA = [
-  {key: 1, title: "College", info: "", link: ""},
+  {
-  {key: 2, title: "Personal", info: "", link: ""},
+    className: "",
-  {key: 3, title: "Work", info: "", link: ""}
+    title: "College",
+    text: "",
+    link: "",
+  },
+  {
+    className: "",
+    title: "Personal",
+    text: "",
+    link: "",
+  },
+  {
+    className: "",
+    title: "Work",
+    text: "",
+    link: "",
+  }
 ];
 
 
 var projectImages = React.createClass({
+  keys: [1,2,3],
   getInitialState: function () {
     return {
       hover: 0,
@@ -18,21 +37,20 @@ var projectImages = React.createClass({
     this.setState({hover: key});
   },
   render: function () {
-    var isHovered;
+    var images = this.keys.map(function (key) {
-    var projectTiles = projectData.map(function (project) {
-      isHovered = (project.key == this.state.hover);
       return (
-        <div className="col-sm-4">
+        <ProjectImage isHovered={this.state.hover == key} 
-
+          data={DATA[key - 1]} 
-        </div>
+          onHover={this.setHovering.bind(this, key)} 
-      );
+          onLeave={this.setHovering.bind(this, 0)} />
-    });
+        );
+    }.bind(this));
     return (
       <div className="container">
         <div className="panel panel-default">
-          <div className="panel-body row">
+          <Row className="panel-body">
-            { projectTiles }
+            { images }
-          </div>
+          </Row>
         </div>
       </div>
     );

static/src/less/style.less

@@ -73,15 +73,56 @@ ol , ul{
       font-size: 17px;
     }
   }
+
+
   #project-images {
     background: url(http://catesmechanical.com/images/blueprint-background1.jpg);
-    background-position: fixed;
+    background-size: cover;
     .container {
       text-align: center; 
       margin-top: 35px; 
       margin-bottom: 35px;
       .panel-body {
         font-size: 16px;
+        @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;
+          }
+        }
+        & > div {
+          margin: 10px 0;
+        }
+
+        .wrapper {
+          background-color: black;
+          color: white;
+          margin: 0 auto;
+
+          &:hover .project {
+            opacity: 0.6;
+          }
+
+          & .project {
+            opacity: 1;
+          }
+        }
       }
     }
   }