Skip to content

Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
Gatsby Agency Portfolio about display component
import React from "react"
import PropTypes from "prop-types"
const About = ({ peopleData, pageData }) => {
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',
},
person: {
width: '25%',
padding: '10px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
textDecoration: 'none'
},
personName: {
marginTop: '0',
color: 'black',
fontSize: '1rem'
},
personTitle: {
color: 'grey',
fontSize: '0.8rem',
}
}
return (
<div name="about" className="section-wrapper">
<div style={styles.header}>
<h2 className="section-title" style={styles.title}>Who We Are</h2>
<p style={styles.description}>{pageData.people_description}</p>
</div>
<div className="wrapper-content people" style={styles.container}>
{peopleData.map(person => {
return (
<div key={person.node.title} style={styles.person}>
<div
style={{
background: `url(${person.node.metadata.image.url})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
marginBottom: '14px',
width: '100%',
height: '200px',
}}
/>
<h5 style={styles.personName}>{person.node.title}</h5>
<h6 style={styles.personTitle}>{person.node.metadata.job_title}</h6>
</div>
)
})}
</div>
</div>
)
}
About.propTypes = {
pageData: PropTypes.object.isRequired,
peopleData: PropTypes.array.isRequired,
}
export default About
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.