-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
580 lines (569 loc) · 24 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
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
<!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>Nathan Huynh</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="./assets/nh-logo2-dark.png" type="logoimage" />
<link rel="stylesheet" href="mediaqueries.css" />
<link href="https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500&display=swap" rel="stylesheet">
</head>
<body>
<nav id="desktop-nav">
<div class="logo">
<a href="#">
<img src="./assets/nh-logo2.png" alt="logo" class="logo" />
</a>
</div>
<div class="nav-items">
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<nav id="hamburger-nav">
<div class="logo"><img
src="./assets/nh-logo2.png"
alt="logo"
class="logo"
/></div>
<div>
<div class="hamburger-menu">
<div class="hamburger-icon" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu-links">
<li><a href="#about" onclick="toggleMenu()">About</a></li>
<li><a href="#experience" onclick="toggleMenu()">Experience</a></li>
<li><a href="#projects" onclick="toggleMenu()">Projects</a></li>
<li><a href="#contact" onclick="toggleMenu()">Contact</a></li>
</div>
</div>
</nav>
<section id="profile">
<div class="section__pic-container">
<img src="./assets/profile-pic-modified.png" alt="Nathan Huynh profile picture" />
</div>
<div class="section__text">
<h1 class="title">I'm Nathan Huynh</h1>
<div class="section__text__p2__change">
I am a <span id="typed-output"></span>
</div>
<div class="btn-container">
<button
class="btn btn-color-2"
onclick="window.open('./assets/resume.pdf')"
>
Resume
</button>
<button class="btn btn-color-1" onclick="location.href='./#contact'">
Contact Info
</button>
</div>
<div id="socials-container">
<img
src="./assets/linkedin.png"
alt="My LinkedIn profile"
class="icon"
onclick="location.href='https://www.linkedin.com/in/nathan-huynh-b4b281298/'"
/>
<img
src="./assets/github.png"
alt="My Github profile"
class="icon"
onclick="location.href='https://github.com/nathanhuynhers'"
/>
</div>
</div>
</section>
<section id="about">
<h1 class="title-about-me">About Me</h1>
<div class="section-container">
<div class="about-details-container">
<div class="text-container">
<p>
I'm a third-year at UC Berkeley, majoring in Computer Science and minoring in Data Science. I have a deep passion for learning and thrive on the opportunities that allow me to expand my knowledge. Whether it's diving into new projects, taking on challenging coursework, or collaborating with peers, I love to immerse myself in the learning process.
I’m always eager to take on new experiences and challenges, believing that each opportunity helps me grow and improve. I'm always on the lookout for new and exciting opportunities, so feel free to reach out!
</p>
</div>
<div class="about-containers">
<div class="details-container">
<img
src="./assets/school.png"
alt="Education icon"
class="icon-1"
/>
<h3>Education</h3>
<p>
School: University of California, Berkeley<br />
Major: Computer Science<br />
Minor: Data Science<br />
Year: Junior<br />
</p>
</div>
<div class="details-container">
<img
src="./assets/interests.png"
alt="Interests icon"
class="icon-1"
/>
<h3>Technical Interests</h3>
<p>
Fullstack Engineering<br />
Machine Learning<br />
Artificial Intelligence<br />
Cloud Development
</p>
</div>
<div class="details-container">
<img
src="./assets/hobbies.png"
alt="Hobbies icon"
class="icon-1"
/>
<h3>Hobbies</h3>
<p>
In my free time, I enjoy playing volleyball and video games! I love learning new strategies and trying to implement them in these activities. I also appreciate the thrill and adventure that come with experiences like roller coasters and horror movies. Currently, my goal is to memorize all 1,025 Pokémon!
</p>
</div>
</div>
</div>
</div>
</section>
<section id="experience">
<h1 class="title-experience">Experience</h1>
<div class="experience-entry">
<div class="experience-header">
<h3>The Aerospace Corporation</h3>
<p>Software Engineer Intern</p>
</div>
<div class="experience-timeline">
<p>May 2024 - August 2024</p>
</div>
<div class="experience-description">
<p>
I contributed to the development of a web application that allows government customers to create and edit documents for publishing their work and findings. Utilizing an Angular frontend, a Python Flask backend, and a MongoDB database, I engineered an advanced admin dashboard that centralized document management, including status control and portion marking capabilities. This improved workflow efficiency by 40%, streamlining operations for over 30 team members. Additionally, I created a CI/CD pipeline using Jenkins for an interference analysis project, reducing deployment time by 14%. I also increased test coverage for the project by 16%, significantly enhancing overall project reliability and quality.
</p>
</div>
</div>
<div class="experience-entry">
<div class="experience-header">
<h3>UC Berkeley Computer Science Department</h3>
<p>Course Staff CS61A Tutor</p>
</div>
<div class="experience-timeline">
<p>August 2024 - Present</p>
</div>
<div class="experience-description">
<p>
I lead office hours for over 1,000 students, covering essential topics such as Object-Oriented Programming (OOP), recursion, control structures, and higher-order functions in languages like Python, Scheme, and SQL. In addition to supporting students through office hours, I also ran exam prep sessions to help students prepare for Midterms/Finals. I assisted in grading and evaluating their assignments, providing detailed feedback to promote academic growth and a deeper understanding of the course material.
</p>
</div>
<div class="experience-header">
<p>CS10 Academic Lab Intern</p>
</div>
<div class="experience-timeline">
<p>January 2023 - January 2024</p>
</div>
<div class="experience-description">
<p>
I assisted in labs by teaching students the foundational concepts of computer science and guiding them through algorithmic approaches to problem-solving. I help students understand key principles and support them with lab assignments, reinforcing their knowledge of basic programming concepts. My role also involves fostering computational thinking skills, enabling students to confidently tackle complex problems and develop a strong grasp of fundamental algorithms and logic.
</p>
</div>
</div>
<div class="experience-entry">
<div class="experience-header">
<h3>Computer Science Mentors</h3>
<p>Junior Mentor -> Senior Mentor</p>
</div>
<div class="experience-timeline">
<p>August 2023 - Present</p>
</div>
<div class="experience-description">
<p>
I lead weekly sections for a group of Berkeley students, focusing on core topics from the university’s introductory CS courses. I actively help students grasp fundamental computer science concepts by facilitating discussions and working through challenging material. In addition to section facilitation, I plan and run review sessions for midterms and finals to help students feel confident and prepared. I also mentor and train junior mentors, equipping them with effective teaching techniques to ensure they can provide the best support to their students.
</p>
</div>
</div>
<div class="experience-entry">
<div class="experience-header">
<h3>Computer Science Undergraduate Association</h3>
<p>Officer</p>
</div>
<div class="experience-timeline">
<p>January 2024 - May 2024</p>
</div>
<div class="experience-description">
<p>
I assisted new students in navigating the CS program and provide academic support at our office. I offer guidance to help students succeed in their coursework and connect them with the resources they need to thrive in the program. Additionally, I work closely with peers to maintain a welcoming and organized environment, ensuring the space is conducive to collaboration and academic growth for all students involved.
</p>
</div>
</div>
<div class="experience-details-container">
<div class="about-containers">
<div class="details-container">
<h2 class="experience-sub-title">Languages</h2>
<div class="article-container">
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>HTML/CSS</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>C</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>Python</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>JavaScript</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>TypeScript</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>SQL</h3>
</div>
</article>
</div>
</div>
<div class="details-container">
<h2 class="experience-sub-title">Frameworks</h2>
<div class="article-container">
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>React</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>Node.js</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>Flask</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>Material-UI</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>Angular</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>MongoDB</h3>
</div>
</article>
</div>
</div>
<div class="details-container">
<h2 class="experience-sub-title">Developer Tools</h2>
<div class="article-container">
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>Git</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>VS Code</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>PyCharm</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>IntelliJ</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>Jupyter</h3>
</div>
</article>
<article>
<img
src="./assets/checkmark.png"
alt="Experience icon"
class="icon"
/>
<div>
<h3>Poetry</h3>
</div>
</article>
</div>
</div>
</section>
<section id="projects">
<h1 class="title-project">Projects</h1>
<div class="project-list">
<div class="project-row">
<div class="project-item">
<h3 class="project-name">Lectury</h3>
<div class="project-image">
<img src="./assets/Lectury.png" alt="Screenshot of Project One" />
</div>
<p class="project-description">
Lectury is a full-stack web application that automatically generates concise notes from lectures or YouTube videos by extracting transcripts and applying advanced text summarization techniques. It integrates various APIs, such as YouTube Transcript and OpenAI, as well as tools like FFmpeg and Google Cloud Speech-to-Text, to process audio and video files, generate transcripts, and create detailed summaries.
</p>
<ul class="tech-stack">
<li>React</li>
<li>Node.js</li>
<li>Express</li>
</ul>
<div class="project-buttons">
<a href="https://github.com/nathanhuynhers/lectury-frontend" class="btn btn-color-1">GitHub</a>
<a class="btn btn-color-1">Video Demo</a>
</div>
</div>
<!-- Project 2 -->
<div class="project-item">
<h3 class="project-name">TikTok Reddit Story Video Automator</h3>
<div class="project-image">
<img src="./assets/tiktok.png" alt="Screenshot of Project Two" />
</div>
<p class="project-description">
A Python bot that automates the creation of TikTok videos featuring popular Reddit stories, using trending formats with gameplay backgrounds. It streamlines the entire process, from content retrieval using the Reddit API (PRAW) to text-to-speech voice overs with Google Text-to-Speech, and final video creation with the Pymovie library. The bot efficiently handles video production, allowing for rapid and consistent content generation.
</p>
<ul class="tech-stack">
<li>Python</li>
</ul>
<div class="project-buttons">
<a class="btn btn-color-1">GitHub</a>
<a class="btn btn-color-1">Video Demo</a>
</div>
</div>
</div>
<div class="project-row">
<div class="project-item">
<h3 class="project-name">WordNet and NGram Viewer</h3>
<div class="project-image">
<img src="./assets/ngram.png" alt="Screenshot of Project Three" />
</div>
<p class="project-description">
This project involves two main components: a WordNet-based graph class and an NGram Viewer. The WordNet component uses Java to build a graph structure that stores over 80,000 words and 400,000 relationships between them, focusing on semantic relationships like hyponyms and hypernyms. The NGram Viewer allows users to select words or phrases (ngrams) and visually displays their frequency and occurrences in a corpus of up to 50,000 words, providing insights into language patterns and word usage.
<ul class="tech-stack">
<li>Java</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<div class="project-buttons">
<a href="https://fa23.datastructur.es/materials/proj/proj2b/" class="btn btn-color-1">Spec</a>
<a href="https://drive.google.com/file/d/1e-CW-x1yo5nEnHJzKQJSmz-UKHYSuJ-N/view?usp=drive_link" class="btn btn-color-1">Video Demo</a>
</div>
</div>
<div class="project-item">
<h3 class="project-name">KeyQuest</h3>
<div class="project-image">
<img src="./assets/KeyQuest.png" alt="Screenshot of Project Four" />
</div>
<p class="project-description">
KeyQuest is a 2D tile-based world exploration game built in Java, where players can explore and interact with their environment using customizable tiles and avatars. It features a random room generation algorithm and a near-sight functionality that adds a layer of challenge to exploration, making the gameplay more immersive and engaging.
</p>
<ul class="tech-stack">
<li>Java</li>
</ul>
<div class="project-buttons">
<a href="https://fa23.datastructur.es/materials/proj/proj3/" class="btn btn-color-1">Spec</a>
<a href="https://drive.google.com/file/d/1hiTQO7cDTbBtngWitl81hp35M1oYxdWw/view?resourcekey" class="btn btn-color-1">Video Demo</a>
</div>
</div>
</div>
<div class="project-row">
<div class="project-item">
<h3 class="project-name">Sorting Visualizer</h3>
<div class="project-image">
<img src="./assets/sorting_viz.png" alt="Screenshot of Project Five" />
</div>
<p class="project-description">
Sorting Algorithm Visualizer Web Application using React, CSS, and HTML. The visualizer demonstrates the Bubble Sort algorithm in action (with more Algorithms to come!), allowing users to observe the step-by-step sorting process. The tool includes interactive features like Speed Control and Pause functions, giving users control over the pace of the sorting visualization.
<ul class="tech-stack">
<li>React</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<div class="project-buttons">
<a href="https://github.com/nathanhuynhers/sorting-visualizer" class="btn btn-color-1">Github</a>
<a href="https://drive.google.com/file/d/1ZXPmrE0aDHriap0pgcM0nXifLHKkqmvv/view?resourcekey" class="btn btn-color-1">Video Demo</a>
</div>
</div>
<div class="project-item">
<h3 class="project-name">More to Come!</h3>
<div class="project-image-blank">
<img src="./assets/blank.png" alt="Screenshot of Project Six" />
</div>
<!-- <p class="project-description">
KeyQuest is a 2D tile-based world exploration game built in Java, where players can explore and interact with their environment using customizable tiles and avatars. It features a random room generation algorithm and a near-sight functionality that adds a layer of challenge to exploration, making the gameplay more immersive and engaging.
</p>
<ul class="tech-stack">
<li>Java</li>
</ul>
<div class="project-buttons">
<a href="https://fa23.datastructur.es/materials/proj/proj3/" class="btn btn-color-1">Spec</a>
<a href="https://drive.google.com/file/d/1hiTQO7cDTbBtngWitl81hp35M1oYxdWw/view?resourcekey" class="btn btn-color-1">Video Demo</a>
</div> -->
</div>
</div>
</div>
</section>
<section id="contact">
<h1 class="title-contact">Contact Me</h1>
<div class="contact-info-upper-container">
<div class="contact-info-container">
<img
src="./assets/email.png"
alt="Email icon"
class="icon contact-icon email-icon"
/>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="contact-info-container">
<img
src="./assets/linkedin.png"
alt="LinkedIn icon"
class="icon contact-icon"
/>
<p><a href="https://www.linkedin.com/in/nathan-huynh-b4b281298/">LinkedIn</a></p>
</div>
</div>
</section>
<footer>
<nav>
<div class="nav-links-container">
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<p>Copyright © 2024 Nathan Huynh. All Rights Reserved.</p>
</footer>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
var options = {
strings: ["UC Berkeley Student.","Software Engineer.", "Problem Solver.", "Leader."],
typeSpeed: 30,
backSpeed: 25,
backDelay: 1000,
startDelay: 500,
loop: true,
showCursor: true,
cursorChar: "|",
};
var typed = new Typed("#typed-output", options);
</script>
</body>
</html>