/
about1.html
323 lines (298 loc) · 14.8 KB
/
about1.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
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (screen.width <= 699) {
alert("My site is not optimized for phone browsers. You will be redirected to my mobile page. -Chuk");
document.location = "http://about.me/brian.chuk";
}
</script>
<title>Brian Chuk | About</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Brian Chuk is a full stack software developer, a tinkerer, and a maker.">
<meta property="og:title" content="Brian Chuk | About">
<meta property="og:type" content="website">
<meta property="og:url" content="http://devChuk.github.io/about.html">
<meta property="og:description" content="Brian Chuk is a full stack software developer, a tinkerer, and a maker.">
<meta property="og:site_name" content="Brian Chuk">
<meta name="twitter:creator" content="@devChuk">
<meta name="twitter:card" content="summary">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3'></script>
<script src="http://static.tumblr.com/6nxvfxq/fj7mk0r17/modernizr-2.6.2.min.js"></script>
<link rel="stylesheet" href="./res/css/skills.css">
<link rel="shortcut icon" href="./res/img/favicon.ico">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/forms-min.css">
<link rel="stylesheet" href="./res/css/main.css">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.17.2/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="./res/css/buttons.css">
<style>
.skills-graph .label span {
font-size: 14px;
font-weight: 600; }
.skills-graph .graph-container.vertical .bar-container { height: 300px; }
</style>
<script>
var options = {};
</script>
</head>
<body>
<header id="header" class="header header--fixed hide-from-print" role="banner">
<div class="container">
<nav id="nav" class="nav-wrapper" role="navigation">
<ul class="nav">
<li class="nav__item ">
<a class="header__link subdued" href="./blog">
<span style="color:#fff">BLOG</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="./portfolio">
<span style="color:#fff">PORTFOLIO</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="./about">
<span style="color:#fff">ABOUT</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="./contact.html">
<span style="color:#fff">CONTACT</span>
</a>
</li>
</ul>
</nav>
<a href="http://devchuk.github.io" class="brand header__link">
<img src="https://raw.githubusercontent.com/devChuk/devchuk.github.io/master/res/img/favicon.ico">
<b class="brand__forename" style="color:#fff">Brian Chuk</b>
</a>
</div>
</header>
<header id="home"></header>
<br>
<center>
<div id="page" class="clearfix" style="margin:6em">
<div id="wrap" style="max-width:1300px;text-align:left">
<div id="content" class="full-width front-content">
<div id="featured-box">
<header class="single-entry-header">
<h1 style="font-size:6em;font-weight:bold;letter-spacing: 0.07em;">ABOUT</h1>
<hr>
<br>
<center>
<button class="button button-border-caution" id="whoButton">Who am I?</button>
<button class="button button-border-caution disabled" id="whatButton">What can I do?</button>
<button title="Updated May 2015" class="button button-border-caution" id="resumeButton" data-href="https://www.dropbox.com/s/5pbvolszzrzqs19/Resume4.pdf?dl=0"id="resumeButton">Résumé</button>
</center>
<br>
<div id="what">
<h1 style="font-size:3em;font-weight:bold;">Experience</h1>
<button class="button button-border-caution" id="exp" data-href="./about2.html">In the Machine</button>
<section id="about" class="site-section dark-on-light">
<div class="section-content">
<div class="widget-content">
<!-- Ardunio/Processing, C, Git Version Control, Java, Linux Bash Scripting, MATLAB, Microsoft Office Suite, Python, Solidworks, Web (HTML5, CSS3, JS, jQuery, etc.)-->
<div id="skills" class data-bars="
Arduino/Processing #de3230 90%,
C #de3230 80%,
CSS3 #de3230 75%,
Git_Version_Control #de3230 90%,
HTML5 #de3230 75%,
Java #de3230 85%,
Javascript #de3230 80%,
Linux_Bash_Scripting #de3230 60%,
MATLAB #de3230 40%,
Microsoft_Office_Suite #de3230 100%,
Python #de3230 80%,
Solidworks_Design_Software #de3230 90%
" data-orientation="horizontal" data-respond></div>
</div><!-- /.widget-content -->
</div><!-- /.section-content -->
</section><!-- /#about -->
</div>
<div id="placehold">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="who">
<h1 style="font-size:3em;font-weight:bold;">Just call me Chuk.</h1>
<p>Here's what you need to know. I'm <a href="https://github.com/devChuk/Playing_With_Code/tree/gh-pages/Javascipt/age"><span id="age"></span></a> years old, and I'm a recent graduate of <a href="http://stuy.enschool.org/">Stuyvesant High School</a>. Currently, I am studying in <a href="http://engineering.nyu.edu/">New York University</a> for a major in Computer Science and a minor in Electrical Engineering. I love to make awesome things, as you can probably tell just by looking at all the <a href="./portfolio">stuff</a> I've created. Don't hesitate to <a href="./contact">contact</a> me if you have any questions.</p>
<br><br>
<p style="font-weight:bold">My Work at Stuyvesant High School (outside the classroom)</p>
<li>I was a president of <a href="http://stuyscioly.github.io">Stuyvesant Science Olympiad</a>, one of the biggest clubs in the school.</li>
<li>I volunteered in the Boaz R. Weinstein Library.</li>
<li>I helped to increase support for Yen Chou in her campaign for State Assembly</li>
<li>I conducted research on <a title="Proportional Integral Derivative">P.I.D</a> controllers in the <a href="http://mechatronics.poly.edu/">Mechatronics Lab</a> in New York University.</li>
<li>I became a coxswain in Stuy Crew and taught people how to row in the <a href="http://www.villagecommunityboathouse.org/">Village Community Boathouse</a>.</li>
<li>I was a part of the Stuyvesant Caucus in the <a href="http://su.stuysu.org/">Student Union</a></li>
<br><br>
<p style="font-weight:bold">I'm a Maker, a Tinkerer, and a Hacker</p>
<li>I've built tons of projects, from wooden bicycles to quadcopters.</li>
<li>I participate in and sometimes organize hackathons throughout the year. You can view my hacks in my <a href="./portfolio">portfolio.</a></li>
<li>I work as a freelance web developer in my spare time.</li>
<li>I strongly believe in learning by doing and taking education into your own hands.</li>
<li>That's all for now, and it's just getting started. :)</li>
<br><br>
<center><img src="./res/img/light2.jpg"></center>
</div>
</header><!-- end single-entry-header -->
</div> <!--#feature-->
<div class="clear"></div>
</div><!-- end content -->
</div>
</div>
</center>
<footer id="footer" style="background-color:#de3230;clear:both;text-align:center;" class="container--wide">
<a class="footer-social">
<!--<span><a style="padding-top:17px;padding-left:8px;padding-right:17px;padding-bottom:15px;text-align:left;display:block;float:left;color:#fff;text-decoration:none;border:0;vertical-align: baseline;"href="http://www.facebook.com/W0odchuk"><i class="fa fa-facebook fa-x"></i></a><span>-->
<span><a style="padding-top:17px;padding-left:8px;padding-right:17px;padding-bottom:15px;text-align:left;display:block;float:left;color:#fff;text-decoration:none;border:0;vertical-align: baseline;"href="http://twitter.com/devchuk"><i class="fa fa-twitter fa-x"></i></a></span>
<span><a style="padding-top:17px;padding-left:8px;padding-right:17px;padding-bottom:15px;text-align:left;display:block;float:left;color:#fff;text-decoration:none;border:0;vertical-align: baseline;"href="http://github.com/devchuk"><i class="fa fa-github fa-x"></i></a></span>
<span><a style="padding-top:17px;padding-left:8px;padding-right:17px;padding-bottom:15px;text-align:left;display:block;float:left;color:#fff;text-decoration:none;border:0;vertical-align: baseline;"href="http://linkedin.com/pub/brian-chuk/9b/579/689/"><i class="fa fa-linkedin fa-x"></i></a></span>
<span><a style="padding-top:17px;padding-left:8px;padding-right:17px;padding-bottom:15px;text-align:left;display:block;float:left;color:#fff;text-decoration:none;border:0;vertical-align: baseline;"href="https://news.ycombinator.com/user?id=devchuk"><i class="fa fa-hacker-news fa-x"></i></a></span>
<span><a style="padding-top:17px;padding-left:8px;padding-right:17px;padding-bottom:15px;text-align:left;display:block;float:left;color:#fff;text-decoration:none;border:0;vertical-align: baseline;"href="http://www.youtube.com/channel/UCG78tXHk0lwlFO_Lr64ORaQ"><i class="fa fa-youtube-play fa-x"></i></a></span>
</a>
<a class="brand header__link" style="padding-right: 10em;">
© <script type="text/javascript">
document.write(new Date().getFullYear());
</script> Brian Chuk
<img src="https://raw.githubusercontent.com/devChuk/devchuk.github.io/master/res/img/favicon.ico">
</a>
<a class="footer-up" style="padding-left:17px;text-align:right;display:block;float:right;color:#fff;text-decoration:none;border:0;vertical-align: baseline;"href="#home">
<i class="fa fa-arrow-up fa-2x"></i>
</a>
</footer>
<script src="http://wicky.nillia.ms/headroom.js/assets/scripts/main.js?v=2"></script>
<script>
//header functions
(function() {
var header = document.querySelector("#header");
if(window.location.hash) {
header.classList.add("slide--up");
}
new Headroom(header, {
tolerance: 1,
offset : 205,
classes: {
initial: "slide",
pinned: "slide--reset",
unpinned: "slide--up"
}
}).init();
}());
//about functions
$( document ).ready(function() {
$( "#who" ).hide();
$( "#placehold" ).hide();
});
$( "#whoButton" ).click(function() {
$( "#placehold" ).show(0).delay(1000).hide(0);
$( "#what" ).delay(300).fadeOut( "fast" );
$( "#who" ).delay(600).fadeIn( "fast" );
$(this).addClass('disabled');
$( "#whatButton" ).removeClass('disabled');
});
$( "#whatButton" ).click(function() {
$( "#placehold" ).show(0).delay(1000).hide(0);
$( "#who" ).delay(300).fadeOut( "fast" );
$( "#what" ).delay(600).fadeIn( "fast" );
$(this).addClass('disabled');
$( "#whoButton" ).removeClass('disabled');
});
//resume link
$('#resumeButton').click(function(e) {
e.preventDefault(); e.stopPropagation();
window.location.href = $(e.currentTarget).data().href;
});
$('#exp').click(function(e) {
e.preventDefault(); e.stopPropagation();
window.location.href = $(e.currentTarget).data().href;
});
</script>
<script type='text/javascript' src='./res/js/js.js'></script>
<script type='text/javascript' src='./res/js/imagesloaded.js'></script>
<script type='text/javascript' src='./res/js/helper.js'></script>
<!-- JavaScript at the bottom -->
<script src="http://static.tumblr.com/rmicpth/91hmwbdrj/jquery-1.10.2.min.js"></script>
<script src="http://static.tumblr.com/rmicpth/tySmzikjm/plugins.min.js"></script>
<script src="./res/js/main.min.js"></script>
<!-- Google Web Font Loader -->
<script>
var families = [];
families.push( 'Source Sans Pro:400,600,400italic,600italic:latin' );
WebFontConfig = {
google: { families: families },
inactive: function() {
initialize();
},
active: function() {
initialize();
}
};
// Initialize the app
function initialize () {
App.init();
}
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
}());
</script>
<script>
//this script makes my age autoupdate every time I have a birthday
var years;
var bday=7;
var bmo=11;
var byr=1996;
function countYears()
{
var now = new Date();
tday=(now.getDate());
tmo=(now.getMonth()) + 1;
tyr=(now.getFullYear());
if((tmo > bmo)||(tmo==bmo && tday>=bday)) {
age= byr;
}
else {
age= byr + 1;
}
return (tyr - age);
}
years=(countYears()).toString();
document.getElementById("age").innerHTML=years;
</script>
</body>
</html>