add Section component, add AboutMe/Technologies sections

src/components/Layout/Layout.js

@@ -8,10 +8,6 @@ import Header from "./Header"
 
 const useStyles = makeStyles(theme => ({
   main: {
-    display: "flex",
-  },
-  contentWrapper: {
-    width: "100%",
     minHeight: "calc(100vh - 200px)",
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(3),
@@ -24,11 +20,7 @@ const Layout = ({ children, className, headerProps }) => {
   return (
     <Fragment>
       <Header {...headerProps} />
-      <main className={classes.main}>
-        <div className={classnames(className, classes.contentWrapper)}>
-          {children}
-        </div>
-      </main>
+      <main className={classnames(className, classes.main)}>{children}</main>
       <CssBaseline />
     </Fragment>
   )

src/components/Section.js

@@ -0,0 +1,19 @@
+import React from "react"
+
+import { makeStyles } from "@material-ui/core/styles"
+
+const useStyles = makeStyles(theme => ({
+  section: {
+    padding: "3rem 1.5rem",
+    [theme.breakpoints.up("md")]: {
+      padding: "6rem 1.5rem",
+    },
+  },
+}))
+
+function Section({ children }) {
+  const classes = useStyles()
+  return <section className={classes.section}>{children}</section>
+}
+
+export default Section

src/features/HomePage/HomePage.js

@@ -1,14 +1,16 @@
 import React from "react"
 
 import { makeStyles } from "@material-ui/core/styles"
+import { Divider } from "@material-ui/core"
 import Layout from "@components/Layout/Layout"
 import SEO from "@components/SEO"
 import Header from "./components/Header"
+import AboutMe from "./components/AboutMe"
+import Technologies from "./components/Technologies/Technologies"
 
 const useStyles = makeStyles(theme => ({
   layout: {
     padding: 0,
-    minHeight: `100vh`,
   },
 }))
 
@@ -18,6 +20,9 @@ const HomePage = ({ location }) => {
     <Layout className={classes.layout} headerProps={{ position: "absolute" }}>
       <SEO title="Strona główna" pathname={location.pathname} />
       <Header />
+      <AboutMe />
+      <Divider />
+      <Technologies />
     </Layout>
   )
 }

src/features/HomePage/components/AboutMe.js

@@ -0,0 +1,31 @@
+import React from "react"
+
+import { Container, Typography } from "@material-ui/core"
+import Section from "@components/Section"
+
+function AboutMe() {
+  return (
+    <Section>
+      <Container>
+        <Typography align="center" variant="h2" gutterBottom>
+          O mnie
+        </Typography>
+        <Typography>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+          porttitor, neque et pellentesque mattis, quam felis tempor risus, id
+          porta lacus nulla ac ipsum. Etiam turpis felis, vehicula non porttitor
+          sed, mattis in sapien. Integer pretium tempor mi. Nullam placerat
+          auctor arcu, eu condimentum ex. Class aptent taciti sociosqu ad litora
+          torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget
+          lorem finibus, tempus elit non, consectetur quam. Fusce eget nisl
+          eros. Proin ligula ante, vestibulum nec metus quis, pharetra aliquam
+          orci. Pellentesque at dolor sodales, maximus erat eu, cursus libero.
+          Phasellus cursus, augue laoreet convallis varius, neque tellus sodales
+          nibh, sed condimentum dui turpis id felis.
+        </Typography>
+      </Container>
+    </Section>
+  )
+}
+
+export default AboutMe

src/features/HomePage/components/Header.js

@@ -6,12 +6,16 @@ import bg from "./header-bg.jpg"
 
 const useStyles = makeStyles(theme => ({
   header: {
+    minHeight: "100vh",
     backgroundImage: `url(${bg})`,
     backgroundSize: "cover",
     backgroundPosition: "center",
     clipPath: "polygon(0 0,100% 0,100% 88%,0 100%)",
 
     height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    flexDirection: "column",
     [theme.breakpoints.down("xs")]: {
       margin: 0,
       clipPath: "none",
@@ -20,9 +24,7 @@ const useStyles = makeStyles(theme => ({
   container: {
     textAlign: "center",
     height: "100%",
-    display: "flex",
-    justifyContent: "center",
-    flexDirection: "column",
+    paddingBottom: theme.spacing(8),
   },
   textContainer: {
     paddingTop: theme.spacing(10),

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

@@ -0,0 +1,285 @@
+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 Section from "@components/Section"
+import Technology from "./Technology"
+
+const useStyles = makeStyles(theme => ({
+  hide: {
+    [theme.breakpoints.down("md")]: {
+      display: "none",
+    },
+  },
+}))
+
+function AboutMe() {
+  const classes = useStyles()
+  const {
+    html5Icon,
+    cssIcon,
+    scssIcon,
+    jsIcon,
+    reactIcon,
+    apolloIcon,
+    webpackIcon,
+    parcelIcon,
+    jestIcon,
+    strapiIcon,
+    ghostIcon,
+    golangIcon,
+    gqlgenIcon,
+    postgresqlIcon,
+    dockerIcon,
+    expressIcon,
+    nextjsIcon,
+  } = useStaticQuery(
+    graphql`
+      query {
+        html5Icon: file(relativePath: { eq: "technologies/html5.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        cssIcon: file(relativePath: { eq: "technologies/css.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        scssIcon: file(relativePath: { eq: "technologies/scss.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        jsIcon: file(relativePath: { eq: "technologies/js.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        reactIcon: file(relativePath: { eq: "technologies/react.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        apolloIcon: file(relativePath: { eq: "technologies/apollo.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        webpackIcon: file(relativePath: { eq: "technologies/webpack.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        parcelIcon: file(relativePath: { eq: "technologies/parcel.webp" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        jestIcon: file(relativePath: { eq: "technologies/jest.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        strapiIcon: file(relativePath: { eq: "technologies/strapi.jpeg" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        ghostIcon: file(relativePath: { eq: "technologies/ghost.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        golangIcon: file(relativePath: { eq: "technologies/golang.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        gqlgenIcon: file(relativePath: { eq: "technologies/gqlgen.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        postgresqlIcon: file(
+          relativePath: { eq: "technologies/postgresql.png" }
+        ) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        dockerIcon: file(relativePath: { eq: "technologies/docker.webp" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        expressIcon: file(relativePath: { eq: "technologies/express.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+        nextjsIcon: file(relativePath: { eq: "technologies/nextjs.png" }) {
+          childImageSharp {
+            fixed(height: 45, quality: 100) {
+              ...GatsbyImageSharpFixed
+            }
+          }
+        }
+      }
+    `
+  )
+
+  return (
+    <Section>
+      <Container>
+        <Typography align="center" variant="h2" gutterBottom>
+          Używane przeze mnie technologie / narzędzia
+        </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}>
+            <Technology fixed={html5Icon.childImageSharp.fixed} name="HTML" />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology fixed={cssIcon.childImageSharp.fixed} name="CSS" />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology fixed={scssIcon.childImageSharp.fixed} name="SCSS" />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology
+              fixed={jsIcon.childImageSharp.fixed}
+              name="JavaScript"
+            />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology fixed={reactIcon.childImageSharp.fixed} name="React" />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology
+              fixed={apolloIcon.childImageSharp.fixed}
+              name="Apollo"
+            />
+          </Grid>
+
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology
+              fixed={webpackIcon.childImageSharp.fixed}
+              name="Webpack"
+            />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology
+              fixed={parcelIcon.childImageSharp.fixed}
+              name="Parcel"
+            />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology fixed={jestIcon.childImageSharp.fixed} name="Jest" />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology
+              fixed={nextjsIcon.childImageSharp.fixed}
+              name="Next.JS"
+            />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology
+              fixed={expressIcon.childImageSharp.fixed}
+              name="Express"
+            />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology
+              fixed={strapiIcon.childImageSharp.fixed}
+              name="Strapi"
+            />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology fixed={ghostIcon.childImageSharp.fixed} name="Ghost" />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology
+              fixed={golangIcon.childImageSharp.fixed}
+              name="Golang"
+            />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology
+              fixed={gqlgenIcon.childImageSharp.fixed}
+              name="gqlgen"
+            />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology fixed={golangIcon.childImageSharp.fixed} name="Gin" />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology
+              fixed={postgresqlIcon.childImageSharp.fixed}
+              name="PostgreSQL"
+            />
+          </Grid>
+          <Grid item className={classes.hide} lg={1}></Grid>
+          <Grid item xs={6} sm={4} md={2} lg={1}>
+            <Technology
+              fixed={dockerIcon.childImageSharp.fixed}
+              name="Docker"
+            />
+          </Grid>
+        </Grid>
+      </Container>
+    </Section>
+  )
+}
+
+export default AboutMe

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

@@ -0,0 +1,31 @@
+import React from "react"
+
+import { makeStyles } from "@material-ui/core/styles"
+import { Typography, Paper } from "@material-ui/core"
+import Image from "gatsby-image"
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "column",
+    textAlign: "center",
+    height: "100%",
+    padding: theme.spacing(1),
+  },
+  image: {
+    marginBottom: theme.spacing(1),
+  },
+}))
+
+function Technology({ fixed, name }) {
+  const classes = useStyles()
+  return (
+    <Paper className={classes.paper}>
+      <Image className={classes.image} fixed={fixed} />
+      <Typography variant="body2">{name}</Typography>
+    </Paper>
+  )
+}
+
+export default Technology

src/images/technologies/gqlgen.svg

@@ -0,0 +1 @@
+<svg version="1.1" viewBox="0 0 31.92 31.43" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-79.29 -106.7)"><path transform="matrix(.2646 0 0 .2646 79.29 106.7)" d="m31.95 0c-5.673 0-10.27 4.598-10.27 10.27 0 0.5862 0.06001 1.157 0.1543 1.717l-19.74 11.39c-1.239 0.5653-2.1 1.816-2.1 3.266v65.51h0.01562c0.001603 1.235 0.6446 2.437 1.793 3.096l20.03 11.56c-0.09429 0.5594-0.1543 1.131-0.1543 1.717 0 5.673 4.598 10.27 10.27 10.27 5.674 0 10.27-4.6 10.27-10.27 0-5.673-4.598-10.27-10.27-10.27-2.492 0-4.774 0.8879-6.553 2.363l-18.22-10.52v-61.4l18.22-10.52c1.778 1.475 4.061 2.363 6.553 2.363 5.674 0 10.27-4.6 10.27-10.27 0-5.673-4.598-10.27-10.27-10.27zm56.73 0c-5.673 0-10.27 4.598-10.27 10.27 0 5.673 4.598 10.27 10.27 10.27 2.492 0 4.776-0.8879 6.555-2.363l18.22 10.52v61.4l-18.22 10.52c-1.778-1.474-4.062-2.361-6.553-2.361-5.673 0-10.27 4.598-10.27 10.27 0 5.673 4.598 10.27 10.27 10.27 5.675 0 10.27-4.6 10.27-10.27 0-0.5862-0.06002-1.157-0.1543-1.717l19.74-11.39c1.239-0.5653 2.1-1.814 2.1-3.264v-65.51h-0.01562c-0.00133-1.236-0.6437-2.438-1.793-3.098l-20.03-11.56c0.09428-0.5594 0.1543-1.131 0.1543-1.717 0-5.673-4.597-10.27-10.27-10.27zm-28.37 20.76c-5.675 0-10.27 4.598-10.27 10.27 0 1.524 0.3402 2.967 0.9355 4.268l-14.76 14.76c-1.301-0.5953-2.742-0.9355-4.266-0.9355-5.673 0-10.27 4.598-10.27 10.27 0 5.673 4.598 10.27 10.27 10.27 1.524 0 2.963-0.3406 4.264-0.9355l14.77 14.77c-0.5953 1.301-0.9355 2.742-0.9355 4.266 0 5.673 4.599 10.27 10.27 10.27 5.672 0 10.27-4.596 10.27-10.27 0-1.524-0.3401-2.965-0.9355-4.266l15.63-15.63c0.5748 0.0998 1.162 0.1621 1.766 0.1621 5.675 0 10.27-4.598 10.27-10.27 0-5.675-4.599-10.27-10.27-10.27-1.524 0-2.965 0.3404-4.266 0.9355l-13.13-13.13c0.5954-1.301 0.9355-2.743 0.9355-4.268 0-5.673-4.599-10.27-10.27-10.27zm-4.266 19.61c1.3 0.5949 2.742 0.9355 4.266 0.9355 1.523 0 2.964-0.3408 4.264-0.9355l13.13 13.13c-0.5948 1.3-0.9355 2.742-0.9355 4.266 0 2.377 0.8147 4.558 2.17 6.299l-14.36 14.37c-1.3-0.5947-2.741-0.9336-4.264-0.9336-1.524 0-2.965 0.3388-4.266 0.9336l-14.77-14.77c0.5949-1.3 0.9355-2.74 0.9355-4.264 0-1.523-0.3389-2.964-0.9336-4.264l14.76-14.77z"></path></g></svg>