-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
316 lines (290 loc) · 15.7 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
<!doctype html>
<html lang="en">
<head>
<title>Enhao | Web Developer</title>
<meta charset="UTF-8">
<meta name="description" content="I am an aspiring software engineer and love to integrate finance and technology together. I am currently pursuing a bachelor in Computer Science in National University of Singapore.
Being a person who enjoys doing IT related stuff, I believe that IT will be a driving factor of economic in the coming future. I hope to be able to pursue my interest in coding and IT on my further career path and is always seeking for new opportunities to increase my skills.">
<meta name="keywords" content="personal, portfolio, enhao, web developer, enhaotech">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<!-- Stylesheets -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/superslides.css">
<!-- Google Web fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<!-- Font icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="icon-fonts/essential-regular-fonts/essential-icons.css" />
<!-- Google Analytics Code -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-168754699-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-168754699-1');
</script>
<style>
#coming {
text-align: center;
font-size: 48px;
margin: 0px 0 50px 0;
}
#coming_soon_id{
margin-top: 70px;
}
@media(max-width:991px){
#enhao_image_id{width: 100%;}
#coming_soon_id{
margin-top: 0;
}
}
</style>
</head>
<body>
<!-- Preloading -->
<div id="preloader">
<div class="spinner">
<div class="uil-ripple-css" style="transform:scale(0.29);"><div></div><div></div></div>
</div>
</div>
<nav>
<div class="row">
<div class="container">
<div class="logo">
<img src="images/logo.png" alt="logo" height="38" width="156">
</div>
<div class="responsive"><i data-icon="m" class="icon"></i></div>
<ul class="nav-menu">
<li><a href="#home" class="smoothScroll">Home</a></li>
<li><a href="#about" class="smoothScroll">About</a></li>
<li><a href="#portfolio" class="smoothScroll">Portfolio</a></li>
<li><a href="#project" class="smoothScroll">Project</a></li>
<li><a href="#contact" class="smoothScroll">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--HOME-->
<section class="home slider" id="home">
<div class="home-content">
<h1>Hi! <span class="element">En Hao</span></h1>
<a class="home-down bounce" href="#about"><i class="fa fa-angle-down"></i></a>
</div>
<div class="home-slider">
<div id="slides">
<div class="slides-container">
<img src="images/home.jpg" alt="home-slider" height="727" width="1404">
<img src="images/slider-1.jpg" alt="slider-1" height="727" width="1404">
<img src="images/slider-2.jpg" alt="slider-2" height="727" width="1404">
</div>
</div>
</div>
</section>
<!--ABOUT-->
<section class="about" id="about">
<div class="container">
<div class="row">
<div class="col-md-6 about-image wow fadeInUp" data-wow-delay="0.4s">
<img id="enhao_image_id" src="images/enhao.jpg" alt="enhao-image" height="549" width="571">
</div>
<div class="col-md-6 about-text wow fadeInUp" data-wow-delay="0.8s">
<div class="out">
<h2>I am Passionate about IT</h2>
<br />
<p>
I am an aspiring software engineer and love to integrate finance and technology together. I am currently pursuing a bachelor in Computer Science in National University of Singapore.
<br /><br />
Being a person who enjoys doing IT related stuff, I believe that IT will be a driving factor of economic in the coming future. I hope to be able to pursue my interest in coding and IT on my further career path and is always seeking for new opportunities to increase my skills.
</p>
</div>
</div>
</div>
</div> <!-- Container end -->
<div class="container-fluid gray-bg">
<div class="container what-can">
<!-- Web Developer -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 feature">
<i data-icon="1" class="icon"></i>
<h3>WEB DEVELOPER</h3>
<p>With a strong interest and foundation in programming, I have worked on serveral successful website development. You can check out my projects <a href="#project">here</a>.</p>
</div>
<!-- FINTECH -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 feature">
<i data-icon="" class="icon"></i>
<h3>FINTECH</h3>
<p>Since young, I have always prudent about my financials and has gain an interested in Financial Management. After learning about the infinite possibility of technology, I became passionate about FinTech as I believe in the infinite potential of this upcoming innovative sector.</p>
</div>
<!-- Leadership -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 feature">
<i data-icon="4" class="icon"></i>
<h3>LEADERSHIP CAPABILITIES</h3>
<p>After being a <b>President</b> in my secondary school CCA and the <b>Treasurer</b> of Ngee Ann Polytechnic, these position has empowered me to be a better leader.</p>
</div>
<!-- Community Service -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 feature">
<i data-icon="[" class="icon"></i>
<h3>COMMUNITY SERVICE</h3>
<p>Being part of Rotaract Club of Ngee Ann Polytechnic in the past, I have done serveral community service project to bring smiles to needy people.</p>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio" style="margin-left: 2.5%;">
<iframe title="enhao-timeline" src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1ckWLLe5wG8aAelq_t8IgZI5B5PAikt_mVwxM5IKf4ik&font=Default&lang=en&start_at_end=true&initial_zoom=2&height=550' width='95%' height='550' frameborder='0'></iframe>
</section>
<!-- Project -->
<section class="project" id="project">
<div class="container-fluid gray-bg">
<div class="container">
<div class="section-title">
<h2>LATEST PROJECTS</h2>
<p> You may know my name, but not my story. <br> Have a look at what I have done before! </p>
</div>
<!-- projects -->
<div class="row" style="text-align: center;">
<a href="bmi.html" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 project-content wow fadeInUp" data-wow-delay="0.6s">
<div class="project-image">
<img src="images/weighting_scale.png" alt="weighting_scale" height="96" width="96">
</div>
<h1>BMI Calculator</h1>
<p>Wondering what you BMI?? Instead of calculating it yourself, why not use this platform to do it for you?</p>
<span class="project-info">Enhao - May 2018</span>
</a>
<a href="https://enhao25.github.io/weatherapp/" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 project-content wow fadeInUp" data-wow-delay="0.6s">
<div class="project-image">
<img src="images/sunny.png" alt="weatherapp" height="96" width="96">
</div>
<h1>Weather App</h1>
<p>A website showing the current weather situation in Singapore.
Made using React as the front and using API from data.gov.sg</p>
<span class="project-info">Enhao - Jan 2020</span>
</a>
<a href="https://eh-todolist.herokuapp.com/" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 project-content wow fadeInUp" data-wow-delay="0.6s">
<div class="project-image">
<img src="images/project_todolist.png" alt="todlist" height="96" width="96">
</div>
<h1>To Do List</h1>
<p>A personalise to-do-list application built using React as frontend, Rails as the backend and Postgres as database. Deployed using heroku. (NUS CVWO Assignment)</p>
<span class="project-info">Enhao - Jan 2020</span>
</a>
<a href="https://eh-ecomm-project.herokuapp.com/" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 project-content wow fadeInUp" data-wow-delay="0.6s">
<div class="project-image">
<img src="images/shopping-bag.svg" alt="todlist" height="96" width="96">
</div>
<h1>E-Commerce Project</h1>
<p>An ecommerce project build using React as FrontEnd and Firebase as Database. Integrated with test payment feature done using stripes. </p>
<span class="project-info">Enhao - June 2020</span>
</a>
<!-- <div id="coming_soon_id" class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<h1 id='coming'>COMING SOON!</h1>
<a href="../Websites/testing.html" class="site-button"> READ MORE</a>
</div> -->
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<div class="section-title">
<h2>GET IN TOUCH</h2>
<p> Interested to know more about me? <br>Email me about it or you can connect with me on LinkedIn <a target="_blank" href="https://sg.linkedin.com/in/low-en-hao-851a63b3" rel="noreferrer">here!</a> </p>
</div>
<!-- Contact Info -->
<div class="row">
<div class="col-md-offset-2 col-md-8 contact-information">
<div class="contact-info wow fadeInUp" data-wow-delay="0.6s" style="text-align: center;">
<i class="fa fa-envelope" aria-hidden="true"></i>
<p>[email protected]</p>
</div>
</div>
</div> <!-- information end -->
<!--Contact Form-->
<div class="col-md-8 col-md-offset-2 wow fadeInUp" data-wow-delay="1s">
<!-- <form class="col-md-12 contact-form" method="POST" action="https://formspree.io/[email protected]"> -->
<form id="user_form" class="col-md-12 contact-form" method="POST" onsubmit="return false">
<div class="row">
<!--Name-->
<div class="col-md-6">
<input id="con_name" name="name" class="form-inp requie" type="text" placeholder="Name" required>
</div>
<!--Email-->
<div class="col-md-6">
<input id="con_email" name="email" class="form-inp requie" type="text" placeholder="Email" required>
</div>
<div class="col-md-12">
<!--Message-->
<textarea name="con_message" id="con_message" class="requie" placeholder="Message" rows="8"></textarea required>
<input id="con_submit" class="site-button" type="submit" value="Send">
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="social">
<a href="https://www.linkedin.com/in/low-en-hao/" target="_blank" rel="noreferrer">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
</div>
</footer>
<!-- Javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><!-- jQuery library -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.1/isotope.pkgd.min.js"></script>
<script src="js/typed.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superslides/0.6.2/jquery.superslides.min.js"></script>
<script src="js/main.js"></script>
<script>
//SUPER SLİDER
$('#slides').superslides({
animation: 'fade',
play: 3000
});
// Run functions
// get_data();
$("#con_submit").click(function(){
// Check if the fields are blank
if (!$('#con_name').val() || !isEmail($('#con_email').val()) || !$('#con_message').val()) {
// If one or more fields are blank
alert("Seems like u missed a field or 2, or maybe has a wrong email format? Do complete the form before sending it to us! I am very busy you know! :)")
console.log("error")
}
else{
// If all fields are fielded up
// Firebase storing of data
firebase.database().ref('users/' + $("#con_name").val()).set({
name: $("#con_name").val(),
email: $("#con_email").val(),
message: $("#con_message").val()
});
alert("You have successful sent a message to the author! Keep a lookout for my reply to you!")
}
});
// Function to check if the input is in email format
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
};
// Function for getting firebase data
function get_data(){
var ref = firebase.database().ref('users/')
ref.on('value', function(snapshot){
snapshot.val()
})
}
</script>
</body>
</html>