initial version of Project card

gatsby-config.js

@@ -3,7 +3,7 @@ const siteUrl = "https://dawid-wysokinski.pl"
 module.exports = {
   siteMetadata: {
     title: `Dawid Wysokiński`,
-    description: `Programista stron WWW & Full-Stack Web Developer.`,
+    description: `Programista stron WWW & Full Stack Web Developer & Frontend Developer & Backend Developer.`,
     author: `@Dawid56143781`,
     authorFullName: "Dawid Wysokiński",
     email: "xyztojajestem@gmail.com",

src/components/SEO.js

@@ -4,7 +4,7 @@ import { Helmet } from "react-helmet"
 import { useStaticQuery, graphql } from "gatsby"
 import ogThumbnail from "@images/og_thumbnail.png"
 
-function SEO({ description, lang, meta, title, location }) {
+function SEO({ description, lang, meta, title, pathname }) {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -48,7 +48,7 @@ function SEO({ description, lang, meta, title, location }) {
         },
         {
           property: `og:url`,
-          content: `${site.siteMetadata.siteUrl}${location}`,
+          content: `${site.siteMetadata.siteUrl}${pathname}`,
         },
         {
           property: `og:image`,
@@ -88,7 +88,7 @@ function SEO({ description, lang, meta, title, location }) {
         },
         {
           name: `twitter:url`,
-          content: `${site.siteMetadata.siteUrl}${location}`,
+          content: `${site.siteMetadata.siteUrl}${pathname}`,
         },
         {
           name: `twitter:image`,
@@ -102,7 +102,7 @@ function SEO({ description, lang, meta, title, location }) {
     >
       <link
         rel="canonical"
-        content={`${site.siteMetadata.siteUrl}${location}`}
+        content={`${site.siteMetadata.siteUrl}${pathname}`}
       ></link>
     </Helmet>
   )

src/components/Section.js

@@ -1,19 +1,45 @@
 import React from "react"
+import PropTypes from "prop-types"
+import classnames from "classnames"
 
 import { makeStyles } from "@material-ui/core/styles"
 
 const useStyles = makeStyles(theme => ({
   section: {
     padding: "3rem 1.5rem",
+    "&.is-primary": {
+      backgroundColor: theme.palette.primary.main,
+    },
     [theme.breakpoints.up("md")]: {
       padding: "6rem 1.5rem",
     },
   },
 }))
 
-function Section({ children }) {
+export const BG_COLOR = {
+  TRANSPARENT: "transparent",
+  PRIMARY: "primary",
+}
+
+function Section({ children, className, bgColor }) {
   const classes = useStyles()
-  return <section className={classes.section}>{children}</section>
+  return (
+    <section
+      className={classnames(classes.section, className, {
+        "is-primary": bgColor === BG_COLOR.PRIMARY,
+      })}
+    >
+      {children}
+    </section>
+  )
+}
+
+Section.defaultProps = {
+  bgColor: BG_COLOR.TRANSPARENT,
+}
+
+Section.propTypes = {
+  bgColor: PropTypes.oneOf(Object.values(BG_COLOR)).isRequired,
 }
 
 export default Section

src/features/HomePage/HomePage.js

@@ -7,6 +7,7 @@ import SEO from "@components/SEO"
 import Header from "./components/Header"
 import AboutMe from "./components/AboutMe"
 import Technologies from "./components/Technologies/Technologies"
+import Projects from "./components/Projects/Projects"
 
 const useStyles = makeStyles(theme => ({
   layout: {
@@ -23,6 +24,7 @@ const HomePage = ({ location }) => {
       <AboutMe />
       <Divider />
       <Technologies />
+      <Projects />
     </Layout>
   )
 }

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

@@ -0,0 +1,125 @@
+import React from "react"
+import classnames from "classnames"
+
+import { makeStyles } from "@material-ui/core/styles"
+import {
+  Card,
+  CardContent,
+  CardMedia,
+  Typography,
+  Button,
+  Chip,
+} from "@material-ui/core"
+
+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",
+    },
+  },
+  cardContent: {
+    display: "flex",
+    flexDirection: "column",
+    width: "45%",
+    [theme.breakpoints.down("sm")]: {
+      width: "100%",
+    },
+  },
+  divider: {
+    flex: 1,
+  },
+  contentContainer: {
+    marginBottom: theme.spacing(8),
+  },
+  technologies: {
+    marginBottom: theme.spacing(2),
+    "& > *:not(:last-child)": {
+      marginRight: theme.spacing(1),
+    },
+    "& > *": {
+      marginBottom: theme.spacing(1),
+    },
+  },
+  buttons: {
+    "& > *:not(:last-child)": {
+      marginRight: theme.spacing(1),
+    },
+    "& > *": {
+      marginBottom: theme.spacing(1),
+    },
+  },
+  cover: {
+    width: "55%",
+    [theme.breakpoints.down("sm")]: {
+      width: "100%",
+      height: 0,
+      paddingTop: "56.25%",
+    },
+  },
+}))
+
+function Project({ reverse }) {
+  const classes = useStyles()
+  return (
+    <Card
+      className={classnames(classes.card, {
+        reverse: reverse,
+      })}
+    >
+      <CardMedia
+        image="https://material-ui.com/static/images/cards/live-from-space.jpg"
+        title="Live from space album cover"
+        className={classes.cover}
+      />
+      <CardContent className={classes.cardContent}>
+        <div className={classes.contentContainer}>
+          <Typography variant="h3" gutterBottom>
+            Projekt
+          </Typography>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
+            tincidunt ligula eu ultricies ornare. Morbi nec eleifend sapien.
+            Duis eu lorem tortor. Morbi consectetur hendrerit eros. Ut efficitur
+            laoreet placerat. Phasellus dignissim non dui ac maximus. Etiam
+            venenatis diam sed ligula consectetur viverra et vitae tortor. Donec
+            faucibus viverra nulla vitae rutrum. Nam ornare erat magna, non
+            sollicitudin justo venenatis in. Ut non metus vitae libero viverra
+            elementum. Vestibulum iaculis mi eget libero hendrerit aliquet.
+            Pellentesque nisl arcu, blandit a leo eget, semper porta mauris.
+            Suspendisse vehicula congue mauris sit amet hendrerit. Fusce et arcu
+            ligula. Fusce ut orci pharetra, consequat nibh eu, mollis augue.
+            Nulla eu mi fermentum nulla dignissim porta id in purus.
+          </Typography>
+        </div>
+        <div className={classes.divider}></div>
+        <div className={classes.technologies}>
+          <Chip label="Technologia 1" color="secondary" />
+          <Chip label="Technologia 2" color="secondary" />
+          <Chip label="Technologia 3" color="secondary" />
+        </div>
+        <div className={classes.buttons}>
+          <Button variant="contained" color="secondary">
+            Github
+          </Button>
+          <Button variant="contained" color="secondary">
+            Wersja online
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+Project.defaultProps = {
+  reverse: false,
+}
+
+export default Project

src/features/HomePage/components/Projects/Projects.js

@@ -0,0 +1,33 @@
+import React from "react"
+
+import { makeStyles } from "@material-ui/core/styles"
+import { Typography, Container } from "@material-ui/core"
+import Section, { BG_COLOR } from "@components/Section"
+import Project from "./Project"
+
+const useStyles = makeStyles(() => ({
+  section: {
+    transform: "skewY(-4deg)",
+    padding: "8rem 1.5rem",
+    "& > *": {
+      transform: "skewY(4deg)",
+    },
+  },
+}))
+
+function Projects() {
+  const classes = useStyles()
+  return (
+    <Section className={classes.section} bgColor={BG_COLOR.PRIMARY}>
+      <Container>
+        <Typography variant="h2" align="center" gutterBottom>
+          Projekty
+        </Typography>
+        <Project />
+        <Project reverse />
+      </Container>
+    </Section>
+  )
+}
+
+export default Projects