-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
566 lines (437 loc) · 40.2 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
<!DOCTYPE HTML>
<!--
Prologue by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Anna Sikkink</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/all.min.css" /><!--font awesome-->
<link rel="stylesheet" href="assets/jquery-ui/jquery-ui.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<script src="assets/jquery-ui/external/jquery/jquery.js"></script>
<script src="assets/jquery-ui/jquery-ui.js"></script>
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<script>
$(document).ready(function(){
$( "#dialog" ).dialog({
autoOpen: false,
width:"auto",
show: {
effect: "fade",
duration: 500
},
hide: {
effect: "puff",
duration: 500
},
minWidth: 600,
modal: true
});
$("body").on("click",".ui-widget-overlay",function() {
$('#dialog').dialog( "close" );
});
});
function open_dialog(info){
switch(info){
case "renewal":
$('#dialog').dialog('option', 'title', 'Renewal Application');
$("#dialog_info").html("<div class='dialog_info'><img src='images/pic10.jpg' style='box-shadow: 8px 8px 10px #aaa;' width='100%' height='100%'></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'>The Renewal Application was developed by my co-worker and I when we were employed as students at UHM Student Housing. <br><br>The goal of this project was to increase the efficiency of the room renewal process through a new web application. We focused on making the interface easy for staff to use to assign returning students to rooms and see what rooms were assigned, available, or reserved. <br><br> We began development in Spring 2015 and the project was put into use in Spring 2016. It cut down the renewal process from three days to one, allowing staff to assign ~2k students in just 8 hours. <br><br> I have continued to add functionality and apply patches, and am currently working on implementing new improvements. </p><p style='font-size:12pt;font-style: italic;'>Team members: Kara Knight<br>Tools used: PHP, MySQL, phpmyadmin, JavaScript, HTML, CSS, LAMP server</p></div>");
break;
case "shsite":
$('#dialog').dialog('option', 'title', 'Student Housing Services Website');
$("#dialog_info").html("<div class='dialog_info'><img src='images/pic14.jpg' style='box-shadow: 8px 8px 10px #aaa;' width='100%' height='100%'></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'>One of my first tasks when I started as an IT Specialist at Student Housing was to redesign their website. The previous site was beginning to look out of date, and the information was not easy for students and parents to find.<br><br> I met with stakeholders to come up with the overall organization of the new site, and obtained up-to-date information to include as content. I set up a new Drupal installation and designed a new theme for the site, giving it a more modern look and including more interactive aspects, such as 360 images/videos and interactive statistics. I also designed the new site to be mobile friendly and accessible. </p><p style='font-size:12pt;font-style: italic;'>Site URL: <a href='https://manoa.hawaii.edu/housing/' target='_blank'>manoa.hawaii.edu/housing</a><br>Tools used: Drupal, MySQL, JavaScript, HTML, CSS, Adobe Photoshop (for image editing/processing), Adobe Premiere (for 360 video production)</p></div>");
break;
case "galaxies":
$('#dialog').dialog('option', 'title', 'Local Galaxies Visualization');
$("#dialog_info").html("<div class='dialog_info'><img src='images/pic05.jpg' style='box-shadow: 8px 8px 10px #aaa;' width='100%' height='100%'><p style='font-size:12pt;font-style: italic;'>Tools used: JavaScript, HTML, CSS, Bootstrap, XAMPP server</p></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'>I developed the Galaxies Visualization while working as an undergraduate research assistant at the Laboratory for Advanced Visualization and Applications (LAVA) in Spring 2017. I consulted with Dr. Brent Tully at the Institute of Astronomy at UH, and together we designed an interface for visualizing his research team's latest local galaxy data. Using a JavaScript library called Three.js, I developed an interactive web interface to view the galaxy data in 3D. <br><br>Galaxy locations are plotted in 3D on a sphere based on their relative location in the sky, and given a color to denote the speed at which they are moving as observed from Earth. Users can select which galaxies to view by velocity, and adjust the coordinate system used to plot the data as desired. The 3D visualization then displays the data selected, and allows the user to move the 3D model to see from all angles.<br><br> Long term, the visualization will also allow users to click on individual galaxies in the model and see their name, image(s), and other useful information, along with Dr. Tully's data.</p></div>");
break;
case "uh_courses":
$('#dialog').dialog('option', 'title', 'UH Course Search');
$("#dialog_info").html("<div class='dialog_info'><iframe class='yt_video' src='https://www.youtube.com/embed/W11CAolKwGY?rel=0&showinfo=0' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen ></iframe><p style='font-size:12pt;font-style: italic;'>Team members: Kara Knight, Yiming Xie<br>Tools used: PHP, MySQL, phpmyadmin, JavaScript, HTML, CSS, Java, XAMPP server</p></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'><b>UH Course Search</b> is a project I developed with a small team in my Data Storage and Retrieval class (ICS 321). Together we developed a web application to allow user to search through the UH Manoa course offerings with advanced filtering options, which would speed up the time it takes to find a course the user is interested in. It also combined information from ratemyprofessors.com, so professor ratings would be shown with the course information. <br><br>I wrote a script to scrape all the data from the UH course listing site (multiple pages for each course), and ratemyprofessors, and put all of the data in a database my team and I designed. We wrote a function to generate dynamic SQL queries to our database based on the filter options selected by the user.<br><br> We also developed a Java application with some of the SQL queries to compare database search times between the PHP and Java. The web interface was not well designed as our focus for the project was more on creating the dynamic database search functionality.</p></div>");
break;
case "pilikia":
$('#dialog').dialog('option', 'title', 'Pilikia Service Request System');
$("#dialog_info").html("<div class='dialog_info'><img src='images/pic13.jpg' style='box-shadow: 8px 8px 10px #aaa;' width='100%' height='100%'></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'>While employed at UH Manoa Student Housing, I created a new web application which allows Housing residents to submit service requests for broken or damaged items in their room, and allow staff to view and attend to these requests. Staff are able to assign various maintenance workers to requests, send messages to residents/receive messages from residents, and submit work logs for work that has been completed. In addition, staff are able to search requests via a dynamic search page, and view statistics for requests in real time. <br><br>In order to make sure the site met all of our various staff needs, I met with stakeholders from each department within Housing to understand how they would need to interact with the system, and worked with them to design interfaces and functionality that would work for them. <br><br>This application is ongoing in development, we are currently adding more features to include inventory tracking and management, generating billing documents, and other additional improvements. </p><p style='font-size:12pt;font-style: italic;'>Team members: Tyler Higashionna (student employee)<br>Tools used: Laravel Framework, PHP, MySQL, phpmyadmin, JavaScript, HTML, CSS, LAMP server, Google Charts API</p></div>");
break;
case "skysearch":
$('#dialog').dialog('option', 'title', 'SkySearch');
$("#dialog_info").html("<div class='dialog_info'><img src='images/pic01.jpg' style='box-shadow: 8px 8px 10px #aaa;' width='100%' height='100%'></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'><b>SkySearch</b> is an application I developed for my Software Systems for Astronomy course I took at UH Hilo in Summer 2015. Using a large dataset of interesting astronomy targets (stars, galaxies, nebulas, etc), I created a web application to search for a target and view it's information, and calculated details for viewing the target for the night. Images of the target were displayed using the Aladin Lite plugin. I continued to develop this application with one of my classmates after completing the course.<br><br>In Fall 2015, I re-wrote this application in my Introduction to Programming for the Web course (ICS 415) with another classmate, using the Meteor framework and MongoDB for data storage. This iteration also allowed the user to create an account and save their favorite astronomy targets to view again at any time.</p><p style='font-size:12pt;font-style: italic;'>Team members: Alejandro Carvallo (1st iteration), Yiming Xie (2nd iteration)<br>Tools used: PHP, JavaScript, HTML, CSS, MySQL (1st iteration), XAMPP server (1st iteration), Meteor (2nd iteration), MongoDB (2nd iteration)</p></div>");
break;
case "kilohoku":
$('#dialog').dialog('option', 'title', 'Kilo Hoku');
$("#dialog_info").html("<div class='dialog_info'><iframe class='yt_video' src='https://www.youtube.com/embed/9SqqNXH2mMc?rel=0&showinfo=0' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe><p style='margin-bottom:0px'>Project website: <a href='https://kilohokuvr.com/' target='blank'>kilohokuvr.com</a></p><p style='font-size:12pt;font-style: italic;'>Team members: Patrick Karjala, Dean Lodes, Kari Noe, Dr. Jason Leigh (Advisor)<br>Tools used: Unity3D engine, C#, Autodesk Maya, Adobe Photoshop, HTC Vive</p></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'><b>Kilo Hoku</b> is a Virtual Reality Wayfinding simulation, which allows users to experience navigating on a voyaging canoe using traditional Polynesian wayfinding techniques. A small team and I created this project for the HTC Vive VR headset in a graduate level special topics course on Virtual Reality (VR) development. My focus was on the stargazing aspect of wayfinding; I created the night sky and implemented a system so users could point the Vive controller at the sky to see the constellations. I also added an option to view the Hawaiian star lines, a system of star groupings across the sky. The sky rotates in real time, and can be sped up using the controllers as well. <br><br> My team members worked on making it possible to sail on the canoe, handling user interactivity and displaying user instructions. We created our own island models and added the Hawaiian star compass for users to learn and reference for navigating. We used existing water assets from the Unity asset store, and obtained the Hokulea model from Bishop Museum.<br><br>My team has continued development on this project over the last two years, demoing at the Malama Honua Summit in 2017, Honolulu Museum of Art, and Bishop Musem's Wayfinders Weekend. Our paper on this project has been published in <a href=' https://www.mitpressjournals.org/doi/abs/10.1162/pres_a_00301' target='blank'>PRESENCE: Teleoperators and Virtual Environments</a> in the MIT Press journals.</p></div>");
break;
case "challenger":
$('#dialog').dialog('option', 'title', 'Moon Mission VR');
$("#dialog_info").html("<div class='dialog_info'><iframe class='yt_video' src='https://www.youtube.com/embed/EPg3sjmwZI0?rel=0&showinfo=0' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe><p style='font-size:12pt;font-style: italic;'>Team members: Jonathan Na, Aidai Almaz kyzy<br>Tools used: Unity3D engine, C#, Autodesk Maya, Adobe Photoshop, HTC Vive</p></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'><b>Moon Mission VR</b> is a Virtual Reality game where one player is in VR as an astronaut aboard a spaceship headed for the Moon, while a second player outside of VR plays as Mission Control, guiding the astronaut through the mission. The goal of the mission is to survive the journey to the Moon, and to build a probe successfully prior to reaching the Moon.<br><br>Our team was inspired by the <a href='https://www.challenger.org/' target='_blank'>Challenger Center</a> field trips we experienced in intermediate school, in which the class would split up into teams: half of each team would conduct the mission on the spaceship, while the other half helped guide them from Mission Control. We decided that the Probe and Life Support roles would translate well into virtual reality since they are highly interactive in nature, so we implemented scenarios based on those roles in our application.<br><br> Long term, we would like to develop this game further, to be a multiplayer experience, support more mission roles, and work on other VR hardware, such as the Oculus Quest.</p></div>");
break;
case "mauivr":
$('#dialog').dialog('option', 'title', 'Maui Snares the Sun VR');
$("#dialog_info").html("<div class='dialog_info'><img src='images/pic03.jpg' style='box-shadow: 8px 8px 10px #aaa;' width='100%' height='100%'><p style='margin-bottom:0px'>Read the myth: <a href='http://www.sacred-texts.com/pac/maui/maui07.htm' target='_blank'>www.sacred-texts.com/pac/maui/maui07.htm</a></p><p style='font-size:12pt;font-style: italic;'>Team members: Andrew Guagliardo, Derek Chan, Dr. Jason Leigh (Advisor) <br>Tools used: Unity3D engine, C#, Autodesk Maya, HTC Vive</p></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'>In Fall 2016, a small team and I were awarded a grant through the Undergraduate Research Opportunity Program (UROP) to work on a Virtual Reality (VR) project. Our goal was to create an interactive immersive VR re-telling of a Polynesian myth, and study if VR was a more effecive way for students to learn and understand the myth.<br><br> We decided to use the story \"How Maui Snared the Sun\", as many of the elements in the story worked well for interactivity. Over the course of the semester, we prototyped many different ideas and developed the functionality we needed. To make it feel immersive, we made the characters react to the player's movements and actions. The story progresses as the player completes various actions in the virtual environment.<br><br> We presented our project at the Fall 2016 Undergraduate Showcase and achieved \"Honorable Mention\" in the Engineering & Computer Science category.</p></div>");
break;
case "debug":
$('#dialog').dialog('option', 'title', 'DebuggerPlusPlus');
$("#dialog_info").html("<div class='dialog_info'><img src='images/pic07.jpg' style='box-shadow: 8px 8px 10px #aaa;' width='100%' height='100%'><p style='font-size:12pt;font-style: italic;'>Team members: David Neely, Brian Mayeshiro, Kin Wang, Kentaro Yagi, Dr. Jason Leigh (Advisor) <br>Tools used: Unity3D engine, C#, Autodesk Maya, Adobe Photoshop, Oculus Rift DK2</p></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'><b>DebuggerPlusPlus</b> was a fun side project Virtual Reality game created with the Association for Computing Machinery at Mānoa's (ACM Manoa) VR playground team in Spring 2016. <br><br>All of us had an interest in creating games for Virtual Reality, and we knew we wanted to do something with a 'horror' theme. Together we decided to make a game based on one of the scariest things about living in Hawaii - large flying cockroaches (lovingly called B-52's). But in our game, the roaches could be much bigger than in real life, so we made them the size of rabbits, dogs, and even as big as the room! We designed the virtual space to look like ACM's study room, ICSpace, and made numerous roaches of varying sizes come after the player, in the dark. Not for the faint of heart or those who can't stand bugs!<br><br>The player gets only two tools, a dim flashlight and a slipper to squash the roaches. As a cute pun, the 'bugs' in DebuggerPlusPlus burst into green glowing 1's and 0's after getting smashed, as if they were bugs in a computer program.</p></div>");
break;
case "ufs":
$('#dialog').dialog('option', 'title', 'Unidentified Flying Squirrel');
$("#dialog_info").html("<div class='dialog_info'><iframe class='yt_video' src='https://www.youtube.com/embed/jxCfv8KtzIQ?rel=0&showinfo=0' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe><p style='font-size:12pt;font-style: italic;'>Team members: Micaela Gradie (artist), Nathan Kanekuni, Johnny Le, Joel Sikkink (voice) <br>Tools used: Unity3D engine, C#, Adobe Photoshop</p></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'><b>Unidentified Flying Squirrel</b> is a 2D casual platformer game I developed with a multidisciplinary team in my Video Game Design and Development (ICS 491) course in Spring 2015. Our team's artist enjoyed drawing animals, and we developed the movement mechanics early on, so we knew we wanted to make a vertical platformer with animals. My team had a shared interest in UFOs (which was abundantly prevelant in our brainstorming ideas and prototypes), so we decided to make a game where the player is a squirrel saving his friends from an alien abduction. The squirrel has to climb up and pass various obstacles to save his friends before time runs out!<br><br>My focus in development was creating the levels, building the different obsticles for the player, and handling some of the animations and visual effects like parallax. I also developed the \"blackout\" portion at the end of the game where the UFO goes dark and the player needs to navigate back down to escape in time. I worked on the sound design as well, composing the background music, adding sound effects, and recording/editing my brother's voice for the squirrel and his friends.<br><br> At the end of the semester, Unidentified Flying Squirrel was voted \"best video game\" in the class. My team and I had a lot of fun working on this project! </p></div>");
break;
case "aoa":
$('#dialog').dialog('option', 'title', 'Attack On Algae');
$("#dialog_info").html("<div class='dialog_info'><iframe class='yt_video' src='https://www.youtube.com/embed/1kUvKToVPOs?rel=0&showinfo=0' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe><p style='font-size:12pt;font-style: italic;'>Team members: Andrew Guagliardo (Creative Media), Jack Lam (Comp Sci), Kara Knight (Comp Sci), Kasey Matsumoto (Comp Sci), Michelle Uchida (Marine Bio) <br>Tools used: Unity3D engine, C#, Autodesk Maya, Adobe Photoshop</p></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'><b>Attack On Algae</b> is an interactive museum exhibit I developed with a multidisciplinary team of six other students from UH Manoa and UH Hilo. My team consisted of a marine biology major, 4 computer science majors (including myself), and a Creative Media major. As team lead, I helped my team members with brainstorming, determining weekly tasks, and writing reports. Our goal was to use data from research conducted by our marine biologist to create an interactive visualization of coral reefs. We decided to focus on how algae affects the coral and what can be done to help retain coral health. <br><br> From Michelle's research, we found that a vacuum-like machine called a 'Supersucker' is used locally to remove overgrown algae from dying reefs to allow the coral to collect sunlight and nutrients, and become healthy again. Using the Xbox Kinect's motion tracking abilities, Jack integrated the Kinect into our project to allow the player to use a Supersucker and use their hands to remove algae which appear around the screen. Our exhibit was designed to be a guided tour, showing the player the state of the reef with the overgrown algae, teaching them about the types of algae and their negative effects on the reef, introducing them to the Supersucker, and letting them clean the reef and see the positive results. <br><br>The exhibit was on display at the Imiloa Astronomy Center in Hilo for the public to experience. Although my entire team didn't get to visit the museum and see the project on display, we heard that children really enjoyed our exhibit for the interactive aspects.</p></div>");
break;
case "tse":
$('#dialog').dialog('option', 'title', 'Twitch Sacrifices Everyone');
$("#dialog_info").html("<div class='dialog_info'><img src='images/ggj2016.jpg' style='box-shadow: 8px 8px 10px #aaa;' width='90%' height='90%'><p style='font-size:12pt;font-style: italic;'>Team members (in image order): Tony Gaskell, Yukio Yamamoto, Jesse Thompson, Ron Nagata <br>Tools used: Unity3D engine, C#, Autodesk Maya, Adobe Photoshop</p></div><div class='dialog_info_text'><p style='text-align:left;font-size:12pt'><b>Twitch Sacrifices Everyone</b> was a fun video game I made with a small team during the Global Game Jam 48-hour Hackathon in 2016. We decided to make a game which integrated with the Twitch video streaming website, which allowed stream viewers to interact with the game. The theme for the hackathon that year was 'ritual', so we designed our game to allow viewers from Twitch choose fellow viewers to 'sacrifice' in a volcano to one of the two randomly chosen 'gods', which were based on internet memes and references. Viewers would 'vote' for a god in the Twitch chat, while our webserver collected that data using the Twitch API and keep a tally. The winner with the most votes would be sacrificed after the voting period was up, and that 'god' would win the round, so the selected viewer would be sacrificed in the volcano. Our webserver would keep stats over multiple sacrifices, allowing us to have a scoreboard for the highest winning 'god'.<br><br>I worked on the game design and flow in Unity, creating the game state machine and taking Jesse's 3D models and sprites and integrating them into the game scene. I also worked on accepting data from our webserver into Unity to change the game state, such as updating vote counts and triggering the winning/sacrificing sequence. <br><br> Our game won the 'Most Unique' award at the end of the hackathon!</p></div>");
break;
default: break;
}
$( "#dialog" ).dialog( "open" );
}
</script>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.yt_video{
width: 100%;
min-height: 215px;
height: 100%;
}
@media all and (max-width: 375px){
.dialog_info{
width:100%
}
.ui-dialog{
max-width: 360px;
}
}
@media all and (max-width: 414px) and (min-width: 376px){
.dialog_info{
width:100%
}
.ui-dialog{
max-width: 414px;
}
}
@media all and (max-width: 699px) and (min-width: 415px){
.dialog_info{
width:100%
}
.yt_video{
width: 100%;
min-height: 388px;
height: 100%;
}
}
@media all and (max-width: 849px) and (min-width: 700px){
.dialog_info{
width:100%
}
.yt_video{
width: 100%;
min-height: 415px;
height: 100%;
}
}
@media all and (max-width: 1049px) and (min-width: 850px){
.dialog_info{
width:100%
min-width:500px;
}
.yt_video{
width: 100%;
min-height: 455px;
height: 100%;
}
}
@media all and (min-width: 1050px){
.dialog_info{
float:left;
width:50%;
min-width:500px;
}
.dialog_info_text{
float:left;
width:50%;
padding-left:30px;
}
.yt_video{
width: 100%;
min-height: 515px;
height: 100%;
}
}
</style>
</head>
<body>
<div id="dialog" title="Dialog">
<div id="dialog_info"><p></p></div>
</div>
<!-- Header -->
<div id="header">
<div class="top">
<!-- Logo -->
<div id="logo">
<span class="image avatar72"><img src="images/avatar.jpg" alt="me" /></span>
<h1 id="title">Anna Sikkink</h1>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#aboutme" id="aboutme-link" class="skel-layers-ignoreHref"><span class="icon fa-user">About Me</span></a></li>
<li><a href="#portfolio" id="portfolio-link" class="skel-layers-ignoreHref"><span class="icon fa-th">Portfolio</span></a></li>
<li><a href="#exp" id="exp-link" class="skel-layers-ignoreHref"><span class="icon fa-briefcase">Experience</span></a></li>
<li><a href="#interests" id="interests-link" class="skel-layers-ignoreHref"><span class="icon fa-space-shuttle">Interests</span></a></li>
</ul>
</nav>
</div>
<div class="bottom">
<!-- Social Icons -->
<ul class="icons">
<li><a href="https://www.linkedin.com/in/anna-sikkink/" target='blank' class="icon fa-linkedin"><span class="label">LinkedIn</span></a></li>
<li><a href="https://github.com/asikkink" target='blank' class="icon fa-github"><span class="label">Github</span></a></li>
<li><a href="mailto:[email protected]" target='blank' class="icon fa-envelope"><span class="label">Email</span></a></li>
<li><a href="https://twitter.com/anaxias808" target='blank' class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://www.instagram.com/anaxias808" target='blank' class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<!--<li><a href='' class="icon fa-discord tooltip"><span class="label">Discord</span><span class='tooltiptext'>Anaxias#4563</span></a></li>-->
</ul>
</div>
</div>
<!-- Main -->
<div id="main">
<!-- Intro Image -->
<section id="top" class="one dark cover" style="background-position: top right; background-attachment: fixed; background-size: 1559px;height: 330px;">
<div class="container">
</div>
</section>
<!-- About Me -->
<section id="aboutme" class="two">
<div style="display:flex;flex-wrap:wrap-reverse;">
<div style="flex:1 1 auto; width:70%; padding: 10px 40px">
Aloha! My name is Anna Sikkink, I graduated in Spring 2017 from the University of Hawaii at Mānoa with a BA in Information and Computer Science (IT focus), and a minor in Astronomy.<br><br>
I began taking graduate classes in Fall 2019, and my goal is to complete an MS project which combines my Computer Science and Astronomy knowledge.<br><br>
I am currently employed at the University of Hawaii at Mānoa as an IT Specialist for Student Housing Services. My main focus is on web application development for internal use.
</div>
<div style="flex:1 1 auto;min-width:300px;width:30%; padding: 10px 40px">
<img src="images/avatar.jpg" style="width:300px">
</div>
</div>
</section>
<!-- Portfolio -->
<section id="portfolio" class="three">
<div class="container">
<header>
<h2 style='line-height:45px'>Portfolio <p style='font-size:25pt;margin-bottom:0px;'><small>Click an image for more information</small></p></h2>
</header>
<div style="display:flex;flex-wrap:wrap;margin-bottom:30px">
<h3 style="flex: 1 1 auto;width:366px;text-align:left;"><i class="fas fa-globe"></i> Web Development Projects</h3>
<hr style="flex: 1 1 auto;width:55%;border-color:#666;margin-top:30px;">
</div>
<div class="row" style="padding-bottom:45px">
<div class="4u 12u$(mobile)">
<article class="item" onclick="open_dialog('shsite');">
<div class="image fit"><img src="images/pic14.jpg" alt="" /></div>
<header>
<h3>Student Housing Services Website<br><small >Developed and restructured website to give it a modern redesign</small></h3>
</header>
</article>
<article class="item" onclick="open_dialog('pilikia');">
<div class="image fit"><img src="images/pic13.jpg" alt="" /></div>
<header>
<h3>Pilikia Service Request System<br><small >Web application for submitting and managing Student Housing service requests </small></h3>
</header>
</article>
</div>
<div class="4u 12u$(mobile)">
<article class="item" onclick="open_dialog('renewal');">
<div class="image fit"><img src="images/pic10.jpg" alt="" /></div>
<header>
<h3>Renewal Application<br><small >Web application to assign residents to desired rooms for upcoming school years</small></h3>
</header>
</article>
<article class="item" onclick="open_dialog('galaxies');">
<div class="image fit"><img src="images/pic05.jpg" alt="" /></div>
<header>
<h3>Galaxies Visualization in Three.js<br><small >Visualizer for Brent Tully's Local Galaxies Data</small></h3>
</header>
</article>
</div>
<div class="4u$ 12u$(mobile)">
<article class="item" onclick="open_dialog('skysearch');">
<div class="image fit"><img src="images/pic01.jpg" alt="" /></div>
<header>
<h3>SkySearch<br><small >App to search astronomy targets for observation information</small></h3>
</header>
</article>
<article class="item" onclick="open_dialog('uh_courses');">
<div class="image fit"><img src="images/pic06.jpg" alt="" /></div>
<header>
<h3>UH Course Search<br><small >Run filtered searches on the UHM course offerings </small></h3>
</header>
</article>
</div>
</div>
<div style="display:flex;flex-wrap:wrap;margin-bottom:30px;margin-top:20px">
<h3 style="flex: 1 1 auto;width:360px;text-align:left;"><i class="fas fa-vr-cardboard"></i> Virtual Reality Projects</h3>
<hr style="flex: 1 1 auto;width:55%;border-color:#666;margin-top:30px;">
</div>
<div class="row" style="padding-bottom:45px">
<div class="4u 12u$(mobile)">
<article class="item" onclick="open_dialog('kilohoku');">
<div class="image fit"><img src="images/pic02.jpg" alt="" /></div>
<header>
<h3>Kilo Hoku<br><small >Virtual Reality simulation of Traditional Wayfinding on Polynesian Voyaging Canoes</small></h3>
</header>
</article>
</div>
<div class="4u 12u$(mobile)">
<article class="item" onclick="open_dialog('challenger');">
<div class="image fit"><img src="images/pic15.jpg" alt="" /></div>
<header>
<h3>Moon Mission VR<br><small >A two player Virtual Reality game inspired by Challenger Center</small></h3>
</header>
</article>
</div>
<div class="4u 12u$(mobile)">
<article class="item" onclick="open_dialog('mauivr');">
<div class="image fit"><img src="images/pic03.jpg" alt="" /></div>
<header>
<h3>Maui Snares The Sun VR<br><small >UH UROP project, experimented with interactive storytelling in VR</small></h3>
</header>
</article>
</div>
</div>
<div class="row" style="padding-bottom:45px">
<div class="4u$ 12u$(mobile)">
<article class="item" onclick="open_dialog('debug');">
<div class="image fit"><img src="images/pic07.jpg" alt="" /></div>
<header>
<h3>DebuggerPlusPlus<br><small >Squash all the bugs! Created with ACM Manoa's VR team</small></h3>
</header>
</article>
</div>
</div>
<div style="display:flex;flex-wrap:wrap;margin-bottom:30px;margin-top:20px">
<h3 style="flex: 1 1 auto;width:440px;text-align:left;"><i class="fas fa-gamepad"></i> Game Development Projects</h3>
<hr style="flex: 1 1 auto;width:55%;border-color:#666;margin-top:30px;">
</div>
<div class="row">
<div class="4u 12u$(mobile)">
<article class="item" onclick="open_dialog('ufs');">
<div class="image fit"><img src="images/pic04.jpg" alt="" /></div>
<header>
<h3>Unidentified Flying Squirrel<br><small >Save your friends! A causal platformer video game</small></h3>
</header>
</article>
</div>
<div class="4u 12u$(mobile)">
<article class="item" onclick="open_dialog('aoa');">
<div class="image fit"><img src="images/pic11.jpg" alt="" /></div>
<header>
<h3>Attack On Algae<br><small >Museum exhibit to teach the public about the effects of algae</small></h3>
</header>
</article>
</div>
<div class="4u$ 12u$(mobile)">
<article class="item" onclick="open_dialog('tse');">
<div class="image fit"><img src="images/pic12.jpg" alt="" /></div>
<header>
<h3>Twitch Sacrifices Everyone<br><small >Won 'Most Unique' Award at Global Game Jam HNL 2016</small></h3> <!--https://globalgamejam.org/2016/games/twitch-sacrifices-everyone-->
</header>
</article>
</div>
</div>
</div>
</section>
<!-- EXP -->
<section id="exp" class="four">
<div class="container">
<header>
<h2>Experience</h2>
</header>
<div style='padding-bottom:45px; width:100%;height:50%'>
<div style="display:flex;flex-wrap:wrap;margin-bottom:30px">
<h3 style="flex: 1 1 auto;width:187px;text-align:left;"><i class="fas fa-briefcase"></i> Employment</h3>
<hr style="flex: 1 1 auto;width:65%;border-color:#666;margin-top:30px;">
</div>
<div style="display:flex;flex-wrap:wrap;margin-bottom:55px;">
<div style="flex:1 1 auto;min-width:300px;width:50%"><a href="http://resnet.hawaii.edu" target='_blank'><img src="images/exp1.jpg" style="width:100%;max-width:500px" title="Image rights © UHM ResNet" /></a></div><div style="flex:1 1 auto;min-width:300px;width:50%">Starting in Fall 2012, I was employed at UHM Student Housing ResNet throughout the five years of my undergraduate studies, where I gained valuable experience in computer networking and web application development.<br><br>I was hired post-graduation as an IT Assistant, and was officially hired full time as an IT Specialist in Summer 2018.</div></div>
<div style="display:flex;flex-wrap:wrap;margin-bottom:55px;">
<div style="flex:1 1 auto;min-width:300px;width:50%"><a href="http://lava.hawaii.edu" target='_blank'><img src="images/exp2.jpg" style="width:70%;max-width:500px" title="Image rights © LAVA" /></a> </div><div style="flex:1 1 auto;min-width:300px;width:50%">In Spring 2017, I was hired as an undergraduate research assistant at the Laboratory for Advanced Visualization and Application (LAVA). Additionally, I have worked on research projects with and took multiple classes from LAVA's director, Dr. Jason Leigh.</div></div>
<div style="display:flex;flex-wrap:wrap;margin-bottom:55px;">
<div style="flex:1 1 auto;min-width:300px;width:50%"><a href="http://ifa.hawaii.edu" target='_blank'><img src="images/exp3.jpg" style="width:100%;max-width:500px" title="Image rights © UH IFA" /></a></div><div style="flex:1 1 auto;min-width:300px;width:50%">In Summer 2015, I was employed as a research assistant at the Institute for Astronomy (IFA), and contributed to a project to discover Kepler objects observed in Robo-AO data via a Python program.</div></div>
<div style="display:flex;flex-wrap:wrap;margin-bottom:55px;">
<div style="flex:1 1 auto;min-width:300px;width:50%"><a href="https://twitter.com/gaimoria" target='_blank'><img src="images/exp4.jpg" style="width:80%;max-width:500px" title="Image rights © Isaiah Sherman, EYUH Games LLC" /></a></div><div style="flex:1 1 auto;min-width:300px;width:50%">Throughout my last semester of my undergrad (spring 2017), I worked as a contract developer on the indie game Gaimoria. My focus was designing the state machine to control character actions and update animations via player input. </div></div>
</div>
<div style='padding-bottom:45px'>
<div style="display:flex;flex-wrap:wrap;margin-bottom:30px">
<h3 style="flex: 1 1 auto;width:362px;text-align:left;"><i class="fas fa-user-friends"></i> Extracurricular Activities</h3>
<hr style="flex: 1 1 auto;width:55%;border-color:#666;margin-top:30px;">
</div>
<div style="display:flex;flex-wrap:wrap;margin-bottom:55px;">
<div style="flex:1 1 auto;min-width:300px;width:50%"><a href="http://acmanoa.github.io/"><img src="images/exp5.jpg" style="width:100%;max-width:400px" title="Image rights © ACM Manoa" /></a></div><div style="flex:1 1 auto;min-width:300px;width:50%">Joined ACM Mānoa in Fall 2015, was elected on the ACM board as Treasurer in Spring 2016 and was re-elected for both Fall 2016 and Spring 2017. Helped organize and facilitate events and fundraising for the organization while serving on the board.</div></div>
<div style="display:flex;flex-wrap:wrap;margin-bottom:55px;">
<div style="flex:1 1 auto;min-width:300px;width:50%"><a href="https://github.com/uhmgreyhats/"><img src="images/exp6.jpg" style="width:100%;max-width:300px" title="Image rights © UHM Grey Hats" /></a></div><div style="flex:1 1 auto;min-width:300px;width:50%">Joined Grey Hats in Fall 2015 and remained active through Spring 2016. Participated in the Fall 2015 <a href='https://nationalcyberleague.org/' target='_blank'>National Cyber League (NCL)</a> Offensive Competition and Spring 2016 <a href='https://www.nationalccdc.org/' target='_blank'>Collegiate Cyber Defense Competition (CCDC)</a>. </div></div>
</div>
</div>
</section>
<!-- Interests -->
<section id="interests" class="five">
<div class="container">
<header>
<h2>Interests</h2>
</header>
<a href="#" class="image featured"><img src="images/pic08.jpg" alt="telescopes on Mauna Kea, Hawaii Island" style="width:80%;min-width:500px;margin:auto" /></a>
<p>I have a wide range of interests!</p>
<p>My technical interests include: system administration, network management, software development, web design, data visualization, astronomy software systems, Virtual Reality, video game development, and cybersecurity.</p>
<p>Other interests include: video production and editing, digital music composition, graphic design, amateur astronomy and astrophotography, building PC systems, and playing video games. I enjoy learning new things everyday!
</div>
</section>
</div>
<!-- Footer -->
<div id="footer">
<!-- Copyright -->
<ul class="copyright">
<li>© Anna Sikkink. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
<!-- Scripts
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollzer.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]
<script src="assets/js/main.js"></script>-->
</body>
</html>