-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
356 lines (324 loc) · 19.9 KB
/
index.html
File metadata and controls
356 lines (324 loc) · 19.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Justin Bui's Portfolio</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/styles.css" />
<link rel="shortcut icon" type="image/png" href="Images/favicon-networking-64.png" />
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!--------------- NAVBARS --------------->
<nav class="navbar navbar-expand-lg navbar-dark bg-black fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand">JUSTIN <span class="purple-bui">BUI</span></a>
<ul class="navbar-nav ms-auto">
<li class="nav-item lead mx-5">
<a class="nav-link" aria-current="page" href="#landing">Home</a>
</li>
<li class="nav-item lead mx-5">
<a class="nav-link" aria-current="page" href="#about">About</a>
</li>
<li class="nav-item lead mx-5">
<a class="nav-link" aria-current="page" href="#skills">Skills</a>
</li>
<li class="nav-item lead mx-5">
<a class="nav-link" aria-current="page" href="#projects">Projects</a>
</li>
<li class="nav-item lead mx-5">
<a class="nav-link" aria-current="page" href="#experience">Experience</a>
</li>
</ul>
</div>
</div>
</nav>
<!--------------- LANDING --------------->
<section class="landing-page align-items-center d-flex justify-content-center" id="landing">
<div class="col-lg-7">
<h1 class="display-1 text-center">JUSTIN BUI</h1>
<div class="dash mx-auto"></div>
<p class="lead text-center"><span class="auto-type"></span></p>
<strong class="text-slider"></strong>
<div class="row justify-content-center">
<a class="scroll-to-contacts" href="#contacts" style="text-decoration: none;">
<div class="d-grid gap-2">
<button type="button" class="btn btn-outline-light" id="btnScrollToBottom">
Contact Me Below!
</button>
</div>
</a>
</div>
</div>
</section>
<!--------------- ABOUT --------------->
<section class="about-page" id="about">
<h1 class="display-1 mb-5 mt-5">ABOUT</h1>
<div class="row justify-content-center">
<div class="about-col col-xl-5 col-lg-11 mb-5">
<img src=" Images/justin-bui-professional.jpg" class="justin-img img-fluid rounded">
</div>
<div class="about-col col-xl-5 col-lg-11">
<p class="mx-2 lead">Hello!</p>
<p class="mx-2 lead">
Hello! I am a fourth-year computer science undergraduate student at CSUF. I am an ambitious programmer exploring the paths of software
engineering and/or data science. I grew a big interest in studying and working with tech thanks to how much technology has changed the
world. I also love challenging myself to conquer problems using quantitative and logical thinking. As I go through the struggles of earning
my degree and building my career, I want to use this story to inspire others that they can accomplish anything they imagine through patience
and drive.
</p>
<p class="mx-2 lead">
As a highly motivated and cooperative candidate, I am actively searching for entry-level software developer/data scientist positions.
</p>
</div>
</div>
</section>
<!--------------- SKILLS --------------->
<section class="skills-page" id="skills">
<h1 class="display-1 mb-5 mt-5">SKILLS</h1>
<div class="row justify-content-center">
<div class="skill-category languages-border card languages-card col-lg-4 p-4" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title"><strong>Languages</strong></h5>
<img src="Images/icons8-binary-48.png" alt="CPU-icon" class="skill-icon">
<hr>
</hr>
<ul class="cloud languages-cloud" role="navigation" aria-label="tag cloud">
<li><a data-weight="7" href="javascript:void(0);"><strong>C</strong></a></li>
<li><a data-weight="8" href="javascript:void(0);"><strong>C++</strong></a></li>
<li><a data-weight="9" href="javascript:void(0);"><strong>Python</strong></a></li>
<li><a data-weight="6" href="javascript:void(0);"><strong>HTML</strong></a></li>
<li><a data-weight="5" href="javascript:void(0);"><strong>CSS</strong></a></li>
<li><a data-weight="5" href="javascript:void(0);"><strong>JavaScript</strong></a></li>
<li><a data-weight="7" href="javascript:void(0);"><strong>PHP</strong></a></li>
<li><a data-weight="5" href="javascript:void(0);"><strong>SQL</strong></a></li>
<li><a data-weight="8" href="javascript:void(0);"><strong>R</strong></a></li>
<li><a data-weight="4" href="javascript:void(0);"><strong>Assembly</strong></a></li>
</ul>
</div>
</div>
<div class="skill-category card webdev-card col-lg-4 p-4" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title"><strong>Web Dev</strong></h5>
<img src="Images/icons8-web-48.png" alt="CPU-icon" class="skill-icon">
<hr>
</hr>
<ul class="cloud webdev-cloud" role="navigation" aria-label="tag cloud">
<li><a data-weight="4" href="javascript:void(0);"><strong>ReactJS</strong></a></li>
<li><a data-weight="5" href="javascript:void(0);"><strong>NodeJS</strong></a></li>
<li><a data-weight="7" href="javascript:void(0);"><strong>Bootstrap</strong></a></li>
<li><a data-weight="6" href="javascript:void(0);"><strong>Firebase</strong></a></li>
<li><a data-weight="4" href="javascript:void(0);"><strong>MongoDB</strong></a></li>
<li><a data-weight="9" href="javascript:void(0);"><strong>Django</strong></a></li>
</ul>
</div>
</div>
<div class="skill-category card ml-card col-lg-4 p-4" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title"><strong>Machine Learning</strong></h5>
<img src="Images/icons8-brain-48.png" alt="CPU-icon" class="skill-icon">
<hr>
</hr>
<ul class="cloud ml-cloud" role="navigation" aria-label="tag cloud">
<li><a data-weight="9" href="javascript:void(0);"><strong>Pandas</strong></a></li>
<li><a data-weight="6" href="javascript:void(0);"><strong>Seaborn</strong></a></li>
<li><a data-weight="7" href="javascript:void(0);"><strong>Scikit-Learn</strong></a></li>
<li><a data-weight="5" href="javascript:void(0);"><strong>Tensorflow</strong></a></li>
<li><a data-weight="5" href="javascript:void(0);"><strong>Matplotlib</strong></a></li>
<li><a data-weight="4" href="javascript:void(0);"><strong>OpenCV</strong></a></li>
<li><a data-weight="8" href="javascript:void(0);"><strong>Latex</strong></a></li>
<li><a data-weight="6" href="javascript:void(0);"><strong>Numpy</strong></a></li>
</ul>
</div>
</div>
<div class="skill-category card other-techs-card col-lg-4 p-4" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title"><strong>Other Tools</strong></h5>
<img src="Images/icons8-tools-48.png" alt="CPU-icon" class="skill-icon">
<hr>
</hr>
<ul class="cloud other-techs-cloud" role="navigation" aria-label="tag cloud">
<li><a data-weight="9" href="javascript:void(0);"><strong>Git</strong></a></li>
<li><a data-weight="5" href="javascript:void(0);"><strong>Linux</strong></a></li>
<li><a data-weight="7" href="javascript:void(0);"><strong>VS Code</strong></a></li>
<li><a data-weight="4" href="javascript:void(0);"><strong>Jupyter Notebooks</strong></a></li>
<li><a data-weight="6" href="javascript:void(0);"><strong>Scrum</strong></a></li>
</ul>
</div>
</div>
</div>
</section>
<!--------------- PROJECTS --------------->
<section class="projects-page" id="projects">
<h1 class="display-1 mb-5 mt-5">PROJECTS</h1>
<div class="row justify-content-center">
<div class="card project-card" style="width: 18rem; background-color: black;">
<img src="Images/plants2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><strong>Automatic Sprinkler</strong></h5>
<h6 class="card-subtitle mb-2 text-muted">March 2021 - April 2021</h6>
<hr>
</hr>
<p class="card-text">In a team of 7, we implemented a terminal-based software through
object-oriented programming with C++. It simulates the software of an automatic sprinkler
machine
where it can water plants at a prefered time of the day based on user input. As the leader of
the software team,
I conducted weekly meetings on Discord to discuss various ideas and bugs needed to be addressed
in this project.
</p>
<a class="source-code" href="https://github.com/BuiTheBoi/Zeta-Pledge-Project"><button type="button"
class="btn btn-outline-light">Source Code</button></a>
</div>
</div>
<div class="card project-card" style="width: 18rem; background-color: black;">
<img src="Images/CS-Student.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><strong>CS-BS Website</strong></h5>
<h6 class="card-subtitle mb-2 text-muted">March 2021 - March 2021</h6>
<hr>
</hr>
<p class="card-text">This project was tackled by a team of 3 during a hackathon held at CSUF
called Tuffy Hacks. During this event, we desigend and deployed a static website using HTML, CSS
and JavaScript
for
CSUF computer science students struggling with their classes. This website contains an HTML grid
providing
useful links to all computer science courses to supplement student's knowledge when taking the
class.
</p>
<a class="source-code" href="https://github.com/BuiTheBoi/cs-bs"><button type="button"
class="btn btn-outline-light">Source Code</button></a>
</div>
</div>
<div class="card project-card" style="width: 18rem; background-color: black;">
<img src="Images/rock-paper-scissors.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><strong>Rock, Paper, Scissors Game</strong></h5>
<h6 class="card-subtitle mb-2 text-muted">July 2021 - July 2021</h6>
<hr>
</hr>
<p class="card-text">
This is a Python game requiring users to
turn on their face cams to play rock, paper, scissors against the computer. I utilized OpenCV to
display colorful images
and text on the screen, serving as the user interface. I also utilized MediaPipe
so the program can detect hand gestures and identify whether the user is holding up a rock,
paper, or scissor.
</p>
<a class="source-code" href="https://github.com/BuiTheBoi/Rock-Paper-Scissors"><button type="button"
class="btn btn-outline-light">Source Code</button></a>
</div>
</div>
<div class="card project-card" style="width: 18rem; background-color: black;">
<img src="Images/Flushy.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><strong>Flushy Website</strong></h5>
<h6 class="card-subtitle mb-2 text-muted">February 2022 - May 2022</h6>
<hr>
</hr>
<p class="card-text">
This website allows users to find the nearest restrooms according to their location. This is
done in a team of 7 members using HTML, CSS, JavaScript, Firebase, and
Maptiler API. In this project, I was responsible for the mockup and design of the login/sign in
pages.
I used Google Firebase Authentication to store user information in our backend when a new
account is created.
</p>
<a class="source-code" href="https://github.com/le11evan/Flushy_Website"><button type="button"
class="btn btn-outline-light">Source Code</button></a>
</div>
</div>
</div>
</section>
<!--------------- EXPERIENCE --------------->
<section class="experience-page" id="experience">
<h1 class="display-1 mb-5 mt-5">EXPERIENCE</h1>
<div class="row justify-content-center">
<div class="experience-card card mx-5 mb-3" style="width: 30rem;">
<img src="Images/CSUF-night-view.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><strong>Instructional Lab Assistant - California State University,
Fullerton</strong></h5>
<h6 class="card-subtitle mb-2 text-muted">August 2020 - December 2021</h6>
<hr>
</hr>
<p class="card-text">I assisted online lab sessions of 20-30 students in various computer science
courses including Introduction to C++ and Object-Oriented Programming by debugging their code
and clarifying confusing concepts. I would manage time outside of lab hours
if students needed additional help by planning voice calls on Discord to answer further
questions. As a result, I boosted class productivity as more students better understood C++ to
complete their assignments on time.
</p>
</div>
</div>
<div class="experience-card card mx-5 mb-3" style="width: 30rem;">
<img src="Images/ThetaTau.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><strong>Professional Development Chair - Theta Tau, Phi Epsilon
Chapter</strong></h5>
<h6 class="card-subtitle mb-2 text-muted">August 2021 - May 2022</h6>
<hr>
</hr>
<p class="card-text">To give some background, <a class="about-link"
href="https://www.csufthetatau.com/">Theta
Tau at CSUF</a> is a co-ed professional engineering fraternity that values three pillars:
Brotherhood,
Professionalism, and Service. As a member of the professional development chair, I am
responsible for engaging
our brothers into professional development events by reaching out to outside organizations and
organizing my own workshops within this fraternity. As a result, our members enhanced their
confidence and knowledge for career preparation for the tech industry.
</p>
</div>
</div>
</div>
</section>
<!--------------- CONTACT --------------->
<footer class="contacts-page" id="contacts">
<h3 class="text-center p-3">Contact</h3>
<div class="row justify-content-center mt-5 p-2">
<div class="col-md-3 mb-5">Any questions? Interested in networking with me? Feel free to reach out!</div>
<div class="col-md-3">
<div class="gmail">
<img src="Images/mail-32.png" class="contact-icon">
<p class="mx-3">jbui3493@gmail.com</p>
</div>
<div class="phone">
<img src="Images/phone-32.png" class="contact-icon">
<p class="mx-3">(714)986-0357</p>
</div>
<div class="location">
<img src="Images/worldwide-location-32.png" class="contact-icon">
<p class="mx-3">Santa Ana, California</p>
</div>
</div>
<div class="row p-4">
<div class="other-links justify-content-center">
<a href="https://www.linkedin.com/in/justin-bui-4a8926194?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_contact_details%3B6J%2BCyhlJRy2JX5BDYNE%2FVA%3D%3D"
class="media-link mx-3"><img src="Images/linkedin-3-32.png"
class="contact-icon linkedin-icon"></a>
<a href="https://github.com/BuiTheBoi" class="media-link mx-5"><img src="Images/github-8-32.png"
class="contact-icon github-icon"></a>
</div>
</div>
</div>
</footer>
<div class="copyright-div">
<div class="dash mx-auto"></div>
<p class="mb-0 text-center p-1">Copyright © 2023 Justin Bui. All Rights Reserved.</p>
</div>
<script src="https://unpkg.com/typed.js@2.0.132/dist/typed.umd.js"></script>
<script src="app.js"></script>
</body>
</html>