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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
import React from 'react';
import {
Typography,
Button,
List,
ListItem,
Link,
Avatar,
Divider,
makeStyles,
} from "@material-ui/core";
import Window from "../../components/Window/Window";
import ContentSection from "../../components/ContentSection/ContentSection";
const useStyles = makeStyles(theme => ({
mono: {
padding: theme.spacing(4),
'& .MuiAvatar-root': {
marginRight: theme.spacing(2),
width: theme.spacing(6),
height: theme.spacing(6),
}
},
}));
const developers = require('../../developers.json');
const Contribute = () => {
const classes = useStyles();
return (
<Window type="mono">
<div className={classes.mono}>
<ContentSection sectionName="Thank You for using ChronoCube!">
<p>
ChronoCube is an Open-Source application, and we welcome anyone who desires to help our project!
</p>
<Button variant="contained" color="secondary" href="https://github.com/users/Eug-VS/projects/3">
Track our progress
</Button>
</ContentSection>
<ContentSection sectionName="Technology stack">
<p> We only use modern and most relevant technologies to achieve the best results! </p>
<ul>
<li><Link href="https://www.django-rest-framework.org/">
Django REST Framework
</Link></li>
<li><Link href="https://reactjs.org/">
React.js
</Link></li>
<li><Link href="https://material-ui.com/">
Material UI components
</Link></li>
</ul>
<p> Special thanks to other Open-Source projects which made ChronoCube possible: </p>
<ul>
<li><Link href="https://github.com/bvaughn/react-window">
react-window
</Link></li>
</ul>
</ContentSection>
<ContentSection sectionName="How can I contribute to the project?">
<p> Thank You for considering helping our project! </p>
<p>
All the development process is being tracked on
the <Link href="https://github.com/users/Eug-VS/projects/3">KanBan board</Link>.
You can always check it to see what is the current state of the project.
To contribute your code, fork our repository and then open
a <Link href="https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests">
Pull Request</Link>. We will carefully review and, hopefully, accept it!
If you are unfamiliar with this kind of workflow, we recommend
reading <Link href="https://github.com/features/project-management/">GitHub guidelines</Link>.
</p>
<p>
We always welcome newcomers! If you are unfamiliar with certain technologies or even with the
development in general, it is great time to start learning something new!
Our community will kindly assist every your step, and with us you can easily become
highly-evaluated developer!
</p>
<Button variant="contained" color="secondary" href="https://github.com/Eug-VS/chrono-cube/issues/new">
Suggest feature
</Button>
<Button variant="contained" color="secondary" href="https://github.com/Eug-VS/chrono-cube/issues/new">
Report a bug
</Button>
</ContentSection>
<ContentSection sectionName="Developers">
<List>
{
developers.map(developer => {
const githubUrl = `https://github.com/${developer.username}`;
const avatarUrl = `${githubUrl}.png`;
return (
<>
<ListItem key={developer.username}>
<Link href={githubUrl}>
<Avatar alt={developer.username} src={avatarUrl} />
</Link>
<div>
<Link href={githubUrl}>
{developer.username}
</Link>
<Typography component="div" color="textSecondary">
{developer.role}
</Typography>
</div>
</ListItem>
<Divider variant="middle"/>
</>
)
})
}
<ListItem>
<Avatar />
You can be here!
</ListItem>
</List>
<Button
variant="contained"
color="secondary"
size="large"
href="https://github.com/users/Eug-VS/projects/3"
>
Join us!
</Button>
</ContentSection>
</div>
</Window>
);
};
export default Contribute;
|
