-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
230 lines (218 loc) · 11.9 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
<!DOCTYPE html>
<html lang='en'>
<head>
<!-- Basic Page Needs
============================================================================ -->
<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
<meta name="author" content="Jamin Chen">
<meta name="keyword" content="Jamin Chen, Chen, Jamin, Student, Jamin Chen USC">
<!-- Mobile Specific Metas
============================================================================ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title and Meta Description
============================================================================ -->
<title> Jamin Chen </title>
<meta name="description" content="Developer, student, and friendly person @ University of Southern California.">
<!-- CSS
============================================================================ -->
<link rel="stylesheet" type="text/css" href="./css/font-awesome.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/main.css"/>
<link rel="stylesheet" type="text/css" href="./css/header.css"/>
<link rel="stylesheet" type="text/css" href="./css/welcome.css"/>
<link rel="stylesheet" type="text/css" href="./css/about.css"/>
<link rel="stylesheet" type="text/css" href="./css/portfolio.css"/>
<!-- Fonts
============================================================================ -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<!-- Favicon
============================================================================ -->
<!-- Oops! Don't have one yet... -->
</head>
<body>
<!-- Header -->
<header id="header">
<div class="content">
<div id="logo_name"><a href="#header">JAMIN CHEN</a></div>
<nav id="nav">
<ul>
<li><a href="#welcome" class="active" title="Next Section">HOME</a></li>
<li><a href="#about" title="Next Section">ABOUT</a></li>
<li><a href="#portfolio" title="Next Section">PORTFOLIO</a></li>
<li><a href="#resume" title="Next Section">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<!-- Slides -->
<div id="welcome" class="container-fluid">
<div class="row">
<div id="welcome_text" class="col-md-7 col-md-offset-2">
<h2>Hello, my name is</h2>
<h1><span class="adj" id="big_name"><a href="#" onclick="return false">Jamin Chen</a></span></h1>
<div id="welcome_text3"><h2>I'm a
<span class="adj" id="adj1">Developer</span>
,
<span class="adj" id="adj2">Student</span>
, and
<span class="adj" id="adj3">Friendly Person!</span>
</h2></div>
<h2 id="learn_more">When I'm not coding I'm ...</h2>
</div>
<div id="welcome_icons" class="col-md-1 col-md-offset-0">
<ul>
<li><a href="https://github.com/jamin-chen"><i class="fa fa-github-square fa-4x"></i></a></li>
<li><a href="https://linkedin.com/in/jaminchen"><i class="fa fa-linkedin-square fa-4x"></i></a></li>
<li><a href="mailto:[email protected]"><i class="fa fa-envelope-square fa-4x"></i></a></li>
</ul>
</div>
</div>
</div>
<div id="about" class="container-fluid">
<button id="btn1"><div id="arrow"></div></button>
<div class="title col-sm-12 col-md-12">A little bit about me...</div>
<div id="intro" class="row">
<img id="profile" src="./img/me.jpg" class="img-responsive img-circle col-md-2 col-md-offset-2 col-sm-8 col-sm-offset-2">
<div class="row">
<div id="intro_text" class="col-md-5 col-md-offset-1">
I'm 18 years old and currently studying at the University of Southern California.
I'm working towards a bachelor's degree in Computer Engineering and Computer Science.
I love technology, whether it's using it or building it, and I'm always trying to keep
up with the latest advancements. </br></br>
I’m a self-taught web developer, currently specializing in front-end development. I have
good experience working with HTML/CSS/javascript, as well as jQuery and JS frameworks
such as Node/Express. I have some experience with server-side applications, having
used Heroku for projects before. I’m very comfortable with C++, and while I don’t
use Python regularly, I have experience with developing scripts.</br></br>
Learning is my hobby and I’m always trying to teach myself new things. I’m currently
taking courses on data structures and discrete math at USC. Outside of the classroom,
I’m currently exploring AWS and other back-end technologies. Through my technological
pursuits, I hope to improve the lives of and inspire those around me.</br></br>
<div id="signature"> > Jamin </div>
</div>
</div>
</div>
<!--
<div class="center"><a href="http://media.wix.com/ugd/5259e2_a341e80d23ea4d35b0dcbf80e13c85b1.pdf" id="resume_button"><span>RÉSUMÉ</span></a></div>
-->
</div>
<div id="portfolio" class="container-fluid">
<div class="row"><div class="title col-sm-12 col-md-12">... and a bit about what I've done ...</div></div>
<section id="timeline" class="timeline-container">
<!-- Hashmap -->
<div class="timeline-block">
<div class="timeline-img timeline-cpp">
<img src="img/icon-cpp.svg" alt="C++">
</div>
<div class="timeline-content">
<h4>Hashmap</h4>
<p>Coded the C++ hashmap class from scratch using only primitive types, as part of my application for KPCB's Fellows program, </p>
<a href="https://github.com" class="timeline-repo"><i class="fa fa-github-square fa-2x"></i></a>
<span class="timeline-date">September, 2016</span>
</div>
</div>
<!-- Magic Mirror -->
<div class="timeline-block">
<div class="timeline-img timeline-js">
<img src="img/icon-js.svg" alt="Javascript">
</div>
<div class="timeline-content">
<h4>Magic Mirror</h4>
<p>Built both the hardware and the software for a “smart mirror” that displays useful information such as time, weather, and trending news. Currently moving the mirror to be hosted server-side due to AJAX blocking cross-domain requests. Sad panda.</p>
<a href="https://github.com" class="timeline-repo"><i class="fa fa-github-square fa-2x"></i></a>
<span class="timeline-date">November, 2016</span>
</div>
</div>
<!-- Rainbow Tables -->
<div class="timeline-block">
<div class="timeline-img timeline-python">
<img src="img/icon-py.svg" alt="Python">
</div> <!-- timeline-img -->
<div class="timeline-content">
<h4>Rainbow Table Generator + Zipfile Cracker</h4>
<p>As a project for my information security class, I coded Python command line scripts to generate rainbow tables given a list of password inputs, as well as crack encrypted .zip and .7z files with multi-threading.</p>
<a href="https://github.com" class="timeline-repo"><i class="fa fa-github-square fa-2x"></i></a>
<span class="timeline-date">December, 2016</span>
</div> <!-- timeline-content -->
</div> <!-- timeline-block -->
<!-- Mirror Bot -->
<div class="timeline-block">
<div class="timeline-img timeline-nodejs">
<img src="img/icon-nodejs.svg" alt="Node.JS">
</div>
<div class="timeline-content">
<h4>MirrorMessenger</h4>
<p>Used Facebook's Messenger API to develop a bot that allows for user input and interactivity with the Magic Mirror. Implemented user-friendly message chains and GET request handlers.</p>
<a href="https://github.com" class="timeline-repo"><i class="fa fa-github-square fa-2x"></i></a>
<span class="timeline-date">December, 2016</span>
</div>
</div>
<!-- Weather Bot -->
<div class="timeline-block">
<div class="timeline-img timeline-nodejs">
<img src="img/icon-nodejs.svg" alt="Node.JS">
</div>
<div class="timeline-content">
<h4>Weather Bot</h4>
<p>Used Facebook’s Messenger API, DarkSky weather API, and asynchronous programming principles to develop a chatbot capable of handling multiple user requests and automated task scheduling. </p>
<a href="https://github.com" class="timeline-repo"><i class="fa fa-github-square fa-2x"></i></a>
<span class="timeline-date">January, 2017</span>
</div>
</div>
<!-- Personal Website -->
<div class="timeline-block">
<div class="timeline-img timeline-html">
<img src="img/icon-html.svg" alt="HTML/CSS">
</div>
<div class="timeline-content">
<h4>Personal Website</h4>
<p>You're reading it right now! I built this website from scratch with nothing but the dew of a single ginko leaf and the energy of the universe ...<span style="font-size: 13px"> and a couple of other things like HTML, CSS(bootstrap), and javascript(jQuery).</span></p>
<a href="https://github.com" class="timeline-repo"><i class="fa fa-github-square fa-2x"></i></a>
<span class="timeline-date">February, 2017</span>
</div> <!-- timeline-content -->
</div> <!-- timeline-block -->
<!-- HackSC -->
<div class="timeline-block">
<div class="timeline-img timeline-nodejs">
<img src="img/icon-nodejs.svg" alt="Node.JS">
</div>
<div class="timeline-content">
<h4>HackSC</h4>
<p>I recently joined the dev team for USC's premier hackathon, HackSC. The ball's just started rolling and I'm excited to start working. Check back in the future for more updates on this.</p>
<span class="timeline-date">February, 2017</span>
</div> <!-- timeline-content -->
</div> <!-- timeline-block -->
<!-- Mystery -->
<div class="timeline-block">
<div class="timeline-img timeline-mystery">
<img src="img/icon-mystery.svg" alt="It's a mystery!">
</div>
<div class="timeline-content">
<h4>Something exciting!</h4>
<p>I love discovering and using new technologies! I'm a big self-learner, so I'm always trying to teach myself and create new things. Rest assured -- something is in the works!</p>
<span class="timeline-date">Right now</span>
</div> <!-- timeline-content -->
</div> <!-- timeline-block -->
</section> <!-- timeline -->
</div>
<!--
<div id="resume">
<div class="content">
resume stuff here
</div>
</div>
-->
<footer>
<div id="SITE_FOOTER">The site's still under construction! Good things are happening :) (updated 2/13/2017)</div>
</footer>
</body>
<!-- Javascript
============================================================================ -->
<script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="./js/preload.js"></script>
<script type="text/javascript" src="./js/scroll.js"></script>
<script type="text/javascript" src="./js/welcome.js"></script>
<script type="text/javascript" src="./js/button.js"></script>
<script type="text/javascript" src="./js/portfolio.js"></script>
</html>