-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
306 lines (303 loc) · 19.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CraftedByJ</title>
<link href='//fonts.googleapis.com/css?family=PT+Sans|PT+Sans+Narrow|PT+Serif' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".nav-holder">
<div class="bg">
<div class="bg-normal"></div>
<div class="bg-blur"></div>
</div>
<div class="wrapper">
<header>
<div class="slogan-holder"></div>
<div class="nav-holder hidden-xs">
<ul class="nav">
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contacts">Contacts</a></li>
</ul>
</div>
</header>
<div class="content">
<div class="container-fluid">
<img src="/portrait.png" alt="Portrait" class="pic center-block">
</div>
<div class="container">
<h1 class="text-center">
Il Jae Lee <br>
<small>Student by Day, Hacker by Night.</small></h1>
<br>
<p class="text-center">Hey there! <br>
I'm a high school (Currently enrolled in Cranbrook Kingswood) developer working on projects that I hope one day will make the world a better place. <br>
This site is a place where I can show off my work and skills. <br>
If you have any questions at all, feel free to get in contact with me through <a href="mailto:[email protected]">email</a>, <a href="https://www.facebook.com/smashthewindow">Facebook</a> or <a href="https://twitter.com/soda5_">Twitter</a>.</p>
<br>
</div>
<div class="container-fluid dark" id="about">
<div class="container">
<h3 class="text-center">Who are you?</h3>
<p class="text-justify">
I'm a self-taught programmer interested in working in the technology-field (I call myself self-taught as I didn't receive any formal computer science education other than AP Computer Science, which was a joke). <br>
At its core, I'm a start-up nerd. I read TechCrunch, VentureBeat and HackerNews. I dream about starting my own start-up and selling it to a tech giant for millions. I code in my free time, working on projects which others will laugh at, but I feel so confident it can change the world.
</p><br>
<p class="text-justify">
Although I like to stay humble, I feel that I must point out that I'm by no means a beginner when it comes to programming. <br>
My continual interest in the computer science field over the years and countless hours of programming, learning and researching have allowed me to develop the skills comparable to a programmer working in the industry. (So give me an internship... and maybe I can prove it to you? :))
</p><br>
<h3 class="text-center">What's your story?</h3>
<p class="text-justify">
In my early days, I used to be crazy about video games. I used to stay up all night playing them, discuss them with my friends at school, and be completely obsessed with gaming competitions. And one day, for some reason I've got this really interesting idea; <em>What if I create my own video game?</em> How hard can it be, its not rocket science right?<br>
So on a cold Winter day of 2010, I went to the Harvard bookstore (long story how I ended up in Boston) and grabbed a copy of <em>Ivor Horton's Beginning Visual C++ 2010</em> - thus began my long journey to learn programming.</p><br>
<p class="text-justify">
Little did I know, there was (and still is) a tremendous amount of various 3D matrix, physics and algorithms knowledge required to create a proper video game. The advanced math classes that my Asian parents forced me to take in preparation for various math and science competitions (which, looking back, I thank them a lot - not only did I perform well on the competitions, I had no problem going through any math or science class in school after that) helped a bit, but there was still tremendous amount of learning that had to be done. So I bought books after books, learning linked lists, red-black trees, binary search, hashing algorithms and the sort.</p><br>
<p class="text-justify">
But the more I learned about these algorithms, I became more obsessed with using my knowledge to help solve problems that exists today rather than making a video game. We're able to send more safer emails thanks to SHA encryption algorithms. MP3 files are possible due to development of advanced compression methods. Siri or IBM's Watson are possible due to maching learning technologies. And that's where I stand today - I too wish to develop technologies that can solve the world's problems.
</p><br>
<h3 class="text-center">Where will you go from here?</h3>
<p class="text-justify">
Well, at the time of writing (1395426613 in UNIX Timestamp) would be to get into college. Sure, I have bigger ambitions that getting into a good college, but getting into a college seems to be the most logical step to take in order to achieve that goal. That means working hard on maintaining my GPA, preparing for ACTs, taking SATs and AP tests. However, I also like to focus on improving in my field of interest. Lately, I've been meeting up with the founders of small and big startups in Korea. It was an eye-opening experience, learning about their day-to-day life. Also, as my interest currently resides in machine learning and making computers to think more like humans, I've enrolled in a three week course at Coursera on maching learning.
</p><br>
<p class="text-justify">
Who knows - maybe in ten years, I would have made it to the front page of TechCrunch. Keep an eye out for my name.
</p>
</div>
<br>
</div>
<div class="container" id="projects">
<h2 class="text-center">Enough small talk, show me the code. <br>
<small>Now the fun part.</small></h2>
<div class="row">
<div class="col-sm-4 divider">
<h4 class="text-center">Languages</h4>
<ul>
<li>C/C++</li>
<li>Python</li>
<li>Objective-C</li>
<li>Java</li>
<li>Javascript</li>
<li>HTML5</li>
<li>Assembly</li>
</ul>
</div>
<div class="col-sm-4 divider">
<h4 class="text-center">Libraries</h4>
<ul>
<li>Django</li>
<li>NodeJS</li>
<li>AngularJS</li>
<li>Bootstrap</li>
<li>PureCSS</li>
<li>Cocos2D-x</li>
<li>Leadwerks 2</li>
<li>C4 Engine</li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="text-center">What else?</h4>
<ul>
<li>Has excellent skills in debugging.</li>
<li>Has experience in reverse-engineering and bypassing anti-reversing measures.</li>
<li>Excellent communicator in English and Korean.</li>
<li>As you can see from this portfolio, has a sense of design.</li>
<li>Ability to use Microsoft Paint. :)</li>
</ul>
</div>
</div>
<br>
<h2 class="text-center">You really know all that stuff? Prove it!</h2>
<h5 class="text-center">Click the images to view descriptions.</h5>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-sm-6">
<a data-toggle="collapse" data-target="#craneshout">
<img src="/craneshout.png" alt="" class="proj-img">
</a>
<div class="collapse" id="craneshout">
<h4>CraneShout</h4>
<p class="text-justify">Anonymous secret sharing service for Cranbrook Kingswood students.
The service is exclusive to students - parents, faculty or alumni cannot get access.</p>
<p>Technologies used: Django, Celery, RabbitMQ, PostgreSQL</p>
<p><a href="https://www.craneshout.com">Visit</a></p>
</div>
</div>
<div class="col-sm-6">
<a data-toggle="collapse" data-target="#readly">
<img src="/readly.png" alt="" class="proj-img">
</a>
<div class="collapse" id="readly">
<h4>Readly.IO</h4>
<p class="text-justify">A Twitter article reminder service that I've designed, coded, and launched all within 7 days. When a user tweets a link or an article, it is sent to Readly.IO and an reminder email with the link and a short summary of the article is sent to the user.</p>
<p>Technologies used: NodeJS, Redis, MongoDB</p>
<p><a href="https://github.com/smashthewindow/Readly.io">GitHub</a></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-sm-6">
<a data-toggle="collapse" data-target="#whitebox">
<img src="/whitebox.png" alt="" class="proj-img">
</a>
<div class="collapse" id="whitebox">
<h4>WhiteBox</h4>
<p class="text-justify">A weekend hack I made where it answers a user's questions.
User may ask a question, which then the natural language parser processes the question to build an MQL Query.
The query is then passed into Freebase to find the answer.
Heavily inspired by Wolfram Alpha. </p>
<p>Technologies used: Flask</p>
</div>
</div>
<div class="col-sm-6">
<a data-toggle="collapse" data-target="#segment">
<img src="/segment.png" alt="" class="proj-img">
</a>
<div class="collapse" id="segment">
<h4>Segment</h4>
<p class="text-justify">Bored during summer break, I've made Segment game.
The gameplay is a clone of the IGF Winner <a href="http://perfectiongame.net/">Perfection</a>.
I've basically cloned the whole game in a matter of 7 days - the length of my stay at Samsung Medical Hospital for a surgery.</p>
<p>Technologies used: Cocos2D-x, Python</p>
<p><a href="https://github.com/smashthewindow/segments">GitHub</a> / <a href="http://youtu.be/BtLpXtQa75Y">Gameplay Video</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-sm-6">
<a data-toggle="collapse" data-target="#qmark">
<img src="/qmark.png" alt="" class="proj-img">
</a>
<div class="collapse" id="qmark">
<h4>QMark</h4>
<p class="text-justify">A hack I've made at the 2nd MHacks.
After being fed up with managing bookmarks thousands of bookmarks, I've decided to build a better way to manage them.
When a user registers a bookmark, QMark automatically scans the page for the most important keywords and phrases.
Then a user may search his bookmarks through related terms of keywords.</p>
<p>Technologies used: Django</p>
<p><a href="https://github.com/smashthewindow/QuickMarks">GitHub</a></p>
</div>
</div>
<div class="col-sm-6">
<a data-toggle="collapse" data-target="#gimmeglasses">
<img src="/glasses.png" alt="" class="proj-img">
</a>
<div class="collapse" id="gimmeglasses">
<h4>GimmeGlasses</h4>
<p class="text-justify">A site I've launched after a weekend of hacking, where a user may upload a selfie, then the serverside logic detects the face and places glasses on their face.
This was my first web project, and I've learnt a lot about web programming and server management. </p>
<p>Technologies used: Django, OpenCV</p>
<p><a href="http://gimmeglasses-sinabro.rhcloud.com/">Site</a></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-sm-6">
<a data-toggle="collapse" data-target="#mcs">
<img src="/mcs.png" alt="" class="proj-img">
</a>
<div class="collapse" id="mcs">
<h4>moon.chase.star</h4>
<p class="text-justify">A rapid game I've developed over a period of 4 months.
In order to meet the development schedule, I've also cut down on some of the features I had in mind, simplified the whole art asset by switching from 3D to 2D, and chosen a mono-color theme.
I've also built LEAP Motion controller integration for the first MHacks 2013, and placed in the top 10.</p>
<p>Technologies used: SFML, Python</p>
<p><a href="https://github.com/smashthewindow/moon.chase.star">GitHub</a> / <a href="http://www.desura.com/games/moonchasestar">Desura</a></p>
</div>
</div>
<div class="col-sm-6">
<a data-toggle="collapse" data-target="#rnr">
<img src="/rnr.png" alt="" class="proj-img">
</a>
<div class="collapse" id="rnr">
<h4>Round & Round</h4>
<p class="text-justify">Round & Round was the first video game I've ever attempted to create.
Over-ambitious and not very well planned out, the project did not see completion. Nevertheless, I value the experience as it has taught me a lot about programming and project management in general, and most importantly I had tones of fun in the process. </p>
<p>Technologies used: SFML, Python</p>
<p><a href="http://youtu.be/mG2JfMmGr04">WIP Demo</a> / <a href="http://youtu.be/HaaTUSG2ZYg">Tech Demo</a></p>
</div>
</div>
</div>
</div>
</div>
<h2 class="text-center">How smart are you?</h2>
<p class="text-justify">I'm also fairly educated in academic disciplines as math and science. I feel its knowledge have helped me pursue my passion in computer science today. Below are a list of accomplishments in the field.</p>
<ul>
<li>2013 MHacks 2013 Winter (Hosted by University of Michigan, Ann Arbor) placed in Top 10 for LEAP Motion Integration</li>
<li>Scored 5.0 in AP Calculus AB, AP Physics B, AP Computer Science</li>
<li>Currently enrolled in AP Chemistry and AP Calculus BC classes, with excellent scores</li>
<li>2012 AMC 10B (American Mathematics Competition) 1st in school</li>
<li>2013 AMC 10B (American Mathematics Competition) 1st in school</li>
<li>2012 MMPC (Michigan Math Prize Competition) 79th in State</li>
<li>2013 MMPC (Michigan Math Prize Competition) 150th in State</li>
<li>2012 Math Field Day (Hosted by University of Michigan, Flint) Cranbrook Kingswood Representing Team, 2nd in State</li>
<li>2013 Math Field Day (Hosted by University of Michigan, Flint) Cranbrook Kingswood Representing Team, 2nd in State</li>
<li>2014 Math Field Day (Hosted by University of Michigan, Flint) Cranbrook Kingswood Representing Team, 2nd in State</li>
<li>2012 Michigan Physics Olympiad (Hosted by University of Michigan, Ann Arbor) 2nd in State</li>
<li>2013 Michigan Physics Olympiad (Hosted by University of Michigan, Ann Arbor) 2nd in State</li>
<li>2014 Michigan Science Olympiad Technical Problem Solving, 4th in State</li>
</ul>
</div><br>
<div class="container-fluid dark" id="contacts">
<div class="container">
<h3 class="text-center">Well, I need to contact you right now! <br>
<small>Perfect! Feel free to contact me through <a href="mailto:[email protected]">email</a> or through any of the methods below.</small></h3>
<div class="row">
<div class="col-md-3">
<div class="contact-btn">
<a href="https://twitter.com/soda5_"><i class="fa fa-twitter-square"></i></a>
</div>
</div>
<div class="col-md-3">
<div class="contact-btn">
<a href="https://www.facebook.com/smashthewindow"><i class="fa fa-facebook-square"></i></a>
</div>
</div>
<div class="col-md-3">
<div class="contact-btn">
<a href="https://github.com/smashthewindow"><i class="fa fa-github-square"></i></a>
</div>
</div>
<div class="col-md-3">
<div class="contact-btn">
<a href="https://plus.google.com/u/0/108575552433989918665"><i class="fa fa-google-plus-square"></i></a>
</div>
</div>
</div> <br>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-center">Crafted with <i class="fa fa-heart"></i> in Seoul. <br>
Site by <a href="https://twitter.com/soda5_">@soda5_</a>. <br>
Source code is available <a href="https://github.com/smashthewindow/smashthewindow.github.io">here</a>.</p>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="/script.js"></script>
</body>
</html>