97 lines
2.2 KiB
JavaScript
97 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import { useStaticQuery, graphql } from 'gatsby';
|
|
import projects from './projects';
|
|
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import { Typography, Container, Grid } from '@material-ui/core';
|
|
import Section, { BG_COLOR } from '@components/Section';
|
|
import Project from './Project';
|
|
|
|
export const SECTION_ID = 'portfolio';
|
|
|
|
function Portfolio() {
|
|
const classes = useStyles();
|
|
const data = useStaticQuery(graphql`
|
|
{
|
|
allCoverImages: allFile(
|
|
filter: {
|
|
absolutePath: { regex: "/projects/" }
|
|
extension: { in: ["png", "jpeg", "jpg"] }
|
|
}
|
|
) {
|
|
edges {
|
|
node {
|
|
relativePath
|
|
childImageSharp {
|
|
id
|
|
fluid(maxWidth: 1280) {
|
|
...GatsbyImageSharpFluid
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`);
|
|
return (
|
|
<Section
|
|
id={SECTION_ID}
|
|
className={classes.section}
|
|
bgColor={BG_COLOR.PRIMARY}
|
|
>
|
|
<Container>
|
|
<Typography variant="h2" align="center" gutterBottom>
|
|
My work
|
|
</Typography>
|
|
<Grid container spacing={3}>
|
|
{projects.map(project => {
|
|
let fluid = undefined;
|
|
if (project.fluid) {
|
|
const edge = data.allCoverImages.edges.find(
|
|
img => img.node.relativePath === project.fluid
|
|
);
|
|
if (edge) {
|
|
fluid = edge.node.childImageSharp.fluid;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Grid
|
|
key={project.title}
|
|
item
|
|
xs={12}
|
|
className={classes.gridItem}
|
|
>
|
|
<Project {...project} fluid={fluid} />
|
|
</Grid>
|
|
);
|
|
})}
|
|
</Grid>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
section: {
|
|
transform: 'skewY(-7deg)',
|
|
padding: '8rem 0',
|
|
margin: '6rem 0',
|
|
'& > *': {
|
|
transform: 'skewY(7deg)',
|
|
},
|
|
[theme.breakpoints.down('sm')]: {
|
|
margin: '3rem 0',
|
|
},
|
|
},
|
|
gridItem: {
|
|
[theme.breakpoints.up(750)]: {
|
|
flexGrow: 0,
|
|
flexBasis: '50%',
|
|
maxWidth: '50%',
|
|
},
|
|
},
|
|
}));
|
|
|
|
export default Portfolio;
|