Merge pull request #3 from Kichiyaki/develop

merge develop into master

.gitignore

@@ -70,3 +70,4 @@ yarn-error.log
 
 .idea
 
+schema.graphql

.graphqlconfig

@@ -0,0 +1,16 @@
+
+{
+  "name": "dwysokinski.me",
+  "schemaPath": "schema.graphql",
+  "extensions": {
+    "endpoints": {
+      "Default GraphQL Endpoint": {
+        "url": "http://localhost:8000/___graphql",
+        "headers": {
+          "user-agent": "IDE"
+        },
+        "introspect": true
+      }
+    }
+  }
+}

gatsby-config.js

@@ -7,6 +7,9 @@ module.exports = {
     authorTwitter: `@Dawid56143781`,
     authorFullName: 'Dawid Wysokiński',
     siteUrl,
+    email: 'contact@dwysokinski.me',
+    github: 'https://github.com/Kichiyaki',
+    facebook: 'https://www.facebook.com/dawidwysokinski00',
   },
   plugins: [
     `gatsby-plugin-react-helmet`,

src/features/HomePage/components/Contact.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { graphql, useStaticQuery } from 'gatsby';
 
 import { makeStyles } from '@material-ui/core/styles';
 import { Typography, Container, Link } from '@material-ui/core';
@@ -14,34 +15,46 @@ export const SECTION_ID = 'contact';
 function Contact() {
   const classes = useStyles();
 
+  const {
+    site: { siteMetadata },
+  } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            email
+            github
+            facebook
+          }
+        }
+      }
+    `
+  );
+
   const linkProps = {
     underline: 'hover',
     color: 'secondary',
   };
-
   return (
     <Section size="small" id={SECTION_ID}>
       <Container maxWidth="md" className={classes.container}>
         <div className={classes.urlContainer}>
           <Typography variant="h6">
             <EmailIcon fontSize="large" />
-            <Link href="mailto:contact@dwysokinski.me" {...linkProps}>
-              contact@dwysokinski.me
+            <Link href={`mailto:${siteMetadata.email}`} {...linkProps}>
+              {siteMetadata.email}
             </Link>
           </Typography>
           <Typography variant="h6">
             <GitHubIcon fontSize="large" />
-            <Link href="https://github.com/Kichiyaki" {...linkProps}>
-              Kichiyaki
+            <Link href={siteMetadata.github} {...linkProps}>
+              {siteMetadata.github.replace('https://github.com/', '')}
             </Link>
           </Typography>
           <Typography variant="h6">
             <FacebookIcon fontSize="large" />
-            <Link
-              href="https://www.facebook.com/dawidwysokinski00"
-              {...linkProps}
-            >
-              /dawidwysokinski00
+            <Link href={siteMetadata.facebook} {...linkProps}>
+              {siteMetadata.facebook.replace('https://facebook.com', '')}
             </Link>
           </Typography>
         </div>

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: {
-    '& > *:not(:last-child)': {
-      marginBottom: theme.spacing(2),
+  gridItem: {
+    [theme.breakpoints.up(750)]: {
+      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}>
-          {projects.map((project, index) => {
+        <Grid container spacing={3}>
+          {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}
-                fluid={fluid}
-                reverse={(index + 1) % 2 === 0}
-              />
+                item
+                xs={12}
+                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
-      className={classnames(classes.card, {
-        reverse,
-      })}
-    >
+    <Card className={classes.card}>
       {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: 'row-reverse',
-      [theme.breakpoints.down('sm')]: {
-        flexDirection: 'column',
-      },
-    },
-    [theme.breakpoints.down('sm')]: {
-      flexDirection: 'column',
-    },
+    flexDirection: 'column',
+    height: '100%',
   },
   cardContent: {
     display: 'flex',
     flexDirection: 'column',
-    width: '45%',
-    [theme.breakpoints.down('sm')]: {
-      width: '100%',
-    },
+    height: '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%',
-    [theme.breakpoints.down('sm')]: {
-      width: '100%',
-      paddingTop: '56.25%',
-    },
+    width: '100%',
+    paddingTop: '66.6666%',
   },
 }));
 
 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,