-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
372 lines (333 loc) · 16.3 KB
/
index.html
File metadata and controls
372 lines (333 loc) · 16.3 KB
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
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Sean Cao</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/me.css" rel="stylesheet">
</head>
<body id="page-top">
<div style="overflow-x:hidden;">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Sean Cao</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#values">Values</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#art">Art</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead">
<div class="container d-flex h-100 align-items-start masthead-text">
<div class="mr-auto text-left" style="width:60%;">
<h1 class="text-light pl-3 pl-sm-0">Hey,</h1>
<h1 class="text-light pl-3 pl-sm-0">I'm Sean</h1>
<h2 class="text-white-50 mt-2 mb-5"></h2>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="about-section text-center">
<div class="container">
<h1 class="header pt-4">What I Love</h1>
<h2 class="pt-4 text-center mx-auto text-primary" style="max-width: 80%;">
Ever since I was young, I loved fiddling with anything tech, so naturally most of the things I'm passionate
about are centered around tech.
I enjoy the process of solving problems on my own, so when I broke my iPod in middle school, my first instinct
was to pull up a YouTube tutorial and buy my own replacement parts.
When I didn't want to share a computer with my parents, I built my own.
Nowadays when I'm not coding (JavaScript is my favorite language), I enjoy playing video games and stretching
my creative mind through photography.
</h2>
<div class="row py-4 justify-content-center">
<div class="col-6 col-lg-4 p-sm-4">
<div class="card mb-3 border-0 box">
<a class="js-scroll-trigger" href="https://www.instagram.com/seandacow/"><img class="card-img-top"
src="img/Oculus.jpg" alt="Card image cap"></a>
<div class="card-body">
<a class="js-scroll-trigger" href="https://www.instagram.com/seandacow/" style="color:black;">
<h5 class="card-title m-0">Photography</h5>
</a>
</div>
</div>
</div>
<div class="col-6 col-lg-4 p-sm-4">
<div class="card mb-3 border-0 box">
<a class="js-scroll-trigger" href="https://github.com/SeanSCao"><img class="card-img-top"
src="img/Coding.jpg" alt="Card image cap"></a>
<div class="card-body">
<a class="js-scroll-trigger" href="https://github.com/SeanSCao" style="color:black;">
<h5 class="card-title m-0">Coding</h5>
</a>
</div>
</div>
</div>
<div class="col-6 col-lg-4 p-4 mx-auto">
<div class="card mb-3 border-0 box">
<a href="https://www.google.com/logos/2010/pacman10-i.html" target="_blank"><img class="card-img-top"
src="img/Gaming.jpg" alt="Card image cap"></a>
<div class="card-body">
<a href="https://www.google.com/logos/2010/pacman10-i.html" target="_blank" style="color:black;">
<h5 class="card-title m-0">Gaming</h5>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Work Section -->
<section id="work" class="work-section bg-light">
<div class="container">
<h1 class="header pt-4 text-center">What I've Done</h1>
<h2 class="header pb-4 text-center"><a href="files/SEAN CAO.pdf" target="_blank">Resume</a></h2>
<div class="row justify-content-center">
<div class="col-6 col-lg-3 p-1 d-flex align-items-center">
<img class="rounded" src="img/columbia.jpg">
</div>
<div class="work-text col-12 col-lg-8 py-4">
<a href="https://www.columbia.edu/" class="text-black" target="_blank">
<h2>Columbia University in the City of New York</h2>
</a>
<h3 class="font-weight-bold text-primary">Front-End Development Intern, <i>Summer 2018</i></h3>
<h4 class="font-weight-bold">New York, New York</h4>
<p>This summer was a rite of passage into the professional world. My work on a new web application
for Rolling Deck to Repository taught me how to work in a small team where I needed to be independent and
self-motivated.
The trust my teammates had in me was a pleasant suprise that boosted my confidence in my own abilities
and
helped me not only do my job, but also go beyond what was expected.
</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-6 col-lg-3 p-1 d-flex align-items-center">
<img class="rounded" src="img/NYU.jpg">
</div>
<div class="work-text col-12 col-lg-8 py-4">
<h2><a href="https://www.nyu.edu/" class="text-black" target="_blank">New York University</a></h2>
<h3 class="font-weight-bold text-primary">B.A. in Computer Science, <i>expected Dec 2019</i></h3>
<h4 class="font-weight-bold">New York, New York</h4>
<p>NYU has presented with me a completely new scale and diversity of opportunities.
Though thriving in a city that won't hesitate
to leave you behind might be challenging, my experience in
<a href="https://www.facebook.com/encounternyc/" target="_blank">Encounter Christian Fellowship</a> has
taught me the importance of community. My tenure as treasurer and social media head affirmed that
qualtity comes from both an attention to detail and an unwavering commitment to what you love. NYU showed
me
what I love, instilled within me a heart for learning, challenged me to expand and adjust my views
and surrounded me with a diverse pool of inspiring individuals.
</p>
</div>
</div>
</div>
<div class="container">
<h1 class="header pt-4 text-center">Projects</h1>
<div class="row justify-content-center">
<div class="col-6 col-lg-3 p-1 d-flex align-items-center">
<img class="rounded w-75" src="img/notepad.png">
</div>
<div class="work-text col-12 col-lg-8 py-4">
<a href="https://github.com/SeanSCao/Notepad" class="text-black" target="_blank">
<h2>Notepad</h2>
</a>
<h3 class="font-weight-bold text-primary"><i>Jan 2020 - Present</i></h3>
<p>
Notepad is a rich text editor that is coupled with a user created dictionary of items that can be
referenced within notes using a Facebook mentions-like feature. My goal is to create a product catered
towards a niche audience of dungeons and dragons quest masters. With added element types and dictionary
item previews, it could become a handy tool for planning quests.
</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-6 col-lg-3 p-1 d-flex align-items-center">
<img class="rounded w-75" src="img/boom.png">
</div>
<div class="work-text col-12 col-lg-8 py-4">
<a href="https://github.com/SeanSCao/BoomBoomBois" class="text-black" target="_blank">
<h2>Boom Boom Bois</h2>
</a>
<h3 class="font-weight-bold text-primary"><i>November 2019 - Present</i></h3>
<p>
Boom Boom Bois is a continuation of my final project for my iOS programming class senior year. It is a 2D
local multiplayer arcade game that allows up to 4 players to battle each other on
one device. I loved the idea behind the game and plan to iron out the features and functionality in order
to release it to the app store and play with all my friends.
</p>
</div>
</div>
</div>
</section>
<!-- Values Section -->
<section id="values" class="values-section bg-primary">
<div class="mb-4">
<h1 class="header py-4 text-center text-light">What I Value</h1>
<!-- <h3 class="pb-4 text-center mx-auto text-black" style="max-width: 60%;">My interest in engineering has
shaped the way that I observe and understand circumstances in life. When I am met with adversity, my first
reaction is to determine what the problem is and begin finding a solution. Every problem has a solution somewhere
and I am the type of person that isn't satisfied until the solution is found. Technology is a powerful tool
so I am always to figure out how technology can be used to positively impact the world around me.
</h3> -->
<h2 class="text-center text-black py-2">Never Stop Learning</h2>
<h2 class="text-center text-black py-2">Never Stop Dreaming</h2>
<h2 class="text-center text-black py-2">Believe In Change</h2>
<h2 class="text-center text-black py-2">Every Problem Has A Solution</h2>
<h2 class="text-center text-black py-2">Relentlessly Search For That Solution</h2>
<h2 class="text-center text-black py-2">Do What You Love And Love What You Do</h2>
<h2 class="text-center text-black py-2">Always Ask "Why?"</h2>
<h2 class="text-center text-black py-2">But Don't Be Afraid Of Answering "Why Not?"</h2>
<h2 class="text-center text-black py-2">Never Be Satisfied With Yourself</h2>
<h2 class="text-center text-black py-2">But Don't Take Yourself Too Seriously</h2>
</div>
</section>
<!-- Art Section -->
<section id="art" class="art-section">
<div class="mb-4">
<h1 class="header py-4 text-center">Broadening My Perspective</h1>
<h2 class="text-center text-primary">I would rather die of passion than boredom. - Vincent van Gogh</h2>
<h2 class="pt-4 text-center mx-auto text-primary" style="max-width: 60%;">In my free time, I love to take
photos, whether I'm capturing memories or trying to find beauty in seemingly mundane objects of life.
Photography has been a medium that allows me to connect with people and share ideas. My passion for
photography has helped shaped how I see and perceive the world and where I find value and beauty.
</h2>
</div>
<div class="row pt-4 mt-4 justify-content-center">
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-1.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-2.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-3.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-4.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-5.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-6.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-7.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-8.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-9.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-10.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-11.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-12.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-13.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-14.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-15.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-17.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-18.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-19.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-20.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-21.jpg">
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-2 p-0 m-0">
<img src="img/Art-22.jpg">
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section bg-black">
<div class="container">
<div class="text-center">
<h2 class="text-light mb-4">I'm always looking for my next inspiration</h2>
<h2 class="text-primary mb-4">So let's get in touch</h2>
<h6 class="text-light">LinkedIn or Facebook messages work best</h6>
</div>
<div class="social d-flex justify-content-center">
<a href="https://www.instagram.com/seandacow/" target="_blank" class="mx-2">
<i class="fab fa-lg fa-instagram"></i>
</a>
<a href="https://www.facebook.com/seanscao" target="_blank" class="mx-2">
<i class="fab fa-lg fa-facebook-f"></i>
</a>
<a href="https://github.com/SeanSCao" target="_blank" class="mx-2">
<i class="fab fa-lg fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/SeanSCao" target="_blank" class="mx-2">
<i class="fab fa-lg fa-linkedin"></i>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black small text-center text-white-50">
<div class="container">
Copyright © Sean Cao 2020
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/me.js"></script>
</div>
</body>
</html>