-
Notifications
You must be signed in to change notification settings - Fork 2
/
2023-02.html
321 lines (279 loc) · 15.5 KB
/
2023-02.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>charmCityJs</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/charmcity.css" id="theme">
<link rel="stylesheet" href="lib/css/zenburn.css">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Oswald" rel="stylesheet">
<style>
body {
color: white;
background-color: #C13888aa;
}
.reveal a,
.reveal a:hover {
font-weight: bold;
color: #2555EE;
}
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
color: black;
}
</style>
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h3 style="color: #222;">Welcome to</h3>
<h1 style="font-size: 3em; color: #000; font-weight: normal; font-family: 'Roboto', arial, sans-serif;">
CHARMCITY<b>JS!!</b>
<br />💕🥰⛄
</h1>
</section>
<section>
<h3 style="color: #222;">Surprise</h3>
<h1 style="font-size: 3em; color: #000; font-weight: bold; font-family: 'Roboto', arial, sans-serif;">
ORGANIZER TAKEOVER!!!
<br />🎉🎉🎉🎉
</h1>
</section>
<section>
<h2 style="font-size: 3em; color: black;">ABOUT CCJS</h2>
</section>
<section>
<h2><b>charmcityjs.org</b></h2>
<h4>Is our website!</h4>
</section>
<section>
<h4>We have an anti-harassment policy</h4>
<h2 class="fragment">bit.ly/ccjs-safe</h2>
<p class="fragment">
<span style="font-size: 1.25em;">
If you are being harassed, notice that someone else is
being harassed, or have any other concerns, please contact a member
of meetup organizers immediately.
</span>
</p>
</section>
<section>
<h2 class="our-organizers">Organizers!</h2>
<div class="organizers" style="display: flex; flex-wrap: nowrap; margin-top: 50px; justify-content: space-around;">
<div class="organizer">
<img src="./assets/organizers/asa.jpg" style="width: 100px; height: 150px; border: 1px outset white; border-radius: 15px 0px 15px 0px; overflow: hidden;" />
<p>asa</p>
</div>
<div class="organizer">
<img src="./assets/organizers/glen.png" style="background: #cbcdcb; width: 100px; height: 150px; border: 1px outset white; border-radius: 15px 0px 15px 0px; overflow: hidden;" />
<p>glen</p>
</div>
<div class="organizer">
<img src="./assets/organizers/roman.jpg" style="width: 100px; height: 150px; border: 1px outset white; border-radius: 15px 0px 15px 0px; overflow: hidden;" />
<p>roman</p>
</div>
<div class="organizer">
<img src="./assets/organizers/troy.jpg" style="width: 100px; height: 150px; border: 1px outset white; border-radius: 15px 0px 15px 0px; overflow: hidden;" />
<p>troy</p>
</div>
</div>
</section>
<section>
<h2 style="">Join us on Slack!</h2>
<h4>
<a href="http://slack.charmcityjs.org/">http://slack.charmcityjs.org/</a>
</h4>
</section>
<section>
<h2>Talks</h2>
<h3>You are powering this meetup! And we are so grateful for the all the talks being submitted!</h3>
<br />
<h4>Keep them coming!</h4>
</section>
<section>
<h2 style="color: black;">Submit A Talk</h2>
<h3>github.com/charmcityjs/talks</h3>
<br />
<h2 style="color: black;">Submit A Person</h2>
<h3>github.com/charmcityjs/talks</h3>
</section>
<section>
<h2 style="font-size: 3em; color: black;">ANNOUNCEMENTS</h2>
</section>
<section>
<h2>Anyone have<br/><b>AN ANNOUNCEMENT?</b></h2>
<h4>Job Posting? New Library?</h4>
<h4>Speak on Up!</h4>
<h4>(No Recruiters)</h4>
</section>
<section>
<h2 style="font-size: 3em; color: black;">SPONSORS</h2>
</section>
<section>
<div style="display: grid; grid-template-columns: auto; justify-content: center; align-items: center;">
<h3 style="display: inline-flex; align-items:center; justify-items:center;">
<span style="display: block;padding-right: 50px;font-size:70px;">🍕🥤</span>
❤️ YOU ❤️
</h3>
<h3 class="fragment" style="display: inline-flex; align-items:center; justify-items:center;">
<span style="display: block;padding-right: 50px;font-size:70px;">🤝🏽</span>
<svg width="217" height="34" viewBox="0 0 217 34" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 32.2228C2.26448 31.9137 3.43577 31.2183 3.43577 29.2864V6.10462C3.43577 4.1728 2.26448 3.55462 0 3.24553V1.77734H15.461C23.738 1.77734 28.3451 4.25007 28.3451 9.19552C28.3451 12.5955 26.1587 15.3001 20.8489 16.3819C27.0957 17.3092 30.2191 20.2455 30.2191 24.7273C30.2191 30.1364 25.534 33.6137 18.8186 33.6137C15.3048 33.6137 6.09068 32.6092 0 33.6137V32.2228H0ZM15.7733 15.4546C20.2242 15.4546 21.864 12.8273 21.864 9.50462C21.864 5.71825 19.9118 3.55462 15.461 3.55462H12.728C10.5416 3.55462 9.52645 4.1728 9.52645 6.10462V12.9046C9.52645 14.8364 10.5416 15.4546 12.728 15.4546H15.7733ZM16.398 31.6819C21.1612 31.6819 23.738 29.5955 23.738 24.8819C23.738 19.7819 20.6927 17.3092 12.4937 17.3092C10.5416 17.3092 9.52645 17.9273 9.52645 19.8592V29.5955C9.52645 30.9092 10.073 31.6819 11.5567 31.6819H16.398Z" fill="#1F2A48"></path><path d="M31.8594 28.3595C31.8594 24.2641 35.2171 21.5595 45.9148 20.1686C47.0861 20.0141 47.5546 19.6277 47.5546 18.3914V17.4641C47.5546 13.755 46.149 11.7459 42.8694 11.7459C39.9803 11.7459 38.9652 13.2141 38.9652 15.455C38.9652 17.4641 37.6377 18.3914 35.9979 18.3914C34.28 18.3914 33.343 17.2323 33.343 15.7641C33.343 11.8232 38.9652 10.0459 44.3531 10.0459C50.4438 10.0459 52.9425 12.4414 52.9425 19.0095V29.5186C52.9425 31.2959 53.9576 31.8368 55.4412 31.4505V32.2232C54.8165 33.3823 53.1768 33.9232 51.615 33.9232C49.1944 34.0005 47.7888 32.455 47.6327 30.3686C47.6327 29.8277 47.2422 29.6732 46.7737 30.2914C45.1339 32.2232 42.1667 34.0005 38.6528 34.0005C35.139 34.0005 31.8594 32.3005 31.8594 28.3595ZM47.5546 25.1141V23.4141C47.5546 22.255 47.1642 21.6368 45.4463 21.7914C38.9652 22.4868 37.4815 25.1141 37.4815 27.2005C37.4815 29.2095 38.7309 30.9868 41.542 30.9868C44.9778 30.9095 47.5546 28.5141 47.5546 25.1141Z" fill="#1F2A48"></path><path d="M55.4414 22.1004C55.4414 14.1414 61.7663 10.0459 68.2474 10.0459C74.0258 10.0459 77.6177 13.3686 77.6177 16.3823C77.6177 17.9277 76.6807 19.2414 74.8066 19.2414C73.0107 19.2414 72.2298 18.005 71.9956 16.5368C71.7613 14.4504 70.9804 11.7459 67.3885 11.7459C63.3281 11.7459 61.1417 14.9914 61.1417 19.9368C61.1417 26.5823 65.4364 30.6777 70.9024 30.6777C72.8545 30.6777 75.0409 30.1368 76.7588 27.6641L77.852 28.5141C76.993 30.6777 73.4792 33.9232 67.857 33.9232C61.454 34.0005 55.4414 29.7505 55.4414 22.1004Z" fill="#1F2A48"></path><path d="M77.3828 32.3002C79.8035 32.0684 80.7405 31.3729 80.7405 29.2093V5.56381C80.7405 3.24562 79.9596 2.4729 77.3828 2.70472V1.31381L84.0982 0.000170652C85.4256 -0.231648 86.2065 0.386534 86.2065 1.6229V19.4729C86.2065 20.7093 87.0654 21.1729 87.8463 20.4774L94.874 14.2956C95.9672 13.3684 95.4987 12.0547 92.7657 11.7456V10.3547H102.761V11.7456C100.184 11.9774 99.2468 12.9047 97.4508 14.4502L92.6876 18.5456L100.418 29.5184C101.746 31.4502 102.683 31.9138 104.869 32.1456V33.5365H93.2342V32.1456C95.1083 31.9138 95.1083 30.9865 94.2493 29.7502L89.4861 22.9502C89.0957 22.4093 88.6271 22.0229 88.0025 22.5638C86.9093 23.4911 86.2065 24.1865 86.2065 25.732V29.0547C86.2065 31.2183 87.0654 31.9138 89.5642 32.1456V33.5365H77.3828V32.3002Z" fill="#1F2A48"></path><path d="M104.637 32.3004C107.057 32.0686 107.994 31.3732 107.994 29.2095V15.6868C107.994 13.2914 107.214 12.5959 104.637 12.8277V11.5141L111.352 10.2004C112.68 9.96863 113.46 10.5868 113.46 11.8232V12.9823C113.46 13.8323 114.163 13.9868 114.788 13.2914C115.803 12.2095 118.146 10.0459 121.425 10.0459C125.095 10.0459 126.657 12.4414 126.657 14.5277C126.657 16.5368 125.408 17.6959 123.612 17.6959C122.05 17.6959 120.879 16.7686 120.879 15.3777C120.879 13.9868 119.942 12.9823 118.458 12.9823C115.725 12.9823 113.382 15.8414 113.382 20.7868V29.2868C113.382 31.4504 114.241 32.1459 116.896 32.3777V33.7686H104.637V32.3004Z" fill="#1F2A48"></path><path d="M126.5 22.0232C126.5 14.2959 132.356 10.0459 138.759 10.0459C145.162 10.0459 151.019 14.2959 151.019 22.0232C151.019 29.7505 145.162 34.0005 138.759 34.0005C132.356 34.0005 126.5 29.6732 126.5 22.0232ZM145.162 24.0323C145.162 17.4641 142.117 11.7459 137.666 11.7459C134.543 11.7459 132.356 14.2959 132.356 19.9368C132.356 26.505 135.402 32.2232 139.853 32.2232C142.898 32.2232 145.162 29.6732 145.162 24.0323Z" fill="#1F2A48"></path><path d="M152.5 22.0232C152.5 14.2959 158.356 10.0459 164.759 10.0459C171.162 10.0459 177.019 14.2959 177.019 22.0232C177.019 29.7505 171.162 34.0005 164.759 34.0005C158.356 34.0005 152.5 29.6732 152.5 22.0232ZM171.084 24.0323C171.084 17.4641 168.039 11.7459 163.588 11.7459C160.465 11.7459 158.278 14.2959 158.278 19.9368C158.278 26.505 161.324 32.2232 165.775 32.2232C168.898 32.2232 171.084 29.6732 171.084 24.0323Z" fill="#1F2A48"></path><path d="M209.116 29.596V19.8597C209.116 15.996 207.632 13.2142 204.509 13.2142C201.385 13.2142 199.511 15.996 199.511 19.8597V29.2097C199.511 31.3733 200.37 32.0688 202.713 32.3006V33.6915H190.766V32.3006C193.186 32.0688 194.045 31.3733 194.045 29.2097V19.8597C194.045 15.996 192.562 13.2142 189.438 13.2142C186.315 13.2142 184.363 15.996 184.363 19.8597V29.2097C184.363 31.3733 185.222 32.0688 187.642 32.3006V33.6915H175.617V32.3006C178.038 32.0688 178.975 31.3733 178.975 29.2097V15.6869C178.975 13.3688 178.194 12.596 175.617 12.8278V11.4369L182.333 10.1233C183.66 9.89148 184.441 10.5097 184.441 11.746C184.441 13.6006 185.144 14.1415 185.846 13.3688C186.783 12.3642 188.658 9.96875 192.562 9.96875C194.748 9.96875 197.091 10.6642 198.496 12.9824C199.043 13.9869 199.98 14.2188 200.527 13.5233C201.854 11.9778 203.728 10.046 207.32 10.046C211.146 10.046 214.582 12.1324 214.582 18.8551V29.6733C214.582 31.4506 215.597 31.9915 217.081 31.6051V32.3779C216.378 33.5369 214.816 34.0779 213.255 34.0779C210.834 34.0006 209.116 32.6097 209.116 29.596Z" fill="#1F2A48"></path></svg>
</h3>
<h3 class="fragment" style="display: inline-flex; align-items:center; justify-items:center;">
<span style="display: block;padding-right: 50px;font-size:70px;">🔒</span>
<img src="./assets/teampassword.png" style="height: 500px; margin: -225px 0px -225px -70px;" class="logo">
</h3>
<h3 class="fragment" style="display: inline-flex; align-items:center; justify-items:center;">
<span style="display: block;padding-right: 50px;font-size:70px;">📅</span>
<img src="./assets/tenonio.png" style="height: 100px; margin-left: -33px;" class="logo">
</h3>
</div>
</section>
<section>
<h2 style="font-size: 3em; color: black;">TONIGHT'S TALKS
<br><br>
🥁🥁🥁🥁🥁🥁🥁
</h2>
</section>
<!-- SPEAKER 1 -->
<section>
<h2 style="font-size: 1em;">assert(talks[0],"<b>Troy Vassalotti</b>");</h2>
<h3 style="font-size: 2em;"><b>Import(map) Whatever You Want</b></h3>
</section>
<section>
<h2 style="font-size: 1em;">assert(talks[1],"<b>Asa Smith</b>");</h2>
<h3 style="font-size: 2em;"><b>(Re)Introdution to MirageJS</b></h3>
</section>
<section>
<h3 style="font-size: 2em;">Intermission</h3>
</section>
<section>
<h2 style="font-size: 1em;">assert(talks[2],"<b>Glen R. Goodwin</b>");</h2>
<h3 style="font-size: 2em;"><b>Scale You! Growing your Career</b></h3>
</section>
<section>
<h2>Point of Order</h2>
<h4 style="color: black;">Please mute your mic during speaker talks</h4>
<h4 style="color: black;">And unmute them for the open discussion!</h4>
<h4 style="color: black;">The orgnizers will also be<br />muting open mics aggressively</h4>
<h4 style="color: black;">There will additional chatting time after the last talk for all who stay.</h4>
<h4 style="color: black;">Thank you!</h4>
</section>
<section>
<h2 style="font-size: 3em; color: black;">HERE WE GO!</h2>
<h4 style="font-size: 1.5em; text-align: left; padding-left: 200px">
🍕 Get some food<br>
🪑 Sit back<br>
👻 Enjoy!
</h4>
</section>
<section data-state="in-intermission">
<h2 style="font-size: 3em; color: black;">INTERMISSION</h2>
<h4 style="font-size: 1.5em;text-align: left; padding-left: 225px">
🍕 Get some food<br>
👋 Say hello<br>
👻 Relax!
</h4>
<br />
<div class="timer" style="font-size:2em;font-family:monospace;font-weight:bold;line-height:20px;">10:00</div>
<br />
<h6>Join Slack: <a href="http://slack.charmcityjs.org/">http://slack.charmcityjs.org/</a>
<h6>Submit Talk: <a href="https://github.com/charmcityjs/talks">github.com/charmcityjs/talks</a></h6>
</section>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [{
src: 'lib/js/classList.js',
condition: function() {
return !document.body.classList;
}
},
{
src: 'plugin/markdown/marked.js',
condition: function() {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/markdown/markdown.js',
condition: function() {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/highlight/highlight.js',
async: true,
condition: function() {
return !!document.querySelector('pre code');
},
callback: function() {
hljs.initHighlightingOnLoad();
}
},
{
src: 'plugin/zoom-js/zoom.js',
async: true
},
{
src: 'plugin/notes/notes.js',
async: true
}
]
});
</script>
<script>
let started = null;
const e = document.body.querySelector("[data-state=in-intermission] .timer");
setInterval(function() {
if (document.body.parentElement.classList.contains("in-intermission")) {
if (!started) started = Date.now();
const duration = 600000; // 10 minutes
const remaining = duration - (Date.now() - started);
let mm = (remaining / 60000) | 0;
let ss = ((remaining - (mm * 60000)) / 1000) | 0;
if (remaining < 0)[mm, ss] = [0, 0];
const t = (("" + mm).padStart(2, 0)) + ":" + (("" + ss).padStart(2, 0));
e.textContent = t;
} else {
e.textContent = "10:00";
started = null;
}
}, 1000)
</script>
</body>
</html>