Added main projects panel

static/src/js/app.js

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

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

@@ -0,0 +1,81 @@
+var React = require('react');
+var ReactBootstrap = require('react-bootstrap');
+var Row = ReactBootstrap.Row;
+var ProjectImage = require('./project-image');
+
+const DATA = [
+  {
+    className: "college",
+    title: "College",
+    text: "My time at college was where I learnt most about programming, and discovered my skill and passion for it.",
+    link: "",
+  },
+  {
+    className: "personal",
+    title: "Personal",
+    text: "I write code just to write code, but sometimes it serves a purpose.",
+    link: "",
+  },
+  {
+    className: "work",
+    title: "Work",
+    text: "I'm an apprentice software developer at Dabapps, and this is what I've done.",
+    link: "",
+  },
+  {
+    className: "college",
+    title: "College",
+    text: "My time at college was where I learnt most about programming, and discovered my skill and passion for it.",
+    link: "",
+  },
+  {
+    className: "personal",
+    title: "Personal",
+    text: "I write code just to write code, but sometimes it serves a purpose.",
+    link: "",
+  },
+  {
+    className: "work",
+    title: "Work",
+    text: "I'm an apprentice software developer at Dabapps, and this is what I've done.",
+    link: "",
+  }
+];
+
+
+var projectImagesMain = React.createClass({
+  keys: [[1,2,3],[4,5,6]],
+  getInitialState: function () {
+    return {
+      hover: 0,
+    };
+  },
+
+  setHovering: function (key, evt) {
+    this.setState({hover: key});
+  },
+  render: function () {
+    var generate_image = function (key) {
+      return (
+        <ProjectImage isHovered={this.state.hover == key} 
+          data={DATA[key - 1]} 
+          onHover={this.setHovering.bind(this, key)} 
+          onLeave={this.setHovering.bind(this, 0)} />
+        );
+    }.bind(this);
+    var images = this.keys.map( function (keyColumns) {
+      var col = keyColumns.map(function (key) {
+        return generate_image(key);
+      });
+      return (<Row>{col}</Row>);
+    });
+    return (
+      <div className="container">
+        <h1>Projects</h1>
+        { images }
+      </div>
+    );
+  }
+});
+
+module.exports = projectImagesMain;

static/src/less/homepage.less

@@ -85,6 +85,28 @@
       }
     }
   }
+  #project-images-main {
+    background: url(http://catesmechanical.com/images/blueprint-background1.jpg);
+    background-size: cover;
+    background-attachment: fixed;
+    @media screen and (max-width: @screen-xs-max) {
+      background-attachment: initial;
+    }
+    .container {
+      text-align: center; 
+      margin-top: 27px; 
+      margin-bottom: 35px;
+      h1 {
+        margin-top: 0;
+        margin-bottom: 30px;
+        color: white;
+        font-size: 40px;
+      }
+      .row {
+        margin-bottom: 20px;
+      }
+    }
+  }
 }
 
 /* @group project-images */

templates/index.html

@@ -37,4 +37,6 @@
     <script>
       !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
     </script>
+
+    <div class="container-fluid" id="project-images-main"></div>
 {% endblock %}