Warwick/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added background video to main site which I need to record

Browse source
This commit is contained in:
Warwick 2020-11-09 17:52:21 +00:00
parent e2094dbb4b
commit ae7daa5588
3 changed files with 65 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/Greeting.jsx
View file

@ -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>
);
}
}

2
src/index.jsx
View file

@ -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">

20
src/theme.js
View file

@ -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,
},
});