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,
|
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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 124 KiB |
Loading…
Reference in New Issue