Merge pull request #1 from Kichiyaki/technologies-css-grid

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

src/components/SEO.js

@@ -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;

src/features/HomePage/components/Technologies/Technologies.js

@@ -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;