Remove project item components
This commit is contained in:
parent
97601a7b53
commit
38f4c7a041
2 changed files with 0 additions and 107 deletions
|
@ -1,51 +0,0 @@
|
|||
import React from 'react';
|
||||
import Reverser from '../../helpers/reverser';
|
||||
var ReactBootstrap = require('react-bootstrap');
|
||||
var Col = ReactBootstrap.Col;
|
||||
|
||||
export default class ProjectImage extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
url: ''
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
if (!this.props.data.link || this.props.data.link === '') {
|
||||
return;
|
||||
}
|
||||
if (this.props.data.link.startsWith('#')) {
|
||||
this.setState({url: this.props.data.link});
|
||||
} else {
|
||||
let args;
|
||||
if (this.props.data.args) {
|
||||
args = [this.props.data.args];
|
||||
}
|
||||
Reverser(this.props.data.link, args, function (url) {
|
||||
this.setState({ url });
|
||||
}.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut';
|
||||
var classes = this.props.data.title.toLowerCase().replace(/ /g, '-');
|
||||
return (
|
||||
<Col sm={4} className="project-image">
|
||||
<div className={'wrapper ' + classes}>
|
||||
<div className="project"
|
||||
onMouseOver={this.props.onHover}
|
||||
onMouseLeave={this.props.onLeave} >
|
||||
<div className={'animated ' + animationClass}>
|
||||
<h4>{this.props.data.title}</h4>
|
||||
<p>{this.props.data.text}</p>
|
||||
<a href={this.state.url} className="btn btn-default btn-small">
|
||||
Find out more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,56 +0,0 @@
|
|||
import React from 'react';
|
||||
var ReactBootstrap = require('react-bootstrap');
|
||||
import ProjectImage from './project-image';
|
||||
var Row = ReactBootstrap.Row;
|
||||
|
||||
const DATA = [
|
||||
{
|
||||
title: 'College',
|
||||
text: 'My time at college was where I learnt most about programming, and discovered my skill and passion for it.',
|
||||
link: '',
|
||||
},
|
||||
{
|
||||
title: 'Personal',
|
||||
text: 'I write code just to write code, but sometimes it serves a purpose.',
|
||||
link: '#project-thumbnails',
|
||||
},
|
||||
{
|
||||
title: 'Work',
|
||||
text: 'I\'m an apprentice software developer at Dabapps, and this is what I\'ve done.',
|
||||
link: '',
|
||||
}
|
||||
];
|
||||
|
||||
export default class ProjectImagesTypes extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.keys = [1, 2, 3];
|
||||
this.state = {
|
||||
hover: 0
|
||||
};
|
||||
this.setHovering = this.setHovering.bind(this);
|
||||
}
|
||||
|
||||
setHovering(key) {
|
||||
this.setState({hover: key});
|
||||
}
|
||||
|
||||
render() {
|
||||
var images = this.keys.map(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));
|
||||
return (
|
||||
<div className="container">
|
||||
<h1>Projects</h1>
|
||||
<Row>
|
||||
{ images }
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
Reference in a new issue