215 lines
5.7 KiB
JavaScript
215 lines
5.7 KiB
JavaScript
import React from 'react';
|
|
import { useStaticQuery, graphql } from 'gatsby';
|
|
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import { Container, Typography } from '@material-ui/core';
|
|
import Section from '@components/Section';
|
|
import Technology from './Technology';
|
|
|
|
function Technologies() {
|
|
const classes = useStyles();
|
|
const data = useStaticQuery(graphql`
|
|
{
|
|
allIcons: allFile(filter: { absolutePath: { regex: "/technologies/" } }) {
|
|
edges {
|
|
node {
|
|
relativePath
|
|
childImageSharp {
|
|
id
|
|
fixed(height: 40, quality: 100) {
|
|
...GatsbyImageSharpFixed
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`);
|
|
|
|
const findIcon = path => {
|
|
const edge = data.allIcons.edges.find(
|
|
img => img.node.relativePath === path
|
|
);
|
|
if (edge) {
|
|
return edge.node.childImageSharp.fixed;
|
|
}
|
|
return {};
|
|
};
|
|
|
|
return (
|
|
<Section>
|
|
<Container>
|
|
<Typography align="center" variant="h2" gutterBottom>
|
|
Technologies / tools I use
|
|
</Typography>
|
|
<div className={classes.grid}>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/html5.png')}
|
|
name="HTML"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology fixed={findIcon('technologies/css.png')} name="CSS" />
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology fixed={findIcon('technologies/scss.png')} name="SCSS" />
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/js.png')}
|
|
name="JavaScript"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/typescript.png')}
|
|
name="TypeScript"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/react.png')}
|
|
name="React"
|
|
/>
|
|
</div>
|
|
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/gatsby.png')}
|
|
name="Gatsby"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/nextjs.png')}
|
|
name="Next.JS"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology fixed={findIcon('technologies/jest.png')} name="Jest" />
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/express.png')}
|
|
name="Express"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/nest.png')}
|
|
name="Nest.JS"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/strapi.png')}
|
|
name="Strapi"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/ghost.png')}
|
|
name="Ghost"
|
|
/>
|
|
</div>
|
|
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/graphql.png')}
|
|
name="GraphQL"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/golang.png')}
|
|
name="Golang"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/gqlgen.png')}
|
|
name="gqlgen"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/golang.png')}
|
|
name="Gin"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/postgresql.png')}
|
|
name="PostgreSQL"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/docker.png')}
|
|
name="Docker"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
grid: {
|
|
display: 'grid',
|
|
gridTemplateColumns: `repeat(13, minmax(0, 1fr));`,
|
|
gap: theme.spacing(1, 1),
|
|
[theme.breakpoints.down('md')]: {
|
|
gridTemplateColumns: `repeat(6, minmax(0, 1fr));`,
|
|
'& > div:last-child': {
|
|
gridColumnStart: '3',
|
|
gridColumnEnd: 'span 2',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
'& > div': {
|
|
width: `calc(50% - ${theme.spacing(1)}px)`,
|
|
},
|
|
},
|
|
},
|
|
[theme.breakpoints.down('xs')]: {
|
|
gridTemplateColumns: `repeat(3, minmax(0, 1fr));`,
|
|
'& > div:last-child': {
|
|
display: 'block',
|
|
gridColumnStart: '2',
|
|
gridColumnEnd: '2',
|
|
'& > div': {
|
|
width: 'auto',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
hide: {
|
|
[theme.breakpoints.down('md')]: {
|
|
display: 'none',
|
|
},
|
|
},
|
|
}));
|
|
|
|
export default Technologies;
|