Got a good amount of the most important content in the project.
This commit is contained in:
commit
6f24f19897
11 changed files with 196 additions and 0 deletions
8
.babelrc
Normal file
8
.babelrc
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"plugins": [
|
||||||
|
["@babel/plugin-transform-react-jsx", {
|
||||||
|
"pragma": "h",
|
||||||
|
"pragmaFrag": "Fragment",
|
||||||
|
}]
|
||||||
|
]
|
||||||
|
}
|
||||||
5
index.html
Normal file
5
index.html
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<html>
|
||||||
|
<body style="margin : 0">
|
||||||
|
<script src="./src/index.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
package.json
Normal file
26
package.json
Normal 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
0
src/GameProjects.jsx
Normal file
41
src/Greeting.jsx
Normal file
41
src/Greeting.jsx
Normal 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
18
src/Header.jsx
Normal 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
55
src/WebProjects.jsx
Normal 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
29
src/index.jsx
Normal 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
14
src/theme.js
Normal 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
BIN
static/cv.pdf
Normal file
Binary file not shown.
BIN
static/images/RambleScreenshot.png
Normal file
BIN
static/images/RambleScreenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Loading…
Reference in a new issue