Skip to content

Commit 52932c8

Browse files
authored
Merge pull request #15 from jinyingtan/About
Add About Component
2 parents a294fb8 + 6f21465 commit 52932c8

File tree

31 files changed

+484
-3
lines changed

31 files changed

+484
-3
lines changed

package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React, { Component } from 'react';
2+
3+
import Typography from '@material-ui/core/Typography';
4+
import { withStyles } from '@material-ui/core/styles';
5+
6+
import BannerImage from '../BannerImage';
7+
8+
const styles = theme => ({
9+
root: {
10+
position: 'relative',
11+
padding: '8rem 1.5rem 8rem 1.5rem',
12+
background: 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))',
13+
[theme.breakpoints.up('sm')]: {
14+
padding: '6rem 3rem 8rem 3rem',
15+
},
16+
[theme.breakpoints.up('md')]: {
17+
padding: '7rem 6rem 9rem 6rem',
18+
},
19+
[theme.breakpoints.up('lg')]: {
20+
padding: '8rem 6rem 11rem 6rem',
21+
},
22+
},
23+
bgImg: {
24+
position: 'absolute !important',
25+
top: 0,
26+
left: 0,
27+
height: '100%',
28+
width: '100%',
29+
zIndex: '-1',
30+
},
31+
info: {
32+
marginLeft: '2rem',
33+
marginRight: '2rem'
34+
},
35+
title: {
36+
color: '#f5f5f5',
37+
fontWeight: 700
38+
},
39+
description: {
40+
marginTop: '2em',
41+
color: '#f5f5f5'
42+
}
43+
})
44+
45+
class BannerComponent extends Component {
46+
render() {
47+
const { classes } = this.props;
48+
49+
return (
50+
<div className={classes.root}>
51+
<BannerImage filename={'about_cover.jpg'} classProps={classes.bgImg} />
52+
<div className={classes.info}>
53+
<Typography variant="h4" className={classes.title} gutterBottom>Welcome!</Typography>
54+
<Typography variant="h6" className={classes.description}>
55+
CodeForCommunity is an umbrella project of SoC Family, a network of SoC Students, Staff and Alumni who take great pride in helping develop the projects for underserved communities.
56+
</Typography>
57+
</div>
58+
</div>
59+
);
60+
}
61+
}
62+
63+
export default withStyles(styles)(BannerComponent);
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { withStyles } from '@material-ui/core/styles';
5+
import Grid from '@material-ui/core/Grid';
6+
import Typography from '@material-ui/core/Typography';
7+
8+
import Image from '../image'
9+
10+
const styles = theme => ({
11+
root: {
12+
marginBottom: '1.25rem',
13+
[theme.breakpoints.up('sm')]: {
14+
textAlign: 'center',
15+
marginBottom: '1.25rem'
16+
}
17+
},
18+
profilePictureContainer: {
19+
width: '4.5rem',
20+
height: '4.5rem',
21+
marginBottom: '1.25rem',
22+
[theme.breakpoints.up('sm')]: {
23+
margin: '0 auto 1.25rem auto',
24+
},
25+
[theme.breakpoints.up('md')]: {
26+
width: '5.5rem',
27+
height: '5.5rem'
28+
},
29+
},
30+
profilePicture: {
31+
borderRadius: '50%',
32+
width: '4.5rem',
33+
height: '4.5rem',
34+
[theme.breakpoints.up('md')]: {
35+
width: '5.5rem',
36+
height: '5.5rem'
37+
},
38+
},
39+
40+
})
41+
42+
class PictureWithNameComponent extends Component {
43+
render() {
44+
const { name, profilePicture, club, role } = this.props;
45+
const { classes } = this.props;
46+
47+
return (
48+
<Grid item xs={6} sm={3} className={classes.root}>
49+
<div className={classes.profilePictureContainer}>
50+
<Image filename={profilePicture} classProps={classes.profilePicture} />
51+
</div>
52+
53+
<div className={classes.description}>
54+
<Typography variant="body1" className={classes.name} gutterBottom>{name}</Typography>
55+
<Typography variant="caption" className={classes.club} gutterBottom>{club}</Typography>
56+
<Typography variant="caption" className={classes.role} gutterBottom>{role}</Typography>
57+
</div>
58+
</Grid>
59+
);
60+
}
61+
}
62+
63+
PictureWithNameComponent.propTypes = {
64+
profilePicture: PropTypes.string.isRequired,
65+
name: PropTypes.string.isRequired,
66+
role: PropTypes.string.isRequired,
67+
club: PropTypes.string.isRequired
68+
};
69+
70+
export default withStyles(styles)(PictureWithNameComponent);
Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { withStyles } from '@material-ui/core/styles';
5+
import Grid from '@material-ui/core/Grid';
6+
import Typography from '@material-ui/core/Typography';
7+
8+
import Image from '../image'
9+
10+
const styles = theme => ({
11+
profileImage: {
12+
borderRadius: '50%',
13+
width: '4.5rem',
14+
height: '4.5rem',
15+
[theme.breakpoints.up('md')]: {
16+
width: '5.5rem',
17+
height: '5.5rem'
18+
},
19+
},
20+
name: {
21+
fontWeight: 700,
22+
marginBottom: '0.75em',
23+
marginTop: '1.5em',
24+
[theme.breakpoints.up('sm')]: {
25+
marginBottom: '1.25em',
26+
marginTop: 0
27+
}
28+
},
29+
})
30+
31+
class PictureWithWriteUpComponent extends Component {
32+
createGridItems = (classes, data) => {
33+
const info = data.edges;
34+
35+
return (
36+
info.map((i, index) => (
37+
<Grid item xs={12} sm={6}>
38+
<div className={classes.root}>
39+
<Grid container>
40+
<Grid item sm={4} lg={3}>
41+
<Image filename={i.node.frontmatter.profilePicture.relativePath} classProps={classes.profileImage} />
42+
</Grid>
43+
44+
<Grid item sm={8} lg={9} className={classes.info}>
45+
<Typography variant="body1" className={classes.name}>{i.node.frontmatter.name}</Typography>
46+
<Typography variant="body2" className={classes.title}>{i.node.frontmatter.description}</Typography>
47+
</Grid>
48+
</Grid>
49+
</div>
50+
</Grid>
51+
))
52+
)
53+
}
54+
55+
render() {
56+
const { info } = this.props;
57+
const { classes } = this.props;
58+
59+
return (
60+
<div>
61+
<Grid container spacing={40}>
62+
{this.createGridItems(classes, info)}
63+
</Grid>
64+
</div>
65+
);
66+
}
67+
}
68+
69+
PictureWithWriteUpComponent.propTypes = {
70+
info: PropTypes.object.isRequired
71+
};
72+
73+
export default withStyles(styles)(PictureWithWriteUpComponent);

