content: import React from 'react';
  import Youtube from 'react-youtube';
  
  export default class Projects extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        projects: [
          {
            title:"Ramp",
            descript:[
              "Developed a peer to peer application in python that allows users to chat, share and send files, as well as video chat with one another through a TCP connection",
              "Implemented a SQLite database to store, maintain, and update messages and files on each peer's local computer"
            ],
            date: "Feb-May 2017"
          },
          {
            title: "Term Project",
            descript:[
              "Created a application where users were able to find buildings and food locations around the CMU campus",
              "Developed a breadth first searching algorithm to find the shortest path between locations",
              "Implemented web scraping techniques to find which locations around campus were open at the time the user accessed the program"
            ],
            date: "Nov-Dec 2015"
          },
          {
            title: "Proxy Server",
            descript:[
              "Created a proxy server in C that would handle GET requests in both HTTP/1.0 and HTTP/1.1 and forward the responses to a specified client"
            ],
            date: "Nov 2016"
          },
          {
            title: "C0 Virtual Machine",
            descript: [
              "I created a virtual machine that was able to execute C0 code (a safer version of C that is taught at Carnegie Mellon), and take care of memory and data manipulations"
            ],
            date: "Apr 2016"
          },
          {
            title: "Personal Website",
            descript:[
              "Developed a personal website using React.js and ES6 that displays my interest in web development and showcases techniques such as a parallaxing background"
            ],
            date: "Dec 2016"
          }
        ]
      };
    };
  
    render() {
      const opts = {
        height: '500',
        width: '600',
        playerVars: {
          autoplay: 1
        }
      };
  
      var Proj = [];
      Proj.push(<Youtube 
                  videoId="w4GK9CzhG8E" 
                  opts={opts}
                  onReady={this._onReady}
                />);
      Proj.push(<Youtube 
                  videoId="lIAgVkB7Yc4" 
                  opts={opts}
                  onReady={this._onReady}
                />);
      this.state.projects.forEach(function(p) {
        Proj.push(<Individual p={p} />)
      });
  
      return(
        <div className="projectContainer" id="Projects">
          <h2>Projects</h2>
          <table>
            <tbody className="Individual">
              {Proj}
            </tbody>
          </table>
        </div>
      );
    }
  
    _onReady(event) {
      event.target.pauseVideo();
    }
  }
  
  class Individual extends React.Component {
    
    constructor(props) {
      super(props);
    };
  
    render() {
      var Descript = [];
      this.props.p.descript.forEach(function(d) {
        Descript.push(<li>{d}</li>);
      });
      return(
        <div>
          <tr>
            <td className="title" colSpan={3}>{this.props.p.title}</td>
          </tr>
          <tr>
            <td colSpan={1} className="Dates">{this.props.p.date}</td>
            <td colSpan={2} className="description"><ul>{Descript}</ul></td>
          </tr>
        </div>
      );
    }
  }
  
  