text: import React from "react";
  import { makeStyles } from "@material-ui/core/styles";
  import Typography from "@material-ui/core/Typography";
  import Box from "@material-ui/core/Box";
  
  const useStyles = makeStyles((theme) => ({
    mainContainer: {
      background: "#233",
    },
    timeLine: {
      position: "relative",
      padding: "1rem",
      margin: "o auto",
      "&:before": {
        content: "''",
        position: "absolute",
        height: "100%",
        border: "1px solid tan",
        right: "40px",
        top: 0,
      },
      "&:after": {
        content: "''",
        display: "table",
        clear: "both",
      },
      [theme.breakpoints.up("md")]: {
        padding: "2rem",
        "&:before": {
          left: "calc(50% - 1px)",
          right: "auto",
        },
      },
    },
    timeLineItem: {
      padding: "1rem",
      borderBottom: "2px solid tan",
      position: "relative",
      margin: "1rem 3rem 1rem 1rem",
      clear: "both",
      "&:after": {
        content: "''",
        position: "absolute",
      },
      "&:before": {
        content: "''",
        position: "absolute",
        right: "-0.625rem",
        top: "calc(50% - 5px)",
        borderStyle: "solid",
        borderColor: "tomato tomato transparent transparent",
        borderWidth: "0.625rem",
        transform: "rotate(45deg)",
      },
      [theme.breakpoints.up("md")]: {
        width: "44%",
        margin: "1rem",
        "&:nth-of-type(2n)": {
          float: "right",
          margin: "1rem",
          borderColor: "tan",
        },
        "&:nth-of-type(2n):before": {
          right: "auto",
          left: "-0.625rem",
          borderColor: "transparent transparent tomato tomato",
        },
      },
    },
    timeLineYear: {
      textAlign: "center",
      maxWidth: "9.375rem",
      margin: "0 3rem 0 auto",
      fontSize: "1.8rem",
      color: "#fff",
      background: "tomato",
      lineHeight: 1,
      padding: "0.5rem 1rem",
      "&:before": {
        display: "none",
      },
      [theme.breakpoints.up("md")]: {
        textAlign: "center",
        margin: "0 auto",
        "&:nth-of-type(2n)": {
          float: "none",
          margin: "0 auto",
        },
        "&:nth-of-type(2n):before": {
          display: "none",
        },
      },
    },
    heading: {
      color: "tomato",
      padding: "3rem 0",
      textTransform: "uppercase",
    },
    subHeading: {
      color: "#fff",
      padding: 0,
      textTransform: "uppercase",
    },
    body1: {
      color: "tomato",
    },
    subtitle1: {
      color: "tan",
    },
  }));
  
  const Resume = () => {
    const classes = useStyles();
    return (
      <Box component="header" className={classes.mainContainer}>
        <Typography variant="h4" align="center" className={classes.heading}>
          About Me
        </Typography>
        <Typography
          variant="subtitle1"
          align="center"
          className={classes.subtitle1}
        >
        My name is Andrés Wellmann and i'm a 22 years old guy from Guatemala.  Now i'm a systems engineer student currently
        in fourth year / 8th semester. 
        </Typography>
        <Box component="div" className={classes.timeLine}>
          <Typography
            variant="h2"
            className={`${classes.timeLineYear} ${classes.timeLineItem}`}
          >
            2020
          </Typography>
          <Box component="div" className={classes.timeLineItem}>
            <Typography
              variant="h5"
              align="center"
              className={classes.subHeading}
            >
              Web design
            </Typography>
            <Typography variant="body1" align="center" className={classes.body1}>
              Learn React with hooks
            </Typography>
            <Typography
              variant="subtitle1"
              align="center"
              className={classes.subtitle1}
            >
              During the past year while I was learning about react with hooks, 
              I also created small projects in which to put what I learned into practice.
            </Typography>
          </Box>
          <Typography
            variant="h2"
            className={`${classes.timeLineYear} ${classes.timeLineItem}`}
          >
            2021
          </Typography>
          <Box component="div" className={classes.timeLineItem}>
            <Typography
              variant="h5"
              align="center"
              className={classes.subHeading}
            >
              Learning more React
            </Typography>
            <Typography variant="body1" align="center" className={classes.body1}>
              Implement Redux, MaterialUI, etc...
            </Typography>
            <Typography
              variant="subtitle1"
              align="center"
              className={classes.subtitle1}
            >
              Now i'm working with the most popular technologies for React like Redux for the control of the state or MaterialUI for the desgin.
            </Typography>
          </Box>
          <Typography
            variant="h2"
            className={`${classes.timeLineYear} ${classes.timeLineItem}`}
          >
            2021
          </Typography>
          <Box component="div" className={classes.timeLineItem}>
            <Typography
              variant="h5"
              align="center"
              className={classes.subHeading}
            >
              Databases
            </Typography>
            <Typography variant="body1" align="center" className={classes.body1}>
              SQL AND NO-SQL
            </Typography>
            <Typography
              variant="subtitle1"
              align="center"
              className={classes.subtitle1}
            >
              In the university i work with SQL, but i create personal projects with No-sql like Firestore and mongoDB.  
            </Typography>
          </Box>
        </Box>
      </Box>
    );
  };
  
  export default Resume;
  