2020-07-13 14:47:30 +00:00
|
|
|
import React from "react"
|
|
|
|
import { useStaticQuery, graphql } from "gatsby"
|
|
|
|
|
|
|
|
import { makeStyles } from "@material-ui/core/styles"
|
|
|
|
import { Container, Typography, Grid } from "@material-ui/core"
|
|
|
|
import Section from "@components/Section"
|
|
|
|
import Technology from "./Technology"
|
|
|
|
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
|
|
hide: {
|
|
|
|
[theme.breakpoints.down("md")]: {
|
|
|
|
display: "none",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}))
|
|
|
|
|
|
|
|
function AboutMe() {
|
|
|
|
const classes = useStyles()
|
2020-07-14 12:50:24 +00:00
|
|
|
const data = useStaticQuery(graphql`
|
|
|
|
{
|
|
|
|
allIcons: allFile(filter: { absolutePath: { regex: "/technologies/" } }) {
|
|
|
|
edges {
|
|
|
|
node {
|
|
|
|
relativePath
|
|
|
|
childImageSharp {
|
|
|
|
id
|
|
|
|
fixed(height: 45, quality: 100) {
|
2021-01-16 20:58:43 +00:00
|
|
|
...GatsbyImageSharpFixed
|
2020-07-14 12:50:24 +00:00
|
|
|
}
|
2020-07-13 14:47:30 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-07-14 12:50:24 +00:00
|
|
|
}
|
|
|
|
`)
|
|
|
|
|
|
|
|
const findIcon = path => {
|
|
|
|
const edge = data.allIcons.edges.find(img => img.node.relativePath === path)
|
|
|
|
if (edge) {
|
|
|
|
return edge.node.childImageSharp.fixed
|
|
|
|
}
|
|
|
|
return {}
|
|
|
|
}
|
2020-07-13 14:47:30 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Section>
|
|
|
|
<Container>
|
|
|
|
<Typography align="center" variant="h2" gutterBottom>
|
2021-01-16 20:58:43 +00:00
|
|
|
Technologies / tools I use
|
2020-07-13 14:47:30 +00:00
|
|
|
</Typography>
|
|
|
|
<Grid container spacing={2} alignItems="stretch">
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
2020-07-14 12:50:24 +00:00
|
|
|
<Technology
|
|
|
|
fixed={findIcon("technologies/html5.png")}
|
|
|
|
name="HTML"
|
|
|
|
/>
|
2020-07-13 14:47:30 +00:00
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
2020-07-14 12:50:24 +00:00
|
|
|
<Technology fixed={findIcon("technologies/css.png")} name="CSS" />
|
2020-07-13 14:47:30 +00:00
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
2020-07-14 12:50:24 +00:00
|
|
|
<Technology fixed={findIcon("technologies/scss.png")} name="SCSS" />
|
2020-07-13 14:47:30 +00:00
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
|
|
|
<Technology
|
2020-07-14 12:50:24 +00:00
|
|
|
fixed={findIcon("technologies/js.png")}
|
2020-07-13 14:47:30 +00:00
|
|
|
name="JavaScript"
|
|
|
|
/>
|
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
2020-07-14 12:50:24 +00:00
|
|
|
<Technology
|
2021-01-10 19:32:44 +00:00
|
|
|
fixed={findIcon("technologies/typescript.png")}
|
|
|
|
name="TypeScript"
|
2020-07-14 12:50:24 +00:00
|
|
|
/>
|
2020-07-13 14:47:30 +00:00
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
|
|
|
<Technology
|
2021-01-10 19:32:44 +00:00
|
|
|
fixed={findIcon("technologies/react.png")}
|
|
|
|
name="React"
|
2020-07-13 14:47:30 +00:00
|
|
|
/>
|
|
|
|
</Grid>
|
|
|
|
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
|
|
|
<Technology
|
2021-01-10 19:32:44 +00:00
|
|
|
fixed={findIcon("technologies/gatsby.png")}
|
|
|
|
name="Gatsby"
|
2020-07-13 14:47:30 +00:00
|
|
|
/>
|
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
|
|
|
<Technology
|
2021-01-10 19:32:44 +00:00
|
|
|
fixed={findIcon("technologies/nextjs.png")}
|
|
|
|
name="Next.JS"
|
2020-07-13 14:47:30 +00:00
|
|
|
/>
|
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
2020-07-14 12:50:24 +00:00
|
|
|
<Technology fixed={findIcon("technologies/jest.png")} name="Jest" />
|
2020-07-13 14:47:30 +00:00
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
|
|
|
<Technology
|
2021-01-10 19:32:44 +00:00
|
|
|
fixed={findIcon("technologies/express.png")}
|
|
|
|
name="Express"
|
2020-07-13 14:47:30 +00:00
|
|
|
/>
|
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
|
|
|
<Technology
|
2021-01-10 19:32:44 +00:00
|
|
|
fixed={findIcon("technologies/strapi.png")}
|
|
|
|
name="Strapi"
|
2020-07-13 14:47:30 +00:00
|
|
|
/>
|
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
|
|
|
<Technology
|
2021-01-10 19:32:44 +00:00
|
|
|
fixed={findIcon("technologies/ghost.png")}
|
|
|
|
name="Ghost"
|
2020-07-13 14:47:30 +00:00
|
|
|
/>
|
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
2020-07-14 12:50:24 +00:00
|
|
|
<Technology
|
2021-01-10 19:32:44 +00:00
|
|
|
fixed={findIcon("technologies/graphql.png")}
|
|
|
|
name="GraphQL"
|
2020-07-14 12:50:24 +00:00
|
|
|
/>
|
2020-07-13 14:47:30 +00:00
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
|
|
|
<Technology
|
2020-07-14 12:50:24 +00:00
|
|
|
fixed={findIcon("technologies/golang.png")}
|
2020-07-13 14:47:30 +00:00
|
|
|
name="Golang"
|
|
|
|
/>
|
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
|
|
|
<Technology
|
2020-07-14 12:50:24 +00:00
|
|
|
fixed={findIcon("technologies/gqlgen.png")}
|
2020-07-13 14:47:30 +00:00
|
|
|
name="gqlgen"
|
|
|
|
/>
|
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
2020-07-14 12:50:24 +00:00
|
|
|
<Technology
|
|
|
|
fixed={findIcon("technologies/golang.png")}
|
|
|
|
name="Gin"
|
|
|
|
/>
|
2020-07-13 14:47:30 +00:00
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
|
|
|
<Technology
|
2020-07-14 12:50:24 +00:00
|
|
|
fixed={findIcon("technologies/postgresql.png")}
|
2020-07-13 14:47:30 +00:00
|
|
|
name="PostgreSQL"
|
|
|
|
/>
|
|
|
|
</Grid>
|
|
|
|
<Grid item className={classes.hide} lg={1}></Grid>
|
|
|
|
<Grid item xs={6} sm={4} md={2} lg={1}>
|
|
|
|
<Technology
|
2021-01-16 20:58:43 +00:00
|
|
|
fixed={findIcon("technologies/docker.png")}
|
2020-07-13 14:47:30 +00:00
|
|
|
name="Docker"
|
|
|
|
/>
|
|
|
|
</Grid>
|
|
|
|
</Grid>
|
|
|
|
</Container>
|
|
|
|
</Section>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default AboutMe
|