Added main projects panel
This commit is contained in:
parent
87886721d4
commit
b84a0a2c42
4 changed files with 108 additions and 1 deletions
|
@ -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() {
|
||||
|
@ -21,3 +22,4 @@ $(window).load(function(){
|
|||
});
|
||||
|
||||
React.render(<ProjectImagesTypes />, document.getElementById('project-images-types'));
|
||||
React.render(<ProjectImagesMain />, document.getElementById('project-images-main'));
|
||||
|
|
81
static/src/js/components/project-images-main.js
Normal file
81
static/src/js/components/project-images-main.js
Normal 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;
|
|
@ -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 */
|
||||
|
|
|
@ -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 %}
|
||||
|
|
Reference in a new issue