-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
253 lines (219 loc) · 14.1 KB
/
index.html
File metadata and controls
253 lines (219 loc) · 14.1 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="This is my personal website for website projects.">
<meta name="author" content="Kevin Tong">
<meta name="theme-color" content="#161616">
<link rel="icon" href="images/favicon.png">
<title>Kevin's Portfolio</title>
<!-- Bootstrap and page CSS -->
<link href="styles/bootstrap.min.css" rel="stylesheet">
<link href="styles/main.css" rel="stylesheet">
</head>
<body>
<!-- Content invisible -->
<script>
document.body.classList.add('fadeout');
</script>
<main role="main">
<!-- Header of the webpage. With parallax! -->
<div class="container">
<div class="banner-parallax" data-parallax="scroll" data-speed="0.45" data-image-src="images/parallax_banner.jpg">
<div class="row">
<div class="col-12 col-md-5 col-lg-4 col-xl-3" style="padding-bottom: 16px">
<img class="rounded-circle img-no-interact avatar" src="images/avatar.jpg">
</div>
<div class="col-12 col-md-7 col-lg-8 col-xl-9" style="padding-left: 40px;">
<h1 class="banner-name">Kevin Tong</h1>
<h5 class="display-6 subheader">SOFTWARE ENGINEER</h1>
<p>Hello there 👋! I graduated from the University of Michigan's Class of 2020, with a Bachelor of Science in
Computer Science. This is my portfolio website, where I showcase all of the projects I have worked on
so far. Try some stuff out!</p>
<p>Besides programming, I really enjoy music (primarily EDM), hiking, eating/cooking good food (bonus points if it's spicy 🌶️), video games, traveling, and countless more!</p>
<p>You can find smaller programming projects that aren't listed through my GitHub link below.</p>
<a class="social-link" href="https://www.github.com/Kevinsomnia" target="_blank">
<img src="images/github.png" style="width:32px; height:32px">
</a>
<a class="social-link" href="https://www.linkedin.com/in/Kevinsomnia" target="_blank" style="margin-left: 16px;">
<img src="images/linkedin.png" style="width:32px; height:32px">
</a>
</div>
</div>
</div>
</div>
<!-- Body of the webpage -->
<div class="container">
<div class="banner-parallax" data-parallax="scroll" data-speed="0.15" data-image-src="images/parallax_main.jpg">
<!-- START WEB DEV PROJECTS -->
<h2>Web Projects</h2>
<hr class="showcase-divider">
<a href="https://livesubs.herokuapp.com" target="_blank">
<div class="main-card row" style="background-image: url('images/livesubs.jpg');">
<h3 class="body-header">LiveSubs</h2>
<p style="color: #ffffff;">A video chat web application that utilizes real-time translation captioning to
improve communication between multiple cultures. This project was originally
created during the 36-hour hackathon, SpartaHack V, where we were placed in the
Top 10. Now, it is being extended to have a more stable implementation and
support for more features. Demonstrates use of Yandex Translate API, Node.js,
Express.js, Simple-Peer, and many more.
</p>
<a class="btn btn-primary btn-md" href="https://github.com/right1/livesubs" target="_blank"
style="background-color:#161616; margin-right:8px;" role="button">
<img src="images/github.png" style="width:24px; height:24px">
</a>
<a class="btn btn-primary btn-md" href="https://github.com/bayyatej/LiveSubs"
target="_blank" style="background-color:#161616;" role="button">
<img src="images/github.png" style="width:24px; height:24px; margin-right: 5px;">
Hackathon
</a>
</div>
</a>
<a href="projects/text_cruncher">
<div class="main-card row" style="background-image: url('images/text_cruncher.jpg');">
<h3 class="body-header">Text Cruncher</h2>
<p style="color: #ffffff;">
Analyzes multiple text files and spits out a detailed overview and comparison.
One use would be finding the longest scripts in your projects or checking the
number of occurrences of a particular word.
Demonstrates use of I/O and Chart.js.
</p>
<a class="btn btn-primary btn-md" href="https://github.com/Kevinsomnia/kevinsomnia.github.io/tree/master/projects/text_cruncher" target="_blank"
style="background-color:#161616;" role="button">
<img src="images/github.png" style="width:24px; height:24px">
</a>
</div>
</a>
<a href="projects/remoteconsole/">
<div class="main-card row" style="background-image: url('images/remoteconsole.jpg');">
<h3 class="body-header">Remote Console</h2>
<p style="color: #ffffff;">
A web console that can be used to connect and communicate with other applications.
I use this for my game, Paxitium, to conveniently handle server commands from a web
browser. Demonstrates use of WebSocket API.
</p>
<a class="btn btn-primary btn-md" href="https://github.com/Kevinsomnia/kevinsomnia.github.io/tree/master/projects/remoteconsole" target="_blank"
style="background-color:#161616;" role="button">
<img src="images/github.png" style="width:24px; height:24px">
</a>
</div>
</a>
<!-- END WEB DEV PROJECTS -->
<br>
<br>
<br>
<!-- START GAME DEV SHOWCASE -->
<h2>Game Development Projects</h2>
<hr class="showcase-divider">
<div class="container">
<div class="row">
<div class="col-12 col-md-4 col-lg-3">
<img class="rounded-circle img-no-interact showcase-image" src="images/paxitium.jpg">
</div>
<div class="col-12 col-md-8 col-lg-9">
<h3 class="body-header">Paxitium</h2>
<p class="subheader">April 2015 - Present</p>
<p class="showcase-body">A multiplayer survival game set in the 1920s. Facing obstacles
ranging from natural needs such as hunger and thirst to dangerous wildlife and
unfriendly human NPCs, the player must choose a role and survive in the wilderness.
By venturing through the cluster of islands, the player is able to discover
numerous clues related to the background of the world they are in. Uses the
Steamworks.NET API and the Unity game engine.
</p>
<p>
<a href="https://www.youtube.com/playlist?list=PLJ1njCsPSxiVoCrgPKrQEAAJiP20gz1Bd"
target="_blank">
<img style="height:50px;" src="images/youtube_social_icon_red.png" alt="YouTube Channel">
</a>
<a href="https://www.indiedb.com/games/paxitium" target="_blank">
<img style="height:50px;margin-left:10px;" src="https://media.indiedb.com/images/global/indiedb_200x125.png"
alt="IndieDB">
</a>
</p>
</div>
</div>
<hr class="showcase-divider">
<div class="row">
<div class="col-12 col-md-4 col-lg-3">
<img class="rounded-circle img-no-interact showcase-image" src="images/froggo.jpg">
</div>
<div class="col-12 col-md-8 col-lg-9">
<h3 class="body-header">Frog-go</h2>
<p class="subheader">October 2018 - January 2019</p>
<p class="showcase-body">
A free-to-play frog platformer game that is released for Android. Customize your
frog and map with various cosmetics that are unlocked by eating insects and
completing challenging achievements. In addition, you can compete with your friends
and other players around the world using the leaderboard. You can find more
information and download from the Google Play Store today! Uses Google Admob SDK,
Google Play Game Services API, and the Unity game engine.
</p>
<p>
<a href="https://www.youtube.com/watch?v=1xQF89_nLI0" target="_blank">
<img style="height:50px;" src="images/youtube_social_icon_red.png" alt="YouTube Video">
</a>
<a href="https://play.google.com/store/apps/details?id=com.lutonstudios.froggo"
target="_blank">
<img style="height:80px;margin-left:-4px;" src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png"
alt="Get it on Google Play">
</a>
<a class="social-link" href="https://github.com/luton-studios/frog-go"
target="_blank" role="button">
<img src="images/github.png" style="width:40px; height:40px">
</a>
</p>
</div>
</div>
<hr class="showcase-divider">
<div class="row">
<div class="col-12 col-md-4 col-lg-3">
<img class="rounded-circle img-no-interact showcase-image" src="images/darkraze.jpg">
</div>
<div class="col-12 col-md-8 col-lg-9">
<h3 class="body-header">Darkraze</h2>
<p class="subheader">February 2013 - March 2015</p>
<p class="showcase-body">One of my unreleased old Unity projects. Darkraze is a (closed
alpha) tactical sci-fi first-person shooter game. This was the first game that I
made where I was introduced to many multiplayer concepts. You can choose to play
with bots or with friends across LAN.
</p>
<p>
<a href="https://www.youtube.com/watch?v=xoTc4aVz7z4" target="_blank">
<img style="height:50px;" src="images/youtube_social_icon_red.png" alt="YouTube Video">
</a>
<a href="https://www.indiedb.com/games/darkraze" target="_blank">
<img style="height:50px;margin-left:10px;" src="https://media.indiedb.com/images/global/indiedb_200x125.png"
alt="IndieDB">
</a>
<a class="social-link" href="https://github.com/Kevinsomnia/Darkraze"
target="_blank" style="margin-left:10px;" role="button">
<img src="images/github.png" style="width:40px; height:40px">
</a>
<a class="btn btn-primary btn-md" href="https://github.com/Kevinsomnia/Darkraze/releases"
target="_blank" style="background-color:#333333;margin-left:10px;" role="button">
<img src="images/windows.png" style="width:22px; height:22px">
Game Download
</a>
</p>
</div>
</div>
</div>
<!-- END OF GAME DEV SHOWCASE -->
</div> <!-- /parallax -->
</div> <!-- /container -->
</main>
<script src="scripts/popper.min.js"></script>
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/parallax/parallax.min.js"></script>
<!-- Fade done -->
<script>
// Fade in page after done loading.
window.onload = function () {
$('[data-toggle="tooltip"]').tooltip();
document.body.classList.remove('fadeout');
};
</script>
</body>
</html>