-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
403 lines (370 loc) · 27.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>@DanBullockCS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Dan Bullock's Website (Home/Project Page)">
<meta property="og:type" content="website">
<meta property="og:title" content="@DanBullockCS">
<meta property="og:description" content="Personal Portfolio for @DanBullockCS">
<meta property="og:image" content="https://danbullock.me/images/SocialImage.png">
<meta property="og:url" content="https://danbullock.me/">
<meta name="twitter:card" content="https://danbullock.me/images/SocialImage.png">
<meta property="og:site_name" content="DanBullockCS">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
<link rel="stylesheet" , type="text/css" , href="styles/index.css" />
<link rel="stylesheet" , type="text/css" , href="styles/noise.css" />
<script defer src="scripts/scrollbutton.js"></script>
<script defer src="scripts/cardflip.js"></script>
<script defer src="scripts/sorting.js"></script>
<script defer src="scripts/randomProject.js"></script>
<script defer src="scripts/footer.js"></script>
<script async src="https://kit.fontawesome.com/99f1806389.js" crossorigin="anonymous"></script>
</head>
<header>
<nav class="navbar">
<div class="topbar">
<div class="full-name-logo">
<a rel="noopener noreferrer" class="name-logo" href="/">dan</a>
<a rel="noopener noreferrer" class="name-logo2" href="/">Bullock</a>
</div>
<ul class="navbar-pill">
<li class="nav-li"><a rel="noopener noreferrer" class="nav-item-selected" href="#projects" aria-label="to-projects-button"><i class="fas fa-angle-down"></i></a></li>
<!-- <li class="nav-li"><a rel="noopener noreferrer" class="nav-item" href="about">About</a></li> -->
</ul>
</div>
<div class="social-media-pill">
<a rel="noopener noreferrer" class="social-media-icon" href="https://www.linkedin.com/in/DanielBullockCS/" data-hint="LinkedIn" target="_blank" aria-label="Linkedin-Link">
<i class="fab fa-linkedin"></i>
</a>
<a rel="noopener noreferrer" class="social-media-icon" href="https://github.com/DanBullockCS" data-hint="Github" target="_blank" aria-label="Github-Link">
<i class="fab fa-github"></i>
</a>
<a rel="noopener noreferrer" class="social-media-icon" href="https://twitter.com/DanBullockCS" data-hint="Twitter" target="_blank" aria-label="Twitter-Link">
<i class="fa-brands fa-x-twitter"></i>
</a>
<a rel="noopener noreferrer" class="social-media-icon" href="mailto:[email protected]" data-hint="Email" aria-label="Gmail-Link">
<i class="fas fa-envelope"></i>
</a>
<a rel="noopener noreferrer" class="social-media-icon" href="https://science.ontariotechu.ca/computer-science/index.php" data-hint="Ontario Tech Computer Science School Website" target="_blank" aria-label="University-Link">
<i class="fas fa-user-graduate"></i>
</a>
</div>
</nav>
</header>
<body>
<button onclick="topFunction()" id="scrollbtn" title="Go to top"><i class="fas fa-angle-up"></i></button>
<div class="page-body">
<div class="main-wrapper">
<div class="noise-wrapper"><div class="noise"></div></div>
<div class="tech-stack">
<img class="DB-Logo" src="images/db-logo.png" alt="DB Logo" />
<h2>About</h2>
<p class="about-me">
Web Designer/Developer, Hobbyist Game Dev, and General Programmer among other things.
<br><br>
I studied Computer Science at <a rel="noopener noreferrer" data-content="Ontario Tech University"
href="https://science.ontariotechu.ca/computer-science/index.php" target="_blank">Ontario Tech University</a> and graduated in Spring 2020.
I specialized in Digital Media, but really enjoy web development and did my <a rel="noopener noreferrer"
href="https://github.com/DanBullockCS/honoursthesis" alt="Thesis link" target="_blank" data-content="undergraduate design
thesis">undergraduate design thesis</a> as a website. Which is part of the reason why I
wanted to throw together this site. I wanted my own space to display some of the projects I have made. Thanks
for reading this and if you are looking to hire me or know more about my projects feel free to send me an
<a rel="noopener noreferrer" href="mailto:[email protected]" data-content="email">email</a> for a copy of my resume or add me on
<a rel="noopener noreferrer" href="https://www.linkedin.com/in/DanielBullockCS/" target="_blank" data-content="LinkedIn">LinkedIn</a>.
<br>
</p>
<h2>Tech Stack</h2>
<p class="badges">
<img src='https://img.shields.io/badge/-Unity-222C37' alt="unity-badge"> <img src='https://img.shields.io/badge/-HTML-blue' alt="html-badge"> <img src='https://img.shields.io/badge/-CSS-brightgreen' alt="css-badge"> <img src='https://img.shields.io/badge/-JavaScript-orange' alt="js-badge">
<img src='https://img.shields.io/badge/-React-61DBFB' alt="react-badge"> <img src='https://img.shields.io/badge/-TypeScript-3079c6' alt="typescript-badge"> <img src='https://img.shields.io/badge/-Vue-41b883' alt="vue-badge"> <img src='https://img.shields.io/badge/-Python-success' alt="python-badge">
<img src='https://img.shields.io/badge/-Java-F8981D' alt="java-badge"> <img src='https://img.shields.io/badge/-CSharp-270065' alt="C#-badge"> <img src='https://img.shields.io/badge/-C++-00599C' alt="c++-badge"> <img src="https://img.shields.io/badge/-PHP-777BB3" alt="php-badge">
<img src="https://img.shields.io/badge/-WordPress-21759B" alt="wp-badge"> <img src="https://img.shields.io/badge/-NextJS-000000" alt="nextjs-badge">
</p>
</div>
</div>
<hr class="divider">
<h1 class="page-title" id="projects">Projects</h1>
<div class="sorting-card">
<button class="btn" onclick="sortByAll()">Show All</button>
<button class="btn" onclick="sortByWeb()">Web Apps</button>
<button class="btn" onclick="sortByGames()">Games</button>
<button class="btn" onclick="sortByMisc()">Misc</button>
</div>
<div class="projects">
<div class="project-card" id="LiveProjectsCard">
<div class="project-card-front">
<a rel="noopener noreferrer" href="#" alt="Random Project Link" target="_blank" id="svg-link" onclick="showRandomProject()">
<img class="project-logo logo-svg" src="images/logo.svg" alt="Live Picture" />
</a>
<ul class="project-tech">
<li><a rel="noopener noreferrer" href="WallpaperPix" alt="WallpaperPix link" target="_blank" data-content="WallpaperPix">
WallpaperPix
</a></li>
<li><a rel="noopener noreferrer" href="WhatColorIsThat" alt="WhatColorIsThat link" target="_blank" data-content="What Color Is That?">
What Color Is That?
</a></li>
<li><a rel="noopener noreferrer" href="GrenadeBrothers" alt="GrenadeBrothers link" target="_blank" data-content="Grenade Brothers Remake">
Grenade Brothers Remake
</a></li>
<li><a rel="noopener noreferrer" href="PaintSplatterTechDemo" alt="PaintSplatterTechDemo link" target="_blank" data-content="Paint Splatter Tech Demo">
Paint Splatter Tech Demo
</a></li>
<li><a rel="noopener noreferrer" href="PlatformerTechDemo" alt="PlatformerTechDemo link" target="_blank" data-content="Platformer Tech Demo">
Platformer Tech Demo
</a></li>
</ul>
<p class="project-title">Live Projects:</p>
<p class="project-subtitle">
Links to various web-based repositories that are currently being hosted on this website. Most of them can also be found on my <a rel="noopener noreferrer" href="https://github.com/DanBullockCS" data-hint="Github" data-content="Github" target="_blank">Github</a>. Click on the
yellow links on the project card to view each project live. Alternatively, you can click the spinning question mark to see a random project.
</p>
</div>
</div>
<div class="project-card" id="BadlionCard">
<div class="project-card-front">
<a rel="noopener noreferrer" href="https://client.badlion.net/" alt="Badlion link" target="_blank"><img class="project-logo" id="badlion-logo" src="images/Badlion-Logo.png" alt="Badlion Logo"/></a>
<ul class="project-tech">
<li>React</li>
<li>gRPC</li>
<li>Redux</li>
<li>Next.js</li>
</ul>
<p class="project-title">Badlion Client</p>
<p class="project-subtitle">
Badlion is one of the largest Minecraft community platforms which has over 8 years of history in the space. They offer a free Minecraft client modpack with 100+ mods and FPS boosting technology. Learn more about the client here
<a rel="noopener noreferrer" href="https://client.badlion.net/" alt="Badlion link" target="_blank" data-content="client.badlion.net">client.badlion.net</a>.
</p>
</div>
<div class="project-card-back">
<button class="flip-button-back" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCardBack('KeepUpCard')">
<i class="fas fa-video"></i>
</button>
<div class="project-video">
<video width="100%" src="images/webms/KeepUp.webm" alt="KeepUp! video" autoplay controls loop muted></video>
</div>
</div>
</div>
<div class="project-card" id="IneventorsCard">
<div class="project-card-front">
<a rel="noopener noreferrer" href="https://www.quest-av.com/hybrid-production/" alt="QuestAV link" target="_blank"><img class="project-logo" src="images/Ineventors_Logo.png" alt="Ineventors! Logo"/></a>
<ul class="project-tech">
<li>HTML/CSS/JS</li>
<li>WordPress</li>
<li>PHP</li>
<li>SASS</li>
</ul>
<p class="project-title">Ineventors</p>
<p class="project-subtitle">
Ineventors was a virtual event platform with interactive features that are optimized for connecting and engaging. Attendees could move between virtual rooms while making meaningful connections and enjoying the content you are presenting to them - just like an in-person event.
I worked on a small team to help create this platform using various web technologies. The service eventually concluded, but the partner company QuestAV still offers hybrid event production:
<a rel="noopener noreferrer" href="https://www.quest-av.com/hybrid-production/" alt="QuestAV link" target="_blank" data-content="quest-av.com">quest-av.com/hybrid-production</a>.
</p>
</div>
<div class="project-card-back">
<button class="flip-button-back" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCardBack('KeepUpCard')">
<i class="fas fa-video"></i>
</button>
<div class="project-video">
<video width="100%" src="images/webms/KeepUp.webm" alt="KeepUp! video" autoplay controls loop muted></video>
</div>
</div>
</div>
<div class="project-card" id="KeepUpCard">
<div class="project-card-front">
<a rel="noopener noreferrer" href="https://github.com/DanBullockCS/KeepUp" alt="KeepUp! link" target="_blank"><img class="project-logo" src="images/KeepUp!.png" alt="KeepUp! Logo" /></a>
<button class="flip-button" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCard('KeepUpCard')">
<i class="fas fa-video"></i>
</button>
<ul class="project-tech">
<li>Unity</li>
<li>C#</li>
<li>Android</li>
</ul>
<p class="project-title">KeepUp!</p>
<p class="project-subtitle">
KeepUp! is a simple Android game made in Unity. In it, you keep a paper ball up as long as you can by bouncing it up with an eraser. It was the first android game I made in Unity so it was a good learning experience leading to greater projects.
Repo: <a rel="noopener noreferrer" href="https://github.com/DanBullockCS/KeepUp" alt="KeepUp! link" target="_blank" data-content="/DanBullockCS/KeepUp">/DanBullockCS/KeepUp</a>.
</p>
</div>
<div class="project-card-back">
<button class="flip-button-back" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCardBack('KeepUpCard')">
<i class="fas fa-video"></i>
</button>
<div class="project-video">
<video width="100%" src="images/webms/KeepUp.webm" alt="KeepUp! video" autoplay controls loop muted></video>
</div>
</div>
</div>
<div class="project-card" id="CC_Card">
<div class="project-card-front">
<a rel="noopener noreferrer" href="https://github.com/DanBullockCS/honoursthesis" alt="Thesis link" target="_blank"><img class="project-logo" src="images/ClassroomCompanion.png" alt="Classroom Companion Logo" /></a>
<button class="flip-button" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCard('CC_Card')">
<i class="fas fa-video"></i>
</button>
<ul class="project-tech">
<li>HTML/CSS/JS</li>
<li>MongoDB</li>
<li>Pug (Jade.js)</li>
<li>Bootstrap</li>
</ul>
<p class="project-title">ClassroomCompanion</p>
<p class="project-subtitle">
ClassroomCompanion is my undergraduate design thesis. It is a website built to assist teachers with various mundane teaching tasks. It is a node.js project using MongoDB for the backend. The website's design process gave me some time to hone my JavaScript
skills especially. The project features an Attendance, Grade, and Performance Tracker for students. Repo:
<a rel="noopener noreferrer" href="https://github.com/DanBullockCS/honoursthesis" alt="Thesis link" target="_blank" data-content="/DanBullockCS/honoursthesis">/DanBullockCS/honoursthesis</a>.
</p>
</div>
<div class="project-card-back">
<button class="flip-button-back" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCardBack('CC_Card')">
<i class="fas fa-video"></i>
</button>
<div class="project-video">
<video width="100%" src="images/webms/ClassroomCompanion.webm" alt="ClassroomCompanion video" autoplay controls loop muted></video>
</div>
</div>
</div>
<div class="project-card" id="League_Card">
<div class="project-card-front">
<a rel="noopener noreferrer" href="https://github.com/DanBullockCS/LeagueKillViewer" alt="LeagueKillViewer link" target="_blank"><img class="project-logo" src="images/LeagueKillViewer.png" alt="League Kill Viewer Picture" /></a>
<button class="flip-button" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCard('League_Card')">
<i class="fas fa-video"></i>
</button>
<ul class="project-tech">
<li>HTML/CSS/JS</li>
<li>D3</li>
</ul>
<p class="project-title">League Kill Viewer</p>
<p class="project-subtitle">
The League Kill Viewer is a D3 dashboard I made with <a rel="noopener noreferrer" href="https://github.com/desousak" alt="Kevin Desousa Github" target="_blank" data-content="Kevin Desousa">Kevin Desousa</a> and
<a rel="noopener noreferrer" href="https://github.com/DanooshanS" alt="Danooshan Sureshkumar Github" target="_blank" data-content="Danooshan Sureshkumar">Danooshan Sureshkumar</a>. It takes League of Legends professional game data from 2015 to 2018 and displays it using various visualizations.
This was done for the Information Visualization course at Ontario Tech. Repo:
<a rel="noopener noreferrer" href="https://github.com/DanBullockCS/LeagueKillViewer" alt="LeagueKillViewer link" target="_blank" data-content="/DanBullockCS/LeagueKillViewer">/DanBullockCS/LeagueKillViewer</a> |
<a rel="noopener noreferrer" href="LeagueKillViewer" alt="LeagueKillViewer link" target="_blank" data-content="Live Version">Live Version</a>.
</p>
</div>
<div class="project-card-back">
<button class="flip-button-back" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCardBack('League_Card')">
<i class="fas fa-video"></i>
</button>
<div class="project-video">
<video width="100%" src="images/webms/LeagueKillViewer.webm" alt="LeagueKillViewer video" autoplay controls loop muted></video>
</div>
</div>
</div>
<div class="project-card" id="Unity_Card">
<div class="project-card-front">
<a rel="noopener noreferrer" href="https://github.com/DanBullockCS/unityprojects" alt="UnityProjects link" target="_blank"><img class="project-logo" src="images/Unity.png" alt="Unity Logo" /></a>
<button class="flip-button" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCard('Unity_Card')">
<i class="fas fa-video"></i>
</button>
<ul class="project-tech">
<li>Unity</li>
<li>C#</li>
</ul>
<p class="project-title">Unity Projects: Gunman Gavin / Casinodano</p>
<p class="project-subtitle">
A couple Unity games that I have finished during my interactive media course are posted on this repository
<a rel="noopener noreferrer" href="https://github.com/DanBullockCS/unityprojects" alt="UnityProjects link" target="_blank" data-content="/DanBullockCS/UnityProjects">/DanBullockCS/UnityProjects</a>. The first one is 2D shooter called <i>Gunman Gavin</i>, it resembles old MegaMan games, but in a western theme. The other
project is <i>Casinodano</i>, which is a 3D game that brings a casino experience to life. It was my first 3D Unity game and I enjoy the atmosphere I created.
</p>
</div>
<div class="project-card-back">
<button class="flip-button-back" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCardBack('Unity_Card')">
<i class="fas fa-video"></i>
</button>
<div class="project-video">
<video width="100%" src="images/webms/Gunman-Gavin.webm" alt="Gunman Gavin video" id="GunmanGavinvideo" autoplay controls loop muted></video>
<video width="100%" src="images/webms/Casinodano.webm" alt="Casinodano video" id="Casinodanovideo" autoplay controls loop muted></video>
</div>
</div>
</div>
<div class="project-card" id="NoteTakR_Card">
<div class="project-card-front">
<a rel="noopener noreferrer" href="https://github.com/DanBullockCS/CSCI4100U-Project" alt="NoteTakR link" target="_blank"><img class="project-logo" src="images/NoteTakR.png" alt="NoteTakR Logo" /></a>
<button class="flip-button" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCard('NoteTakR_Card')">
<i class="fas fa-video"></i>
</button>
<ul class="project-tech">
<li>Flutter</li>
<li>Dart</li>
</ul>
<p class="project-title">NoteTakR</p>
<p class="project-subtitle">
NoteTakR is an android application built with the help of <a rel="noopener noreferrer" href="https://github.com/Mushfequr-Rahman" alt="Mohammad Mushfequr Rahman Github" target="_blank" data-content="Mohammad Mushfequr Rahman">Mohammad Mushfequr Rahman</a>,
<a rel="noopener noreferrer" href="https://github.com/zbonal" alt="Leonard Zbona Github" target="_blank" data-content="Leonard Zbona">Leonard Zbona</a>, and
<a rel="noopener noreferrer" href="https://github.com/nandor-gallo" alt="Nandor Gallo Github" target="_blank" data-content="Nandor Gallo">Nandor Gallo</a> using the Google Flutter SDK. NoteTakR is note taking app specifically geared towards students.
Repo: <a rel="noopener noreferrer" href="https://github.com/DanBullockCS/CSCI4100U-Project" alt="NoteTakR link" target="_blank" data-content="/DanBullockCS/CSCI4100U-Project">/DanBullockCS/CSCI4100U-Project</a>.
</p>
</div>
<div class="project-card-back">
<button class="flip-button-back" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCardBack('NoteTakR_Card')">
<i class="fas fa-video"></i>
</button>
<div class="project-video">
<video width="100%" src="images/webms/NoteTakR.webm" alt="NoteTakR video" id="NoteTakRvideo" autoplay controls loop muted></video>
</div>
</div>
</div>
<div class="project-card" id="Soccer_Card">
<div class="project-card-front">
<a rel="noopener noreferrer" href="https://github.com/DanBullockCS/CSCI3090U-Project" alt="Soccer Toybox link" target="_blank"><img class="project-logo" src="images/SoccerGraphics.png" alt="Graphics Project Logo" /></a>
<button class="flip-button" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCard('Soccer_Card')">
<i class="fas fa-video"></i>
</button>
<ul class="project-tech">
<li>OpenGL</li>
<li>C++</li>
</ul>
<p class="project-title">Computer Graphics Project - Soccer Toybox</p>
<p class="project-subtitle">
Soccer Toybox is an OpenGL program created with <a rel="noopener noreferrer" href="https://github.com/desousak" alt="Kevin Desousa Github" target="_blank" data-content="Kevin Desousa">Kevin Desousa</a> for our computer graphics class. This project includes some basic OpenGL code that
will do simple lighting of the scene, texturing objs, making/texturing a "skybox", and moving a soccer ball around with translations/rotations. Repo:
<a rel="noopener noreferrer" href="https://github.com/DanBullockCS/CSCI3090U-Project" alt="Soccer Toybox link" target="_blank" data-content="/DanBullockCS/CSCI3090U-Project">/DanBullockCS/CSCI3090U-Project</a>.
</p>
</div>
<div class="project-card-back">
<button class="flip-button-back" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCardBack('Soccer_Card')">
<i class="fas fa-video"></i>
</button>
<div class="project-video">
<video width="100%" src="images/webms/SoccerToybox.webm" alt="SoccerToybox video" id="SoccerToyboxvideo" autoplay controls loop muted></video>
</div>
</div>
</div>
<div class="project-card" id="YT_Card">
<div class="project-card-front">
<a rel="noopener noreferrer" href="https://github.com/DanBullockCS/YT-Companion" alt="YT-Companion link" target="_blank"><img class="project-logo" src="images/YT-Companion.png" alt="YT-Companion Logo" /></a>
<button class="flip-button" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCard('YT_Card')">
<i class="fas fa-video"></i>
</button>
<ul class="project-tech">
<li>JavaFX</li>
<li>CSS</li>
</ul>
<p class="project-title">YT-Companion</p>
<p class="project-subtitle">
YT-Companion is a JavaFX application that is capable of searching for YouTube videos and playing them - just like YouTube's app. We wanted to make something that could play YouTube videos, look nice, and meet our project requirements. This was a group
project with <a rel="noopener noreferrer" href="https://github.com/SPilkey" alt="Samuel Pilkey Github" target="_blank" data-content="Samuel Pilkey">Samuel Pilkey</a>,
<a rel="noopener noreferrer" href="https://github.com/desousak" alt="Kevin Desousa Github" target="_blank" data-content="Kevin Desousa">Kevin Desousa</a>, and
<a rel="noopener noreferrer" href="https://github.com/zbonal" alt="Leonard Zbona Github" target="_blank" data-content="Leonard Zbona">Leonard Zbona</a>. Repo:
<a rel="noopener noreferrer" href="https://github.com/DanBullockCS/YT-Companion" alt="YT-Companion link" target="_blank" data-content="/DanBullockCS/YT-Companion">/DanBullockCS/YT-Companion</a>.
</p>
</div>
<div class="project-card-back">
<button class="flip-button-back" aria-label="flip-button" alt="flip the card over to see project video" onclick="flipCardBack('YT_Card')">
<i class="fas fa-video"></i>
</button>
<div class="project-video">
<video width="100%" src="images/webms/YT-Companion.webm" alt="YT-Companion video" autoplay controls loop muted></video>
</div>
</div>
</div>
</div>
</div>
</body>
<footer>
<p id="footer-copyright"></p>
</footer>
</html>