added background video to main site which I need to record

src/Greeting.jsx

@@ -8,10 +8,32 @@ import {
   Button,
 } from "@material-ui/core";
 import CV from "../static/cv.pdf";
+import PortfolioVideo from "../static/video/Portfolio.mp4";
 
 class Greeting extends Component {
   render() {
     return (
+      <div>
+        <video
+          autoPlay
+          muted
+          loop
+          style={{
+            position: "absolute",
+            width: "100%",
+            left: "50%",
+            right: "50%",
+            top: "50%",
+            height: "100%",
+            objectFit: "cover",
+            transform: "translate(-50%,-50%)",
+            zIndex: "-1",
+          }}
+          //width="100%"
+          //height="315"
+        >
+          <source src={PortfolioVideo} type="video/mp4" />
+        </video>
         <Container maxWidth="sm">
           <p />
           <Card>
@@ -19,7 +41,8 @@ class Greeting extends Component {
               <Typography variant="h1">Welcome</Typography>
               <Typography variant="body1">
                 Hi, My name is Warwick and I'm a Fullstack Web Developer with an
-              academeic background in Computing for Games and Entrepreneurship.
+                academeic background in Computing for Games and
+                Entrepreneurship.
               </Typography>
               <Typography variant="subtitle1">Availability</Typography>
               <Typography variant="body2">
@@ -34,6 +57,7 @@ class Greeting extends Component {
             </CardActions>
           </Card>
         </Container>
+      </div>
     );
   }
 }

src/index.jsx

@@ -1,6 +1,7 @@
 import { h, render, Component } from "preact";
 import { Container, Grid, Button, Typography } from "@material-ui/core";
 import { ThemeProvider } from "@material-ui/core/styles";
+import CssBaseline from "@material-ui/core/CssBaseline";
 import theme from "./theme";
 import Header from "./Header";
 import Greeting from "./Greeting";
@@ -11,6 +12,7 @@ class App extends Component {
   render() {
     return (
       <ThemeProvider theme={theme}>
+        <CssBaseline />
         <Header />
         <Greeting />
         <Container maxWidth="md">

src/theme.js

@@ -1,13 +1,27 @@
 import { createMuiTheme } from "@material-ui/core/styles";
-import { orange, green, deepPurple } from "@material-ui/core/colors";
+
+const bg_0h = { main: "#1d2021", contrastText: "#282828" };
+const bg = { main: "#282828", contrastText: "#282828" };
+const red = { main: "#fb4934", contrastText: "#282828" };
+const green = { main: "#b8bb26", contrastText: "#282828" };
+const yellow = { main: "#fabd2f", contrastText: "#282828" };
+const blue = { main: "#83a598", contrastText: "#282828" };
+const purple = { main: "#d3869b", contrastText: "#282828" };
+const aqua = { main: "#8ec07c", contrastText: "#282828" };
+const gray = { main: "#a89984", contrastText: "#282828" };
+const orange = { main: "#8ec07c", contrastText: "#282828" };
+const fg = { main: "#ebdbb2", contrastText: "#282828" };
 
 const theme = createMuiTheme({
   palette: {
+    type: "dark",
     primary: green,
-    secondary: deepPurple,
+    secondary: aqua,
+    text: { primary: fg.main, sencondary: gray.main },
+    background: { default: bg_0h.main, paper: bg.main },
   },
   status: {
-    danger: orange,
+    danger: red,
   },
 });