rename Layout/Header -> Layout/Navbar, add Contact section, add Footer, add 404 page

src/components/Layout/Footer.js

@@ -0,0 +1,26 @@
+import React from "react"
+
+import { makeStyles } from "@material-ui/core/styles"
+import { Typography } from "@material-ui/core"
+import Section from "@components/Section"
+
+const useStyles = makeStyles(theme => {
+  return {
+    footer: {
+      padding: "1.5rem 0",
+    },
+  }
+})
+
+function Footer() {
+  const classes = useStyles()
+  return (
+    <Section component="footer" className={classes.footer}>
+      <Typography align="center" variant="h6">
+        © {new Date().getFullYear()} Dawid Wysokiński
+      </Typography>
+    </Section>
+  )
+}
+
+export default Footer

src/components/Layout/Layout.js

@@ -4,7 +4,8 @@ import classnames from "classnames"
 
 import { makeStyles } from "@material-ui/core/styles"
 import { CssBaseline } from "@material-ui/core"
-import Header from "./Header"
+import Navbar from "./Navbar"
+import Footer from "./Footer"
 
 const useStyles = makeStyles(theme => ({
   main: {
@@ -14,24 +15,35 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-const Layout = ({ children, className, headerProps }) => {
+const Layout = ({
+  children,
+  className,
+  navbarProps,
+  showNavbar,
+  showFooter,
+}) => {
   const classes = useStyles()
 
   return (
     <Fragment>
-      <Header {...headerProps} />
+      {showNavbar && <Navbar {...navbarProps} />}
       <main className={classnames(className, classes.main)}>{children}</main>
+      {showFooter && <Footer />}
       <CssBaseline />
     </Fragment>
   )
 }
 
 Layout.defaultProps = {
-  headerProps: {},
+  navbarProps: {},
+  showNavbar: true,
+  showFooter: true,
 }
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
+  showNavbar: PropTypes.bool.isRequired,
+  showFooter: PropTypes.bool.isRequired,
 }
 
 export default Layout

src/components/Layout/Navbar.js

@@ -52,7 +52,7 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-function Header({ className, ...rest }) {
+function Navbar({ className, ...rest }) {
   const [anchorEl, setAnchorEl] = useState(null)
   const classes = useStyles()
   const open = Boolean(anchorEl)
@@ -144,4 +144,4 @@ function Header({ className, ...rest }) {
   )
 }
 
-export default Header
+export default Navbar

src/components/Section.js

@@ -6,40 +6,58 @@ import { makeStyles } from "@material-ui/core/styles"
 
 const useStyles = makeStyles(theme => ({
   section: {
-    padding: "3rem 1.5rem",
+    padding: "3rem 0",
     "&.is-primary": {
       backgroundColor: theme.palette.primary.main,
     },
+    "&.is-black": {
+      backgroundColor: "#000",
+      color: "#fff",
+    },
     [theme.breakpoints.up("md")]: {
-      padding: "6rem 1.5rem",
+      padding: "6rem 0",
+    },
+    "&.is-small": {
+      padding: "3rem 0",
     },
   },
 }))
 
 export const BG_COLOR = {
   TRANSPARENT: "transparent",
+  BLACK: "black",
   PRIMARY: "primary",
 }
 
-function Section({ children, className, bgColor }) {
+export const SIZE = {
+  SMALL: "small",
+  MEDIUM: "medium",
+}
+
+function Section({ children, className, bgColor, component, size }) {
   const classes = useStyles()
+  const Component = component || "section"
   return (
-    <section
+    <Component
       className={classnames(classes.section, className, {
         "is-primary": bgColor === BG_COLOR.PRIMARY,
+        "is-black": bgColor === BG_COLOR.BLACK,
+        "is-small": size === SIZE.SMALL,
       })}
     >
       {children}
-    </section>
+    </Component>
   )
 }
 
 Section.defaultProps = {
   bgColor: BG_COLOR.TRANSPARENT,
+  size: SIZE.MEDIUM,
 }
 
 Section.propTypes = {
   bgColor: PropTypes.oneOf(Object.values(BG_COLOR)).isRequired,
+  size: PropTypes.oneOf(Object.values(SIZE)).isRequired,
 }
 
 export default Section

src/features/HomePage/HomePage.js

@@ -8,6 +8,7 @@ import Header from "./components/Header"
 import AboutMe from "./components/AboutMe"
 import Technologies from "./components/Technologies/Technologies"
 import Projects from "./components/Projects/Projects"
+import Contact from "./components/Contact"
 
 const useStyles = makeStyles(theme => ({
   layout: {
@@ -18,13 +19,15 @@ const useStyles = makeStyles(theme => ({
 const HomePage = ({ location }) => {
   const classes = useStyles()
   return (
-    <Layout className={classes.layout} headerProps={{ position: "absolute" }}>
+    <Layout className={classes.layout} navbarProps={{ position: "absolute" }}>
       <SEO title="Strona główna" pathname={location.pathname} />
       <Header />
       <AboutMe />
       <Divider />
       <Technologies />
       <Projects />
+      <Contact />
+      <Divider />
     </Layout>
   )
 }

src/features/HomePage/components/Contact.js

@@ -0,0 +1,80 @@
+import React from "react"
+
+import { makeStyles } from "@material-ui/core/styles"
+import { Typography, Container, Link, Grid } from "@material-ui/core"
+import {
+  Email as EmailIcon,
+  GitHub as GitHubIcon,
+  Facebook as FacebookIcon,
+} from "@material-ui/icons"
+import Section from "@components/Section"
+
+const useStyles = makeStyles(theme => {
+  return {
+    container: {
+      textAlign: "center",
+    },
+    typography: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      wordBreak: "break-all",
+      "& > *:not(:last-child)": {
+        marginRight: theme.spacing(1),
+      },
+    },
+    contactUrls: {
+      "& > *:not(:last-child)": {
+        marginBottom: theme.spacing(0.5),
+      },
+    },
+  }
+})
+
+function Contact() {
+  const classes = useStyles()
+
+  const linkProps = {
+    underline: "hover",
+    color: "secondary",
+  }
+
+  return (
+    <Section size="small">
+      <Container maxWidth="md" className={classes.container}>
+        <Grid container alignItems="center" spacing={1}>
+          <Grid item xs={12} sm={5}>
+            <Typography variant="h2">Kontakt</Typography>
+          </Grid>
+          <Grid item xs={12} sm={7}>
+            <div className={classes.contactUrls}>
+              <Typography className={classes.typography} variant="h6">
+                <EmailIcon fontSize="large" />
+                <Link href="mailto:dawidwysokinski000@gmail.com" {...linkProps}>
+                  dawidwysokinski000@gmail.com
+                </Link>
+              </Typography>
+              <Typography className={classes.typography} variant="h6">
+                <GitHubIcon fontSize="large" />
+                <Link href="https://github.com/Kichiyaki" {...linkProps}>
+                  Kichiyaki
+                </Link>
+              </Typography>
+              <Typography className={classes.typography} variant="h6">
+                <FacebookIcon fontSize="large" />
+                <Link
+                  href="https://www.facebook.com/dawidwysokinski00"
+                  {...linkProps}
+                >
+                  /dawidwysokinski00
+                </Link>
+              </Typography>
+            </div>
+          </Grid>
+        </Grid>
+      </Container>
+    </Section>
+  )
+}
+
+export default Contact

src/features/HomePage/components/Header.js

@@ -10,13 +10,13 @@ const useStyles = makeStyles(theme => ({
     backgroundImage: `url(${bg})`,
     backgroundSize: "cover",
     backgroundPosition: "center",
-    clipPath: "polygon(0 0,100% 0,100% 88%,0 100%)",
+    clipPath: "polygon(0 0,100% 0,100% 80vh,0 100%)",
 
     height: "100%",
     display: "flex",
     justifyContent: "center",
     flexDirection: "column",
-    [theme.breakpoints.down("xs")]: {
+    [theme.breakpoints.down("sm")]: {
       margin: 0,
       clipPath: "none",
     },
@@ -25,9 +25,12 @@ const useStyles = makeStyles(theme => ({
     textAlign: "center",
     height: "100%",
     paddingBottom: theme.spacing(8),
+    [theme.breakpoints.down("sm")]: {
+      paddingBottom: theme.spacing(1),
+    },
   },
   textContainer: {
-    paddingTop: theme.spacing(10),
+    paddingTop: theme.spacing(12),
     paddingBottom: theme.spacing(5),
   },
 }))

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

@@ -1,5 +1,7 @@
 import React from "react"
+import PropTypes from "prop-types"
 import classnames from "classnames"
+import noImage from "./noImage.jpg"
 
 import { makeStyles } from "@material-ui/core/styles"
 import {
@@ -64,13 +66,20 @@ const useStyles = makeStyles(theme => ({
     width: "55%",
     [theme.breakpoints.down("sm")]: {
       width: "100%",
-      height: 0,
       paddingTop: "56.25%",
     },
   },
 }))
 
-function Project({ reverse, title, description, technologies, github, live }) {
+function Project({
+  reverse,
+  title,
+  description,
+  technologies,
+  github,
+  live,
+  img,
+}) {
   const classes = useStyles()
   return (
     <Card
@@ -78,11 +87,7 @@ function Project({ reverse, title, description, technologies, github, live }) {
         reverse,
       })}
     >
-      <CardMedia
-        image="https://material-ui.com/static/images/cards/live-from-space.jpg"
-        title="Live from space album cover"
-        className={classes.cover}
-      />
+      <CardMedia image={img} title={title} className={classes.cover} />
       <CardContent className={classes.cardContent}>
         <div className={classes.contentContainer}>
           <Typography variant="h3" gutterBottom>
@@ -121,6 +126,22 @@ function Project({ reverse, title, description, technologies, github, live }) {
 
 Project.defaultProps = {
   reverse: false,
+  title: "",
+  description: "",
+  technologies: [],
+  github: "",
+  live: "",
+  img: noImage,
+}
+
+Project.propTypes = {
+  reverse: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  technologies: PropTypes.arrayOf(PropTypes.string).isRequired,
+  github: PropTypes.string.isRequired,
+  live: PropTypes.string.isRequired,
+  img: PropTypes.string.isRequired,
 }
 
 export default Project

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

@@ -7,10 +7,14 @@ import Project from "./Project"
 
 const useStyles = makeStyles(theme => ({
   section: {
-    transform: "skewY(-4deg)",
-    padding: "8rem 1.5rem",
+    transform: "skewY(-7deg)",
+    padding: "8rem 0",
+    margin: "6rem 0",
     "& > *": {
-      transform: "skewY(4deg)",
+      transform: "skewY(7deg)",
+    },
+    [theme.breakpoints.down("sm")]: {
+      margin: "3rem 0",
     },
   },
   projects: {

src/pages/404.js

@@ -1,14 +1,50 @@
 import React from "react"
 
+import { makeStyles } from "@material-ui/core/styles"
+import { Container, Typography } from "@material-ui/core"
+import { Link } from "gatsby-theme-material-ui"
 import Layout from "@components/Layout/Layout"
 import SEO from "@components/SEO"
 
-const NotFoundPage = () => (
-  <Layout>
-    <SEO title="404: Not found" />
-    <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-  </Layout>
-)
+const useStyles = makeStyles(() => ({
+  container: {
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    textAlign: "center",
+  },
+  layout: {
+    padding: "0",
+  },
+}))
+
+const NotFoundPage = ({ location }) => {
+  const classes = useStyles()
+
+  return (
+    <Layout className={classes.layout} showHeader={false} showFooter={false}>
+      <SEO
+        title="Strona nie została znaleziona"
+        description="Strona nie została znaleziona"
+        pathname={location.pathname}
+      />
+      <Container className={classes.container}>
+        <Typography gutterBottom variant="h1">
+          Strona nie została znaleziona
+        </Typography>
+        <Typography gutterBottom variant="h4">
+          Wygląda na to, że kliknąłeś niedziałający link lub wprowadziłeś adres
+          URL, który nie istnieje.
+        </Typography>
+        <Typography variant="h4">
+          <Link color="secondary" to="/">
+            Wróć na stronę główną.
+          </Link>
+        </Typography>
+      </Container>
+    </Layout>
+  )
+}
 
 export default NotFoundPage