Merge pull request #1 from Kichiyaki/technologies-css-grid
[Technologies] use css grid instead of Material-UI grid
This commit is contained in:
commit
ebca738cbc
|
@ -118,7 +118,7 @@ SEO.propTypes = {
|
|||
description: PropTypes.string,
|
||||
lang: PropTypes.string,
|
||||
meta: PropTypes.arrayOf(PropTypes.object),
|
||||
title: PropTypes.string.isRequired,
|
||||
title: PropTypes.string,
|
||||
};
|
||||
|
||||
export default SEO;
|
||||
|
|
|
@ -2,18 +2,10 @@ 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 { Container, Typography } 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 Technologies() {
|
||||
const classes = useStyles();
|
||||
const data = useStaticQuery(graphql`
|
||||
|
@ -24,7 +16,7 @@ function Technologies() {
|
|||
relativePath
|
||||
childImageSharp {
|
||||
id
|
||||
fixed(height: 45, quality: 100) {
|
||||
fixed(height: 40, quality: 100) {
|
||||
...GatsbyImageSharpFixed
|
||||
}
|
||||
}
|
||||
|
@ -50,130 +42,173 @@ function Technologies() {
|
|||
<Typography align="center" variant="h2" gutterBottom>
|
||||
Technologies / tools I use
|
||||
</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}>
|
||||
<div className={classes.grid}>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/html5.png')}
|
||||
name="HTML"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology fixed={findIcon('technologies/css.png')} name="CSS" />
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology fixed={findIcon('technologies/scss.png')} name="SCSS" />
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/js.png')}
|
||||
name="JavaScript"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/typescript.png')}
|
||||
name="TypeScript"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/react.png')}
|
||||
name="React"
|
||||
/>
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/gatsby.png')}
|
||||
name="Gatsby"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/nextjs.png')}
|
||||
name="Next.JS"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology fixed={findIcon('technologies/jest.png')} name="Jest" />
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/express.png')}
|
||||
name="Express"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/nest.png')}
|
||||
name="Nest.JS"
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/strapi.png')}
|
||||
name="Strapi"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/ghost.png')}
|
||||
name="Ghost"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
</div>
|
||||
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/graphql.png')}
|
||||
name="GraphQL"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/golang.png')}
|
||||
name="Golang"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/gqlgen.png')}
|
||||
name="gqlgen"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/golang.png')}
|
||||
name="Gin"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/postgresql.png')}
|
||||
name="PostgreSQL"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item className={classes.hide} lg={1}></Grid>
|
||||
<Grid item xs={6} sm={4} md={2} lg={1}>
|
||||
</div>
|
||||
<div className={classes.hide}></div>
|
||||
<div>
|
||||
<Technology
|
||||
fixed={findIcon('technologies/docker.png')}
|
||||
name="Docker"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</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;
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 124 KiB |
Loading…
Reference in New Issue