src/components/about/TeamComponent.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React, { Component } from 'react';
2+
3+
import { withStyles } from '@material-ui/core/styles';
4+
import Typography from '@material-ui/core/Typography';
5+
import Grid from '@material-ui/core/Grid';
6+
7+
import PictureWithWriteUpComponent from './PictureWithWriteUpComponent'
8+
import PictureWithNameComponent from './PictureWithNameComponent'
9+
10+
const styles = theme => ({
11+
root: {
12+
padding: '3.5rem 2rem 5rem 2rem',
13+
[theme.breakpoints.up('md')]: {
14+
padding: '3.5rem 5rem 5rem 5rem',
15+
maxWidth: 1440,
16+
margin: '0 auto'
17+
},
18+
},
19+
titleDiv: {
20+
textAlign: 'center'
21+
},
22+
title: {
23+
fontWeight: 700
24+
},
25+
advisors: {
26+
marginTop: '2rem',
27+
marginBottom: '5rem'
28+
},
29+
advisorsInfo: {
30+
marginTop: '1.5rem'
31+
},
32+
operations: {
33+
marginTop: '2rem',
34+
marginBottom: '5rem'
35+
},
36+
partners: {
37+
marginTop: '2rem',
38+
},
39+
partnersInfo: {
40+
marginTop: '1.5rem'
41+
},
42+
})
43+
44+
class TeamComponent extends Component {
45+
partnersComponent = (partnersData) => {
46+
const partners = partnersData.edges
47+
48+
return (
49+
partners.map((partner, index) => (
50+
<PictureWithNameComponent
51+
name={partner.node.frontmatter.name}
52+
profilePicture={partner.node.frontmatter.profilePicture.relativePath}
53+
club={partner.node.frontmatter.club}
54+
role={partner.node.frontmatter.role}
55+
/>
56+
))
57+
)
58+
}
59+
60+
render() {
61+
const { advisors, operations, partners } = this.props
62+
const { classes } = this.props;
63+
64+
return (
65+
<div className={classes.root}>
66+
<div className={classes.titleDiv}>
67+
<Typography variant="h4" className={classes.title} gutterBottom>Meet the team!</Typography>
68+
</div>
69+
70+
<div className={classes.teamInfo}>
71+
<div className={classes.advisors}>
72+
<Typography variant="h5" className={classes.title} gutterBottom>Advisors</Typography>
73+
<div className={classes.advisorsInfo}>
74+
<PictureWithWriteUpComponent
75+
info={advisors}
76+
/>
77+
</div>
78+
</div>
79+
80+
<div className={classes.operations}>
81+
<Typography variant="h5" className={classes.title} gutterBottom>Operations</Typography>
82+
<div className={classes.advisorsInfo}>
83+
<PictureWithWriteUpComponent
84+
info={operations}
85+
/>
86+
</div>
87+
</div>
88+
89+
<div className={classes.partners}>
90+
<Typography variant="h5" className={classes.title} gutterBottom>Our Partners</Typography>
91+
<Grid container spacing={24} className={classes.partnersInfo}>
92+
{this.partnersComponent(partners)}
93+
</Grid>
94+
</div>
95+
</div>
96+
</div>
97+
);
98+
}
99+
}
100+
101+
export default withStyles(styles)(TeamComponent);

src/images/about_cover.jpg

95.2 KB
Loading
14.1 KB
Loading

src/images/advisors/bimlesh/index.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
name: 'Dr Bimlesh Wadhwa'
3+
profilePicture: 'bimlesh.jpg'
4+
description: 'Dr. Wadhwa Bimlesh is a Senior Lecturer of Computer Science and Assistant Dean (Student Life) of the School of Computing at the National University of Singapore (NUS).'
5+
---
6.06 KB
Loading

src/images/advisors/gary_tan/index.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
name: 'Gary Tan'
3+
profilePicture: 'gary_tan.jpg'
4+
description: 'Gary Tan was a pioneer in the Direct Honours Programme of the National University of Singapore and received his B.Sc (1st class Honours) from NUS.'
5+
---

0 commit comments

Comments
 (0)