Skip to content

Instantly share code, notes, and snippets.

@JacobKnaack JacobKnaack/projects.js Secret
Last active May 15, 2019

Embed
What would you like to do?
Gatsby Agency Portfolio projects display component
import React from "react"
import PropTypes from 'prop-types'
const Projects = ({ projectData }) => {
const styles = {
header: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
},
container: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
},
title: {
paddingRight: '50px',
marginRight: '100px',
borderRight: 'thin solid black'
},
description: {
maxWidth: '400px',
fontSize: '1.25rem',
margin: '0',
},
details: {
height: '400px',
width: '400px',
padding: '30px',
position: 'relative',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start',
overflow: 'auto',
transition: '0.3s ease-in-out'
}
}
return (
<div name="projects" className="section-wrapper">
<div className="section-header" style={styles.header}>
<h2 className="section-title" style={styles.title}>Projects</h2>
<p className="project-description" style={styles.description}>Browse our current Work</p>
</div>
<div className="wrapper-content projects" style={styles.container}>
{projectData.map(project => {
return (
<div key={project.node.title} style={styles.details}>
<div style={styles.header}>
<h5 style={styles.title}>{project.node.title}</h5>
<p style={styles.description}>{project.node.metadata.summary}</p>
</div>
{project.node.metadata.image ? <img src={project.node.metadata.image.url} alt={project.node.title} /> : null}
<p style={styles.description}>{project.node.metadata.description}</p>
</div>
)
})}
</div>
</div>
)
}
Projects.propTypes = {
projectData: PropTypes.array.isRequired,
}
export default Projects
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.