-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
395 lines (297 loc) · 17.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Folio Bootstrap Template - Index</title>
<meta content="" name="descriptison">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i|Playfair+Display:400,400i,500,500i,600,600i,700,700i,900,900i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/hover/hover.min.css" rel="stylesheet">
<link href="assets/vendor/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Folio - v2.0.1
* Template URL: https://bootstrapmade.com/folio-bootstrap-portfolio-template/
* Author: BootstrapMade.com, Keun Young (Jennifer) Ko
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Navbar ======= -->
<nav id="main-nav">
<div class="row">
<div class="container">
<div class="logo">
<a href="index.html"><img src="assets/img//logo.png" alt="logo"></a>
</div>
<div class="responsive"><i data-icon="m" class="ion-navicon-round"></i></div>
<ul class="nav-menu list-unstyled">
<li><a href="#header" class="smoothScroll">Home</a></li>
<li><a href="#about" class="smoothScroll">About</a></li>
<li><a href="#portfolio" class="smoothScroll">Portfolio</a></li>
<li><a href="#journal" class="smoothScroll">Blog</a></li>
<li><a href="#contact" class="smoothScroll">Contact</a></li>
</ul>
</div>
</div>
</nav><!-- End Navbar -->
<!-- ======= Hero Section ======= -->
<div id="hero" class="home">
<div class="container">
<div class="hero-content">
<h1>I'm <span class="typed"></span></h1>
<p class="typed-items" data-typed-person="Jennifer Ko">Self-starter, data scientist, polyglot</p>
<ul class="list-unstyled list-social">
<li><a href="https://www.linkedin.com/in/kko/"><i class="ion-social-linkedin"></i></a></li>
<li><a href="https://www.youtube.com/channel/UC8ifwiDQPwmQW1bEj64PHyA?view_as=subscriber"><i class="ion-social-youtube"></i></a></li>
<li><a href="https://github.com/keunyoungko"><i class="ion-social-github"></i></a></li>
<li><a href="mailto: kko@middlebury.edu"><i class="ion-social-email"></i></a></li>
</ul>
</div>
</div>
</div><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<div id="about" class="paddsection">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-4 ">
<div class="div-img-bg">
<div class="about-img">
<img src="assets/img/me.JPG" class="img-responsive" alt="me">
</div>
</div>
</div>
<div class="col-lg-7">
<div class="about-descr">
<h4>Always on the go.</h4>
<p class="p-heading">4+ years of experience in research and working in a team-oriented environment. </p>
<p class="p-heading">Skilled in data analysis and statistics. </p>.</p>
<p class="separator">Born in South Korea and raised in Germany, I am a third-year student at Middlebury College, majoring in Economics, with French and Mathematics minors, with an expected graduation date of February 2021. I recently finished my study abroad at Stockholm School of Economics in Sweden in Fall 2019 and am currently attending University of California, Los Angeles as a visiting student in Winter 2020. During my undergraduate career, I have conducted and overseen economic research, piloted independent projects, and gained experience in teamwork and programming languages.</p>
<p class="separator">The combination of <b>problem-solving</b>> and <b>design</b> have recently sparked my interests in data visualization. Through Intro to Data Science course in Spring 2019, I had the opportunity to practice my coding skills in R while exploring my curiosity of various topics in a wide range of levels, from interactive to visual and comprehensive. <b>Constantly willing to explore the new</b>, I have spent the summer of 2019 taking online courses on a few other programming/query languages and data visualization software packages, while interning full-time as a Research Assistant at UC Irvine School of Social Sciences. </p>
<p class="separator">With my newfound passion in data science and analytics, I hope to apply my skills and knowledge that I have earned thus far to the <b>entertainment</b> and <b>technology</b> industries. </p>
<h5>On a more personal note</h5>
<p class="separator">I <b><i>love</i></b> storytelling. Besides <a href = "https://keunyoungko.wixsite.com/photography">photography</a>, <a href= "https://medium.com/@jennifer_kko">journaling</a>, and writing (like this), I create content on <a href= "https://www.youtube.com/channel/UC8ifwiDQPwmQW1bEj64PHyA?view_as=subscriber">YouTube</a>. </p>
<p class="separator">Ending high school in 2017, I sought a way to visually capture memories that I could look back and reflect on, so I began my own YouTube channel. Since then, I have been filming and producing vlogs of different places I visited, such as UCLA and trending locations in South Korea.</p>
<p class="separator">During my first year at Middlebury, I realized I could take advantage of this creative platform by <b>creating resources</b> for the prospective student community. I decided to make videos that would summarize my college life for those who could be curious. Back when I wanted to learn more about Middlebury as a high school senior, I hoped to find student-produced videos that could give a more visual, intimate idea about what life at Middlebury could be like than simply the college website or student reviews in pure text. With a mixture of iMovie and Adobe Premiere Pro, I created <b>the first-ever student-produced videos</b> about Middlebury college life. Through these, I helped students traverse to Middlebury and gain more insight to the dorm life, study-life balance, friendships, and other characteristics the college holds. Since then, current First-Year students have reached out to me in person and expressed how the videos provided support during their college-decision process.</p>
<h5>What next?</h5>
<p class="separator">Now collaborating with Middlebury College's Communications + Marketing Team following their recognition of my work on YouTube, I hope to challenge myself with new techniques on Adobe Premiere Pro. While seeking new ideas and executing more projects, I am also hoping to explore user experience de# Adobe Xd and HTML/CSS.</p>
</div>
</div>
</div>
</div>
</div><!-- End About Section -->
<!-- ======= Services Section ======= -->
<div id="services">
<div class="container">
<div class="services-carousel owl-theme">
<div class="services-block">
<i class="ion-ios-lightbulb-outline"></i>
<span>SKILLS</span>
<p class="separator">Data Visualization, Data Mining/Cleaning, Quantitative Analysis, Product Design, Prototyping</p>
</div>
<div class="services-block">
<i class="ion-ios-browsers-outline"></i>
<span>PROGRAMMING</span>
<p class="separator">R (Shiny, Plotly, Leaflet, GeoJSON), SQL, Python, HTML, CSS</p>
</div>
<div class="services-block">
<i class="ion-ios-color-wand-outline"></i>
<span>SOFTWARE + OPERATING SYSTEMS</span>
<p class="separator">Stata, Tableau, Adobe Xd, Adobe Premiere, Visual Studio Code, Axure RP, Windows, Mac OS </p>
</div>
<div class="services-block">
<i class="ion-ios-analytics-outline"></i>
<span>LANGUAGES</span>
<p class="separator">Korean, German, Spanish, French, Swedish (beginner) </p>
</div>
<div class="services-block">
<i class="ion-ios-camera-outline"></i>
<span>... AND A LITTLE MORE</span>
<p class="separator">Adobe Premiere Pro, Bloomberg</p>
</div>
</div>
</div>
</div><!-- End Services Section -->
<!-- ======= Portfolio Section ======= -->
<div id="portfolio" class="text-center paddsection">
<div class="container">
<div class="section-title text-center">
<h2>Portfolio</h2>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="portfolio-list">
<ul class="nav list-unstyled" id="portfolio-flters">
<li class="filter filter-active" data-filter=".all">All</li>
<li class="filter" data-filter=".innovation">Learning</li>
<li class="filter" data-filter=".data science">Data Science</li>
<li class="filter" data-filter=".ux/ui/product design">UX/UI/Product Design</li>
<li class="filter" data-filter=".economics research">Economics Research</li>
</ul>
</div>
<div class="portfolio-container">
<div class="col-lg-4 col-md-6 portfolio-thumbnail all branding uikits webdesign">
<a class="popup-img" href="assets/img/portfolio/1.jpg">
<img src="assets/img/portfolio/1.jpg" alt="img">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups uikits photography">
<a class="popup-img" href="assets/img/portfolio/2.jpg">
<img src="assets/img/portfolio/2.jpg" alt="img">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-thumbnail all branding webdesig photographyn">
<a class="popup-img" href="assets/img/portfolio/3.jpg">
<img src="assets/img/portfolio/3.jpg" alt="img">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups webdesign photography">
<a class="popup-img" href="assets/img/portfolio/4.jpg">
<img src="assets/img/portfolio/4.jpg" alt="img">
</a>
</div>
<div class="col-lg-4 col-md-6 portfolio-thumbnail all branding uikits photography">
<a class="popup-img" href="assets/img/portfolio/5.jpg">
<img src="assets/img/portfolio/5.jpg" alt="img">
</a>
</div>
</div>
</div>
</div>
</div>
</div><!-- End Portfolio Section -->
<!-- ======= Journal Section ======= -->
<div id="journal" class="text-left paddsection">
<div class="container">
<div class="section-title text-center">
<h2>journal</h2>
</div>
</div>
<div class="container">
<div class="journal-block">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="journal-info">
<a href="blog-single.html"><img src="assets/img/blog-post-2.jpg" class="img-responsive" alt="img"></a>
<div class="journal-txt">
<h4><a href="#blog-single.html">wrapping up January 2020</a></h4>
<p class="separator">this J-Term couldn't get better.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="journal-info">
<a href="blog-single.html"><img src="assets/img/blog-post-1.jpg" class="img-responsive" alt="img"></a>
<div class="journal-txt">
<h4><a href="blog-single.html">my study abroad in Stockholm</a></h4>
<p class="separator">fall ’19 left me with my heart full of gratitude and bliss
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- End Journal Section -->
<!-- ======= Contact Section ======= -->
<div id="contact" class="paddsection">
<div class="container">
<div class="contact-block1">
<div class="row">
<div class="col-lg-6">
<div class="contact-contact">
<h2 class="mb-30">Now that you know enough about me... </h2>
<h4>Let's connect/discuss/meet!</h4>
<ul class="contact-details">
<li><span>If you go places like I do (literally), why not find a common ground for both of us?</span></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
<div class="row">
<div class="col-lg-6">
<div class="form-group contact-block1">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validate"></div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validate"></div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validate"></div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<textarea class="form-control" name="message" rows="12" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validate"></div>
</div>
</div>
<div class="col-lg-12 mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="col-lg-12">
<input type="submit" class="btn btn-defeault btn-send" value="Send message">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div><!-- End Contact Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<div id="footer" class="text-center">
<div class="container">
<div class="socials-media text-center">
<ul class="list-unstyled list-social">
<li><a href="https://www.linkedin.com/in/kko/"><ion-icon name="logo-linkedin"></ion-icon></a></li>
<li><a href="https://www.youtube.com/channel/UC8ifwiDQPwmQW1bEj64PHyA?view_as=subscriber"><ion-icon name="logo-youtube"></ion-icon></a></li>
<li><a href="https://github.com/keunyoungko"><ion-icon name="logo-github"></ion-icon></a></li>
<li><a href="mailto: kko@middlebury.edu"><ion-icon name="mail-outline"></ion-icon></a></li>
</ul>
</div>
<p>© Copyrights Keun Young (Jennifer) Ko. All rights reserved 2020.</p>
<div class="credits">
Designed by <a>Jennifer Ko</a>
</div>
</div>
</div><!-- End Footer -->
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/typed/typed.js"></script>
<script src="assets/vendor/jquery-sticky/jquery.sticky.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>