-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
475 lines (424 loc) · 20.4 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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
<!-- <script src="js/script.js"></script> -->
<html>
<head>
<title>Uncommon Hacks 2022</title>
<link rel="shortcut icon" type="image/png" href="assets/faviconFilled.png"/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="faze_out_buttons.css"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<a id="mlh-trust-badge" style="display:block;max-width:100px;min-width:60px;position:fixed;right:50px;top:0;width:10%;z-index:10000" href="https://mlh.io/seasons/2022/events?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2022-season&utm_content=white" target="_blank"><img src="https://s3.amazonaws.com/logged-assets/trust-badge/2022/mlh-trust-badge-2022-white.svg" alt="Major League Hacking 2022 Hackathon Season" style="width:100%"></a>
<body style="margin:0">
<div id="cover_panel" class="cover" data-rate="1"></div>
<div id="signups-invisible" class="signups">
<div style="text-align: center;">
<a class="signup_button" id="university" href="https://uncommonhacks-2022.devpost.com/project-gallery">
See Our<br>
Winners!
</a>
</div>
</div>
<div id="panel1">
<div id="title_wrapper">
<div id="title_uncommon">Unc<sid="underline">o</span>m<span class="righthook">m</span>o<span class="lefthook">n</span>
</div>
<div id="title_hacks">H<span class="shape">a</span>cks</div>
<div id="title_year">2022</div>
</div>
<div class="signups">
<button class="button signup" onclick="location.href='https://uncommonhacks-2022.devpost.com/project-gallery';">See Our<br>
Winners!</button>
</div>
<div id="tracks">
<div class="section_heading" id="tracks_heading">Tracks</div>
<img id="map" src="assets/map.png" alt="">
</div>
</div>
<div
id="panel2"
class="desktop"
data-1-top="position:relative;"
data-top="transform:translate3d(0%,0,0);position:fixed;top:0"
data--750-top="transform:translate3d(-50%,0,0);opacity:1"
data--751-top="opacity:0;"
>
<div class="about">
<div class="section_heading">About</div>
<p>
Founded in 2016, Uncommon Hacks is a weekend-long celebration of
technology where college students worldwide come to Chicago to make fun,
random, and innovative tech-related projects with friends old and new.
Every year, we work hard to create a hackathon where all are welcome,
regardless of experience or background, and where outside-the-box projects
and creative thinking are encouraged! All Uncommon Hacks events follow the <a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf">MLH Code of Conduct</a>.
</p>
</div>
<div id="schedule_top" class="schedule">
<div class="section_heading">Schedule</div>
FRIDAY APRIL 1ST
<ul>
<li>5:00 PM - CSS still life</li>
<li>6:00 PM - dinner</li>
<li>6:30 PM - intro to twine games</li>
<li>7:30 PM – tech interviewing</li>
<li>8:30 PM – social time with UH team</li>
<li>9:00 PM – (in-person) doors close</li>
</ul>
SATURDAY APRIL 2ND
<ul>
<li>10:30 AM – doors open & check-in</li>
<li>10:30 AM – IMC Trading networking</li>
<li>11:00 AM – machine learning @ Spotify</li>
<li>12:00 PM – lunch</li>
<li>12:30 PM – team formation</li>
<li>1:00 PM – opening ceremony</li>
<li>2:00 PM – hacking starts</li>
<li>2:00 PM – intro to computational art</li>
<li>3:00 PM – programmatic music</li>
<li>4:00 PM - how social factors influence video games</li>
<li>5:00 PM - board game design workshop</li>
<li>5:00 PM - sound-responsive shaders</li>
<li>6:00 PM - maritime archeology talk</li>
<li>7:00 PM - dinner</li>
<li>7:30 PM - MLH event: slideshow karaoke</li>
<li>8:30 PM - mystery event</li>
<li>10:00 PM - (in-person) doors close</li>
</ul>
<!-- SUNDAY APRIL 3RD
<ul>
<li>9:30 AM - morning meditation</li>
</ul> -->
</div>
</div>
<div id="panel2v"
data--20-top="z-index:1"
data--21-top="z-index:5">
<!-- data-1-top="position:static;"
data-top="transform:translate3d(0%,0px,0px);"
data--1000-top="transform:translate3d(0%,1000px,0px)"> -->
<div id="schedule" class="schedule">
<div class="section_heading">Schedule</div>
FRIDAY APRIL 1ST
<ul>
<li>5:00 PM – CSS still life</li>
<li>6:00 PM – dinner</li>
<li>6:30 PM – intro to twine games</li>
<li>7:30 PM – tech interviewing</li>
<li>8:30 PM – social time with UH team</li>
<li>9:00 PM – (in-person) doors close</li>
</ul>
SATURDAY APRIL 2ND
<ul>
<li>10:30 AM – doors open & check-in</li>
<li>10:30 AM – IMC Trading networking</li>
<li>11:00 AM – machine learning @ Spotify</li>
<li>12:00 PM – lunch</li>
<li>12:30 PM – team formation</li>
<li>1:00 PM – opening ceremony</li>
<li>2:00 PM – hacking starts</li>
<li>2:00 PM – intro to computational art</li>
<li>3:00 PM – programmatic music</li>
<li>4:00 PM – how social factors influence video games</li>
<li>5:00 PM – board game design workshop</li>
<li>5:00 PM – sound-responsive shaders</li>
<li>6:00 PM – maritime archeology talk</li>
<li>7:00 PM – dinner</li>
<li>7:30 PM – MLH event: slideshow karaoke</li>
<li>8:30 PM – mystery event</li>
<li>10:00 PM – (in-person) doors close</li>
</ul>
SUNDAY APRIL 3RD
<ul>
<li>9:15 AM – doors open</li>
<li>9:30 AM – morning meditation</li>
<li>10:00 AM – breakfast</li>
<li>11:00 AM – pitching workshop</li>
<li>11:30 AM – hacker peer feedback session</li>
<li>12:30 PM – lunch</li>
<li>2:00 PM – hacking ends</li>
<li>2:30 PM – virtual project expo + judging</li>
<li>4:30 PM – closing ceremony + awards</li>
</ul>
</div>
<div id="faq_section">
<div class="section_heading" id="faq-header">Faq</div>
<div id="faq">
<nav id="left_faq">
<button type="button" class="collapsible">
<span class="bullet">+</span> what's a hackathon?
</button>
<div class="content">
<p>
Hackathons are invention marathons where attendees collaborate on a
project over the course of a weekend! Hackers will be in a fun,
supportive environment with the necessary tools and mentorship
provided to create weird, quirky, and amazing projects that creatively
explore new ideas with code or solve unconventional problems.
University and high school students from anywhere are welcome, even if
you're not a computer science major or have never been to a hackathon
before! We've written a guide for first-time hackers available
<a href="https://github.com/uncommonhacks/guide-hybrid" id="a_body"
>here</a
>.
</p>
</div>
<button type="button" class="collapsible">
<span class="bullet">+</span> how do I apply?
</button>
<div class="content">
<p>
Regular applications open on the week of Feb. 21 and will be due
around two weeks later. Applications are accepted on a rolling basis.
You can participate as long as you're a student enrolled in a high
school or university, or you have graduated within the last 12 months.
We aim to be beginner-friendly, so all are welcome! Check back on this
website then, and follow our
<a href="http://instagram.com/uncommonhacks" id="a_body">instagram</a>
and
<a href="https://www.facebook.com/uncommonhacks" id="a_body"
>facebook</a
>
for the latest updates!
</p>
</div>
<button type="button" class="collapsible">
<span class="bullet">+</span> when and where is Uncommon Hacks?
</button>
<div class="content">
<p>
April 1st - 3rd, 2022 — HYBRID
<br /><br />
HYBRID: If you're a UChicago student, you're welcome to attend the
event in-person. Non-UChicago students unfortunately will not be
allowed to attend the event in-person, though all are open to attend
the hackathon virtually. The same programming will be available for
both in-person and virtual participants, so don't fret either way!
<br /><br />
WHERE: If you're attending in-person, we'll be having an assortment of
in-person events on the UChicago campus, as well as some virtual
events. Details of locations and times will be sent to in-person
participants in advance. If attending virtually, all links and info
will be included in our hacker guide, which will be sent out before
the event begins. We anticipate using Gather.Town and Discord for all
hackers!
<br /><br />
Uncommon Hacks is free to attend. We will not offer travel
reimbursement. If you're participating virtually, the only traveling
you'll be doing is to our Gather.Town...for which you'll be reimbursed
with e-love.
</p>
</div>
<button type="button" class="collapsible">
<span class="bullet">+</span> what does the application process and
timeline look like?
</button>
<div class="content">
<p>
The process starts out with the hackathon application, which consists
of basic demographic questions as well as a few ~mystery~ short answer
ones. The Uncommon Hacks team will be reviewing the applications in
waves, and you will be notified via email with the result of your
application. If you've been accepted, you will have an RSVP link to
complete as confirmation of your attendance. from there, you're all
set - see you on our adventure!
</p>
</div>
<button type="button" class="collapsible">
<span class="bullet">+</span> what can I make and who can I work with?
</button>
<div class="content">
<p>
You are encouraged to work in teams of up to four (4) people!
Collaborating with hackers across different schools is especially
welcome. We will offer plenty of opportunities for you to meet new
people and make teams.
<br /><br />
Our hackers created the most whimsical projects from 3D music
visualizer to Pokémon cards producer. Check out our 2021 winning
project gallery
<a
href="https://uncommon-hacks-2021.devpost.com/project-gallery"
id="a_body"
>here</a
>.
</p>
</div>
</nav>
<article id="right_faq">
<button type="button" class="collapsible">
<span class="bullet">+</span> what if I'm new to coding?
</button>
<div class="content">
<p>
We welcome everyone to apply, regardless of your background in tech!
Even if you have limited coding or technical experience, we will have
plenty of talks and workshops scheduled to introduce you to a plethora
of different tools and technologies. We will also have mentors
available throughout the weekend to help out if you ever get stuck or
run out of ideas.
</p>
</div>
<button type="button" class="collapsible">
<span class="bullet">+</span> how much does it cost?
</button>
<div class="content">
<p>
Nothing! Uncommon Hacks is free to attend. We will not offer travel
reimbursement. If you’re participating virtually, the only traveling
you'll be doing is to our Gather.Town...for which you’ll be reimbursed
with e-love.
</p>
</div>
<button type="button" class="collapsible">
<span class="bullet">+</span> what if I have other questions?
</button>
<div class="content">
<p>
Email [email protected] or shoot us a <a href="https://m.me/uncommonhacks">facebook message</a>
</p>
</div>
<button type="button" class="collapsible">
<span class="bullet">+</span> how do I stay in touch with Uncommon Hacks?
</button>
<div class="content">
<p>
Follow our <a href="http://instagram.com/uncommonhacks">instagram</a> and <a href="http://facebook.com/uncommonhacks">facebook</a>
for the latest updates! To subscribe to our email list, fill out the form <a href="https://forms.gle/tRNXV2CNvVyqnz59A">here</a>.
</p>
</div>
</article>
</div>
</div>
<div class="team">
<div class="section_heading">Team</div>
<div id="meetTeam">
<span > Meet the team behind Uncommon Hacks 2022 </span><a href="https://uncommonhacks.github.io/team2021/">here</a>
</div>
<br/>
<div >
<img id="headshots" class="headshots" src="assets/member_photos/antonoutkine.jpg"/>
</div>
</div>
<div id="sponsors">
<div class="section_heading">Sponsors</div>
<button class="btn imc" onclick="location.href='https://careers.imc.com/us/en';"></button>
<br/>
<br/>
<!-- bronze -->
<button class="btn morningstar" onclick="location.href='https://www.morningstar.com/careers';"></button>
<button class="btn oi" onclick="location.href='https://oi.uchicago.edu/';"></button>
<br/>
<button class="btn dsi" onclick="location.href='https://datascience.uchicago.edu/';"></button>
<br/>
<br/>
<button class="btn fleetcor" onclick="location.href='https://www.fleetcor.com/careers/';"></button>
</div>
<div id="contacts">
<div class="section_heading">Contacts</div>
<button class="btn email" onclick="location.href='mailto:[email protected]?Subject=Uncommon%Hacks%2021%Inquiry';"></button>
<button class="btn facebook" onclick="location.href='https://www.facebook.com/uncommonhacks';"></button>
<button class="btn instagram" onclick="location.href='https://www.instagram.com/uncommonhacks/';"></button>
<button class="btn linkedin" onclick="location.href='https://www.linkedin.com/company/uncommonhacks/';"></button>
<button class="btn twitter" onclick="location.href='https://twitter.com/uncommonhacks';"></button>
</div>
</div>
</div>
<!-- <div id="panel3"></div> -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="close">×</span>
<h3>
Game Design
</h3>
<p>Since you probably won’t have enough time to make a game that’s super well-polished, the emphasis in this category is on creativity. As long as your program processes user input in some way, it’s considered a game, so the possibilities are endless! We’ll support you no matter what project you choose to work on, whether that’s a clicker game that makes use of the user’s camera, a three-dimensional version of snake, or a UChicago-themed rogue-like.
.</p>
</div>
</div>
<!-- The Modal -->
<div id="modal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close2" id="close2">×</span>
<h3>
Programmatic Art
</h3>
<p>New for Uncommon Hacks 2022, you can think of projects in this category as being similar to video games, but with the intent of artistic expression. These creations tend to involve forms and shapes that oscillate and change with certain variables, like time, or perhaps the weather forecast or your Spotify jams. There are almost no rules here (just write some code!), so be as creative as you’d like!
</p>
</div>
</div>
<!-- The Modal -->
<div id="modal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close3" id="close3">×</span>
<h3>
Web Development
</h3>
<p>If you’re interested in making a project that can be accessed by a large number of people, then this category is for you! Web-based projects are usually built with some kind of social goal in mind, whether that involves spreading information, bringing people together, or just making statements. As with other categories, you may choose to make your project more serious, like developing the prototype for a groundbreaking social network, or more casual, like creating a virtual garden that anyone can help take care of.
</p>
</div>
</div>
<!-- The Modal -->
<div id="modal4" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close4" id="close4">×</span>
<h3>
Data Analysis
</h3>
<p>Did you know that there’s an entire subreddit devoted to uncovering cool datasets? Combine this with the countless ways of processing and visualizing data, and you have the potential for a vast variety of different projects! You may choose to stick to something more global, like analyzing the spread of internet usage in countries around the world. Or perhaps something more local, like finding common trends in course evals or your own social media DMs.
</p>
</div>
</div>
<div class="map">
<!-- Trigger/Open The Modal -->
<button class="button1" id="myBtn"></button>
<!-- The Modal -->
<!-- Trigger/Open The Modal -->
<button class="button2" id="modalButton2"></button>
<!-- Trigger/Open The Modal -->
<button class="button3" id="modalButton3"></button>
<!-- Trigger/Open The Modal -->
<button class="button4" id="modalButton4"></button>
</div>
<div class="cloud_move">
<div class="left par" data-rate="-1">
</div>
<div class="right par" data-rate="1">
</div>
</div>
<!-- skrollr end wrapper -->
</body>
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/fog.js"></script>
<script type="text/javascript" src="js/cover.js"></script>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
//turn off other faqs
for (j=0; j < coll.length; j++){
if (j != i) {
// console.log("removing");
coll[j].classList.remove("active");
var content = coll[j].nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
}
}
}
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</html>