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 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'));
|
||||||
|
|
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 */
|
/* @group project-images */
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
Reference in a new issue