archive/theorangeone.net-legacy
Archived
1
Fork 0
Code Releases Packages Activity

Added project images

Browse source
This commit is contained in:
Jake Howard 2016-01-16 23:03:05 +00:00
parent 30948f039b
commit 586829398e
3 changed files with 32 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/src/js/components/index/project-image.js
View file

@ -5,7 +5,7 @@ var Col = ReactBootstrap.Col;
export default class ProjectImage extends React.Component {
render() {
var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut';
var classes = this.props.data.title.toLowerCase().replace(' ', '-');
var classes = this.props.data.title.toLowerCase().replace(/ /g, '-');
return (
<Col sm={4} className="project-image">
<div className={'wrapper ' + classes}>

4
static/src/js/components/index/project-images-main.js
View file

@ -20,8 +20,8 @@ const DATA = [
link: '',
},
{
title: 'Django-client-reverse',
text: 'Hardcoding Django API URLs on your client is a thing of the past!',
title: 'Attack on Blocks',
text: 'The closest thing I\'ve done to games development',
link: '',
},
{

33
static/src/less/homepage.less
View file

@ -1,3 +1,4 @@
@blueprint-logo: url(http://ultimatestorytellingblueprint.com/wp-content/uploads/2014/07/Blueprint-Background1.jpg);
.index {
#header {
height: 100vh;
@ -43,7 +44,7 @@
}
#project-images-types {
background: url(http://catesmechanical.com/images/blueprint-background1.jpg);
background: @blueprint-logo;
background-size: cover;
background-attachment: fixed;
@media screen and (max-width: @screen-xs-max) {
@ -69,7 +70,7 @@
background-image: url(../img/projects/kermit-typing.gif);
}
.work {
background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg);
background-image: url(http://www.recommendedagencies.com/pub/logos/dabapps-logo-1432733278.jpg);
}
}
}
@ -104,7 +105,7 @@
}
}
#project-images-main {
background: url(http://catesmechanical.com/images/blueprint-background1.jpg);
background: @blueprint-logo;
background-size: cover;
background-attachment: fixed;
@media screen and (max-width: @screen-xs-max) {
@ -122,6 +123,30 @@
}
.row {
margin-bottom: 20px;
& > div {
background-size: cover;
background-position: center;
}
.custom-pc {
background-image: url(https://c1.staticflickr.com/1/557/18747807580_d01e8e877a_c.jpg);
}
.bsod-enabler {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a8/Windows_XP_BSOD.png);
}
.yoga-pal {
background-image: url(http://www.lenovo.com/images/gallery/1060x596/lenovo-laptop-convertible-yoga-2-pro-orange-front-1.jpg);
}
.attack-on-blocks {
background-image: url(https://c1.staticflickr.com/1/33/49012397_1fbe7855e3_b.jpg);
}
.dotfile-automator {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/49/Dell_Inspiron_One_23_Touch_AIO_Desktop_PC.png);
}
}
}
}
@ -165,7 +190,7 @@
padding: 8%;
.flexbox();
align-items: center;
justify-content: center;
justify-content: center;
.transition(~"opacity 0.5s ease-in");
opacity: 0;
background-color: rgba(0,0,0,0.7);