-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
506 lines (472 loc) · 20.3 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
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Aaron Plave</title>
<style type="text/css">
html,
body {
height: 100%;
}
html {
font-size: 10px;
background: black;
/* color: wheat; */
color: yellow;
}
body {
-webkit-font-smoothing: antialiased;
font-family: "Helvetica Neue", "Helvetica", "Arial", "Segoe UI",
sans-serif;
margin: 0px;
padding-bottom: 0px;
}
a {
text-decoration: none;
color: inherit;
}
h1 {
font-weight: bold;
letter-spacing: -0.6rem;
font-size: 100px;
font-size: 10rem;
line-height: 80px;
line-height: 8rem;
padding: 63px 0px 10px;
margin: 0;
/* color: wheat; */
mix-blend-mode: difference;
}
h3 {
font-size: 2.4rem;
letter-spacing: -0.04rem;
line-height: 2.4rem;
mix-blend-mode: difference;
}
.scroll-container {
height: 100%;
padding: 0px 30px;
}
.circle {
box-shadow: -5px -4px 11px -6px #00b6ff;
/* box-shadow: -5px -4px 11px -2px #ffffff66, 2px 3px 7px -4px inset white; */
/* box-shadow: -5px -4px 11px -2px #ffffff66, 12px 9px 10px -12px inset #ffffff7a; */
/* box-shadow: -5px -4px 11px -2px #ffffff66, 8px 10px 5px -10px inset #ffffff38; */
/* box-shadow: -5px -4px 11px -2px #00b6ff, 8px 10px 5px -10px inset #ffffff38; */
/* box-shadow: 3px 1px 16px -6px white; */
/* mix-blend-mode: color-burn; */
background: black;
background: linear-gradient(
322deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 35%,
rgba(0, 212, 255, 1) 100%
);
/* transition: background 1s; */
/* mix-blend-mode: difference; */
width: 0px;
height: 0px;
z-index: -1;
border-radius: 50%;
position: absolute;
opacity: 0;
animation-name: bounceIn;
animation-duration: 100ms;
animation-delay: 100ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
-webkit-animation-name: bounceIn;
-webkit-animation-duration: 100ms;
-webkit-animation-delay: 300ms;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
transition: transform 0.2s, opacity 1s;
transition-timing-function: ease-out;
-webkit-transition: -webkit-transform 0.2s;
-webkit-transition-timing-function: ease-out;
}
.contact {
margin: 10px 0px;
}
.contact:last-child {
padding-bottom: 60px;
}
svg {
width: 27px;
height: 27px;
position: relative;
top: 5px;
}
#circle-container {
z-index: -1;
position: fixed;
top: 0px;
left: 0px;
width: 0px;
height: 0px;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: scale(0.9) translate3d(0, 0, 0);
transform: scale(0.9) translate3d(0, 0, 0);
}
50% {
/* opacity: 0.9; */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
70% {
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
/* -webkit-transform: scale(1.1); */
/* transform: scale(1.1); */
}
100% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: scale(0.9) translate3d(0, 0, 0);
transform: scale(0.9) translate3d(0, 0, 0);
}
50% {
/* opacity: 0.9; */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
70% {
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
/* -webkit-transform: scale(1.1); */
/* transform: scale(1.1); */
}
100% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
}
@media (max-width: 374px) {
html {
font-size: 9px;
}
}
</style>
</head>
<body>
<div class="scroll-container">
<h1>
Aaron<br />
Plave
</h1>
<h3>
WEB DEVELOPER<br /><span style="color: inherit">&</span> INTERFACE
DESIGNER<br /><span style="color: inherit">@</span> NASA/JPL
</h3>
<h3 class="contact">
<a href="mailto:[email protected]">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.20308 1.04312C1.00481 0.954998 0.772341 1.0048 0.627577 1.16641C0.482813 1.32802 0.458794 1.56455 0.568117 1.75196L3.92115 7.50002L0.568117 13.2481C0.458794 13.4355 0.482813 13.672 0.627577 13.8336C0.772341 13.9952 1.00481 14.045 1.20308 13.9569L14.7031 7.95693C14.8836 7.87668 15 7.69762 15 7.50002C15 7.30243 14.8836 7.12337 14.7031 7.04312L1.20308 1.04312ZM4.84553 7.10002L2.21234 2.586L13.2689 7.50002L2.21234 12.414L4.84552 7.90002H9C9.22092 7.90002 9.4 7.72094 9.4 7.50002C9.4 7.27911 9.22092 7.10002 9 7.10002H4.84553Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
Email
</a>
</h3>
<h3 class="contact">
<a href="https://github.com/AaronPlave" target="_blank">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.49933 0.25C3.49635 0.25 0.25 3.49593 0.25 7.50024C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2222 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3149 2.49584 10.3238 2.49584 10.3238C3.22353 10.375 3.60629 11.0711 3.60629 11.0711C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89918 2.87415 7.12104C2.87415 6.32925 3.15677 5.68257 3.62053 5.17563C3.54576 4.99226 3.29697 4.25521 3.69174 3.25691C3.69174 3.25691 4.30015 3.06196 5.68522 3.99973C6.26337 3.83906 6.8838 3.75895 7.50022 3.75583C8.1162 3.75895 8.73619 3.83906 9.31523 3.99973C10.6994 3.06196 11.3069 3.25691 11.3069 3.25691C11.7026 4.25521 11.4538 4.99226 11.3795 5.17563C11.8441 5.68257 12.1245 6.32925 12.1245 7.12104C12.1245 9.9063 10.4292 10.5192 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.4179 14.75 10.7025 14.75 7.50024C14.75 3.49593 11.5036 0.25 7.49933 0.25Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
Github
</a>
</h3>
<h3 class="contact">
<a
href="https://drive.google.com/file/d/0BzyZ2sVSXoLWR2l1LWpLMDlOdEk/view?usp=sharing"
target="_blank"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 2.5C3 2.22386 3.22386 2 3.5 2H9.08579C9.21839 2 9.34557 2.05268 9.43934 2.14645L11.8536 4.56066C11.9473 4.65443 12 4.78161 12 4.91421V12.5C12 12.7761 11.7761 13 11.5 13H3.5C3.22386 13 3 12.7761 3 12.5V2.5ZM3.5 1C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V4.91421C13 4.51639 12.842 4.13486 12.5607 3.85355L10.1464 1.43934C9.86514 1.15804 9.48361 1 9.08579 1H3.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5C4 4.77614 4.22386 5 4.5 5H7.5C7.77614 5 8 4.77614 8 4.5C8 4.22386 7.77614 4 7.5 4H4.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H4.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H10.5C10.7761 11 11 10.7761 11 10.5C11 10.2239 10.7761 10 10.5 10H4.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
Resume
</a>
</h3>
<h3 class="contact">
<a
href="https://www.linkedin.com/in/aaron-plave-05a27a80"
target="_blank"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 1C1.44772 1 1 1.44772 1 2V13C1 13.5523 1.44772 14 2 14H13C13.5523 14 14 13.5523 14 13V2C14 1.44772 13.5523 1 13 1H2ZM3.05 6H4.95V12H3.05V6ZM5.075 4.005C5.075 4.59871 4.59371 5.08 4 5.08C3.4063 5.08 2.925 4.59871 2.925 4.005C2.925 3.41129 3.4063 2.93 4 2.93C4.59371 2.93 5.075 3.41129 5.075 4.005ZM12 8.35713C12 6.55208 10.8334 5.85033 9.67449 5.85033C9.29502 5.83163 8.91721 5.91119 8.57874 6.08107C8.32172 6.21007 8.05265 6.50523 7.84516 7.01853H7.79179V6.00044H6V12.0047H7.90616V8.8112C7.8786 8.48413 7.98327 8.06142 8.19741 7.80987C8.41156 7.55832 8.71789 7.49825 8.95015 7.46774H9.02258C9.62874 7.46774 10.0786 7.84301 10.0786 8.78868V12.0047H11.9847L12 8.35713Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
LinkedIn
</a>
</h3>
<h3 class="contact">
<a href="https://www.instagram.com/aaronplavepottery/" target="_blank">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.9091 12.909C13.2365 12.5817 13.4918 12.1895 13.6588 11.7577C13.8195 11.3443 13.9294 10.8718 13.961 10.1799C13.9926 9.48665 14.0001 9.26529 14.0001 7.50001C14.0001 5.73473 13.9926 5.51328 13.961 4.82008C13.9294 4.12821 13.8195 3.65573 13.6588 3.24228C13.4956 2.80857 13.2398 2.41567 12.9091 2.091C12.5844 1.76028 12.1915 1.50437 11.7578 1.34113C11.3443 1.18056 10.8718 1.0707 10.1799 1.03924C9.48675 1.00748 9.26537 1 7.50006 1C5.73476 1 5.51333 1.00748 4.82014 1.03912C4.12826 1.0707 3.65578 1.18056 3.24233 1.34125C2.80862 1.50447 2.41573 1.76032 2.09105 2.09098C1.76032 2.41563 1.5044 2.80852 1.34113 3.24225C1.18056 3.65573 1.0707 4.12821 1.03924 4.82008C1.00748 5.51328 1 5.73471 1 7.50001C1 9.26532 1.00748 9.48675 1.03924 10.1799C1.07083 10.8718 1.18069 11.3443 1.34138 11.7577C1.5046 12.1915 1.76045 12.5843 2.09111 12.909C2.41578 13.2397 2.80867 13.4955 3.24238 13.6587C3.65586 13.8194 4.12834 13.9293 4.82019 13.9609C5.51348 13.9925 5.73483 14 7.50012 14C9.2654 14 9.48685 13.9925 10.18 13.9609C10.8719 13.9293 11.3444 13.8194 11.7578 13.6587C12.1896 13.4917 12.5818 13.2364 12.9091 12.909ZM1.99949 6.73496C1.99974 6.94524 2.00005 7.19543 2.00005 7.50002C2.00005 7.80461 1.99974 8.0548 1.99949 8.26507C1.99849 9.08596 1.99824 9.29856 2.01963 9.7655C2.04625 10.3509 2.07823 10.7811 2.17588 11.1053C2.26976 11.417 2.37505 11.7342 2.7188 12.1171C3.06255 12.4999 3.39411 12.6733 3.81645 12.8007C4.23879 12.928 4.7696 12.9554 5.23052 12.9764C5.75332 13.0003 5.96052 13.0002 7.05714 12.9999L7.50006 12.9999C7.79304 12.9999 8.03569 13.0001 8.2409 13.0004C9.08195 13.0013 9.29425 13.0015 9.76575 12.9799C10.3512 12.9533 10.7814 12.9213 11.1056 12.8237C11.4173 12.7298 11.7345 12.6245 12.1173 12.2807C12.5001 11.937 12.6735 11.6054 12.8009 11.1831C12.9283 10.7607 12.9557 10.2299 12.9767 9.76902C13.0005 9.24689 13.0004 9.04027 13.0002 7.94749V7.94738L13.0001 7.50039L13.0001 7.05747C13.0004 5.96085 13.0005 5.75365 12.9766 5.23085C12.9556 4.76993 12.9282 4.23912 12.8009 3.81678C12.6735 3.39445 12.5001 3.06288 12.1173 2.71913C11.7345 2.37538 11.4172 2.27009 11.1056 2.17621C10.7813 2.07856 10.3511 2.04658 9.76571 2.01996C9.29421 1.99836 9.08194 1.99859 8.24092 1.99951H8.24092C8.0357 1.99974 7.79305 2.00001 7.50006 2.00001L7.05704 1.99993C5.96051 1.99964 5.75331 1.99958 5.23052 2.02343C4.7696 2.04446 4.23879 2.07183 3.81645 2.19921C3.39411 2.32659 3.06255 2.49999 2.7188 2.88281C2.37505 3.26562 2.26976 3.58286 2.17588 3.89453C2.07823 4.21874 2.04625 4.64894 2.01963 5.23437C1.99824 5.70131 1.99849 5.91401 1.99949 6.73496ZM7.49996 5.25015C6.25741 5.25015 5.25012 6.25744 5.25012 7.49999C5.25012 8.74254 6.25741 9.74983 7.49996 9.74983C8.74251 9.74983 9.7498 8.74254 9.7498 7.49999C9.7498 6.25744 8.74251 5.25015 7.49996 5.25015ZM4.25012 7.49999C4.25012 5.70515 5.70512 4.25015 7.49996 4.25015C9.2948 4.25015 10.7498 5.70515 10.7498 7.49999C10.7498 9.29483 9.2948 10.7498 7.49996 10.7498C5.70512 10.7498 4.25012 9.29483 4.25012 7.49999ZM10.9697 4.7803C11.3839 4.7803 11.7197 4.44452 11.7197 4.0303C11.7197 3.61609 11.3839 3.2803 10.9697 3.2803C10.5555 3.2803 10.2197 3.61609 10.2197 4.0303C10.2197 4.44452 10.5555 4.7803 10.9697 4.7803Z"
fill="currentColor"
></path>
</svg>
Instagram
</a>
</h3>
</div>
<div id="circle-container"></div>
<!-- Circle Generation -->
<script>
let props;
let initialX = -1;
let initialY = -1;
let initialOrientation = true;
function init() {
props = getClientProps();
const largerSize =
props.width > props.height ? props.width : props.height;
const circleContainer = document.getElementById("circle-container");
const circle1 = generateCircle(
10,
largerSize / 4,
0,
0,
props.width / 2,
props.height / 2,
600,
"circle1"
);
circle1.style.background = `linear-gradient(
322deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 35%,
rgb(255, 111, 28)
)`;
// circle1.style.background = `linear-gradient(
// 322deg,
// rgba(0, 0, 0, 1) 0%,
// rgba(0, 0, 0, 1) 35%,
// yellow 100%
// )`;
// circle1.style.background = "yellow";
const circle2 = generateCircle(
largerSize / 3,
largerSize,
0,
0,
props.width / 2,
props.height / 2,
300,
"circle2"
);
// circle2.style.background = "rgb(245, 222, 179)";
// circle2.style.background = "yellow";
circleContainer.appendChild(circle1);
circleContainer.appendChild(circle2);
}
requestAnimationFrame(init);
function generateCircle(
minRadius,
maxRadius,
xMin,
yMin,
xMax,
yMax,
delay,
id
) {
const circle = document.createElement("div");
const size = getRandomInt(minRadius, maxRadius) + "px";
circle.className = "circle";
circle.id = id;
circle.style.width = size;
circle.style.animationDelay = delay + "ms";
circle.style.webkitAnimationDelay = delay + "ms";
circle.style.height = size;
// circle.style.background = getRandomColor(
// 0,
// getRandomInt(50, 200),
// getRandomArbitrary(0.1, 0.4)
// );
circle.style.left = getRandomInt(xMin, xMax) + "px";
circle.style.top = getRandomInt(yMin, yMax) + "px";
return circle;
}
function getClientProps() {
const props = {};
props.height = document.body.clientHeight;
props.width = document.body.clientWidth;
return props;
}
/**
* Returns a random number between min (inclusive) and max (exclusive)
*/
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
/**
* Returns a random integer between min (inclusive) and max (inclusive)
* Using Math.round() will give you a non-uniform distribution!
*/
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRandomColor(min, max, alpha) {
const v = getRandomInt(min, max);
return "rgba(" + [v, v, v].join(",") + "," + alpha + ")";
}
function orientCircle(circle, x, y) {
const adjustedX = initialX > -1 ? initialX - x : 0.5 - x;
const adjustedY = initialY > -1 ? initialY - y : 0.5 - y;
circle.style.animationName = "_";
circle.style.webkitAnimationName = "_";
circle.style.opacity = 1;
const circleMass = circle.style.width.split("px")[0] / 600;
const circleCenterX = initialX ?? 0;
const circleCenterY = initialX ?? 0;
const translateX = (adjustedX * 5) / circleMass;
const translateY = (adjustedY * 5) / circleMass;
circle.style.webkitTransform =
"translateX(" +
translateX +
"px) " +
"translateY(" +
translateY +
"px) " +
"translateZ(0)";
circle.style.transform =
"translateX(" +
translateX +
"px) " +
"translateY(" +
translateY +
"px) " +
"translateZ(0)";
}
setTimeout(function () {
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("deviceorientation", handleOrientation);
}, 1000);
function handleOrientation(event) {
// ignore initial orientation event
if (initialOrientation) {
initialOrientation = false;
return;
}
// This represents a front to back motion of the device.
let x = event.beta; // In degree in the range [-180,180]
// This represents a left to right motion of the device.
let y = event.gamma; // In degree in the range [-90,90]
// Because we don't want to have the device upside down
// We constrain the x value to the range [-90,90]
if (x > 90) {
x = 90;
}
if (x < -90) {
x = -90;
}
if (y > 90) {
y = 90;
}
if (y < -90) {
y = -90;
}
// To make computation easier we shift the range of
// x and y to [0,180]
x += 90;
y += 90;
const xPercent = y / 180;
const yPercent = x / 180;
// Cheap unreliable way of detecting and handling device orientation. Won't affect desktop browsers that support event since AFAIK don't give real data for the event.
if (props.height > props.width) {
orientCircle(circle1, xPercent, yPercent - 0.5);
orientCircle(circle2, xPercent, yPercent - 0.5);
} else {
orientCircle(circle1, yPercent - 0.5, xPercent);
orientCircle(circle2, yPercent - 0.5, xPercent);
}
}
function handleMouseMove(event) {
const x = event.x / props.width;
const y = event.y / props.height;
if (initialX < 0 || initialY < 0) {
initialX = x;
initialY = y;
}
orientCircle(circle1, x, y);
orientCircle(circle2, x, y);
}
</script>
</body>
</html>