chrt00.github.io/react1.js at master · chrt00/chrt00.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/** @jsx React.DOM */

var SkillsBox = React.createClass({
  render: function(){
    return(
      <div id="skillsBox" className="container-fluid jumbotron">
      <h3>Skills</h3>
      <SkillSection data={data.content.Skills} />
      </div>
    )
  }
});
var SkillSection = React.createClass({
  render: function(){
    var skillNodes = Object.keys(this.props.data).map(function(skillCategory) {
      var skillItems = data.content.Skills[skillCategory].map(function(skillItem){
        return(
          <li>{skillItem}</li>
        );
      });
      return (
        <div className='col-xs-6'>
          <h4>{skillCategory}</h4>
          <ul>{skillItems}</ul>
        </div>
      );
    });
    return(
      <div className='row-fluid'>
        {skillNodes}

      </div>

    )
  }
});


var EducationBox = React.createClass({
  render: function(){
    var array = data.content['Education'].map(function(item){
       var courseworks= item['coursework'].map(function(coursework){
         return(
           <li>{coursework}</li>
         );
       });
       return(
         <div key={item['institution']+item['graduation date']}>
           <h4>{item['Institution']}. {item['graduation date']}</h4>
           <h4>{item['degree']}</h4>
           <h5>Coursework:</h5>
           <ul className="list-inline">{courseworks}</ul>
         </div>
       )
    });
    return(
      <div id="educationBox" className="jumbotron">
      <h3>Education</h3>
      {array}
      </div>
    );
  }
});

var EmploymentBox = React.createClass({
  render: function(){
    var array = data.content['Employment'].map(function(job, index){
       var list = job.summary.map(function(item){
         return(
           <li key={item}>{item}</li>
         )
       });
       return(
       <div key={job.company+job.title} className='employment'>
         <div className='row'>
           <div className='col-xs-6'>
             <ul className='list-unstyled'>
             <li><strong>{job.company}</strong></li>
             <li><a href={job.website}>{job.website}</a></li>
             <li>{job.title}</li>
             </ul>
         </div>
           <div className='col-xs-6 text-right'><h5>{job.period}</h5></div>
         </div>

         <ul>{list}</ul>
       </div>
       );
    });
    return(
      <div id="employmentBox" className="jumbotron">
      <h3>Employment</h3>
      {array}
      </div>
    );
  }
});
var Content = React.createClass({
  render: function(){
    return(
    <div>
      <a className="anchor" id="skillsAnchor" />
      <SkillsBox data = {data} />
      <a className="anchor" id="educationAnchor" />
      <EducationBox data = {data} />
      <a className="anchor" id="employmentAnchor" />
      <EmploymentBox data = {data} />
    </div>
    )
  }
});
React.renderComponent(
  <Content data={data} />,
  document.getElementById('content')
);