Skip to content

Commit 9288639

Browse files
kohchihaokohchihao
authored
Merge pull request #16 from jinyingtan/Volunteer
Add Volunteer Page
2 parents 9fa8107 + 8252d73 commit 9288639

File tree

34 files changed

+609
-0
lines changed

34 files changed

+609
-0
lines changed

‎gatsby-config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,21 @@ module.exports = {
66
},
77
plugins: [
88
'gatsby-plugin-react-helmet',
9+
`gatsby-transformer-json`,
910
{
1011
resolve: `gatsby-source-filesystem`,
1112
options: {
1213
name: `images`,
1314
path: `${__dirname}/src/images`,
1415
},
1516
},
17+
{
18+
resolve: `gatsby-source-filesystem`,
19+
options: {
20+
name: `data`,
21+
path: `${__dirname}/src/data`,
22+
},
23+
},
1624
'gatsby-transformer-sharp',
1725
'gatsby-plugin-sharp',
1826
{

‎package-lock.json

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"gatsby-remark-external-links": "0.0.4",
1717
"gatsby-remark-images": "^3.0.1",
1818
"gatsby-source-filesystem": "^2.0.8",
19+
"gatsby-transformer-json": "^2.1.11",
1920
"gatsby-transformer-remark": "^2.1.17",
2021
"gatsby-transformer-sharp": "^2.1.8",
2122
"lodash": "^4.17.11",

‎src/components/volunteer/BannerComponent.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React, { Component } from 'react';
2+
3+
import Typography from '@material-ui/core/Typography';
4+
import Grid from '@material-ui/core/Grid';
5+
import Button from '@material-ui/core/Button';
6+
import { withStyles } from '@material-ui/core/styles';
7+
8+
import BannerImage from '../BannerImage';
9+
import { primary, hoverPrimary } from '../../utils/Colors';
10+
11+
const styles = theme => ({
12+
root: {
13+
},
14+
infoContainer: {
15+
padding: '2rem 3rem',
16+
[theme.breakpoints.up('md')]: {
17+
padding: '4rem 3.5rem',
18+
},
19+
[theme.breakpoints.up('xl')]: {
20+
padding: '10rem 3.5rem',
21+
},
22+
},
23+
title: {
24+
marginBottom: '1em',
25+
fontWeight: 700,
26+
},
27+
description: {
28+
marginBottom: '1.5em',
29+
color: '#889096'
30+
},
31+
bgImgContainer: {
32+
position: 'relative',
33+
height: '18rem',
34+
[theme.breakpoints.up('sm')]: {
35+
height: '25rem',
36+
},
37+
[theme.breakpoints.up('md')]: {
38+
height: 'auto'
39+
},
40+
},
41+
bgImg: {
42+
position: 'absolute !important',
43+
top: 0,
44+
left: 0,
45+
height: '100%',
46+
width: '100%',
47+
zIndex: '-1',
48+
},
49+
joinUsBtn: {
50+
backgroundColor: primary,
51+
fontSize: 20,
52+
textTransform: "capitalize",
53+
padding: '7.5px 15px',
54+
'& a': {
55+
color: '#fff'
56+
},
57+
'&:hover': {
58+
backgroundColor: hoverPrimary
59+
}
60+
},
61+
links: {
62+
textDecoration: 'none',
63+
color: '#000'
64+
},
65+
})
66+
67+
class BannerComponent extends Component {
68+
render() {
69+
const { classes } = this.props;
70+
71+
return (
72+
<div className={classes.root}>
73+
<Grid container>
74+
<Grid item xs={12} md={6} className={classes.infoContainer}>
75+
<Typography variant="h4" className={classes.title}>
76+
Impact the community
77+
</Typography>
78+
79+
<Typography variant="body1" className={classes.description}>
80+
We are passionate about volunteering for underserved communities . We love to create code specific learning opportunities and bring the latest technologies to communities. We love to learn, share and code together. We love to give life to our ideas.
81+
</Typography>
82+
83+
<Typography variant="body1" className={classes.description}>
84+
If you believe in Giving and have couple of hours to spare very week
85+
<br />
86+
If you are trustworthy, good communicator, independent and self-organised
87+
</Typography>
88+
89+
<p>
90+
<Button className={classes.joinUsBtn}>
91+
<a href="#" className={classes.links}>Join Us</a>
92+
</Button>
93+
</p>
94+
</Grid>
95+
96+
<Grid item xs={12} md={6} className={classes.bgImgContainer}>
97+
<BannerImage filename={'volunteer_cover.jpg'} classProps={classes.bgImg} />
98+
</Grid>
99+
</Grid>
100+
</div>
101+
);
102+
}
103+
}
104+
105+
export default withStyles(styles)(BannerComponent);

‎src/components/volunteer/PastProgramsComponent.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React, { Component } from 'react';
2+
3+
import Typography from '@material-ui/core/Typography';
4+
import Grid from '@material-ui/core/Grid'
5+
import Card from '@material-ui/core/Card';
6+
import { CardActionArea } from '@material-ui/core';
7+
import CardContent from '@material-ui/core/CardContent';
8+
import { withStyles } from '@material-ui/core/styles';
9+
10+
import Image from '../../components/image';
11+
12+
const styles = theme => ({
13+
root: {
14+
padding: '3rem 2rem 4rem 2rem',
15+
[theme.breakpoints.up('sm')]: {
16+
padding: '3rem 4rem 4rem 4rem'
17+
},
18+
[theme.breakpoints.up('md')]: {
19+
padding: '3rem 5rem 4rem 5rem'
20+
},
21+
},
22+
title: {
23+
marginBottom: '1.5rem',
24+
[theme.breakpoints.up('sm')]: {
25+
marginBottom: '2rem'
26+
},
27+
},
28+
programImage: {
29+
width: '100%',
30+
height: 200,
31+
[theme.breakpoints.up('lg')]: {
32+
height: 250
33+
},
34+
[theme.breakpoints.up('xl')]: {
35+
height: 325
36+
},
37+
},
38+
programDetailsContainer: {
39+
padding: '1.5rem 1rem 1.25rem 1rem'
40+
}
41+
})
42+
43+
class PastProgramsComponent extends Component {
44+
programsComponent = (classes, programsData) => {
45+
const programs = programsData.edges
46+
47+
return (
48+
programs.map((program, index) => (
49+
<Grid item
50+
xs={12} sm={6} md={4} xl={3}
51+
key={index}
52+
>
53+
<Card>
54+
<CardActionArea>
55+
<Image filename={program.node.frontmatter.image.relativePath} classProps={classes.programImage} />
56+
57+
<CardContent className={classes.programDetailsContainer}>
58+
<Typography gutterBottom variant="body1">
59+
{program.node.frontmatter.name}
60+
</Typography>
61+
</CardContent>
62+
</CardActionArea>
63+
</Card>
64+
</Grid>
65+
))
66+
)
67+
}
68+
69+
render() {
70+
const { programs } = this.props;
71+
const { classes } = this.props;
72+
73+
return (
74+
<div className={classes.root}>
75+
<Typography
76+
className={classes.title}
77+
variant="h5"
78+
align="center"
79+
>
80+
Programs in the Past
81+
</Typography>
82+
83+
<Grid container
84+
className={classes.pastProgramsContainer}
85+
spacing={40}
86+
>
87+
{this.programsComponent(classes, programs)}
88+
</Grid>
89+
</div>
90+
)
91+
}
92+
}
93+
94+
export default withStyles(styles)(PastProgramsComponent);

‎src/components/volunteer/RolesComponent.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React, { Component } from 'react';
2+
3+
import Typography from '@material-ui/core/Typography';
4+
import List from '@material-ui/core/List';
5+
import ListItem from '@material-ui/core/ListItem';
6+
import ListItemText from '@material-ui/core/ListItemText';
7+
import Grid from '@material-ui/core/Grid'
8+
import { withStyles } from '@material-ui/core/styles';
9+
10+
const styles = theme => ({
11+
root: {
12+
padding: '3rem 2rem 2.5rem 2rem',
13+
[theme.breakpoints.up('sm')]: {
14+
padding: '3rem 4rem 2.5rem 4rem'
15+
},
16+
[theme.breakpoints.up('md')]: {
17+
padding: '3rem 5rem 2.5rem 5rem'
18+
},
19+
},
20+
title: {
21+
marginBottom: '0.75rem',
22+
[theme.breakpoints.up('sm')]: {
23+
marginBottom: '2rem'
24+
},
25+
},
26+
sectionMobile: {
27+
[theme.breakpoints.up('sm')]: {
28+
display: 'none',
29+
},
30+
},
31+
mobileRolesTitle: {
32+
fontSize: 20,
33+
color: '#3266D5'
34+
},
35+
sectionTabletDesktop: {
36+
[theme.breakpoints.down('xs')]: {
37+
display: 'none',
38+
},
39+
},
40+
tabletDesktopTitle: {
41+
fontSize: 20,
42+
color: '#3266D5'
43+
},
44+
tabletDesktopDescription: {
45+
color: 'rgba(0, 0, 0, 0.54)'
46+
}
47+
})
48+
49+
class RolesComponent extends Component {
50+
mobileComponent = (classes, rolesData) => {
51+
const roles = rolesData.edges;
52+
53+
return (
54+
roles.map((role, index) => (
55+
<ListItem divider key={index}>
56+
<ListItemText
57+
classes={{ primary: classes.mobileRolesTitle }}
58+
primary={role.node.name}
59+
secondary={role.node.description}
60+
/>
61+
</ListItem >
62+
))
63+
)
64+
}
65+
66+
tabletDesktopComponent = (classes, rolesData) => {
67+
const roles = rolesData.edges;
68+
69+
return (
70+
roles.map((role, index) => (
71+
<Grid item
72+
xs={6} md={4}
73+
>
74+
<Typography className={classes.tabletDesktopTitle} variant="body1" gutterBottom>{role.node.name}</Typography>
75+
<Typography className={classes.tabletDesktopDescription} variant="body2">{role.node.description}</Typography>
76+
</Grid>
77+
))
78+
)
79+
}
80+
81+
render() {
82+
const { roles } = this.props;
83+
const { classes } = this.props;
84+
85+
return (
86+
<div className={classes.root}>
87+
<Typography
88+
className={classes.title}
89+
variant="h5"
90+
align="center"
91+
>
92+
Roles
93+
</Typography>
94+
95+
<List
96+
className={classes.sectionMobile}
97+
component="nav"
98+
>
99+
{this.mobileComponent(classes, roles)}
100+
</List>
101+
102+
<Grid container
103+
className={classes.sectionTabletDesktop}
104+
spacing={40}
105+
>
106+
{this.tabletDesktopComponent(classes, roles)}
107+
</Grid>
108+
</div>
109+
)
110+
}
111+
}
112+
113+
export default withStyles(styles)(RolesComponent);

0 commit comments

Comments
 (0)