70 lines
2.6 KiB
JavaScript
70 lines
2.6 KiB
JavaScript
import { h, render, Component } from "preact";
|
|
import Header from "./Header";
|
|
import {
|
|
Container,
|
|
Card,
|
|
CardHeader,
|
|
CardContent,
|
|
Typography,
|
|
} from "@material-ui/core";
|
|
const rambleDemoWebm = new URL("../static/video/ramble_demo/ramble.webm", import.meta.url);
|
|
const rambleDemoMp4 = new URL("../static/video/ramble_demo/ramble.mp4", import.meta.url);
|
|
|
|
class Ramble extends Component {
|
|
render() {
|
|
return (
|
|
<span>
|
|
<Header />
|
|
<p />
|
|
<Container maxWidth="md">
|
|
<Card>
|
|
<CardHeader title="Ramble" />
|
|
<CardContent>
|
|
<Typography variant="p">
|
|
Ramble was a web project I created during my master's degree to
|
|
create a startup. In this project, I was the CTO and built a
|
|
website that allowed users to stream their podcasts live and
|
|
accept call-ins in a similar vein 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>
|
|
<p />
|
|
<Typography variant="p">
|
|
It also had chatroom functionality with the ability to
|
|
re-stream to audiences much like other apps that came out in
|
|
the time since, such as Clubhouse.
|
|
</Typography>
|
|
<p />
|
|
<Typography variant="p">
|
|
During the project's lifespan of just under two years, I mostly
|
|
worked on creating the streaming functionality of the project
|
|
and managing how the project was designed to function behind
|
|
the hood when it was deployed. I learned a ton about how web
|
|
deployment works during this time allowing me to work on web
|
|
development modules in the Games Academy at Falmouth University
|
|
today.
|
|
</Typography>
|
|
<p />
|
|
<Typography variant="p">
|
|
Here's a demo of the project I took before we moved on.
|
|
</Typography>
|
|
<p />
|
|
<div>
|
|
<video controls loop muted autoPlay={true} style={{
|
|
width: "100%",
|
|
height: "auto",
|
|
objectFit: "cover",
|
|
}}>
|
|
<source src={rambleDemoMp4} type="video/mp4" />
|
|
<source src={rambleDemoWebm} type="video/webm" />
|
|
</video>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Container>
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Ramble;
|