1
Fork 0

Added main projects panel

This commit is contained in:
Jake Howard 2015-11-23 18:27:53 +00:00
parent 87886721d4
commit b84a0a2c42
4 changed files with 108 additions and 1 deletions

View file

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

View file

@ -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;

View file

@ -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 */ /* @group project-images */

View file

@ -37,4 +37,6 @@
<script> <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"); !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> </script>
<div class="container-fluid" id="project-images-main"></div>
{% endblock %} {% endblock %}