Skip to content

Commit bf08c6b

Browse files
dvidsilvadvidsilva
authored
Merge pull request #116 from corgicode/feature/114-team-member
create team member component and integrate into about container
2 parents 84fe6b0 + 6c1a740 commit bf08c6b

File tree

2 files changed

+86
-67
lines changed

2 files changed

+86
-67
lines changed

‎src/components/about/TeamMember.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
export class TeamMember extends Component {
5+
static propTypes = {
6+
title: PropTypes.string.isRequired,
7+
description: PropTypes.string.isRequired,
8+
name: PropTypes.string,
9+
image: PropTypes.string,
10+
links: PropTypes.arrayOf(
11+
PropTypes.shape({
12+
href: PropTypes.string.isRequired,
13+
className: PropTypes.string.isRequired,
14+
}),
15+
),
16+
}
17+
static defaultProps = {
18+
links: [],
19+
}
20+
21+
render() {
22+
return (
23+
<figure className="member">
24+
<div className="icon-overlay icn-link">
25+
<a><img src={this.props.image} className="img-circle"/></a>
26+
</div>
27+
<figcaption>
28+
<h2>
29+
{this.props.name}
30+
<span>{this.props.title}</span>
31+
</h2>
32+
<p>
33+
{this.props.description}
34+
</p>
35+
<ul className="social">
36+
{this.props.links.map((l, key) => (
37+
<li key={ key }>
38+
<a href={l.href} target="_blank">
39+
<i className={l.className}/>
40+
</a>
41+
</li>
42+
))}
43+
</ul>
44+
</figcaption>
45+
</figure>
46+
);
47+
}
48+
}
49+
50+
export default TeamMember;

‎src/containers/about/index.js

Lines changed: 36 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import davidImg from '../../assets/images/team/david.png';
88
import corgiImg from '../../assets/images/team/corginson.png';
99
import sydneyImg from '../../assets/images/team/sydney.png';
1010
import { Helmet } from 'react-helmet';
11+
import TeamMember from '../../components/about/TeamMember';
1112

1213
class About extends React.Component {
1314
render() {
@@ -89,81 +90,49 @@ class About extends React.Component {
8990
</div>
9091
<div className="row inner-top-sm text-center">
9192
<div className="col-sm-6 inner-bottom-sm ">
92-
<figure className="member">
93-
<div className="icon-overlay icn-link">
94-
<a><img src={sydneyImg} className="img-circle"/></a>
95-
</div>
96-
<figcaption>
97-
<h2>
98-
Sydney Lai
99-
<span>CEO</span>
100-
</h2>
101-
<p>
102-
Startup growth mentor, award-winning background in sales and business
103-
development @Techstars, @US Dept of Commerce, LGBT Technology Leader by
104-
The White House, Office of Science and Technology Policy, TEDx Speaker.
105-
</p>
106-
<ul className="social">
107-
<li><a href="https://twitter.com/sydneylai" target="_blank"><i className="icon-s-twitter"/></a></li>
108-
</ul>
109-
</figcaption>
110-
</figure>
93+
<TeamMember
94+
name="Sydney Lai"
95+
title="CEO"
96+
description="Startup growth mentor, award-winning background in sales and business
97+
development @Techstars, @US Dept of Commerce, LGBT Technology Leader by
98+
The White House, Office of Science and Technology Policy, TEDx Speaker."
99+
image={sydneyImg}
100+
links={[{href: 'https://twitter.com/sydneylai', className: 'mg-circle'}]}
101+
/>
111102
</div>
112103
<div className="col-sm-6 inner-bottom-sm ">
113-
<figure className="member">
114-
<div className="icon-overlay icn-link">
115-
<a><img src={davidImg} className="img-circle"/></a>
116-
</div>
117-
<figcaption>
118-
<h2>
119-
David Silva
120-
<span>CTO</span>
121-
</h2>
122-
<p>10+ years of programming experience, Angular speaker,
123-
Developer Bootcamp founder, @ Diamond, Techqueria,
124-
Doctor on Demand, AngelHack, 40 Under 40: Tech Diversity – Silicon Valley.
125-
</p>
126-
<ul className="social">
127-
<li><a href="https://twitter.com/dvidsilva" target="_blank"><i className="icon-s-twitter"/></a></li>
128-
</ul>
129-
</figcaption>
130-
</figure>
104+
<div className="icon-overlay icn-link">
105+
<TeamMember
106+
name="David Silva"
107+
title="CTO"
108+
description="10+ years of programming experience, Angular speaker,
109+
Developer Bootcamp founder, @ Diamond, Techqueria,
110+
Doctor on Demand, AngelHack, 40 Under 40: Tech Diversity – Silicon Valley."
111+
image={davidImg}
112+
links={[{href: 'https://twitter.com/dvidsilva', className: 'con-s-twitter'}]}
113+
/>
114+
</div>
131115
</div>
132116
</div>
133117
<div className="row inner-top-sm text-center">
134118
<div className="col-sm-6 inner-bottom-sm ">
135-
<figure className="member">
136-
<div className="icon-overlay icn-link">
137-
<a><img src={tereImg} className="img-circle" /></a>
138-
</div>
139-
<figcaption>
140-
<h2>
141-
Tere Gallarreta
142-
<span>Web Developer</span>
143-
</h2>
144-
<p>Web Developer who values building bridges between cultures and people, creating beautiful and meaningful things, and connecting people to resources that enrich their lives.</p>
145-
<ul className="social">
146-
<li><a href="https://www.linkedin.com/in/tere-gallarreta/" target="_blank"><i className="icon-linkedin"/></a></li>
147-
</ul>
148-
</figcaption>
149-
</figure>
119+
<TeamMember
120+
name="Tere Gallarreta"
121+
title="Web Developer"
122+
description="Web Developer who values building bridges between cultures and people, creating beautiful and meaningful things, and connecting people to resources that enrich their lives."
123+
image={tereImg}
124+
links={[{href: 'https://www.linkedin.com/in/tere-gallarreta/', className: 'icon-linkedin'}]}
125+
/>
150126
</div>
151127
<div className="col-sm-6 inner-bottom-sm ">
152-
<figure className="member">
153-
<div className="icon-overlay icn-link">
154-
<a><img src={corgiImg} className="img-circle" /></a>
155-
</div>
156-
<figcaption>
157-
<h2>
158-
Corginson
159-
<span>Chief Happiness Officer</span>
160-
</h2>
161-
<p/>
162-
<ul className="social">
163-
<li><a href="https://twitter.com/codecorgi" target="_blank"><i className="icon-s-twitter"/></a></li>
164-
</ul>
165-
</figcaption>
166-
</figure>
128+
<div className="icon-overlay icn-link">
129+
<TeamMember
130+
name="Corginson"
131+
title="Chief Happiness Officer"
132+
image={corgiImg}
133+
links={[{href: 'https://twitter.com/codecorgi', className: 'icon-s-twitter'}]}
134+
/>
135+
</div>
167136
</div>
168137
</div>
169138
</div>

0 commit comments

Comments
 (0)