added info box for projects on click

src/about.jsx

@@ -1,8 +1,10 @@
 var React = require('react');
+var InfoBox = require('./timeline/info');
 
 module.exports = React.createClass({
   render: function() {
     return <div>
+        <h2> About Me: Under Construction </h2>
     </div>
   }
 });

src/timeline/info.jsx

@@ -0,0 +1,32 @@
+var React = require('react');
+var Link = require('react-router').Link
+
+module.exports = React.createClass({
+  renderLink: function() {
+  	if (this.props.link) {
+  		return <Link to={this.props.link}> Click here for more info </Link>
+  	}
+  	else{
+  		return null;
+  	};
+  },
+  render: function() {
+  	divStyle ={
+		width:250,
+		height: 200,
+		borderRadius: 25,
+		padding: 5,
+		backgroundColor: 'black',
+		color: 'white',
+		position: 'absolute',
+		left: this.props.flip?306:-256,
+		visibility: this.props.visible?'visible':'hidden'
+	};
+    return <div style={divStyle}>
+		<h3> {this.props.title} </h3>
+		<hr />
+		<p> {this.props.desc} </p>
+		{this.renderLink()}
+	</div>
+  }
+});

src/timeline/project.jsx

@@ -5,14 +5,17 @@ module.exports = React.createClass({
   getInitialState: function () {
 	return {opaque: false};
   },
-  handleMouseOver: function() {
+  handleMouseEnter: function() {
   	this.setState({opaque: true});
-  	this.props.onMouseOver();
+  	this.props.onMouseEnter();
   },
   handleMouseOut: function() {
   	this.setState({opaque: false});
   	this.props.onMouseOut();
   },
+  handleClick: function() {
+    this.props.onClick();
+  },
   render: function() {
   	var dim = 150;
   	var borderStyle ={
@@ -33,8 +36,23 @@ module.exports = React.createClass({
   		borderRadius: dim/2,
   		opacity: this.state.opaque?1:.7
   	};
+    var flipStyle = {
+      MozTransform: "scaleX(-1)",
+      OTransform: "scaleX(-1)",
+      WebkitTransform: "scaleX(-1)",
+      Transform: "scaleX(-1)",
+      Filter: "FlipH",
+      msFilter: "FlipH"
+    }
+    if (this.props.flip == true) {
+      for (var attrname in flipStyle) { borderStyle[attrname] = flipStyle[attrname]; }
+    };
     return <div style={borderStyle}>
-        <div style={imgStyle} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}></div>
+        <div style={imgStyle} 
+              onMouseEnter={this.handleMouseEnter} 
+              onMouseOut={this.handleMouseOut} 
+              onClick={this.handleClick}>
+        </div>
     </div>
   }
 });

src/timeline/projecttag.jsx

@@ -1,11 +1,16 @@
 var React = require('react');
 var Project = require('./project');
+var Info = require('./info');
 
 module.exports = React.createClass({
   getInitialState: function () {
-	return {shift: false};
+	return {shift: false,
+          infobox: false};
   },
-  handleMouseOver: function() {
+  handleClick: function() {
+    this.setState({infobox: !this.state.infobox});
+  },
+  handleMouseEnter: function() {
   	this.setState({shift: true});
   },
   handleMouseOut: function() {
@@ -17,7 +22,6 @@ module.exports = React.createClass({
   		height: 165,
   		backgroundImage: 'url(img/projecttag.png)',
   		position: 'absolute',
-  		top: this.props.pos + 25 - (165/2),
   		left: this.state.shift?(this.props.flip?5:-5):0
   	}
   	var flipStyle = {
@@ -27,13 +31,20 @@ module.exports = React.createClass({
 	    Transform: "scaleX(-1)",
 	    Filter: "FlipH",
 	    msFilter: "FlipH"
-	}
-	if (this.props.flip == true) {
-		for (var attrname in flipStyle) { majorDiv[attrname] = flipStyle[attrname]; }
-	};
+  	}
+  	if (this.props.flip == true) {
+  		for (var attrname in flipStyle) { majorDiv[attrname] = flipStyle[attrname]; }
+  	};
 
-    return <div style={majorDiv}>
-	      <Project onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} imageUrl={this.props.imageUrl} />
+    return <div style={{position:'absolute', top: this.props.pos + 25 - (165/2), width:300, height:165}}>
+        <Info flip={this.props.flip} title="Project" desc="here is an example description" link='about' visible={this.state.infobox} />
+        <div style={majorDiv}>
+  	      <Project flip={this.props.flip} 
+                  onMouseEnter={this.handleMouseEnter} 
+                  onMouseOut={this.handleMouseOut} 
+                  onClick={this.handleClick} 
+                  imageUrl={this.props.imageUrl} />
+      </div>
     </div>
   }
 });