Got a good amount of the most important content in the project.

This commit is contained in:
Warwick 2020-11-06 16:54:59 +00:00
commit 6f24f19897
11 changed files with 196 additions and 0 deletions

8
.babelrc Normal file
View file

@ -0,0 +1,8 @@
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "h",
"pragmaFrag": "Fragment",
}]
]
}

5
index.html Normal file
View file

@ -0,0 +1,5 @@
<html>
<body style="margin : 0">
<script src="./src/index.jsx"></script>
</body>
</html>

26
package.json Normal file
View file

@ -0,0 +1,26 @@
{
"name": "portfolio-site",
"version": "1.0.0",
"description": "Portfolio Site",
"main": "src/index.jsx",
"scripts": {
"start": "parcel index.html"
},
"author": "",
"license": "BSD-2-Clause",
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/plugin-transform-react-jsx": "^7.12.1",
"parcel-bundler": "^1.12.4"
},
"dependencies": {
"@material-ui/core": "^4.11.0",
"preact": "^10.5.5"
},
"skipLibCheck": true,
"alias": {
"react": "preact/compat",
"react-dom/test-utils": "preact/test-utils",
"react-dom": "preact/compat"
}
}

0
src/GameProjects.jsx Normal file
View file

41
src/Greeting.jsx Normal file
View file

@ -0,0 +1,41 @@
import { h, render, Component } from "preact";
import {
Container,
Card,
CardActions,
CardContent,
Typography,
Button,
} from "@material-ui/core";
import CV from "../static/cv.pdf";
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>
);
}
}
export default Greeting;

18
src/Header.jsx Normal file
View file

@ -0,0 +1,18 @@
import { h, render, Component } from "preact";
import { AppBar, Toolbar, Container, Typography } from "@material-ui/core";
class Header extends Component {
render() {
return (
<AppBar position="sticky">
<Toolbar>
<Container maxWidth="lg">
<Typography>Warwick New</Typography>
</Container>
</Toolbar>
</AppBar>
);
}
}
export default Header;

55
src/WebProjects.jsx Normal file
View file

@ -0,0 +1,55 @@
import { h, render, Component } from "preact";
import {
Container,
Card,
CardHeader,
CardMedia,
CardActions,
CardContent,
Typography,
Button,
} from "@material-ui/core";
import RambleScreenshot from "../static/images/RambleScreenshot.png";
class WebProjects extends Component {
render() {
return (
<Container>
<p />
<Typography variant="h4">Web Development Projects</Typography>
<Card>
<CardHeader
title="ramble.fm"
subheader="Ramble Media LTD - Fullstack Web Developer"
/>
<CardMedia
style={{ height: 0, paddingTop: "25%" }}
image={RambleScreenshot}
title="ramble.fm"
/>
<CardContent>
<Typography variant="body1">
In this project I acted as CTO and built a website that allowed
users to stream their podcasts live and accept call ins in a
similar vain to talk shows! I learnt the entire javascript web
development stack from react to audio streaming to devops in order
to make it a reality.
</Typography>
</CardContent>
<CardActions>
<Button target="_blank" href="http://www.ramble.fm" color="primary">
Learn More
</Button>
<Button
target="_blank"
href="http://beta.ramble.fm"
color="secondary"
>
Try it!
</Button>
</CardActions>
</Card>
</Container>
);
}
}
export default WebProjects;

29
src/index.jsx Normal file
View file

@ -0,0 +1,29 @@
import { h, render, Component } from "preact";
import { Container, Grid, Button, Typography } from "@material-ui/core";
import { ThemeProvider } from "@material-ui/core/styles";
import theme from "./theme";
import Header from "./Header";
import Greeting from "./Greeting";
import WebProjects from "./WebProjects";
class App extends Component {
render() {
return (
<ThemeProvider theme={theme}>
<Header />
<Greeting />
<Container maxWidth="md">
<WebProjects />
<Typography variant="h1"> Hi </Typography>
<Button color="primary">Hello, world!</Button>
<Typography
component="div"
style={{ backgroundColor: "#cfe8fc", height: "100vh" }}
/>
</Container>
</ThemeProvider>
);
}
}
render(<App />, document.body);

14
src/theme.js Normal file
View file

@ -0,0 +1,14 @@
import { createMuiTheme } from "@material-ui/core/styles";
import { orange, green, deepPurple } from "@material-ui/core/colors";
const theme = createMuiTheme({
palette: {
primary: green,
secondary: deepPurple,
},
status: {
danger: orange,
},
});
export default theme;

BIN
static/cv.pdf Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB