-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (92 loc) · 6.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WireFrame</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Space+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<img src="Images/Chibi.png" class="chibi" alt="profilePic">
<div class="quickLinks">
<a href="#part1">About</a>
<a href="#part2">Projects</a>
<a href="#part3">Contact</a>
</div>
</nav>
<main>
<header>
<section class="firstPage">
<h1 class="headline"> Hi There, My Name is Huan. </h1>
<h4 class="subline">It is pronounced exactly like Juan, except that I gave the H :) </h4>
<h6 class="subline"> And I am a Web Developer </h6>
<img src="Images/addOn.png" alt="computer" class="lowerPicture">
</section>
</header>
<section id="part1" class="aboutMe">
<h2> About Me </h2>
<img src="Images/profile.png" alt="profile" class="profile">
<ul class="skills">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>C++</li>
<li>Python</li>
<li>Linux</li>
</ul>
<p class="bio1"> I recently graduated in Mathematics & Computer Science at UCLA and Web Development Bootcamp at Thinkful. It could be said that the world programming has changed my life significantly. I appreciate the flow of logical ideas and the discipline that computer science brought me. I am amazed that there are always improvements we can apply to make our programs better. Technology is constantly developing which definitely makes the life of a programmer more exciting. </p>
<p class="bio"> I have learned to enjoy and appreciate even the smallest thing in life from eating a delicious cookie, figuring out how to fix bugs in my and others' programs, to bigger things like all the opportunities I had and friends, families around me. Besides coding, I enjoy playing sports such as soccer, tennis, badminton, swimming and outdoor/indoor activities like hiking, listening to music, watching movies, cooking, working out, jogging. Oh and I don't usually say it, but pets often soften me up so much that I just act ridiculously around them. </p>
<b> My Blogs </b>
<ul>
<li class="blogLinks"><a href="https://huantnguyen.github.io/firstBlog/"> My experience with a scammer </a> </li>
<li class="blogLinks"><a href="https://huantnguyen.github.io/secondBlog/"> My near death experiences </a> </li>
</ul>
</section>
<section id="part2" class="projects">
<h2> Projects </h2>
<h3 class="subHead"> Soccer Challenge Quiz App </h3>
<div class="hero">
<img src="Images/quizShot.png" alt="projectPicture" class="projectPicture">
</div>
<div>
<a class="thumbnail" href="javascript:void();"><img src="Images/quizShot.png" alt="project1"/> </a>
<a class="thumbnail" href="javascript:void();"><img src="Images/quizShot2.png" alt="project2"/> </a>
<a class="thumbnail" href="javascript:void();"><img src="Images/quizShot3.png" alt="project3"/> </a>
</div>
<p class="description"> This is my very first dynamic, well-architected and accessible app in web development using HTML5, CSS3, and JavaScript with jQuery library. I developed the page with the theme of my favorite sport, it is called the ultimate soccer challenge quiz. The quiz put the user in situations where they have to decide what the best action is to help their team achieve victory. </p>
<ul>
<li class="liveLinks"><a href="https://github.com/huantnguyen/soccerChallengeQuiz"> Github </a> </li>
<li class="liveLinks"><a href="https://huantnguyen.github.io/soccerChallengeQuiz/"> Demo </a> </li>
</ul>
<h3 class="subHead"> Class Planner </h3>
<h4> UCLA Hackathon Winner 2020 </h4>
<div class="hero2">
<img src="Images/quizShot4.png" alt="projectPicture" class="projectPicture">
</div>
<p class="description"> This was a phenomenal experience for me. This was my very first hackathon so everything was new to me. My friends bailed on me at 8am and I was very close to leaving because I did not have a team. Fortunately, I found a team that was in need of one person and coincidentally, a front-end one. I was so worried during the process because I did not know that in the end how would we connect the front-end and the back-end together. However, that was where we learn. In the end we created our own API and output the files to our front-end. I even learn and applied Bootstrap on the spot even though I have never had any experience with it. </p>
<p class="description"> About the project, we felt like the UCLA's class planner was very inefficient, hence we decided to create a new one. In short, out class planner allow the user to choose their year and major. Then the system will give them a list of all the prerequisites that they have taken. Lastly, the optimized application will show the user a recommended list they should take during UCLA and give them a list to choose themselves. </p>
<ul>
<li class="liveLinks"><a href="https://github.com/huantnguyen/Class-Planner"> Github </a> </li>
<!--<li class="liveLinks"><a href="https://huantnguyen.github.io/Class-Planner/"> Demo </a> </li>-->
</ul>
</section>
</main>
<footer id="part3">
<h3> Contact Info </h3>
<a href="https://www.facebook.com/tran.huan.142" class="fa fa-facebook"></a>
<a href="mailto:[email protected]" class="fa fa-google"></a>
<a href="https://www.linkedin.com/in/huan-nguyen-559bb9173/" class="fa fa-linkedin"></a>
<a href="https://www.instagram.com/huantng/" class="fa fa-instagram"></a>
<a href="https://github.com/huantnguyen" class="fa fa-github"></a>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>