-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
642 lines (588 loc) · 32.8 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
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
<!DOCTYPE HTML>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Andrew Frost - Game Programming Portfolio</title>
<style>
body
{
margin: 0px auto 100px auto;
width: 75%;
min-width: 450px;
background-color: black;
}
p
{
margin: 16px 8px;
font-size: 1.5rem; /*Default of 24px in most browsers that scales with user options*/
}
h1
{
margin: 0px;
padding: 30px 0px;
font-size: 3rem;
line-height: 1;
text-align: center;
}
h2
{
margin: 0px;
border: 1px solid black;
padding: 10px 0px;
font-size: 2.25rem;
line-height: 1;
text-align: center;
cursor: pointer;
background-color: rgba(0, 112, 112, 1.0);
}
h2.collapsed_Header
{
background-color: rgba(0, 144, 144, 1.0);
border-radius: 0px 0px 5px 5px;
}
h2:hover, h2:focus
{
outline: none;
background-color: rgba(0, 96, 96, 1.0);
}
h2.collapsed_Header:hover, h2.collapsed_Header:focus
{
outline: none;
background-color: rgba(0, 128, 128, 1.0);
}
h2:active, h2.collapsed_Header:active
{
background-color: rgba(0, 80, 80, 1.0);
}
h3
{
margin: 0px;
border-bottom: 1px solid black;
padding: 8px 0px;
font-size: 1.6875rem;
line-height: 1;
text-align: center;
cursor: pointer;
background-color: rgba(0, 128, 64, 1.0);
}
h3.collapsed_Header
{
border-bottom: none;
border-radius: 0px 0px 4px 4px;
background-color: rgba(0, 160, 80, 1.0);
}
h3:hover, h3:focus
{
outline: none;
background-color: rgba(0, 112, 56, 1.0);
}
h3.collapsed_Header:hover, h3.collapsed_Header:focus
{
outline: none;
background-color: rgba(0, 144, 72, 1.0);
}
h3:active, h3.collapsed_Header:active
{
background-color: rgba(0, 96, 48, 1.0);
}
.background_Image
{
position: fixed;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.title_Bar_Item
{
display: inline-block;
box-sizing: border-box;
padding: 6px;
border: 1px solid rgba(0, 0, 0, 0.9);
width: 33.33333%;
font-size: 3rem;
line-height: 1;
text-decoration: none;
text-align: center;
white-space: nowrap;
overflow: hidden;
vertical-align: bottom;
color: black;
background-clip: padding-box;
background-color: rgba(24, 96, 192, 0.9);
}
.title_Bar_Item:hover, .title_Bar_Item:focus
{
outline: none;
background-color: rgba(22, 88, 176, 0.9);
}
.title_Bar_Item_Current_Selection
{
background-color: rgba(20, 80, 160, 0.9);
}
.title_Bar_Item_Current_Selection:hover, .title_Bar_Item_Current_Selection:focus
{
outline: none;
background-color: rgba(18, 72, 144, 0.9);
}
.title_Bar_Item:active
{
background-color: rgba(16, 64, 128, 0.9);
}
.page_Content
{
border-radius: 0px 0px 5px 5px;
padding: 0px 16px 16px 16px;
background-color: rgba(255, 255, 255, 0.5);
}
.collapsed_Header + div
{
display: none;
}
.project_Section_Holder
{
border-left: 1px solid black;
border-right: 1px solid black;
border-radius: 0px 0px 5px 5px;
background-color: black;
}
.project_Section
{
border: 1px solid black;
border-radius: 0px 0px 5px 5px;
}
.project_Holder
{
border: 1px solid black;
border-radius: 0px 0px 5px 5px;
background-color: rgba(192, 192, 192, 1);
}
.project_Image
{
display: block;
margin: auto;
max-height: 300px;
max-width: 100%;
cursor: pointer;
user-select: none;
}
.link_Button
{
-moz-appearance: button;
-webkit-appearance: button;
appearance: button;
display: inline-block;
padding: 5px 10px;
margin: 3px 5px;
min-width: 125px;
font-size: 1.5rem;
line-height: 1;
text-decoration: none;
text-align: center;
color: buttontext;
}
.hidden /*Imitates "display: none" due to Chrome's PDF viewer reloading each time display is toggled, but not when visibility is toggled*/
{
visibility: hidden;
position: absolute;
top: 0;
left: 0;
margin: 0px;
border: none;
padding: 0px;
height: 0px;
}
.hidden *
{
margin: 0px;
border: 0px;
padding: 0px;
height: 0px;
}
#background_Image_About_Me
{
opacity: 1;
}
#background_Image_Projects
{
opacity: 0;
}
#background_Image_Résumé
{
opacity: 0;
}
#title_Bar
{
border: 1px solid rgba(0, 0, 0, 0.9);
}
#expanded_Project_Image_Holder
{
display: none; /*Is toggled to and from block in JavaScript to display the overlayed image*/
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
outline: none;
user-select: none;
background-color: rgba(0, 0, 0, 0.75);
}
#expanded_Project_Image
{
display: block;
margin: auto;
object-fit: contain;
height: 100%;
max-width: 100%;
}
#résumé_Container /*Allows the résumé PDF to maintain the same aspect ratio (8.5:11 page plus some extra vertical space for the PDF Reader's UI)- keep an eye out for better ways to implement this*/
{
display: block;
position: relative; /*Anchor the contained viewer to this element*/
padding-top: 140%; /*Padding percentages are based on the element's width, so element will be width:padding ratio*/
width: 100%;
}
#résumé_Viewer
{
position: absolute;
top: 0; /*Place the PDF Reader into the container's position*/
left: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id = "title_Bar">
<a id = "About_Me_Title_Bar_Item" class = "title_Bar_Item title_Bar_Item_Current_Selection" href = "#0" onmousedown = "quick_Display_Page_Mousedown(event, 0)" ontouchstart = "quick_Display_Page_Touchstart(event, 0)">About Me</a><a id = "Projects_Title_Bar_Item" class = "title_Bar_Item" href = "#1" onmousedown = "quick_Display_Page_Mousedown(event, 1)" ontouchstart = "quick_Display_Page_Touchstart(event, 1)">Projects</a><a id = "Résumé_Title_Bar_Item" class = "title_Bar_Item" href = "#2" onmousedown = "quick_Display_Page_Mousedown(event, 2)" ontouchstart = "quick_Display_Page_Touchstart(event, 2)">Résumé</a>
</div>
<img id = "background_Image_About_Me" class = "background_Image" src = "About_Me_Background.jpg" alt = "">
<div id = "About_Me_Page_Content" class = "page_Content">
<h1>About Me</h1>
<p>Welcome to my portfolio- I'm Andrew Frost and this website is a showcase of projects that I've worked on. Be sure to check the Projects page to see an overview, browse the source code, and play around with anything that catches your eye!</p>
<p>I've always had an interest in video games, but I didn't decide to pursue them as a career path until a few years after high school. I first started programming in late 2012 by following some online JavaScript tutorials, and I liked it enough to pursue a degree in video game development. I began my studies at Texas A&M University - Corpus Christi in Fall of 2013 where I was first introduced to C++ and had the opportunity to delve deeper into Computer Science. I acquired substantial experience in programming at college and would recommend it for most people interested in looking to expand their technological skills, but it's far from the only way to learn. I graduated Cum Laude and received a Bachelor of Science Degree in Game Programming in May of 2016.</p>
<p>After graduation, I've been pursuing real estate investment opportunities, and in my free time I've been working on a game engine as well as a variety of small programming projects.</p>
<p>I love making programs that surprise people at how fast they work- there's something very satisfying about a tool that does its job spectacularly with no useless bloat.</p>
<p>If you're a recruiter in the Austin area looking for a strong C++ or general programmer, you can contact me by email at <a href = "mailto:andrewdylanfrost@gmail.com">andrewdylanfrost@gmail.com</a>.</p>
</div>
<img id = "background_Image_Projects" class = "background_Image" src = "Projects_Background.jpg" alt = "">
<div id = "Projects_Page_Content" class = "page_Content hidden">
<div id = "expanded_Project_Image_Holder" onmousedown = "toggle_Image_Expand(event, this.firstElementChild)" ontouchstart = "toggle_Image_Expand(event, this.firstElementChild)" onkeydown = "toggle_Image_Expand(event, this.firstElementChild)" onwheel = "toggle_Image_Expand(event, this.firstElementChild)">
<img id = "expanded_Project_Image" src = "hidden.gif" alt = "">
</div>
<h1>Projects</h1>
<div class = "project_Section_Holder">
<div class = "project_Section">
<h2 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">Video Games</h2>
<div>
<div class = "project_Holder">
<h3 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">Endless</h3>
<div>
<img class = "project_Image" onclick = "toggle_Image_Expand(event, this)" onkeydown = "toggle_Image_Expand(event, this)" tabindex = "0" src = "Endless/Endless_Example_Image.jpg" alt = "">
<p>My Senior Capstone project- I worked with a team of 4 other programmers and an artist to design and implement a video game. We decided to create a multiplayer space ship battle game that turned out quite fun, but would need a lot of polish to succeed in the market.</p>
<p>A playable version will be available here soon, but in the meantime the Game Design Document can be found <a href = "Endless/Endless_Game_Design_Document.pdf">here</a>, and the source code is available for download on Bitbucket <a href = "https://bitbucket.org/gamecapstonetamucc/endless-game/downloads/">here</a>.</p>
<a class = "link_Button" href = "Endless/Endless_Game_Design_Document.pdf">Game Design Document</a><a class = "link_Button" href = "https://bitbucket.org/gamecapstonetamucc/endless-game/downloads/">Source Code (Bitbucket)</a>
</div>
</div>
<div class = "project_Holder">
<h3 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">Paladin</h3>
<div>
<img class = "project_Image" onclick = "toggle_Image_Expand(event, this)" onkeydown = "toggle_Image_Expand(event, this)" tabindex = "0" src = "Paladin/Paladin_Example_Image.jpg" alt = "">
<p>One level of a medieval fantasy combat game produced using Unity in my Advanced Game Programming class with one other programmer and a design team- many things are quite rough around the edges due to time constraints on the project. I worked on the enemy AI, menus, inventory, and laying out the levels, along with assisting on any other issues that arose.</p>
<p>You can play on Windows 64-bit systems by downloading from Dropbox <a href = "https://www.dropbox.com/sh/n34jgtnh67lykz3/AAD_Y4-6JaVpIxGTIrF_1IQqa?dl=0">here</a>- controls can be found inside. The source code is available on GitHub <a href = "https://github.com/NoahPena/Paladin-Team-5">here</a>.</p>
<a class = "link_Button" href = "https://www.dropbox.com/sh/n34jgtnh67lykz3/AAD_Y4-6JaVpIxGTIrF_1IQqa?dl=0">Play on Windows 64-bit (Dropbox)</a><a class = "link_Button" href = "https://github.com/NoahPena/Paladin-Team-5">Source Code (GitHub)</a>
</div>
</div>
<div class = "project_Holder">
<h3 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">Adapt</h3>
<div>
<img class = "project_Image" onclick = "toggle_Image_Expand(event, this)" onkeydown = "toggle_Image_Expand(event, this)" tabindex = "0" src = "Adapt/Adapt_Example_Image.png" alt = "">
<p>A video game that I designed alongside a small team in early 2014. While the focus of my work was on creating fun levels, gameplay, and creatures, I also dabbled in creating terrain tiles and helped the programming team implement them into the game.</p>
<p>Source code of the project is unavailable, but the game design document can be found <a href = "Adapt/Adapt_Game_Design_Document.pdf">here</a>. If interested in the terrain tiles, feel free to have a look at them by downloading them <a href = "Adapt/Adapt_Terrain_Tiles.zip" download>here</a> (448 KB).</p>
<a class = "link_Button" href = "Adapt/Adapt_Game_Design_Document.pdf">Game Design Document</a><a class = "link_Button" href = "Adapt/Adapt_Terrain_Tiles.zip" download>Terrain Tiles (448 KB)</a>
</div>
</div>
<div class = "project_Holder">
<h3 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">Blackjack</h3>
<div>
<img class = "project_Image" onclick = "toggle_Image_Expand(event, this)" onkeydown = "toggle_Image_Expand(event, this)" tabindex = "0" src = "Blackjack/Blackjack_Example_Image.png" alt = "">
<p>One of the first programs that I made back in 2012- this is a pure JavaScript version of Blackjack that uses the console log and alert prompts to display and get input from the user in a two-player game. It's nice to see how far I've come!</p>
<p>You can play it <a href = "Blackjack/Blackjack.html">here</a>, or download the source code <a href = "Blackjack/Blackjack.zip" download>here</a> (2 KB).</p>
<a class = "link_Button" href = "Blackjack/Blackjack.html">Play Now</a><a class = "link_Button" href = "Blackjack/Blackjack.zip" download>Source Code (2 KB)</a>
</div>
</div>
</div>
</div>
<div class = "project_Section">
<h2 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">JavaScript Tools</h2>
<div>
<div class = "project_Holder">
<h3 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">Dungeons & Dragons 5th Edition Damage Calculator</h3>
<div>
<img class = "project_Image" onclick = "toggle_Image_Expand(event, this)" onkeydown = "toggle_Image_Expand(event, this)" tabindex = "0" src = "Dungeons_And_Dragons_5th_Edition_Damage_Calculator/Dungeons_And_Dragons_5th_Edition_Damage_Calculator_Example_Image.jpg" alt = "">
<p>A tool for calculating expected damage output in combat for the 5th edition of the tabletop role-playing game Dungeons & Dragons (D&D). Great for analyzing character builds and planning combat encounters.</p>
<p>Take a look at it <a href = "https://andrewfrost.github.io/Dungeons-and-Dragons-5e-Average-Damage-Calculator/">here</a>, or view the source code on GitHub <a href = "https://github.com/AndrewFrost/Dungeons-and-Dragons-5e-Average-Damage-Calculator">here</a>.</p>
<a class = "link_Button" href = "https://andrewfrost.github.io/Dungeons-and-Dragons-5e-Average-Damage-Calculator/">Use Now</a><a class = "link_Button" href = "https://github.com/AndrewFrost/Dungeons-and-Dragons-5e-Average-Damage-Calculator">Source Code (GitHub)</a>
</div>
</div>
<div class = "project_Holder">
<h3 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">Dungeons & Dragons Online Quest Table</h3>
<div>
<img class = "project_Image" onclick = "toggle_Image_Expand(event, this)" onkeydown = "toggle_Image_Expand(event, this)" tabindex = "0" src = "Dungeons_And_Dragons_Online_Quest_Table/Dungeons_And_Dragons_Online_Quest_Table_Example_Image.png" alt = "">
<p>While more of a personal list that I use and very tailored to that end, players of the MMO version of D&D- Dungeons & Dragons Online (DDO)- may find this sortable table of quests to be convenient.</p>
<p>Check it out <a href = "Dungeons_And_Dragons_Online_Quest_Table/Quest_Table.html">here</a> or download the source code <a href = "Dungeons_And_Dragons_Online_Quest_Table/Quest_Table.zip" download>here</a> (13 KB).</p>
<a class = "link_Button" href = "Dungeons_And_Dragons_Online_Quest_Table/Quest_Table.html">Use Now</a><a class = "link_Button" href = "Dungeons_And_Dragons_Online_Quest_Table/Quest_Table.zip" download>Source Code (13 KB)</a>
</div>
</div>
<div class = "project_Holder">
<h3 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">Dungeons & Dragons Online Damage Calculator</h3>
<div>
<img class = "project_Image" onclick = "toggle_Image_Expand(event, this)" onkeydown = "toggle_Image_Expand(event, this)" tabindex = "0" src = "Dungeons_And_Dragons_Online_Damage_Calculator/Dungeons_And_Dragons_Online_Damage_Calculator_Example_Image.png" alt = "">
<p>Another DDO tool that I've found to be helpful- this one is just some straightforward calculations to determine average damage output, great to help decide between many items and abilities.</p>
<p>Available for use <a href = "Dungeons_And_Dragons_Online_Damage_Calculator/Damage_Calculator.html">here</a>, and download <a href = "Dungeons_And_Dragons_Online_Damage_Calculator/Damage_Calculator.zip" download>here</a> (3 KB).</p>
<a class = "link_Button" href = "Dungeons_And_Dragons_Online_Damage_Calculator/Damage_Calculator.html">Use Now</a><a class = "link_Button" href = "Dungeons_And_Dragons_Online_Damage_Calculator/Damage_Calculator.zip" download>Source Code (3 KB)</a>
</div>
</div>
</div>
</div>
<div class = "project_Section">
<h2 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">Other</h2>
<div>
<div class = "project_Holder">
<h3 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">Weather On Wheels</h3>
<div>
<img class = "project_Image" onclick = "toggle_Image_Expand(event, this)" onkeydown = "toggle_Image_Expand(event, this)" tabindex = "0" src = "Weather_On_Wheels/Weather_On_Wheels_Example_Image.jpg" alt = "">
<p>A project I contributed to at the Conrad Blucher Institute (CBI) that would give forecasted weather and severe weather events along a travel route. I worked with an existing codebase to improve speed, reliability, and implement additional features such as optional overlays for temperatures, precipitation levels, and windspeeds along a route. Weather On Wheels was available on a website and in the Android and Apple stores, but unfortunately, CBI no longer maintains the project and handed it off to another company that has left it nonfunctioning for a long time.</p>
<p>A poster I used for a presentation on Weather On Wheels that contains some additional information and screenshots of it in a late stage of development can be found <a href = "Weather_On_Wheels/Weather_On_Wheels_Poster.png">here</a>.</p>
<a class = "link_Button" href = "Weather_On_Wheels/Weather_On_Wheels_Poster.png">View Poster</a>
</div>
</div>
<div class = "project_Holder">
<h3 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">HTML Canvas Painter</h3>
<div>
<img class = "project_Image" onclick = "toggle_Image_Expand(event, this)" onkeydown = "toggle_Image_Expand(event, this)" tabindex = "0" src = "HTML_Canvas_Painter/HTML_Canvas_Painter_Example_Image.png" alt = "">
<p>A primitive paint program I made to assist with an early Graphics Programming project. You can play around with it <a href = "HTML_Canvas_Painter/HTML_Canvas_Painter.html">here</a>, or download the source code <a href = "HTML_Canvas_Painter/HTML_Canvas_Painter.zip" download>here</a> (3 KB).</p>
<a class = "link_Button" href = "HTML_Canvas_Painter/HTML_Canvas_Painter.html">Use Now</a><a class = "link_Button" href = "HTML_Canvas_Painter/HTML_Canvas_Painter.zip" download>Source Code (3 KB)</a>
</div>
</div>
<div class = "project_Holder">
<h3 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">Portfolio</h3>
<div>
<img class = "project_Image" onclick = "toggle_Image_Expand(event, this)" onkeydown = "toggle_Image_Expand(event, this)" tabindex = "0" src = "Portfolio/Portfolio_Example_Image.jpg" alt = "">
<p>This website! Hopefully you've found that it runs quickly and is organized well. If you've noticed any problems, let me know about them at <a href = "mailto:andrewdylanfrost@gmail.com">andrewdylanfrost@gmail.com</a>.</p>
<p>The background images are available for free at the following external locations: <a href = "https://pixabay.com/en/nature-wood-tree-light-sun-fog-3151869/">About Me</a>, <a href = "https://pixabay.com/en/railway-seemed-track-train-2439189/">Projects</a>, <a href = "https://pixabay.com/en/away-bridge-web-wood-nature-3024773/">Résumé</a>. Source code for the website can be found on GitHub <a href = "https://github.com/AndrewFrost/Portfolio">here</a>.</p>
<a class = "link_Button" href = "https://github.com/AndrewFrost/Portfolio">Source Code (GitHub)</a>
</div>
</div>
<div class = "project_Holder">
<h3 onmousedown = "collapsible_Element_Clicked(event, this)" onkeydown = "collapsible_Element_Key_Pressed(event, this)" tabindex = "0">Miscellaneous</h3>
<div>
<p>In addition, I've worked on a large number of small projects to bolster my skills using a variety of languages including F#, Perl, and Java. Some of the projects include small games such as Tic-tac-toe, an optimal path-finding algorithm, and a command-line file navigator.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<img id = "background_Image_Résumé" class = "background_Image" src = "Résumé_Background.jpg" alt = "">
<div id = "Résumé_Page_Content" class = "page_Content hidden">
<h1>Résumé</h1>
<a class = "link_Button" href = "Résumé/Andrew_Frost_Résumé.pdf">View</a><a class = "link_Button" href = "Résumé/Andrew_Frost_Résumé.zip" download>Download (89 KB)</a><br>
<br>
<div id = "résumé_Container">
<object id = "résumé_Viewer" type = "application/pdf" data = "Résumé/Andrew_Frost_Résumé.pdf#zoom=Fit&view=Fit">The PDF Viewer couldn't display the résumé- you can try downloading it <a href = "Résumé/Andrew_Frost_Résumé.zip" download>here</a> (89 KB) or viewing it <a href = "Résumé/Andrew_Frost_Résumé.pdf#zoom=Fit&view=Fit">here</a>.<br></object>
</div>
</div>
<script type = "text/javascript">
var currently_Displayed_Page_Layout_Element_Index = 0;
var page_Layout_Elements_Array = [];
page_Layout_Elements_Array.push({page_Content_Element: document.getElementById("About_Me_Page_Content"), title_Bar_Selection_Element: document.getElementById("About_Me_Title_Bar_Item"), background_Image_Element: document.getElementById("background_Image_About_Me")});
page_Layout_Elements_Array.push({page_Content_Element: document.getElementById("Projects_Page_Content"), title_Bar_Selection_Element: document.getElementById("Projects_Title_Bar_Item"), background_Image_Element: document.getElementById("background_Image_Projects")});
page_Layout_Elements_Array.push({page_Content_Element: document.getElementById("Résumé_Page_Content"), title_Bar_Selection_Element: document.getElementById("Résumé_Title_Bar_Item"), background_Image_Element: document.getElementById("background_Image_Résumé")});
function display_Selected_Page_Content(new_Page_Layout_Element_Index) //Sets the visible page content and selected menu bar item based on the index passed in
{
page_Layout_Elements_Array[currently_Displayed_Page_Layout_Element_Index].page_Content_Element.className = "page_Content hidden";
page_Layout_Elements_Array[currently_Displayed_Page_Layout_Element_Index].title_Bar_Selection_Element.className = "title_Bar_Item";
page_Layout_Elements_Array[currently_Displayed_Page_Layout_Element_Index].background_Image_Element.style.opacity = 0;
page_Layout_Elements_Array[new_Page_Layout_Element_Index].page_Content_Element.className = "page_Content";
page_Layout_Elements_Array[new_Page_Layout_Element_Index].title_Bar_Selection_Element.className = "title_Bar_Item title_Bar_Item_Current_Selection";
page_Layout_Elements_Array[new_Page_Layout_Element_Index].background_Image_Element.style.opacity = 1;
currently_Displayed_Page_Layout_Element_Index = new_Page_Layout_Element_Index;
}
function quick_Display_Page_Mousedown(event, new_Page_Layout_Element_Index) //Used with mousedown to start displaying page_Content a little sooner- a default link click event can follow soon after and trigger redirect_Page_Content()
{
if(event.button === 0)
{
if(currently_Displayed_Page_Layout_Element_Index !== new_Page_Layout_Element_Index)
{
window.history.pushState(null, "", "#" + new_Page_Layout_Element_Index);
display_Selected_Page_Content(new_Page_Layout_Element_Index);
}
}
}
function quick_Display_Page_Touchstart(event, new_Page_Layout_Element_Index) //Used with touchstart to start displaying page_Content a little sooner- a default link click event can follow soon after and trigger redirect_Page_Content()
{
if(currently_Displayed_Page_Layout_Element_Index !== new_Page_Layout_Element_Index)
{
window.history.pushState(null, "", "#" + new_Page_Layout_Element_Index);
display_Selected_Page_Content(new_Page_Layout_Element_Index);
}
}
function redirect_Page_Content() //Allows opening new tabs or windows from the title bar into a specific section
{
var initial_Page_Content_String_Array = window.location.hash.split("#");
if(initial_Page_Content_String_Array.length === 2 && Number(initial_Page_Content_String_Array[1]) >= 0 && Number(initial_Page_Content_String_Array[1]) <= 2)
{
if(Number(initial_Page_Content_String_Array[1]) !== currently_Displayed_Page_Layout_Element_Index)
{
display_Selected_Page_Content(Number(initial_Page_Content_String_Array[1]));
}
}
else
{
window.history.replaceState(null, "", "#0"); //Defaults any invalid URL to be the About Me section
display_Selected_Page_Content(0);
}
}
window.onpopstate = redirect_Page_Content; //Will trigger redirect_Page_Content() when the a user navigates their browser history, along with when they click a link such as a title_Bar_Item- could be improved by getting rid of link redirects
redirect_Page_Content(); //Redirects when the page is first loaded, defaulting to the About Me section
function toggle_Collapse(element_To_Toggle)
{
element_To_Toggle.classList.toggle("collapsed_Header");
}
function collapsible_Element_Clicked(event, element_To_Toggle) //Project's list mouse click event handler
{
if(event.button === 0)
{
toggle_Collapse(element_To_Toggle);
}
}
function collapsible_Element_Key_Pressed(event, element_To_Toggle) //Project's list key event handler- requires proper HTML layout, see project_Section_Holder for current implementation
{
switch(event.key)
{
case "Enter": //Toggles a selection's collapse state
toggle_Collapse(element_To_Toggle);
event.preventDefault();
break;
case "ArrowUp": //Moves the focus to the previous selection
if(element_To_Toggle.parentNode.className === "project_Section")
{
if(element_To_Toggle.parentNode.previousElementSibling !== null)
{
if(element_To_Toggle.parentNode.previousElementSibling.firstElementChild.className === "collapsed_Header")
{
element_To_Toggle.parentNode.previousElementSibling.firstElementChild.focus(); //Moves the focus to the previous project_Section if it is collapsed
}
else
{
element_To_Toggle.parentNode.previousElementSibling.children[1].lastElementChild.firstElementChild.focus(); //Moves the focus to the last project_Holder in the previous project_Section if it is not collapsed
}
}
}
else if(element_To_Toggle.parentNode.className === "project_Holder")
{
if(element_To_Toggle.parentNode.previousElementSibling !== null)
{
element_To_Toggle.parentNode.previousElementSibling.firstElementChild.focus(); //Moves the focus to the previous project_Holder unless it's the first project_Holder
}
else
{
element_To_Toggle.parentNode.parentNode.parentNode.firstElementChild.focus(); //Moves the focus to the containing project_Section if it's the first project_Holder
}
}
event.preventDefault();
break;
case "ArrowRight": //Expands out a selection
if(element_To_Toggle.className === "collapsed_Header")
{
toggle_Collapse(element_To_Toggle); //Expands a project_Section or project_Holder if it is not currently collapsed
}
else if(element_To_Toggle.parentNode.className === "project_Section")
{
element_To_Toggle.nextElementSibling.firstElementChild.firstElementChild.focus(); //Move the focus to the first project_Holder in a project_Section if the project_Section is not collapsed
}
event.preventDefault();
break;
case "ArrowDown": //Moves the focus to the next selection
if(element_To_Toggle.parentNode.className === "project_Section")
{
if(element_To_Toggle.className === "collapsed_Header")
{
if(element_To_Toggle.parentNode.nextElementSibling !== null)
{
element_To_Toggle.parentNode.nextElementSibling.firstElementChild.focus(); //Moves the focus to the next project_Section for collapsed project_Sections unless it's the last project_Section
}
}
else
{
element_To_Toggle.nextElementSibling.firstElementChild.firstElementChild.focus(); //Moves the focus to the first project_Holder of a non-collapsed project_Section
}
}
else if(element_To_Toggle.parentNode.className === "project_Holder")
{
if(element_To_Toggle.parentNode.nextElementSibling !== null)
{
element_To_Toggle.parentNode.nextElementSibling.firstElementChild.focus(); //Moves the focus to the next project_Holder unless it's the last project_Holder in a project_Section
}
else if(element_To_Toggle.parentNode.parentNode.parentNode.nextElementSibling !== null)
{
element_To_Toggle.parentNode.parentNode.parentNode.nextElementSibling.firstElementChild.focus(); //Moves the focus from the last project_Holder to the next project_Section unless it's the last project_Section
}
}
event.preventDefault();
break;
case "ArrowLeft": //Collapses a selection
if(element_To_Toggle.className !== "collapsed_Header")
{
toggle_Collapse(element_To_Toggle); //Collapses a project_Section or project_Holder if it is not currently collapsed
}
else
{
if(element_To_Toggle.parentNode.className === "project_Section")
{
element_To_Toggle.parentNode.parentNode.firstElementChild.firstElementChild.focus(); //Moves the focus to the first project_Section (Video Games) when current project_Section is collapsed
}
else if(element_To_Toggle.parentNode.className === "project_Holder")
{
element_To_Toggle.parentNode.parentNode.parentNode.firstElementChild.focus(); //Moves the focus to the containing project_Section when the project_Holder is collapsed
}
}
event.preventDefault();
break;
}
}
var expanded_Project_Image_Holder_Element = document.getElementById("expanded_Project_Image_Holder");
var expanded_Project_Image_Element = document.getElementById("expanded_Project_Image");
var original_Expanded_Project_Image_Element = expanded_Project_Image_Element;
function toggle_Image_Expand(event, element_To_Toggle)
{
if(expanded_Project_Image_Element.src !== element_To_Toggle.src)
{
if(event.type !== "keydown" || event.key === "Enter")
{
expanded_Project_Image_Holder_Element.style.display = "block";
expanded_Project_Image_Element.src = element_To_Toggle.src;
original_Expanded_Project_Image_Element = element_To_Toggle;
expanded_Project_Image_Holder_Element.focus();
}
}
else
{
expanded_Project_Image_Holder_Element.style.display = "none";
expanded_Project_Image_Element.src = "hidden.gif"; //Empty src can cause issues, hidden.gif is the filename for a very small gif
original_Expanded_Project_Image_Element.focus();
if(event.type === "mousedown" || event.type === "touchstart") //Prevents focus from leaving the small image and touch events from sending a click that falls past the overlay
{
event.preventDefault();
}
}
}
</script>
</body>
</html>