-
Notifications
You must be signed in to change notification settings - Fork 67
/
index.html
347 lines (301 loc) Β· 13.6 KB
/
index.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
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
ο»Ώ<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HacktoberFEST Halloween Graffiti π</title>
<link rel="stylesheet" href="index.css" />
<link rel="icon" href="images/favicon.png" />
<link
href="https://fonts.googleapis.com/css?family=Barriecito&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header class="floater center">
<img class="jd" src="images/jd_logo.svg" alt="Junior Dev logo" />
<h1>
<span class="emoji">π»</span>
HacktoberFEST Halloween Graffiti
<span class="emoji">π»</span>
</h1>
<br />
<div><a href="#sites">Check out the sites</a> that have been created</div>
<br />
<span>-- OR --</span>
<br />
<div>
Learn <a href="#howto">how to add your own site</a> for everyone to see
</div>
</header>
<div class="floater center">
<h2>Participants</h2>
Check out the amazing sites by participants below!
<br />
<br />
<a href="javascript:gotoRandomParticipant()">π Random participant! π</a>
<div class="sites participants" id="sites">
<a target="_blank" href="participants/dom-allan/">Dom Allan</a>
<a target="_blank" href="participants/eddie-fisher/">Eddie Fisher</a>
<a target="_blank" href="participants/aaron-gaddes/">Aaron Gaddes</a>
<a target="_blank" href="participants/aimee-tacchi/">Aimee Tacchi</a>
<a target="_blank" href="participants/artur-dobosz/">Artur Dobosz</a>
<a target="_blank" href="participants/mint-dawn/">Mint Dawn</a>
<a target="_blank" href="participants/albert-sundjaja/">Albert Sundjaja</a>
<a target="_blank" href="participants/ameer-zaita/">Ameer Zaita</a>
<a target="_blank" href="participants/anthony-kusuma/">Anthony Kusuma</a>
<a target="_blank" href="participants/antony-targett/">Antony Targett</a>
<a target="_blank" href="participants/daron-ryan/">Daron Ryan</a>
<a target="_blank" href="participants/david-bui/">David Bui</a>
<a target="_blank" href="participants/dayrama-elbranz/">Elbranz Dayrama</a>
<a target="_blank" href="participants/denise-horstmann/">Denise Horstman</a>
<a target="_blank" href="participants/dj805929/">dj805929</a>
<a target="_blank" href="participants/eric-jiang/">Eric Jiang</a>
<a target="_blank" href="participants/faisal-akbar/">M Faisal Akbar</a>
<a target="_blank" href="participants/fanuch/">Fanuch</a>
<a target="_blank" href="participants/Gaurang-Ribadiya/">Gaurang Ribadiya</a>
<a target="_blank" href="participants/hanson-lynn/">Hanson Lynn</a>
<a target="_blank" href="participants/huon-imberger/">Huon Imberger</a>
<a target="_blank" href="participants/ian-millar/">Ian Millar</a>
<a target="_blank" href="participants/ioan-mercea/">Ioan Mercea</a>
<a target="_blank" href="participants/james-formica/">James Formica</a>
<a target="_blank" href="participants/jenny-thach/">Jenny Thach</a>
<a target="_blank" href="participants/jonathan-punzalan">Jonathan Punzalan</a>
<a target="_blank" href="participants/julian-farinaccio/">Julian Farinaccio</a>
<a target="_blank" href="participants/julius-miyumo/">Julius Miyumo</a>
<a target="_blank" href="participants/karine-agredo/">Karine Agredo</a>
<a target="_blank" href="participants/kat-goff/">Kat Goff</a>
<a target="_blank" href="participants/kerri-sim/">Kerri Sim</a>
<a target="_blank" href="participants/levermanx/">M. X. Lever</a>
<a target="_blank" href="participants/laisa-barros/">Laisa Barros</a>
<a target="_blank" href="participants/linda-lai/">Linda Lai</a>
<a target="_blank" href="participants/luke-nailer/">Luke Nailer</a>
<a target="_blank" href="participants/marielle-cruz/">Marielle Louise Cruz</a>
<a target="_blank" href="participants/matt-crl/">Matt Control</a>
<a target="_blank" href="participants/michael-winter/">Michael Winter</a>
<a target="_blank" href="participants/nathalia-tan/">Nathalia Tan</a>
<a target="_blank" href="participants/david-james/">David James</a>
<a target="_blank" href="participants/peakgeek/">Peakgeek</a>
<a target="_blank" href="participants/prayatna-bhattarai/">Prayatna Bhattarai</a>
<a target="_blank" href="participants/priyanka/">Priyanka</a>
<a target="_blank" href="participants/robin-klaus/">Robin Klaus Dunbar</a>
<a target="_blank" href="participants/roh-moh/">Roh Moh</a>
<a target="_blank" href="participants/sabhya-grover/">Sabhya</a>
<a target="_blank" href="participants/samuel-wee/">Samuel Wee</a>
<a target="_blank" href="participants/shuying-lin/">Shuying Lin</a>
<a target="_blank" href="participants/stephen-beattie/">Stephen Beattie</a>
<a target="_blank" href="participants/sundeep-chand/">Sundeep Chand</a>
<a target="_blank" href="participants/terence-huynh/">Terence Huynh</a>
<a target="_blank" href="participants/tom-osullivan/">Tommy O'Sullivan</a>
<a target="_blank" href="participants/verity-brean/">Verity Brean</a>
<a target="_blank" href="participants/yael-steinberger/">Yael Steinberger</a>
<a target="_blank" href="participants/zain-afzal/">Zain Afzal</a>
<a target="_blank" href="participants/piyush-jha/">Piyush jha</a>
<a target="_blank" href="participants/naveen-bassi/">Naveen Bassi</a>
<a target="_blank" href="participants/makitsune/">Makitsune</a>
<a target="_blank" href="participants/zara-otamias/">Zara Otamias</a>
<a target="_blank" href="participants/xaca-rana/">Xaca Rana</a>
<a target="_blank" href="participants/lucas-phang/">Lucas Phang</a>
<a target="_blank" href="participants/derick-falk/">Derick Falk</a>
<a target="_blank" href="participants/Strider-Mike/">Mike Strider</a>
<a target="_blank" href="participants/josh-parnham/">Josh Parnham</a>
<a target="_blank" href="participants/poespas-pas/">Poespas Pas</a>
<a target="_blank" href="participants/ritvikmathur1999-rm/">Ritvik</a>
<a target="_blank" href="participants/lenin-ben/">Lenin Ben</a>
</div>
</div>
<div class="floater" id="howto">
<h2>How to contribute</h2>
<p>
Want to add your own site? We'd love you to! Follow the instructions
below to make it happen. Feel free to ask for help at any point if you
are unsure of any of the steps. We are here to help!
</p>
<h3>Step 1.</h3>
<p>
You will need to fork this repository (repo) so you can begin editing
the code. Head over to the
<a
href="https://github.com/juniordevio/hacktober-fest-halloween-graffiti"
target="_blank"
>JuniorDev HacktoberFEST GitHub repo</a
>
and click the <span class="mono">Fork</span> button on the top right
hand side of the page.
<img class="doc-image" src="images/fork.png" />
</p>
<h3>Step 2.</h3>
<p>
Once the fork is copied to your github, use your preferred way to clone
the repo locally. I will assume you are using terminal, in which case
run a command like follows:
</p>
<code
>git clone
https://github.com/~your-github-here~/hacktober-fest-halloween-graffiti.git</code
>
<h3>Step 3.</h3>
<p>
Once the repo is forked, go into the folder by running a command like
</p>
<code>cd hacktober-fest-halloween-graffiti</code>
<p>
Now that you are inside the repo you will need to create your own branch
to work on. This ensures your work and everyone else's work will be done
separately. First decide on your branch name, then type something like:
</p>
<code>git checkout -b [your-branch-name]</code>
<p>Now you can begin your work in your IDE of choice...</p>
<h3>Step 4.</h3>
<p>
To start building your own page, create a folder under participants as
<span class="mono">yourFirstName-yourLastName</span>. It is best to not
use spaces and instead use a dash to separate any words.
</p>
<h3>Step 5.</h3>
<p>
Then inside this folder create a new
<span class="mono">index.html</span> file. Once you've created your
file, paste in some basic HTML that will get you started, perhaps
something like:
</p>
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Your name here</title>
</head>
<body>
</body>
</html>
</pre>
<h3>Step 6.</h3>
<p>
Much like the previous step, create a
<span class="mono">styles.css</span>. You can then link it in your
<span class="mono">index.html</span> file inside the
<span class="mono"><head></span> element with something like:
</p>
<code>
<link rel="stylesheet" href="styles.css">
</code>
<h3>Step 7.</h3>
<p>The rest is up to you, create until you're completely out of ideas!</p>
<h3>Step 8.</h3>
<p>
Once you've finished, add yourself to the
<span class="mono">index.html</span> (this file you are reading) above
in the Participants section!
</p>
<h3>Step 9.</h3>
<p>
Then it's time to create a PR to your own fork. To do this go to the
<span class="mono">Pull Request</span> section in Github.
<img class="doc-image" src="images/pull-request.png" />
</p>
<h3>Step 10.</h3>
<p>
Then click the <span class="mono">New Pull Request</span> button and add
some info about your pull request and give it a funky name.
<img class="doc-image" src="images/new-pull-request.png" />
</p>
<h3>Step 11.</h3>
<p>
Merge when you are happy with it, feel free to get a friend, mentor or
someone on your table to review it.
</p>
<h3>Step 12.</h3>
<p>
Once you have merged your PR to your fork its time to get this live on
JuniorDev! To do this repeat steps 9 && 10 - then move onto step 13!
</p>
<h3>Step 13.</h3>
<p>
Finally click the link that reads
<span class="mono">Compare across forks</span>
<img class="doc-image" src="images/compare-forks.png" />
</p>
<h3>Step 14.</h3>
<p>
Check it, submit it and then congrats you have sucessfully completed,
not one but <br /><b>TWO</b> Pull Requests to
<a href="https://hacktoberfest.digitalocean.com" target="_blank"
>#Hacktoberfest2019!</a
>
</p>
</div>
<script type="text/javascript">
var emojis = ["π»", "π", "π·", "π¦", "π", "π§ββοΈ", "π§πΌββοΈ", "π§ββοΈ", "π§ββοΈ", "β οΈ"];
var emojis2 = emojis.slice(0)
emojis2.push('undefined', 'NaN', 'jQuery')
function animateFly(e) {
var x = e.pageX;
var y = e.pageY;
var _doc = document.documentElement;
var emoji = emojis2[Math.floor(Math.random() * emojis2.length)];
var angle = Math.floor(Math.random() * 360);
var pageHeight = _doc.scrollHeight;
var _span = document.createElement("span");
_span.classList.add("zoomy");
_span.style.top = y + "px";
_span.style.left = x + "px";
_span.innerText = emoji;
_span = _doc.appendChild(_span);
function zoom() {
if (x < 0 || x > _doc.clientWidth || y < 0 || y > pageHeight) {
_doc.removeChild(_span);
return;
}
x += Math.sin(angle) * 10;
y += Math.cos(angle) * 10;
_span.style.top = y + "px";
_span.style.left = x + "px";
window.requestAnimationFrame(zoom);
}
window.requestAnimationFrame(zoom);
}
document.addEventListener("click", animateFly);
// SPoopy names section
var _sites = document.getElementById("sites");
function spoopyNames() {
var _peoples = _sites.querySelectorAll("a");
for (var i = 0; i < _peoples.length; i++) {
var emoji = emojis[Math.floor(Math.random() * emojis.length)];
_peoples[i].innerText = emoji + ' ' + _peoples[i].innerText + ' ' + emoji;
}
}
function gotoRandomParticipant() {
var people = _sites.querySelectorAll("a");
var person = people[Math.floor(Math.random()*people.length)];
person.click();
}
// https://stackoverflow.com/a/12646864
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
function shufflePeople() {
var people = [..._sites.querySelectorAll("a")];
// remove all a tags
for (let person of people) {
person.remove();
}
// shuffle and reinsert
shuffleArray(people);
for (let person of people) {
_sites.appendChild(person);
}
}
shufflePeople();
spoopyNames();
</script>
</body>
</html>