forked from barryclark/jekyll-now
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
258 lines (198 loc) · 9.1 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
<!DOCTYPE html>
<html>
<head>
<title>Eugene Jahn</title>
<link href="https://fonts.googleapis.com/css?family=Allan|Domine|Gamja+Flower|Source+Sans+Pro:400i" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id = "wrap">
<nav id = "top">
<div class = "container">
<p>EUGENE JAHN</p>
<ul>
<li>
<a href="https://eugenejahn.github.io">Projects</a>
</li>
<li>
<a href="https://eugenejahn.github.io/about.html">About</a>
</li>
<li>
<a href="https://homes.cs.washington.edu/~ejahn1/pdf/eugeneResume.pdf">Resume</a>
</li>
</ul>
</div>
</nav>
<section class = "intro">
<h5 class= "mobile">
The best way to <br>
predict the future is to
</h5>
<h2 class="mobile">
CREATE IT
</h2>
<h2 class="hide">
I'm Eugene Jahn
<br>
a software developer
</h2>
<p class="hide">
I am an undergraduate researcher at UW Reality Lab
</p>
</section>
<img id = "jahn" src="jahn.jpg">
<section id = "project">
<h1>PROJECTS</h1>
<!-- <div class = "column">
<iframe class = "video" src="https://www.youtube.com/embed/-8mePPgHmGI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<div class = "content">
<h1 class = "title">
EZPen
</h1>
<p class = "describe">
In DefHack, my team developed a project called EzPen. It is an integrated web
application that detects the movement of your mobile device and utilizes it as a mouse(pen) drawing on laptop.
<br>
<br>
I built up a webpage to POST phone's acceleration data, and Unity GET the results, caluate the path of the movement, and draw the line on the laptop. The hardest part in this porject is to reduce the errors and latency.
</p>
</div>
</div>
<div class = "gap"></div>
<div class = "column">
<div class = "content">
<h1 class = "title">
AR Basketball Training
</h1>
<p class = "describe">
An AR application which simulates a basketball training scene to improve shooting accuracy training efficiency.
<br>
<br>
The application is built by Unity. It can calculate the best force and angle to shoot the ball from the user's position and also records the force and angle that the user's shoot. This app is made to help the player improve their shooting skils. The future work is to implement on HoloLens.
</p>
</div>
<div class=" video w3-content w3-display-container">
<iframe class = "mySlides" src="https://www.youtube.com/embed/Ubk0WUN8fJM" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<iframe class = "mySlides" src="https://www.youtube.com/embed/dhTCkRRkxpc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<iframe class = "mySlides" src="https://www.youtube.com/embed/pbQX1Yir8V0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
</div>
<div class = "gap"></div>
<div class = "column">
<iframe class = "video" src="https://www.youtube.com/embed/nOYlswLHxD4" frameborder="0" allowfullscreen></iframe>
<div class = "content">
<h1 class = "title">
IoT ShoppingRecord
</h1>
<p class = "describe">
Food App to check your items
<br><br>
People always forget what they bought from the supermarket, and it will cause the food spoil. If the cashier can scan the item’s qrcode and send the information to the users account, then users can know what they bought and when is the food expired day from their smart phone.
<br><br>
I built this app by Java and PHP. The cashier can use the scaner website to upload the item’s data to users’ mySQL database. For the users, they can check the items from Java app.
</p>
</div>
</div>
<div class = "gap"></div>
<div class = "column">
<div class = "content">
<h1 class = "title">
Robotic Guide Dog
</h1>
<p class = "describe">
Robotic guide dog which can guide and assert the people with vision impairment. The user can voice or joystick control the robot. And, the robot have these 3 functions 1. GPS navigation(it can guide user to the destination where the user commands) 2. Obstruction avoidance 3. Intelligent personal assistan(answer the question like the weather, times, and set alarm, etc)
<br>
<br>
I developed this robot by Raspberry and sensors such as microphone, GPS module, and ultrasonic sensor,etc. The users can control the car by voice, and raspberry pi has a microphone to reccive the sound. Then, raspberry pi sends the sound file to OLAMI Website to do NLP. After getting the results, it will analzye and response to user.
</p>
</div>
<iframe class = "video" src="https://www.youtube.com/embed/P6OpPbunmR8" frameborder="0" allowfullscreen></iframe>
</div>
<div class = "gap"></div>
<div class = "column">
<iframe class = "video" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fextraslice%2Fvideos%2F645433425663264%2F&show_text=0&width=560" width="560" height="420" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
<div class = "content">
<h1 class = "title">
Carrot Top
</h1>
<p class = "describe">
Using AR technique(HoloLens) to tell people when to harvest
<br><br>
In the 48 hour-long AT&T AR/VR hackathon, my team created an AR application CarrotTop for Microsoft HoloLens. CarrotTop used the built-in camera on HoloLens to detect and predict the length of the carrot that buried underground with the shape of the leaf. Combining the technique of image recognition and augmented reality, CarrotTop overlays a holographic on top of the real carrot to provide the optimal harvest information which helps the farmer or amateurs harvest the carrot at the right time.
</p>
</div>
</div>-->
<a class="section" href="https://www.youtube.com/watch?v=ohY2dNPDPXg">
<img src="arnote-mobile.png">
<p class="project-describe">AR Note Taking</p>
</a>
<a class="section" href="https://www.youtube.com/watch?v=WJhJtJE2I2c&t=2s">
<img src="magicLeap.jpg">
<p class="project-describe">AR Garden</p>
</a>
<a class="section"href= "https://docs.google.com/document/d/1nUCQOsXzizBJNX4hSmgCjuO8HhbeCqMg0YXGGuUg_PY/edit?usp=sharing">
<img src="airbnbdata-laptop.png">
<p class="project-describe">AirBnb Data Visualization</p>
</a>
<a class="section" href="https://www.youtube.com/watch?v=P6OpPbunmR8">
<img src="olamirobot-nobackground.png">
<p class="project-describe">SigmaGO</p>
</a>
<div class="section">
<iframe class = "video" src="https://www.youtube.com/embed/-8mePPgHmGI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p class="project-describe">EZPen</p>
</div>
<div class="section">
<iframe class = "video" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fextraslice%2Fvideos%2F645433425663264%2F&show_text=0&width=560" width="560" height="420" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
<p class="project-describe">Carrot Top</p>
</div>
<div style= "height:10px;"></div>
</section>
<footer>
<div id = "copyright">
Copyright © Eugene Jahn 2018
</div>
<div id = "icon">
<a href="mailto:[email protected]" class="fa fa-envelope-o" ></a>
<a href="https://www.facebook.com/eugenejahn" class="fa fa-facebook" ></a>
<a href="https://github.com/eugenejahn" class="fa fa-github-alt" ></a>
<a href="https://www.linkedin.com/in/eugene-j/" class="fa fa-linkedin" ></a>
</div>
</footer>
</div>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("top").style.top = "0";
} else {
document.getElementById("top").style.top = "-100px";
}
prevScrollpos = currentScrollPos;
}
</script>
<script>
// var slideIndex = 1;
// showDivs(slideIndex);
// function plusDivs(n) {
// showDivs(slideIndex += n);
// }
// function showDivs(n) {
// var i;
// var x = document.getElementsByClassName("mySlides");
// if (n > x.length) {slideIndex = 1}
// if (n < 1) {slideIndex = x.length}
// for (i = 0; i < x.length; i++) {
// x[i].style.display = "none";
// }
// x[slideIndex-1].style.display = "block";
// }
</script>
</body>
</html>