From ae7daa5588d2c24b45e9438e55c8bdc124224923 Mon Sep 17 00:00:00 2001
From: Warwick <warwick.l.e.new@gmail.com>
Date: Mon, 9 Nov 2020 17:52:21 +0000
Subject: [PATCH] added background video to main site which I need to record

---
 src/Greeting.jsx | 68 ++++++++++++++++++++++++++++++++----------------
 src/index.jsx    |  2 ++
 src/theme.js     | 20 +++++++++++---
 3 files changed, 65 insertions(+), 25 deletions(-)

diff --git a/src/Greeting.jsx b/src/Greeting.jsx
index bd0c7a0..437e610 100644
--- a/src/Greeting.jsx
+++ b/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">
-        <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>
+        <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>
+            <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>
     );
   }
 }
diff --git a/src/index.jsx b/src/index.jsx
index 395dd9f..6dd1777 100644
--- a/src/index.jsx
+++ b/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">
diff --git a/src/theme.js b/src/theme.js
index 8ed0cab..dca8218 100644
--- a/src/theme.js
+++ b/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,
   },
 });