update preview images, render projects using material-ui's grid

src/features/HomePage/components/Portfolio/Portfolio.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
 
 import { makeStyles } from '@material-ui/core/styles';
-import { Typography, Container } from '@material-ui/core';
+import { Typography, Container, Grid } from '@material-ui/core';
 import Section, { BG_COLOR } from '@components/Section';
 import Project from './Project';
 
@@ -18,9 +18,11 @@ const useStyles = makeStyles(theme => ({
       margin: '3rem 0',
     },
   },
-  projects: {
+  gridItem: {
-    '& > *:not(:last-child)': {
+    [theme.breakpoints.up(750)]: {
-      marginBottom: theme.spacing(2),
+      flexGrow: 0,
+      flexBasis: '50%',
+      maxWidth: '50%',
     },
   },
 }));
@@ -39,7 +41,7 @@ function Portfolio() {
             relativePath
             childImageSharp {
               id
-              fluid(maxWidth: 1000) {
+              fluid(maxWidth: 1280) {
                 ...GatsbyImageSharpFluid
               }
             }
@@ -58,8 +60,8 @@ function Portfolio() {
         <Typography variant="h2" align="center" gutterBottom>
           My work
         </Typography>
-        <div className={classes.projects}>
+        <Grid container spacing={3}>
-          {projects.map((project, index) => {
+          {projects.map(project => {
             let fluid = undefined;
             if (project.fluid) {
               const edge = data.allCoverImages.edges.find(
@@ -71,15 +73,17 @@ function Portfolio() {
             }
 
             return (
-              <Project
+              <Grid
                 key={project.title}
-                {...project}
+                item
-                fluid={fluid}
+                xs={12}
-                reverse={(index + 1) % 2 === 0}
+                className={classes.gridItem}
-              />
+              >
+                <Project {...project} fluid={fluid} />
+              </Grid>
             );
           })}
-        </div>
+        </Grid>
       </Container>
     </Section>
   );
@@ -121,26 +125,19 @@ const projects = [
       'GraphQL',
       'Golang',
       'gqlgen',
-      'Echo',
+      'Gin',
       'PostgreSQL',
+      'TypeScript',
       'React',
+      'React Native',
       'Next.JS',
       'Material-UI',
       'Apollo',
-      'React Native',
     ],
     github: '',
     fluid: 'projects/zdam.png',
     live: 'https://zdamegzaminzawodowy.pl/',
   },
-  {
-    title: 'matura-z-informatyki.pl',
-    description: '',
-    technologies: ['React', 'Next.JS', 'Bulma', 'Ghost'],
-    github: 'https://github.com/Kichiyaki/matura-z-informatyki.pl',
-    live: 'https://matura-z-informatyki.pl/',
-    fluid: 'projects/maturazinf.png',
-  },
   {
     title: 'dwysokinski.me',
     description: '',

src/features/HomePage/components/Portfolio/Project.js

@@ -1,22 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import notFound from './not-found.jpg';
 
 import { makeStyles } from '@material-ui/core/styles';
 import {
+  Button,
   Card,
   CardContent,
   CardMedia,
-  Typography,
-  Button,
   Chip,
   Link,
+  Typography,
 } from '@material-ui/core';
 import BackgroundImage from 'gatsby-background-image';
 
 function Project({
-  reverse,
   title,
   description,
   technologies,
@@ -27,11 +25,7 @@ function Project({
 }) {
   const classes = useStyles();
   return (
-    <Card
+    <Card className={classes.card}>
-      className={classnames(classes.card, {
-        reverse,
-      })}
-    >
       {fluid ? (
         <BackgroundImage
           fluid={fluid}
@@ -43,12 +37,12 @@ function Project({
       )}
       <CardContent className={classes.cardContent}>
         <div className={classes.contentContainer}>
-          <Typography variant="h3" gutterBottom>
+          <Typography variant="h3" gutterBottom className={classes.title}>
             {title}
           </Typography>
           <Typography>{description}</Typography>
         </div>
-        <div className={classes.divider}></div>
+        <div className={classes.divider} />
         <div className={classes.technologies}>
           {technologies.map(technology => {
             return (
@@ -81,27 +75,27 @@ const useStyles = makeStyles(theme => ({
   card: {
     display: 'flex',
     minHeight: '400px',
-    '&.reverse': {
+    flexDirection: 'column',
-      flexDirection: 'row-reverse',
+    height: '100%',
-      [theme.breakpoints.down('sm')]: {
-        flexDirection: 'column',
-      },
-    },
-    [theme.breakpoints.down('sm')]: {
-      flexDirection: 'column',
-    },
   },
   cardContent: {
     display: 'flex',
     flexDirection: 'column',
-    width: '45%',
+    height: '100%',
-    [theme.breakpoints.down('sm')]: {
-      width: '100%',
-    },
   },
   divider: {
     flex: 1,
   },
+  title: {
+    overflowWrap: 'break-word',
+    wordWrap: 'break-word',
+    '-ms-word-break': 'break-all',
+    wordBreak: 'break-word',
+    '-ms-hyphens': 'auto',
+    '-moz-hyphens': 'auto',
+    '-webkit-hyphens': 'auto',
+    hyphens: 'auto',
+  },
   contentContainer: {
     marginBottom: theme.spacing(8),
   },
@@ -126,16 +120,12 @@ const useStyles = makeStyles(theme => ({
     },
   },
   cover: {
-    width: '55%',
+    width: '100%',
-    [theme.breakpoints.down('sm')]: {
+    paddingTop: '66.6666%',
-      width: '100%',
-      paddingTop: '56.25%',
-    },
   },
 }));
 
 Project.defaultProps = {
-  reverse: false,
   title: '',
   description: '',
   technologies: [],
@@ -145,7 +135,6 @@ Project.defaultProps = {
 };
 
 Project.propTypes = {
-  reverse: PropTypes.bool.isRequired,
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   technologies: PropTypes.arrayOf(PropTypes.string).isRequired,