{"size": 5035, "ext": "js", "max_stars_repo_path": "client/src/components/Portfolio/Projects.js", "max_stars_repo_name": "alisong779/a_golden_portfolio", "max_stars_repo_stars_event_min_datetime": "2019-09-24T23:34:03.000Z", "max_stars_repo_stars_event_max_datetime": "2019-09-24T23:34:03.000Z", "max_issues_repo_path": "client/src/components/Portfolio/Projects.js", "max_issues_repo_name": "alisong779/a_golden_portfolio", "max_issues_repo_issues_event_min_datetime": "2019-09-23T02:50:23.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-30T23:47:33.000Z", "max_forks_repo_path": "client/src/components/Portfolio/Projects.js", "max_forks_repo_name": "alisong779/a_golden_portfolio", "max_forks_repo_forks_event_min_datetime": "2020-06-04T23:23:58.000Z", "max_forks_repo_forks_event_max_datetime": "2020-06-04T23:23:58.000Z"}
{"max_stars_count": 1, "max_issues_count": 9, "max_forks_count": 1, "avg_line_length": 40.6048387097, "max_line_length": 254, "alphanum_fraction": 0.575571003}
import React, { Component } from 'react'
import GoalsContainer from '../../containers/GoalsContainer'
import { Tabs, Tab, Grid, Cell, Card, CardText, CardTitle, CardActions, Button } from 'react-mdl'


class Projects extends Component {
  constructor(props){
    super(props)
    this.state = {
      activeTab: 0
    }
  }

  toggleCategories(){
    if(this.state.activeTab === 0){
      return(
        <div >
          <GoalsContainer />
        </div>
      )
    }else if(this.state.activeTab === 1){
      return (
        <div className="projects-grid">
          <Card shadow={0} style={{width: '512px', margin: 'auto'}}>
            <CardTitle style={{color: '#fff', height: '176px', background: 'url(https://uploads.toptal.io/blog/image/125783/toptal-blog-image-1522333595770-14ba14a2f6099482fa9189f8764dd5ad.png) center / cover'}}>JavaScript Project 1</CardTitle>
              <CardText >
                Rails Recipe Keeper app that renders async JavaScript comments section.
              </CardText>
            <CardActions border>
              <Button href="https://github.com/alisong779/golden-recipes-2" colored target="_blank">Github</Button>
            </CardActions>
          </Card>

          <Card shadow={0} style={{width: '512px', margin: 'auto'}}>
            <CardTitle style={{color: '#fff', height: '176px', background: 'url(https://uploads.toptal.io/blog/image/125783/toptal-blog-image-1522333595770-14ba14a2f6099482fa9189f8764dd5ad.png) center / cover'}}>JavaScript Project 2</CardTitle>
              <CardText >
                New JavaScript project
              </CardText>
            <CardActions border>
              <Button href="" colored target="_blank">Github</Button>
            </CardActions>
          </Card>
        </div>
      )
    }else if(this.state.activeTab === 2){
      return (
        <div className="projects-grid">
          <Card shadow={0} style={{width: '512px', margin: 'auto'}}>
            <CardTitle style={{color: '#fff', height: '176px', background: 'url(https://community-cdn-digitalocean-com.global.ssl.fastly.net/assets/tutorials/images/large/ruby-on-rails.jpg?1565909621) center / cover'}}>Ruby on Rails Project 1</CardTitle>
              <CardText>
                Rails Recipe Keeper App. User can create accounts, store recipes and view other users recipes.
              </CardText>
            <CardActions border>
              <Button href="https://github.com/alisong779/golden_recipes" colored target="_blank" >Github</Button>
            </CardActions>
          </Card>

          <Card shadow={0} style={{width: '512px', margin: 'auto'}}>
            <CardTitle style={{color: '#fff', height: '176px', background: 'url(https://community-cdn-digitalocean-com.global.ssl.fastly.net/assets/tutorials/images/large/ruby-on-rails.jpg?1565909621) center / cover'}}>Ruby on Rails Project 2</CardTitle>
              <CardText>
                New Rails application
              </CardText>
            <CardActions border>
              <Button href="" colored target="_blank" >Github</Button>
            </CardActions>
          </Card>
        </div>
      )
    }else if(this.state.activeTab === 3){
      return (
        <div className="projects-grid">
          <Card shadow={0} style={{width: '512px', margin: 'auto'}}>
            <CardTitle style={{color: '#fff', height: '176px', background: 'url(http://www.getmdl.io/assets/demos/welcome_card.jpg) center / cover'}}>PHP Projects</CardTitle>
              <CardText>
                PHP Projects to come......
              </CardText>
            <CardActions border>
              <Button colored target="_blank">Github</Button>
            </CardActions>
          </Card>
        </div>
      )
    }else if(this.state.activeTab === 4){
      return(
        <div className="projects-grid">
          <Card shadow={0} style={{width: '512px', margin: 'auto'}}>
            <CardTitle style={{color: '#fff', height: '176px', background: 'url(https://i.udemycdn.com/course/750x422/792484_cc98_3.jpg) center / cover'}}>HTML/CSS Projects</CardTitle>
              <CardText>
                A fully responsive Portfolio website using HTML 5, CSS 3, Sass, and Javascript
              </CardText>
            <CardActions border>
              <Button href="https://github.com/alisong779/Resposive-Portfolio-Website" colored target="_blank">Github</Button>
            </CardActions>
          </Card>
        </div>
      )
    }
  }

  render () {
    return(
      <div className="category-tabs">
        <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId})} ripple>
          <Tab>React / Redux</Tab>
          <Tab>JavaScript</Tab>
          <Tab>Ruby on Rails</Tab>
          <Tab>PHP</Tab>
          <Tab>HTML/CSS</Tab>
        </Tabs>

        <Grid>
          <Cell col={12}>
            <div className="content"></div>
          </Cell>
        </Grid>
        {this.toggleCategories()}
      </div>
    )
  }
}


export default Projects
