First version uploaded to sdf

package.json

@@ -4,18 +4,26 @@
   "description": "Portfolio Site",
   "main": "src/index.jsx",
   "scripts": {
-    "start": "parcel index.html"
+    "start": "parcel index.html",
+    "build": "parcel build index.html"
   },
   "author": "",
   "license": "BSD-2-Clause",
   "devDependencies": {
     "@babel/core": "^7.12.3",
-    "@babel/plugin-transform-react-jsx": "^7.12.1",
+    "@babel/plugin-transform-react-jsx": "^7.12.5",
+    "cssnano": "^4.1.10",
     "parcel-bundler": "^1.12.4"
   },
   "dependencies": {
     "@material-ui/core": "^4.11.0",
-    "preact": "^10.5.5"
+    "@types/react": "^16.9.56",
+    "fontsource-roboto": "^3.0.3",
+    "preact": "^10.5.5",
+    "preact-async-route": "^2.2.1",
+    "preact-router": "^3.2.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
   "skipLibCheck": true,
   "alias": {

src/Contact.jsx

@@ -0,0 +1,55 @@
+import { h, render, Component } from "preact";
+import Header from "./Header";
+import {
+  Container,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+  List,
+  ListItem,
+  ListItemText,
+  Link,
+} from "@material-ui/core";
+
+class Contact extends Component {
+  render() {
+    return (
+      <span>
+        <Header />
+        <Container maxWidth="md">
+          <p />
+
+          <Card>
+            <CardHeader title="Contact" />
+            <CardContent>
+              <ListItemText>
+                LinkedIn:{" "}
+                <Link
+                  rel="noopener"
+                  href="https://www.linkedin.com/in/warwick-new-96491a147/ "
+                >
+                  https://www.linkedin.com/in/warwick-new-96491a147/
+                </Link>
+              </ListItemText>
+              <ListItemText>
+                Email:{" "}
+                <Link rel="noopener" href="mailto:warwick.l.e.new@gmail.com">
+                  warwick.l.e.new@gmail.com
+                </Link>
+              </ListItemText>
+              <ListItemText>
+                Phone Number:{" "}
+                <Link rel="noopener" href="tel:07445728181">
+                  07445 728 181
+                </Link>
+              </ListItemText>
+            </CardContent>
+          </Card>
+        </Container>
+      </span>
+    );
+  }
+}
+
+export default Contact;

src/GameProjects.jsx

@@ -12,6 +12,7 @@ import {
   Button,
 } from "@material-ui/core";
 import Monq from "../static/images/Monq.jpg";
+import Graphics from "../static/images/Graphics.png";
 
 class GameProjects extends Component {
   constructor(props) {
@@ -34,13 +35,13 @@ levels to show that off nor create a hook to keep people interested in the game.
       {
         header: "Graphics",
         subheader: "Bsc (hons) Computing for Games - Falmouth University",
-        image: undefined,
+        image: Graphics,
-        imageAltText: "Need up to date image",
+        imageAltText: "Generated terrain",
         content: `This is where I learned how to create a graphics engine from
 scratch using OpenGL and was the project which I enjoyed the most during my
 bachelors degree. I especially enjoyed how deep I jumped into C++ to improve it's
 memory footprint returning to this project in my final year of university.`,
-        buttonText: "Need link",
+        buttonText: undefined,
         buttonLink: undefined,
       },
     ];

src/Greeting.jsx

@@ -8,7 +8,7 @@ import {
   Button,
 } from "@material-ui/core";
 import CV from "../static/cv.pdf";
-import PortfolioVideo from "../static/video/Portfolio.mp4";
+import PortfolioVideo from "../static/video/Portfolio.webm";
 
 class Greeting extends Component {
   render() {
@@ -23,8 +23,8 @@ class Greeting extends Component {
             width: "100%",
             left: "50%",
             right: "50%",
-            top: "50%",
+            top: "25%",
-            height: "100%",
+            height: "50%",
             objectFit: "cover",
             transform: "translate(-50%,-50%)",
             zIndex: "-1",
@@ -32,7 +32,7 @@ class Greeting extends Component {
           //width="100%"
           //height="315"
         >
-          <source src={PortfolioVideo} type="video/mp4" />
+          <source src={PortfolioVideo} type="video/webm" />
         </video>
         <Container maxWidth="sm">
           <p />

src/Header.jsx

@@ -1,14 +1,42 @@
 import { h, render, Component } from "preact";
-import { AppBar, Toolbar, Container, Typography } from "@material-ui/core";
+import {
+  AppBar,
+  Toolbar,
+  Container,
+  Typography,
+  Button,
+  Box,
+  Link,
+} from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
 
 class Header extends Component {
+  constructor(props) {
+    super(props);
+    this.styles = makeStyles({
+      toolbarButtons: {
+        marginLeft: "auto",
+      },
+    });
+  }
+
   render() {
+    const classes = this.styles();
     return (
       <AppBar position="sticky">
         <Toolbar>
-          <Container maxWidth="lg">
+          <Link color="inherit" href="/">
-            <Typography>Warwick New</Typography>
+            <Typography style={{ flex: 1 }}>Warwick New</Typography>
-          </Container>
+          </Link>
+          <Box />
+          <Button
+            variant="contained"
+            href="/contact"
+            color="secondary"
+            style={{ marginLeft: "auto" }}
+          >
+            Contact Me
+          </Button>
         </Toolbar>
       </AppBar>
     );

src/Home.jsx

@@ -0,0 +1,23 @@
+import { h, render, Component } from "preact";
+import { Container } from "@material-ui/core";
+import Header from "./Header";
+import Greeting from "./Greeting";
+import WebProjects from "./WebProjects";
+import GameProjects from "./GameProjects";
+
+class Home extends Component {
+  render() {
+    return (
+      <span>
+        <Header />
+        <Greeting />
+        <Container maxWidth="md">
+          <WebProjects />
+        </Container>
+        <GameProjects />
+      </span>
+    );
+  }
+}
+
+export default Home;

src/index.jsx

@@ -1,24 +1,26 @@
 import { h, render, Component } from "preact";
-import { Container, Grid, Button, Typography } from "@material-ui/core";
+import Router from "preact-router";
+import AsyncRoute from "preact-async-route";
 import { ThemeProvider } from "@material-ui/core/styles";
 import CssBaseline from "@material-ui/core/CssBaseline";
+import Home from "./Home";
 import theme from "./theme";
-import Header from "./Header";
+import "fontsource-roboto";
-import Greeting from "./Greeting";
-import WebProjects from "./WebProjects";
-import GameProjects from "./GameProjects";
 
 class App extends Component {
   render() {
     return (
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <Header />
+        <Router>
-        <Greeting />
+          <Home path="/" />
-        <Container maxWidth="md">
+          <AsyncRoute
-          <WebProjects />
+            path="/contact"
-        </Container>
+            getComponent={() =>
-        <GameProjects />
+              import("./Contact.jsx").then((module) => module.default)
+            }
+          />
+        </Router>
       </ThemeProvider>
     );
   }