-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
218 lines (206 loc) · 11.2 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Kevin Jiang's Porfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body style="background-color:rgb(230,230,230)">
<!-- navbar -->
<nav class="navbar navbar-default" data-spy="affix">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Kevin Jiang</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">About Me</a></li>
<li><a href="resume.html">Resume</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Projects<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="puzzlecube.html">P2.7 - PuzzleCube</a></li>
<li><a href="train.html">P4.1 - Train</a></li>
<li><a href="minitrain.html">P4.4 - MiniTrain</a></li>
<li><a href="reverseengineering.html">P5.4 - ReverseEngineering</a></li>
<li><a href="papertoy.html">P5.5 - PaperToy</a></li>
<li><a href="anotherworld.html">P5.6 - AnotherWorld</a></li>
<li><a href="2016entrepreneurshipproject.html">2016 Entrepreneurship Project</a></li>
</ul>
</li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" style="height:50px; padding:9px 0px;">
<li><a href="https://www.facebook.com/kevin.jiang.56863" style="padding:0px;"><img src="img/facebookicon.png"></img></a></li>
<li><a href="https://github.com/pinkfluffycow" style="padding:0px;"><img src="img/githubicon.png"></img></a></li>
</ul>
</div>
</div>
</nav>
<!-- brief intro -->
<div id="aboutme_header">
<div id="aboutme_container" style="background-image: url('img/aboutme_header.jpg');">
<div class="col-sm-11" id="aboutme_quote">
"To iterate is human, to recurse divine."
</div>
</div>
</div>
<div class="row description" style="margin:0 auto;">
<div class="col-xs-3 hidden-sm hidden-md hidden-lg"></div>
<div id="aboutme_info" class="col-xs-6 col-sm-2">
<!-- <img class="img-responsive animated zoomIn" src="img/kevinjiang.JPG" style="width:100%"></img> -->
<h3 style="display:inline;">Name: </h3><p style="display:inline;">Kevin Jiang</p>
<br>
<h3 style="display:inline;">Email: </h3><p style="display:inline;">kjiang6205@gmail.com</p>
<br>
<h3 style="display:inline;">Phone: </h3><p style="display:inline;">(925) 336 - 6434</p>
<br>
<h3 style="display:inline;">Location: </h3><p style="display:inline;">Dublin, CA</p>
</div>
<div id="aboutme_description" class="col-xs-12 col-sm-10">
<h3>About Me</h3>
<p id="aboutme">According to the US Department of Commerce, STEM workers earn 26 percent more than their non-STEM counterparts. However, I’m not as interested in the high pay as I am in the challenge STEM entails. Once I graduate, I hope to work as an entry-level software developer intern. I am interested in this field due to my love of technology and computers. I constantly wonder about the how’s and why’s of modern-day technology, and would love to work with a team that programs and develops new software.</p>
<p id="aboutme">I would make a valuable asset to the field of technology due to my academic and interpersonal skills. I excel at mathematics and I am able to combine math with my expertise in programming, as evidenced by my high scores in computing olympiads. In addition, I possess the ability to work well with others, and am capable of working in groups, adjusting to different personalities, and managing conflicts, which I have repeatedly and successfully utilized, such as when I organized several programming workshops with students of different ages and skill.</p>
<p id="aboutme">As the founder and current co-president of the Dublin High School Programming Club, I have learned to successfully oversee club meetings and organize instruction materials. At school, I apply my mathematical skills in my pre-calculus class, learning concepts that I will be able to apply to my programming, and use my knowledge of computers in my biology class.</p>
<p id="aboutme">I firmly believe that my interpersonal skills coupled with my proficiency in computer programming and mathematics make me a perfect choice for a computer programming job or internship. Thank you for your time, and please feel free to explore the rest of my website.</p>
</div>
</div>
<!-- project carousel -->
<div class="container">
<br>
<div id="projectCarousel" class="carousel slide" data-ride="carousel" style="max-width:100%; height:auto;">
<!-- indicators -->
<ol class="carousel-indicators" style="background-color:rgb(0,0,0);">
<li data-target="#projectCarousel" data-slide-to="0" class="active"></li>
<li data-target="#projectCarousel" data-slide-to="1"></li>
<li data-target="#projectCarousel" data-slide-to="2"></li>
<li data-target="#projectCarousel" data-slide-to="3"></li>
</ol>
<!-- slides wrapper -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<button type="button" class="btn btn-md" data-toggle="modal" data-target="#minitrain_modal" data-backdrop="true" data-keyboard="true">
<img class="img-responsive" src="img/P4.4_MiniTrain/diningcar_open.jpg" alt="Project 4.4 - Mini Train">
</button>
<div class="carousel-caption">
<h3>Project 4.4 - Mini Train </h3>
<p>A toy train that combines both cyberpunk and steampunk</p>
</div>
</div>
<div class="item">
<button type="button" class="btn btn-md" data-toggle="modal" data-target="#papertoy_modal" data-backdrop="true" data-keyboard="true">
<img class="img-responsive" src="img/P5.5_PaperToy/escherstairs.jpg" alt="Project 5.5 - Paper Toy">
</button>
<div class="carousel-caption">
<h3>Project 5.5 - Paper Toy</h3>
<p>A foldable paper model of M.C. Escher's <i>Relativity</i></p>
</div>
</div>
<div class="item">
<button type="button" class="btn btn-md" data-toggle="modal" data-target="#anotherworld_modal" data-backdrop="true" data-keyboard="true">
<img class="img-responsive" src="img/P5.6_AnotherWorld/colonybase.jpg" alt="Project 5.6 - Another World">
</button>
<div class="carousel-caption">
<h3>Project 5.6 - Another World</h3>
<p>A colony's base on a fictional world</p>
</div>
</div>
<div class="item">
<button type="button" class="btn btn-md" data-toggle="modal" data-target="#2016entrepreneurshipproject_modal" data-backdrop="true" data-keyboard="true">
<img class="img-responsive" src="img/2016_EntrepreneurshipProject/stutor2.jpg" alt="2016 Entrepreneurship Project">
</button>
<div class="carousel-caption">
<h3>2016 Entrepreneurship Project</h3>
<p>Stutor - A tutoring webapp</p>
</div>
</div>
</div>
<!-- left and right controls -->
<a class="left carousel-control" href="#projectCarousel" role="button" data-slide="prev" style="margin:0; padding:0px;">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#projectCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Modals -->
<div class="modal fade" id="minitrain_modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Project 4.4 - Miniature Train</h4>
</div>
<div class="modal-body">
<img src="img/P4.4_MiniTrain/diningcar_open.jpg" alt="Project 4.4 - Mini Train" style="max-width:100%;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="papertoy_modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Project 5.5 - Paper Toy</h4>
</div>
<div class="modal-body">
<img src="img/P5.5_PaperToy/escherstairs.jpg" alt="Project 5.5 - Paper Toy" style="max-width:100%;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="anotherworld_modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Project 5.6 - Another World</h4>
</div>
<div class="modal-body">
<img src="img/P5.6_AnotherWorld/colonybase.jpg" alt="Project 5.6 - Another World" style="max-width:100%;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="2016entrepreneushipproject_modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">2016 Entrepreneurship Project</h4>
</div>
<div class="modal-body">
<img src="img/2016_EntrepreneurshipProject/stutor.jpg" alt="2016 Entrepreneurship Project" style="max-width:100%;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>