Kichiyaki
/
dwysokinski.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Technologies] use css grid instead of Material-UI grid

This commit is contained in:
Dawid Wysokiński 2021-01-17 10:29:25 +01:00
parent f0a701bc4c
commit 11363d1068
3 changed files with 102 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/SEO.js
View File

@ -118,7 +118,7 @@ SEO.propTypes = {
description: PropTypes.string, description: PropTypes.string,
lang: PropTypes.string, lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object), meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired, title: PropTypes.string,
}; };
export default SEO; export default SEO;

167
src/features/HomePage/components/Technologies/Technologies.js
View File

@ -2,18 +2,10 @@ import React from 'react';
import { useStaticQuery, graphql } from 'gatsby'; import { useStaticQuery, graphql } from 'gatsby';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import { Container, Typography, Grid } from '@material-ui/core'; import { Container, Typography } from '@material-ui/core';
import Section from '@components/Section'; import Section from '@components/Section';
import Technology from './Technology'; import Technology from './Technology';
const useStyles = makeStyles(theme => ({
hide: {
[theme.breakpoints.down('md')]: {
display: 'none',
},
},
}));
function Technologies() { function Technologies() {
const classes = useStyles(); const classes = useStyles();
const data = useStaticQuery(graphql` const data = useStaticQuery(graphql`
@ -24,7 +16,7 @@ function Technologies() {
relativePath relativePath
childImageSharp { childImageSharp {
id id
fixed(height: 45, quality: 100) { fixed(height: 40, quality: 100) {
...GatsbyImageSharpFixed ...GatsbyImageSharpFixed
} }
} }
@ -50,130 +42,173 @@ function Technologies() {
<Typography align="center" variant="h2" gutterBottom> <Typography align="center" variant="h2" gutterBottom>
Technologies / tools I use Technologies / tools I use
</Typography> </Typography>
<Grid container spacing={2} alignItems="stretch"> <div className={classes.grid}>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/html5.png')} fixed={findIcon('technologies/html5.png')}
name="HTML" name="HTML"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology fixed={findIcon('technologies/css.png')} name="CSS" /> <Technology fixed={findIcon('technologies/css.png')} name="CSS" />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology fixed={findIcon('technologies/scss.png')} name="SCSS" /> <Technology fixed={findIcon('technologies/scss.png')} name="SCSS" />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/js.png')} fixed={findIcon('technologies/js.png')}
name="JavaScript" name="JavaScript"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/typescript.png')} fixed={findIcon('technologies/typescript.png')}
name="TypeScript" name="TypeScript"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/react.png')} fixed={findIcon('technologies/react.png')}
name="React" name="React"
/> />
</Grid> </div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div className={classes.hide}></div>
<div>
<Technology <Technology
fixed={findIcon('technologies/gatsby.png')} fixed={findIcon('technologies/gatsby.png')}
name="Gatsby" name="Gatsby"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/nextjs.png')} fixed={findIcon('technologies/nextjs.png')}
name="Next.JS" name="Next.JS"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology fixed={findIcon('technologies/jest.png')} name="Jest" /> <Technology fixed={findIcon('technologies/jest.png')} name="Jest" />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/express.png')} fixed={findIcon('technologies/express.png')}
name="Express" name="Express"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology
fixed={findIcon('technologies/nest.png')}
name="Nest.JS"
/>
</div>
<div className={classes.hide}></div>
<div>
<Technology <Technology
fixed={findIcon('technologies/strapi.png')} fixed={findIcon('technologies/strapi.png')}
name="Strapi" name="Strapi"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/ghost.png')} fixed={findIcon('technologies/ghost.png')}
name="Ghost" name="Ghost"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/graphql.png')} fixed={findIcon('technologies/graphql.png')}
name="GraphQL" name="GraphQL"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/golang.png')} fixed={findIcon('technologies/golang.png')}
name="Golang" name="Golang"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/gqlgen.png')} fixed={findIcon('technologies/gqlgen.png')}
name="gqlgen" name="gqlgen"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/golang.png')} fixed={findIcon('technologies/golang.png')}
name="Gin" name="Gin"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/postgresql.png')} fixed={findIcon('technologies/postgresql.png')}
name="PostgreSQL" name="PostgreSQL"
/> />
</Grid> </div>
<Grid item className={classes.hide} lg={1}></Grid> <div className={classes.hide}></div>
<Grid item xs={6} sm={4} md={2} lg={1}> <div>
<Technology <Technology
fixed={findIcon('technologies/docker.png')} fixed={findIcon('technologies/docker.png')}
name="Docker" name="Docker"
/> />
</Grid> </div>
</Grid> </div>
</Container> </Container>
</Section> </Section>
); );
} }
const useStyles = makeStyles(theme => ({
grid: {
display: 'grid',
gridTemplateColumns: `repeat(13, minmax(max-content, 1fr));`,
gap: theme.spacing(1, 1),
[theme.breakpoints.down('md')]: {
gridTemplateColumns: `repeat(6, minmax(max-content, 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(max-content, 1fr));`,
'& > div:last-child': {
display: 'block',
gridColumnStart: '2',
gridColumnEnd: '2',
'& > div': {
width: 'auto',
},
},
},
},
hide: {
[theme.breakpoints.down('md')]: {
display: 'none',
},
},
}));
export default Technologies; export default Technologies;

BIN
src/images/technologies/nest.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB