{"size": 941, "ext": "js", "max_stars_repo_path": "src/components/cloud.js", "max_stars_repo_name": "astrakho/portfolio", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/cloud.js", "max_issues_repo_name": "astrakho/portfolio", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/cloud.js", "max_forks_repo_name": "astrakho/portfolio", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 15.4262295082, "max_line_length": 41, "alphanum_fraction": 0.6068012752}
import React, { Component } from 'react';
import PropTypes from "prop-types"
import styled from 'styled-components';

const CloudWrapper = styled.div`

  width: 280px; height: 80px;
  background: #3498db;
  border-radius: 100px;
  position: relative;
  text-align: center;


  &:before,
  &:after{ 

    content: '';
    position: absolute;
    background: #3498db;
    z-index: -1;

  }

  &:after{

    width: 90px; height: 90px;
    top: -50px; left: 35px;
    border-radius: 100px;

  }

  &:before {

    width: 140px; height: 140px;
    top: -80px; right: 40px;
    border-radius: 200px;

  }

`

const CloudContent = styled.div`
  width: 80%;
  text-align: center;
  display: inline-block;
`
class Cloud extends Component {
  render() {

    return (
      <CloudWrapper>
        <CloudContent>
        { this.props.title }
        { this.props.skills }
        </CloudContent>
      </CloudWrapper>
    )
  }
}

export default Cloud;