dwysokinski.me/src/features/HomePage/components/Header.js

import React from "react"

import { makeStyles } from "@material-ui/core/styles"
import { Container, Typography, Button } from "@material-ui/core"
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% 80vh,0 100%)",

    height: "100%",
    display: "flex",
    justifyContent: "center",
    flexDirection: "column",
    [theme.breakpoints.down("sm")]: {
      margin: 0,
      clipPath: "none",
    },
  },
  container: {
    textAlign: "center",
    height: "100%",
    paddingBottom: theme.spacing(8),
    [theme.breakpoints.down("sm")]: {
      paddingBottom: theme.spacing(1),
    },
  },
  textContainer: {
    paddingTop: theme.spacing(12),
    paddingBottom: theme.spacing(5),
  },
}))

function Header() {
  const classes = useStyles()
  return (
    <header className={classes.header}>
      <Container className={classes.container}>
        <div>
          <div className={classes.textContainer}>
            <Typography gutterBottom variant="h1">
              Full Stack Web Developer
            </Typography>
            <Typography variant="h3">
              Tworzę aplikacje i strony internetowe.
            </Typography>
            <Typography gutterBottom variant="h3">
              Masz projekt, pomysł lub problem, który chcesz ze mną omówić?
            </Typography>
          </div>
          <Button variant="outlined" size="large">
            <Typography variant="h4">Skontaktuj się</Typography>
          </Button>
        </div>
      </Container>
    </header>
  )
}

export default Header