text: import React, { Component } from 'react';
  
  class Resume extends Component {
    render() {
  
      if (this.props.data) {
        var skillmessage = this.props.data.skillmessage;
        var education = this.props.data.education.map(function (education) {
          return <div key={education.school}><h3>{education.school}</h3>
            <p className="info">{education.degree} <span>&bull;</span><em className="date">{education.graduated}</em></p>
            <p>{education.description}</p></div>
        })
        // var work = this.props.data.work.map(function(work){
        //   return <div key={work.company}><h3>{work.company}</h3>
        //       <p className="info">{work.title}<span>&bull;</span> <em className="date">{work.years}</em></p>
        //       <p>{work.description}</p>
        //   </div>
        // })
        var skills = this.props.data.skills.map(function (skills) {
          var className = 'bar-expand ' + skills.name.toLowerCase();
          return <li key={skills.name}><span style={{ width: skills.level }} className={className}></span><em>{skills.name}</em></li>
        })
      }
  
      return (
        <section id="resume">
  
          <div className="row education">
            <div className="three columns header-col">
              <h1><span>Education</span></h1>
            </div>
  
            <div className="nine columns main-col">
              <div className="row item">
                <div className="twelve columns">
                  {education}
                </div>
              </div>
            </div>
          </div>
  
  
          {/* <div className="row work">
  
            <div className="three columns header-col">
              <h1><span>Work</span></h1>
            </div>
  
            <div className="nine columns main-col">
              {work}
            </div>
          </div> */}
  
  
  
          <div className="row skill">
  
            <div className="three columns header-col">
              <h1><span>Skills</span></h1>
            </div>
  
            <div className="nine columns main-col">
  
              <p>{skillmessage}
              </p>
  
              <div className="bars">
                <ul className="skills">
                  {skills}
                </ul>
              </div>
            </div>
          </div>
        </section>
      );
    }
  }
  
  export default Resume;
  