-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
359 lines (352 loc) · 14.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Brian Lee</title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,300|Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/c2f13a5ed7.js"></script>
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="/img/favicon.png" rel="shortcut icon" type="image/x-icon" />
<!-- =======================================================
Theme Name: Bethany
Theme URL: https://bootstrapmade.com/bethany-free-onepage-bootstrap-theme/
Author: BootstrapMade.com
Author URL: https://bootstrapmade.com
======================================================= -->
</head>
<body>
<!--header-->
<header class="main-header" id="header">
<div class="bg-color">
<!--nav-->
<nav class="nav navbar-default navbar-fixed-top">
<div class="container">
<div class="col-md-12 navbar-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar" aria-expanded="false" aria-controls="navbar">
<span class="fa fa-bars"></span>
</button>
<a href="index.html" class="navbar-brand"></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="mynavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#header">Home</a></li>
<li><a href="#feature">Introduction</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--/ nav-->
<div class="container text-center">
<div class="wrapper wow fadeInUp delay-05s">
<h2 class="top-title"></h2>
<h3 class="title">Brian Lee</h3>
<h4 class="sub-title">Software Engineer</h4>
<h5><a class="resume-link" href="img/Brian_Lee_Resume.pdf" target=_blank>
RESUME
</a></h5>
</div>
</div>
</div>
</header>
<!--/ header-->
<!---->
<!---->
<!---->
<section id="feature" class="section-padding">
<div class="container">
<div class="row">
<div class="col-md-3 wow fadeInLeft delay-05s">
<div class="section-title">
<h2 class="head-title">INTRODUCTION</h2>
<hr class="botm-line">
<br/>
<img class="profile-pic" src="img/profile-pic.jpg"></img>
<p class="sec-para">Software Engineer with experience in building apps using Ruby on Rails and React.
I love problem-solving and seeing ideas come to fruition, especially with good user experience and design in mind.</p>
</div>
</div>
<div class="col-md-9">
<div class="col-md-6 wow fadeInLeft delay-02s">
<div class="category-header icon">
<i class="fas fa-laptop-code"></i>
<h3 class="txt-tl">Languages</h3>
</div>
<div class="category">
<!--Ruby-->
<div class="subitem">
<div class="subicon">
<i class="fas fa-gem"></i>
</div>
<div class="icon-text">
<h3 class="txt-tl subicon-text">Ruby</h3>
</div>
</div>
<!--JavaScript-->
<div class="subitem">
<div class="subicon">
<i class="fab fa-js"></i>
</div>
<div class="icon-text">
<h3 class="txt-tl subicon-text">JavaScript</h3>
</div>
</div>
</div>
<p class="txt-para">After learning about Object-Oriented Programming through Ruby and the Ruby on Rails framework,
I picked up JavaScript as my second language. </p>
</div>
<div class="col-md-6 wow fadeInLeft delay-02s">
<div class="category-header icon">
<i class="fas fa-sitemap"></i>
<h3 class="txt-tl">Frameworks</h3>
</div>
<div class="category">
<!--Rails-->
<div class="subitem">
<div class="subicon">
<img class="postgres-icon" src="img/rails-logo.png"></img>
</div>
<div class="icon-text">
<h3 class="txt-tl subicon-text">Rails</h3>
</div>
</div>
<!--Node.js-->
<div class="subitem icon2">
<div class="subicon">
<i class="fab fa-node-js"></i>
</div>
<div class="icon-text">
<h3 class="txt-tl subicon-text">Express</h3>
</div>
</div>
</div>
<p class="txt-para">The two major frameworks I picked up for Ruby and JavaScript were Ruby on Rails
and Express.js, respectively (yes, that is the Node.js logo). Rails taught me about MVC architecture
and Express.js taught me about flexibility in simplicity.
</p>
</div>
<div class="col-md-6 wow fadeInLeft delay-04s">
<div class="category-header icon">
<i class="fas fa-database"></i>
<h3 class="txt-tl">Databases</h3>
</div>
<div class="category">
<!--PostgreSQL-->
<div class="subitem">
<div class="subicon">
<img class="postgres-icon" src="img/postgres-icon.png"></img>
</div>
<div class="icon-text">
<h3 class="txt-tl subicon-text">PostgreSQL</h3>
</div>
</div>
<!--MongoDB-->
<div class="subitem">
<div class="subicon icon2">
<img class="mongo-icon" src="img/MongoDB.png"></img>
</div>
<div class="icon-text">
<h3 class="txt-tl subicon-text">MongoDB</h3>
</div>
</div>
</div>
<p class="txt-para">I initially implemented my Rails projects using PostgreSQL as the database in the backend,
but am now learning about non-relational databases, such as MongoDB.</p>
</div>
<div class="col-md-6 wow fadeInLeft delay-02s">
<div class="category-header icon">
<i class="fas fa-file-code"></i>
<h3 class="txt-tl">Frontend</h3>
</div>
<div class="category">
<!--React-->
<div class="subitem">
<div class="subicon">
<i class="fab fa-react"></i>
</div>
<div class="icon-text">
<h3 class="txt-tl subicon-text">React</h3>
</div>
</div>
<!--HTML5-->
<div class="subitem">
<div class="subicon icon2">
<i class="fab fa-html5"></i>
</div>
<div class="icon-text">
<h3 class="txt-tl subicon-text">HTML5 & CSS3</h3>
</div>
</div>
<!--CSS3-->
<!-- <div class="icon icon2">
<i class="fab fa-css3-alt"></i>
</div>
<div class="icon-text">
<h3 class="txt-tl subicon-text">CSS3</h3>
</div> -->
</div>
<p class="txt-para">React powers my apps on the frontend side of things,
with CSS for design, implementing tools and libraries like SASS and Bootstrap.
I'm also open to picking up Vue.js in the future.
</p>
</div>
<div class="col-md-6 wow fadeInLeft delay-06s">
<div class="category-header icon">
<i class="fa fa-mobile"></i>
<h3 class="txt-tl">Responsive Design</h3>
</div>
<div class="category">
<p class="txt-para">As someone who appreciates good design, I try to approach each project
with user experience and accessibility in mind.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!---->
<section class="section-padding parallax bg-image-2 section wow fadeIn delay-08s" id="portfolio" >
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="cta-txt">
<h3>PORTFOLIO</h3>
</div>
</div>
</div>
</div>
</section>
<!---->
<!---->
<section class="section-padding wow fadeInUp delay-02s">
<div class="container">
<div class="row portfolio-section">
<div class="col-md-9 col-sm-12">
<div class="col-md-4 col-sm-6 padding-right-zero">
<div class="portfolio-box design">
<h1 class="project-title">DECYPHER</h1>
<img src="img/decypher.png" alt="" class="img-responsive">
<div class="project-links">
<a href="https://decypher.herokuapp.com/" target=_blank>Live Site</a>
<span>|</span>
<a href="https://github.com/ibltsandwich/decypher" target=_blank>GitHub</a>
</div>
<div>
<h2 class="project-details">A Genius-inspired web application that allows users to analyze and annotate lyrics.
<br/>
Single-page implementation built on a Rails backend and React frontend.</h2>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 padding-right-zero">
<div class="portfolio-box design">
<h1 class="project-title">PUBSTATS</h1>
<img src="img/pubstats.png" alt="" class="img-responsive">
<div class="project-links">
<a href="http://pubstats.herokuapp.com/" target=_blank>Live Site</a>
<span>|</span>
<a href="https://github.com/ibltsandwich/pubStats" target=_blank>GitHub</a>
</div>
<div>
<h2 class="project-details">Single-page web-app that allows users to find player stats for the game PUBG.
<br/>
Built on the MERN stack (MongoDB, Express, React, Node.js).</h2>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 padding-right-zero">
<div class="portfolio-box design">
<h1 class="project-title">TYPING DEAD</h1>
<img src="img/typing-dead.png" alt="" class="img-responsive">
<div class="project-links">
<a href="https://typing-dead.firebaseapp.com/" target=_blank>Live Site</a>
<span>|</span>
<a href="https://github.com/ibltsandwich/Typing-Dead" target=_blank>GitHub</a>
</div>
<div>
<h2 class="project-details">A typing game featuring zombies!
<br/>
Written in vanilla JavaScript and animated with HTML Canvas.
<br/>
Uses Google Firebase to persist top 5 high scores.</h2>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 padding-right-zero">
<div class="portfolio-box design">
<h1 class="project-title">DOLLAREL</h1>
<img src="img/dollarel.png" alt="" class="img-responsive">
<div class="project-links">
<a href="http://www.brian-lee.me/dollarel" target=_blank>Live Site</a>
<span>|</span>
<a href="https://github.com/ibltsandwich/dollarel" target=_blank>GitHub</a>
</div>
<div>
<h2 class="project-details">JavaScript library based on jQuery that allows for DOM manipulation.
<br/>
Sample demo is built using dollarel and utilizes a Rick and Morty API to gather all episodes and all characters for each episode.</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!---->
<!---->
<section class="section-padding wow fadeInUp delay-05s" id="contact">
<div class="container">
<div class="row white contact-section">
<div class="col-md-8 col-sm-12 contact-subsection">
<div class="section-title">
<h2 class="head-title black">CONTACT</h2>
<hr class="botm-line">
<p class="sec-para black">Feel free to send me an email at <a href="mailto:brianlee100891@gmail.com" target="_top">brianlee100891@gmail.com</a> or check my pages below.</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<ul class="personal-links">
<li><a href="https://linkedin.com/in/brian-lee2" target=_blank><i class="fab fa-linkedin"></i></a></li>
<li><a href="https://github.com/ibltsandwich" target=_blank><i class="fab fa-github"></i></a></li>
<li><a href="https://angel.co/brian-lee2" target=_blank><i class="fab fa-angellist"></i></a></li>
</ul>
</div>
</div>
</div>
</section>
<!---->
<!---->
<footer class="" id="footer">
<div class="container">
<div class="row">
<div class="col-sm-7 footer-copyright">
© Brian Lee
<div class="credits">
<!--
All the links in the footer should remain intact.
You can delete the links only if you purchased the pro version.
Licensing information: https://bootstrapmade.com/license/
Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=Bethany
-->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</div>
</div>
</footer>
<!---->
<!--contact ends-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/custom.js"></script>
<script src="contactform/contactform.js"></script>
</body>
</html>