220 lines
5.8 KiB
JavaScript
220 lines
5.8 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/" }
|
|
extension: { in: ["png", "jpeg", "jpg"] }
|
|
}
|
|
) {
|
|
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
|
|
);
|
|
return edge?.node?.childImageSharp?.fixed ?? {};
|
|
};
|
|
|
|
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/go.png')} name="Go" />
|
|
</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/node.png')}
|
|
name="Node.js"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/nest.png')}
|
|
name="NestJS"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/react.png')}
|
|
name="React"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/postgresql.png')}
|
|
name="PostgreSQL"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/redis.png')}
|
|
name="Redis"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/rmq.png')}
|
|
name="RabbitMQ"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology fixed={findIcon('technologies/git.png')} name="Git" />
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/graphql.png')}
|
|
name="GraphQL"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/kubernetes.png')}
|
|
name="Kubernetes"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/docker.png')}
|
|
name="Docker"
|
|
/>
|
|
</div>
|
|
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/terraform.png')}
|
|
name="Terraform"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/ansible.png')}
|
|
name="Ansible"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/prometheus.png')}
|
|
name="Prometheus"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/grafana.jpg')}
|
|
name="Grafana"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/jaeger.png')}
|
|
name="Jaeger"
|
|
/>
|
|
</div>
|
|
<div className={classes.hide} />
|
|
<div>
|
|
<Technology
|
|
fixed={findIcon('technologies/sentry.png')}
|
|
name="Sentry"
|
|
/>
|
|
</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;
|