-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
245 lines (228 loc) · 12 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Font Setup -->
<!-- <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600|Open+Sans:200,300,400" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Asap:400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Archivo+Narrow:400,500,600|Source+Sans+Pro:200,300,600,700" rel="stylesheet">
<script src="https://use.fontawesome.com/5535b66a5e.js"></script>
<title>Kha Nguyen</title>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.typeit/4.3.0/typeit.min.js'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css'>
<link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />
<link rel="stylesheet" type="text/css" href="tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css">
<link rel="stylesheet" href="css/style.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.typeit/4.3.0/typeit.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js'></script>
<script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
</head>
<body>
<div id="fullpage">
<div class="section introDiv padding fp-auto-height-responsive">
<h1 id="introduction" class="border-bigger drop-shadow"></h1>
<ul id="social-icons" class="social-icons shadow">
<li class="tab tooltips" title="Twitter">
<a href="https://twitter.com/khapiano" class="nounderline">
<i class="fa fa-twitter circle"></i>
<span class="screen-reader">Twitter</span>
</a>
</li>
<li class="tab tooltips" title="GitHub">
<a href="https://github.com/Reservations" class="nounderline">
<i class="fa fa-github circle"></i>
<span class="screen-reader">GitHub</span>
</a>
</li>
<li class="tab tooltips" title="CodePen">
<a href="http://codepen.io/kha/" class="nounderline">
<i class="fa fa-codepen circle"></i>
<span class="screen-reader">CodePen</span>
</a>
</li>
<li class="tab tooltips" title="kha.vng@gmail.com">
<a href="mailto:kha.vng@gmail.com" class="nounderline">
<i class="fa fa-envelope circle"></i>
<span class="screen-reader">E-Mail</span>
</a>
</li>
</ul>
</div>
<div class="section center-vertical-horizontal padding fp-auto-height-responsive">
<div class="container-fluid">
<div class="row">
<div class="col-lg-7">
<h3 class="border" id="current">I am currently majoring in Informatics (Software Engineering / Data Science / Business) at the University of Washington, Seattle (Class of 2021)</h3>
</div>
<div class="col-lg-5">
<img id="falcon" src="http://wmgf.us/wp-content/uploads/2016/02/Washington_Huskies.png"
class="img-responsive center-block image-height-resize-medium">
</div>
</div>
</div>
</div>
<div class="section padding fp-auto-height-responsive">
<h2 class="border" id="projects-title">Projects</h2>
<div class="slide">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-lg-4">
<div id="prioto-gallery" class="imageHeightResize swiper-container project-gallery">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://a5.mzstatic.com/us/r30/Purple22/v4/11/98/89/11988985-8532-0a88-1555-26c462355357/screen696x696.jpeg" class="img-responsive center-block imageHeightResize image-shadow">
</div>
<div class="swiper-slide">
<img src="http://a1.mzstatic.com/us/r30/Purple71/v4/55/6e/a6/556ea653-cb45-22cf-55bb-30f814b85ee2/screen696x696.jpeg" class="img-responsive center-block imageHeightResize image-shadow">
</div>
<div class="swiper-slide">
<img src="http://a1.mzstatic.com/us/r30/Purple41/v4/13/48/38/1348386b-d0af-5fdd-d852-ebd5864e897c/screen696x696.jpeg" class="img-responsive center-block imageHeightResize image-shadow">
</div>
<div class="swiper-slide">
<img src="http://a4.mzstatic.com/us/r30/Purple41/v4/0e/7f/41/0e7f419f-d6a7-f5eb-22f3-2ea5c696f07e/screen696x696.jpeg" class="img-responsive center-block imageHeightResize image-shadow">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
</div>
<div class="project-links-multiple">
<a href="https://itunes.apple.com/us/app/prioto-boost-productivity-short-long-term/id1142814748?mt=8"><img id="prioto-appstore" src="http://i.imgur.com/qXtKZz4.png" class="image-height-resize-small project-button"></a>
<a href="https://github.com/Reservations/Prioto"><img id="prioto-code" src="http://i.imgur.com/XVQaXUt.png" class="image-height-resize-small project-button"></a>
</div>
<!--<div class="project-links">
</div>-->
</div>
<div id="prioto-description" class="project-description">
<h4 class="border-medium">Prioto is a Swift-based iOS app that combats issues with work shared by students and employees everywhere - over scheduling
and burnout - by integrating two highly-regarded productivity techniques - the Eisenhower Method and Pomodoro Technique.
<br><br> The Eisenhower method encourages users to consider both the urgency and importance of each of their tasks.
This optimizes efficiency by dedicating valuable time and energy to the most impactful tasks. The Pomodoro technique
addresses the issue of work burnout by encouraging users to work in intervals of work and break rather than one long
session of work. For example, one would work for 25 minutes, take a break for 5 minutes, then repeat.
</h4>
<h5 class="border-medium">
✰ Written in Swift <br>✰ Featured on iSenaCode as a top free app <br>✰ Chosen as one of three top apps at Make School
Summer Academy 2016 in Sunnyvale
</h5>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 project-gallery">
<img src="images/monkey.png" class="img-responsive center-block" style="height: 40vh">
<div class="project-links-single">
<a href="https://github.com/Reservations/Banana-Fanatic"><img id="banana-code" src="http://i.imgur.com/XVQaXUt.png" class="image-height-resize-small project-button"></a>
</div>
</div>
<div class="col-md-8 project-description">
<h4 class="border-medium">Banana Fanatic is a Java-based desktop game where two players control monkeys with the goal of collecting more bananas
than the other. Monkeys can throw pineapples at each other in order to hamper the opponent.</h4>
<h5 class="border-medium">
✰ Written using the LibGDX Java game development framework
</h5>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container-fluid">
<div class="row">
<div class="col-md-7 col-lg-7">
<div class="imageHeightResize swiper-container project-gallery">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://i.imgur.com/P3zmXhL.png" class="img-responsive center-block imageHeightResize image-shadow">
</div>
<div class="swiper-slide">
<img src="http://i.imgur.com/5xq352I.png" class="img-responsive center-block imageHeightResize image-shadow">
</div>
<div class="swiper-slide">
<img src="http://i.imgur.com/AoF4YEA.png" class="img-responsive center-block imageHeightResize image-shadow">
</div>
<div class="swiper-slide">
<img src="http://i.imgur.com/UxNFHvh.png" class="img-responsive center-block imageHeightResize image-shadow">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
</div>
<div class="project-links-multiple">
<a href="http://worldwithoutwalls.tk"><img id="www-site" src="http://i.imgur.com/P9aFp41.png" class="image-height-resize-small project-button"></a>
<a href="https://github.com/SHSAppDev/penpal-app-web"><img id="www-code" src="http://i.imgur.com/XVQaXUt.png" class="image-height-resize-small project-button"></a>
</div>
<!--<div class="project-links">
</div>-->
</div>
<div class="project-description" class="col-md-5 col-lg-5">
<h4 class="border-medium">World Without Walls is a service that upgrades the old pen pal concept with instant messaging that young people are
used to today in the form of an online chat app. Especially in the case of foreign language education, this is fantastic
because it allows students to improve their language skills while having fun by conversing with native speakers their
age. Certain tools make this type of communication easier such as the ability to translate just an individual word
or phrase, grammar checks, and speech to text.
</h4>
<h5 class="border-medium">
✰ Written using HTML, CSS, JS, and the Google Firebase backend <br>✰ Collborative project with Ryan Anderson and
Kyle Seid-Phan
</h5>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-lg-4">
<div class="imageHeightResize swiper-container project-gallery">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://i.imgur.com/2iQa88R.png" class="img-responsive center-block imageHeightResize image-shadow">
</div>
<div class="swiper-slide">
<img src="http://i.imgur.com/TvlDtie.png" class="img-responsive center-block imageHeightResize image-shadow">
</div>
<div class="swiper-slide">
<img src="http://i.imgur.com/joen3Y0.png" class="img-responsive center-block imageHeightResize image-shadow">
</div>
<div class="swiper-slide">
<img src="http://i.imgur.com/fj5my33.png" class="img-responsive center-block imageHeightResize image-shadow">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
</div>
<div class="project-links-multiple">
<a class="tooltips" title="Add source: https://reservations.github.io"><img id="prioto-appstore" src="http://i.imgur.com/SSEJ2jB.png" class="image-height-resize-small project-button"></a>
<a href="https://github.com/Reservations/Isla-Lock-Screen-Widget"><img id="isla-code" src="http://i.imgur.com/XVQaXUt.png" class="image-height-resize-small project-button"></a>
</div>
</div>
<div class="project-description">
<h4 class="border-medium">IslaLS is a minimalistic set of iOS LockHTML4 time widgets that present the time and date with a clean design and is available in various, different color flavors.
</h4>
<h5 class="border-medium">
✰ Written using HTML, CSS, JS
<br>
✰ Incorporates the Moment.js API for displaying dates and times in different timezone locales and languages
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<script>$(document).ready(function() {
document.getElementsByTagName("html")[0].style.visibility = "visible";
});
</script>
<script src="js/index.js"></script>
</body>
</html>