added background video to main site which I need to record

src/Greeting.jsx

@@ -8,32 +8,56 @@ 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 (
-      <Container maxWidth="sm">
+      <div>
-        <p />
+        <video
-        <Card>
+          autoPlay
-          <CardContent>
+          muted
-            <Typography variant="h1">Welcome</Typography>
+          loop
-            <Typography variant="body1">
+          style={{
-              Hi, My name is Warwick and I'm a Fullstack Web Developer with an
+            position: "absolute",
-              academeic background in Computing for Games and Entrepreneurship.
+            width: "100%",
-            </Typography>
+            left: "50%",
-            <Typography variant="subtitle1">Availability</Typography>
+            right: "50%",
-            <Typography variant="body2">
+            top: "50%",
-              I'm currently looking for work if you think my skills may be
+            height: "100%",
-              relevant to you. My CV and previous projects can be found below.
+            objectFit: "cover",
-            </Typography>
+            transform: "translate(-50%,-50%)",
-          </CardContent>
+            zIndex: "-1",
-          <CardActions>
+          }}
-            <Button href={CV} color="secondary">
+          //width="100%"
-              My Corriculum Vitae
+          //height="315"
-            </Button>
+        >
-          </CardActions>
+          <source src={PortfolioVideo} type="video/mp4" />
-        </Card>
+        </video>
-      </Container>
+        <Container maxWidth="sm">
+          <p />
+          <Card>
+            <CardContent>
+              <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.
+              </Typography>
+              <Typography variant="subtitle1">Availability</Typography>
+              <Typography variant="body2">
+                I'm currently looking for work if you think my skills may be
+                relevant to you. My CV and previous projects can be found below.
+              </Typography>
+            </CardContent>
+            <CardActions>
+              <Button href={CV} color="secondary">
+                My Corriculum Vitae
+              </Button>
+            </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,
   },
 });