import { h, render, Component } from "preact";
import {
  Container,
  Paper,
  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 />
        <Card>
          <CardHeader title="Web Development Projects" />
        </Card>
        <p />
        <Card>
          <CardHeader
            title="ramble.fm"
            subheader="Ramble Media LTD - Fullstack Web Developer: ReactJS,
            NodeJS, Janus Media Server, Docker..."
          />
          <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 href="/ramble" color="primary">
              Learn More
            </Button>
          </CardActions>
        </Card>
      </Container>
    );
  }
}
export default WebProjects;