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;
