-
Notifications
You must be signed in to change notification settings - Fork 0
/
science-olympiad.html
154 lines (141 loc) · 7.05 KB
/
science-olympiad.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="UX designer and Front End developer Portfolio for Kyle O'Brien">
<meta name="author" content="Kyle O'Brien">
<title>Kyle O'Brien • Science Olympiad</title>
<link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/dist/css/style.css" rel="stylesheet">
<link rel="icon" type="image/png" href="favicon-32x32.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CGENDLHTC0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-CGENDLHTC0');
</script>
</head>
<body>
<div id="nav-reserve"></div>
<main class="mosaic">
<h1 class="visually-hidden">Science Olympiad</h1>
<div class="container-fluid work-hero-background so">
<img class="so-logo" alt="2017 science olympiad wordmark" src="assets/img/so/so-logo.svg">
</div>
<div class="container-xl px-4 py-5 shadow-lg bg-light">
<div class="row pb-5">
<div class="col-lg-8 offset-lg-2">
<h2 class="display-5 mb-4 text-center" data-text="Rockets and Arenas">Rockets and Arenas</h2>
<p><h2 style="display: inline; letter-spacing: -.05rem;">D</h2>ue to last minute changes, Wright State became the host of the 2017 Science Olympiad, a world wide science competition. With a small team between Wright State and the Nutter Center arena production team we organized and hosted over 2000 students in just 5 weeks. I was tasked with creating the theme, digital displays, animations, lower thirds, and presentations for the keynote.</p>
<ul class="d-md-flex flex-wrap skills work-into-skills">
<li>User Experience</li>
<li>Graphic Design</li>
<li>InDesign</li>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Photography & Video Editing</li>
<li>Strategy</li>
<li>After Effects</li>
<li>Animation</li>
</ul>
</div>
</div>
<div class="row py-5">
<div class="col-lg-3">
<h3>Processes</h3>
<p>Working under a tight timeline we laid out a progression map of tasks that needed to be completed. Beginning with a mood board focused on travel and science I created a theme based on Wright State branding guidelines. From there we moved onto the Nutter Center and I created displays and animations to fit every display in the arena. Working every day during those 5 weeks up until the last hour before the event, we pulled off a flawless Science Olympiad for the students.</p>
</div>
<div class="col-lg-9">
<figure>
<a href="assets/img/so/SONT_17_mood_board.jpg" data-toggle="lightbox" data-caption="Moodboard created for the theme of the 2017 Science Olympiad.">
<img src="assets/img/so/SONT_17_mood_board.jpg" class="img-fluid rounded" alt="Mood board for 2017 science olympiad" width="100%" height="500" loading="lazy">
</a>
<figcaption>Moodboard created for the theme of the 2017 Science Olympiad.</figcaption>
</figure>
<figure>
<a href="assets/img/so/19046_0409.jpg" data-toggle="lightbox" data-caption="Students awaiting the start of 2017 Science Olympiad.">
<img src="assets/img/so/19046_0409.jpg" class="img-fluid rounded" alt="Students awaiting the start of Olympiad" width="100%" height="500" loading="lazy">
</a>
<figcaption>Students awaiting the start of 2017 Science Olympiad.</figcaption>
</figure>
<figure>
<a href="assets/img/so/19046_0258.jpg" data-toggle="lightbox" data-caption="Students walking to their seats after being introduced to the event.">
<img src="assets/img/so/19046_0258.jpg" class="img-fluid rounded" alt="Students walking to their seats after being introduced to the event." width="100%" height="500" loading="lazy">
</a>
<figcaption>Students walking to their seats after being introduced to the event.</figcaption>
</figure>
</div>
</div>
<div class="row py-5">
<div class="col-lg-8 offset-lg-2">
<figure>
<div id="video"></div>
<figcaption>Opening event of the 2017 Science Olympiad. I created every title screen, digital display, lower third, animation, PowerPoint presentation featured.</figcaption>
</figure>
</div>
</div>
</div>
</div>
<!-- Perelaxing image background> -->
<div class="b-example-divider"></div>
<div id="footer-reserve"></div>
</main>
<script src="assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/dist/js/template.js" defer></script>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="assets/dist/js/index.bundle.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script type="application/javascript">
function loadVideo() {
console.info(`loadVideo called`);
(function loadYoutubeIFrameApiScript() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
tag.onload = setupPlayer;
})();
let player = null;
function setupPlayer() {
window.YT.ready(function() {
player = new window.YT.Player("video", {
height: "500",
width: "100%",
autoplay: "0",
start: 1,
videoId: "-r6fVpmrPWU",
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
});
}
function onPlayerReady(event) {
event.target.loadVideo();
event.target.seekTo(1, 0);
}
function onPlayerStateChange(event) {
var videoStatuses = Object.entries(window.YT.PlayerState);
console.log(videoStatuses.find(status => status[1] === event.data)[0]);
}
}
if (document.readyState !== "loading") {
console.info(`document.readyState ==>`, document.readyState);
loadVideo();
} else {
document.addEventListener("DOMContentLoaded", function() {
console.info(`DOMContentLoaded ==>`, document.readyState);
loadVideo();
});
}
</script>
</body>
</html>