2021-01-17 08:31:50 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { useStaticQuery, graphql } from 'gatsby';
|
2021-06-23 07:57:47 +00:00
|
|
|
import projects from './projects';
|
2020-07-13 17:04:46 +00:00
|
|
|
|
2021-01-17 08:31:50 +00:00
|
|
|
import { makeStyles } from '@material-ui/core/styles';
|
2021-04-20 19:33:43 +00:00
|
|
|
import { Typography, Container, Grid } from '@material-ui/core';
|
2021-01-17 08:31:50 +00:00
|
|
|
import Section, { BG_COLOR } from '@components/Section';
|
|
|
|
import Project from './Project';
|
2020-07-13 17:04:46 +00:00
|
|
|
|
2021-01-17 08:31:50 +00:00
|
|
|
export const SECTION_ID = 'portfolio';
|
2020-07-14 12:38:07 +00:00
|
|
|
|
2021-01-16 20:58:43 +00:00
|
|
|
function Portfolio() {
|
2021-01-17 08:31:50 +00:00
|
|
|
const classes = useStyles();
|
2020-07-14 12:38:07 +00:00
|
|
|
const data = useStaticQuery(graphql`
|
|
|
|
{
|
|
|
|
allCoverImages: allFile(
|
2022-09-11 07:31:16 +00:00
|
|
|
filter: {
|
|
|
|
absolutePath: { regex: "/projects/" }
|
|
|
|
extension: { in: ["png", "jpeg", "jpg"] }
|
|
|
|
}
|
2020-07-14 12:38:07 +00:00
|
|
|
) {
|
|
|
|
edges {
|
|
|
|
node {
|
|
|
|
relativePath
|
|
|
|
childImageSharp {
|
|
|
|
id
|
2021-04-20 19:33:43 +00:00
|
|
|
fluid(maxWidth: 1280) {
|
2020-07-14 12:38:07 +00:00
|
|
|
...GatsbyImageSharpFluid
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-01-17 08:31:50 +00:00
|
|
|
`);
|
2020-07-13 17:04:46 +00:00
|
|
|
return (
|
2020-07-14 12:38:07 +00:00
|
|
|
<Section
|
|
|
|
id={SECTION_ID}
|
|
|
|
className={classes.section}
|
|
|
|
bgColor={BG_COLOR.PRIMARY}
|
|
|
|
>
|
2020-07-13 17:04:46 +00:00
|
|
|
<Container>
|
|
|
|
<Typography variant="h2" align="center" gutterBottom>
|
2021-01-16 20:58:43 +00:00
|
|
|
My work
|
2020-07-13 17:04:46 +00:00
|
|
|
</Typography>
|
2021-04-20 19:33:43 +00:00
|
|
|
<Grid container spacing={3}>
|
|
|
|
{projects.map(project => {
|
2021-01-17 08:31:50 +00:00
|
|
|
let fluid = undefined;
|
2020-07-14 12:38:07 +00:00
|
|
|
if (project.fluid) {
|
|
|
|
const edge = data.allCoverImages.edges.find(
|
|
|
|
img => img.node.relativePath === project.fluid
|
2021-01-17 08:31:50 +00:00
|
|
|
);
|
2020-07-14 12:38:07 +00:00
|
|
|
if (edge) {
|
2021-01-17 08:31:50 +00:00
|
|
|
fluid = edge.node.childImageSharp.fluid;
|
2020-07-14 12:38:07 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-13 20:59:49 +00:00
|
|
|
return (
|
2021-04-20 19:33:43 +00:00
|
|
|
<Grid
|
2020-07-13 20:59:49 +00:00
|
|
|
key={project.title}
|
2021-04-20 19:33:43 +00:00
|
|
|
item
|
|
|
|
xs={12}
|
|
|
|
className={classes.gridItem}
|
|
|
|
>
|
|
|
|
<Project {...project} fluid={fluid} />
|
|
|
|
</Grid>
|
2021-01-17 08:31:50 +00:00
|
|
|
);
|
2020-07-13 20:59:49 +00:00
|
|
|
})}
|
2021-04-20 19:33:43 +00:00
|
|
|
</Grid>
|
2020-07-13 17:04:46 +00:00
|
|
|
</Container>
|
|
|
|
</Section>
|
2021-01-17 08:31:50 +00:00
|
|
|
);
|
2020-07-13 17:04:46 +00:00
|
|
|
}
|
|
|
|
|
2022-09-11 07:31:16 +00:00
|
|
|
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%',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
|
2021-01-17 08:31:50 +00:00
|
|
|
export default Portfolio;
|