forked from waltribeiro/cfp-mockup
-
Notifications
You must be signed in to change notification settings - Fork 5
/
volunteer.html
323 lines (304 loc) · 18.5 KB
/
volunteer.html
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Code For Philly</title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico">
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous">
</script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css">
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet">
<link href="css/custom_styles.css" rel="stylesheet">
</head>
<body id="home">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.html"><img src="assets/img/favicon.ico" alt="favicon" style="height: 2rem;"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars ml-1"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Get Involved
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item nav-link" href="volunteer.html">Volunteer</a>
<a class="dropdown-item nav-link" href="sponsor.html">Sponsor</a>
<a class="dropdown-item nav-link" href="https://codeforphilly.org/projects">Find a Project</a>
<a class="dropdown-item nav-link" href="https://codeforphilly.org/pages/project_guidelines">Projects 101</a>
<a class="dropdown-item nav-link" href="https://codeforphilly.org/pages/hackathons">Launchpads & Hackathons</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="https://codeforphilly.org/chat" target="_blank">Chat <small>(Slack)</small></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item nav-link" href="https://codeforphilly.org/mission">Mission</a>
<a class="dropdown-item nav-link" href="https://codeforphilly.org/pages/code_of_conduct/">Code of Conduct</a>
<a class="dropdown-item nav-link" href="https://codeforphilly.org/pages/leadership/">Organizing Team</a>
<a class="dropdown-item nav-link" href="https://codeforphilly.org/pages/leadership-support_team_open_positions/">Join the Organizing Team</a>
<a class="dropdown-item nav-link" href="https://codeforphilly.org/contact">Contact Us</a>
<a class="dropdown-item nav-link" href="https://codeforphilly.org/members">Member Directory</a>
</div>
</li>
<li class="nav-item dropdown d-none d-lg-block">
<input class="form-control mr-sm-2" id="js-site-search" type="search" placeholder="Search" aria-label="Search">
<ul class="dropdown-menu search" id="navbarSearchBarDropdown" aria-labelledby="navbarDropdown">
</ul>
</li>
<li class="nav-item show">
<a class="nav-link " href="https://codeforphilly.org/login?return=%2F" id="navbarDropdown" role="button" aria-haspopup="false" aria-expanded="false">
Login
</a>
</li>
<li class="nav-item show">
<a class="nav-link " href="https://codeforphilly.org/register?return=%2F" id="navbarDropdown" role="button" aria-haspopup="false" aria-expanded="false">
Signup
</a>
</li>
</ul>
</div>
</div>
<div class="d-lg-none container pt-3">
<input class="form-control mr-sm-2" id="js-site-search-2" type="search" placeholder="Search" aria-label="Search">
<ul class="dropdown-menu search" id="navbarSearchBarDropdown-2" aria-labelledby="navbarDropdown">
</ul>
</div>
</nav>
<main id="secondary__main">
<div class="pl-5 pr-5 pb-5 secondary-page-intro secondary-page-div text-center">
<h1 class="pb-5">Get Involved!</h1>
<p>The way to volunteer with Code for Philly is to start contributing to one of our projects. Here is the
process to
follow in order to volunteer with Code for Philly.</p>
<div class="d-none d-lg-flex row flex-nowrap">
<div class="col p-4 pt-5">
<b>Step 1:</b><br>
Find a project you're interested in
<span class="fa-stack fa-4x">
<i class="far fa-edit"></i>
</span>
</div>
<div class="col p-4 pt-5">
<b>Step 2:</b><br>
Join the Slack channel for that project
<span class="fa-stack fa-4x">
<i class="fab fa-slack"></i>
</span>
</div>
<div class="col p-4 pt-5">
<b>Step 3:</b><br>
Introduce yourself in the Slack channel
<span class="fa-stack fa-4x">
<i class="far fa-comment-dots"></i>
</span>
</div>
</div>
<div class="d-lg-none">
<div style="display: flex; align-items: center;">
<div><b>Step 1:</b> Find a project you're interested in</div>
<span class="fa-stack fa-4x">
<i class="far fa-edit"></i>
</span>
</div>
<div style="display: flex; align-items: center;">
<div><b>Step 2:</b> Join the Slack channel for that project</div>
<span class="fa-stack fa-4x">
<i class="fab fa-slack"></i>
</span>
</div>
<div style="display: flex; align-items: center;">
<div><b>Step 3:</b> Introduce yourself in the Slack channel</div>
<span class="fa-stack fa-4x">
<i class="far fa-comment-dots"></i>
</span>
</div>
</div>
</div>
<div class="container pb-5">
<div class="card m-5 p-5">
<h3 class="card-title text-center">Step 1: Find a Project</h3>
<p class="pt-4">Our website is the best place to find a current list of projects. You can even filter projects by cause,
technology used, and project stage to find the best project for you. For example, let’s say you are
interested
in health projects. Play the video to see a way to find health projects.</p>
<video class="pt-4" controls="">
<source src="videos/cfp_find_a_project.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<hr class="m-5">
<div class="row">
<p class="col-xs-6 pt-4">You can also attend our 101 meetings to learn about active projects. If you aren’t
sure if
the project needs your particular skills, or have questions about that particular project, the best
first step
is to contact the Project Lead. You can do that by going to the project’s page on our website, and
clicking on
the members to see what contact information they’ve published. You can hover over their circles to
get their
titles as well.</p>
<img src="assets/img/volunteer/rate_my_nurse_screen_shot.png" class="col-xs-6 card-img pt-4" alt="rate my nurse screen shot">
</div>
<hr class="m-5">
<p class="text-center">Having trouble figuring out what projects are active, finding contact information for
a
project lead, or which project might be best for you? Email <a class="card-link" href="mailto:[email protected]">[email protected]</a></p>
<div id="info-about-meetings-container">
<div class="card">
<div class="card-header" id="info-about-meetings-heading">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#info-about-meetings" aria-expanded="false" aria-controls="info-about-meetings">
Click for more info about meetings
</button>
</h5>
</div>
<div id="info-about-meetings" class="collapse" aria-labelledby="info-about-meetings-heading" data-parent="#info-about-meetings-container">
<div class="card-body">
<p>It is not required to attend a meeting in order to volunteer. We recommend attending one
of our 101
Meetups in order to learn more about Code for Philly, but you can skip this step and go
straight to a
project if you desire!</p>
<p>Our 101 meetings talk about who we are, what we do, and how to get involved. They are a
great place to
ask questions about CFP, and also just to meet others in the community!</p>
<p>We have other types of meetings as well - hack days, socials, etc. Everyone is welcome to
attend any
meeting, you do not have to attend any particular meeting in any particular order.</p>
<p>You can find a schedule for all of our upcoming meetings/events on our Meetup page. Make
sure you RSVP
for our meetings on that page.</p>
</div>
</div>
</div>
</div>
</div>
<div class="card m-5 p-5">
<h3 class="card-title text-center">Step 2: Join the Slack Channel for that Project</h3>
<div class="row pt-4">
<p class="col-md-6">Once you’ve identified a project you are interested in, log into our Slack and find
the
channel for the project. The channel is always listed on the project description page</p>
<img src="assets/img/volunteer/project_slack_channel.png" class="col-md-6 card-img" alt="TODO">
</div>
<hr class="m-5">
<p class="text-center">Having trouble logging into Slack or finding the correct Slack channel? Email <a class="card-link" href="mailto:[email protected]">[email protected]</a>.</p>
<div id="info-about-slack-container">
<div class="card">
<div class="card-header" id="info-about-slack-heading">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#info-about-slack" aria-expanded="false" aria-controls="info-about-slack">
Click for more info about Slack
</button>
</h5>
</div>
<div id="info-about-slack" class="collapse" aria-labelledby="info-about-slack-heading" data-parent="#info-about-slack-container">
<div class="card-body">
<p>Code for Philly uses Slack as its main form of communication. Much of our organization’s
communication
outside of meetings occurs on Slack. Every project at Code for Philly has a Slack
channel, and that is
the primary place where communication occurs for the project. You will be missing out if
you don’t join
the Slack, so this should be one of the first things you do when you decide to join!</p>
Here’s how to join the Code for Philly Slack:
<ul>
<li><a class="card-link" href="https://codeforphilly.org/register">Register for an
account</a> on the
CFP website.</li>
<li><a class="card-link" href="https://codeforphilly.org/chat">Login to Slack using your
CFP website
account.</a></li>
<li>See <a class="card-link" href="https://slack.com/help/articles/205239967-Join-a-channel">Slack’s
help article for finding a channel</a> to find your project’s channel.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card m-5 p-5">
<h3 class="card-title text-center">Step 3: Introduce yourself in the Slack channel</h3>
<p class="pt-4">This is the last step in the process - once you have joined the Slack channel, post a message. The
message
should include a brief intro for yourself, and, if applicable, what particular way you want to help with
the
project. If you are willing to help in any way, you can say that too!</p>
<p>Too shy to post in the Slack channel? Email <a class="card-link" href="mailto:[email protected]">[email protected]</a> and we can make an introduction to
the team
leader for you.</p>
<hr class="m-5">
That’s it! After that it’s on you to remain active with the project. Remaining active typically involves:
<ul>
<li>Attending project meetings (usually on Tuesday evenings, but not always).</li>
<li>Following updates in the Slack Channel</li>
<li>Tackling issues/tasks in GitHub (or whatever task management software the project is using).</li>
</ul>
</div>
</div>
</main>
<!-- Footer-->
<hr class="mx-5">
<footer class="footer py-4">
<div class="container">
<div class="row pb-3">
<div class="col-12 col-sm-4">
<a href="https://codeforphilly.org/projects">Active Projects</a>
<br>
<a href="https://code-for-philly.gitbook.io/partnerships/creating-new-partnerships/first-steps">Start a Project</a>
<br>
<a href="https://codeforphilly.org/pages/hackathons">Hackathons</a>
</div>
<div class="col-12 col-sm-4">
<a href="https://codeforphilly.org/pages/mission">Mission</a>
<br>
<a href="https://codeforphilly.org/pages/code_of_conduct/">Code Of Conduct</a>
<br>
<a href="https://codeforphilly.org/pages/leadership/">Leadership</a>
</div>
<div class="col-12 col-sm-4">
<a href="https://codeforphilly.org/chat">Slack</a>
<br>
<a href="https://codeforphilly.org/contact">Contact</a>
<br>
<a href="https://codeforphilly.org/pages/hack_night_program_details/">Weekly Meetups</a>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-4 text-lg-left">Copyright © Code For Philly 2021</div>
<div class="col-lg-4 my-3 my-lg-0">
<a class="btn btn-dark btn-social mx-2" href="http://twitter.com/codeforphilly"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="https://www.meetup.com/Code-for-Philly"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="http://codeforphilly.slack.com"><i class="fab fa-linkedin-in"></i></a>
</div>
<!-- <div class="col-lg-4 text-lg-right">
<a class="mr-3" href="#!">Privacy Policy</a>
<a href="#!">Terms of Use</a>
</div> -->
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<script src="js/debounce.js"></script>
<script src="js/search.js"></script>
</body></html>