This repository has been archived by the owner on Jun 9, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (138 loc) · 8.63 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
<!doctype html>
<html lang="en">
<!--
Author: Ang Yak Hng
Filename: index.html
Last edit: 16 Aug 2019
-->
<head>
<title>Home</title>
<!-- Required tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Links to external files -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel='stylesheet' href='global.css' type='text/css'>
<link rel='stylesheet' href="home.css" type="text/css">
<script src="https://kit.fontawesome.com/efbe37c53e.js"></script>
<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Fotorama from CDNJS, 19 KB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html"><strong>Yak</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="education.html">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="interests.html">Interests</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
</ul>
</div>
</nav>
<!-- Welcome message -->
<div class="jumbotron jumbotron-fluid" id='jumbo'>
<div class="container">
<h1 class='display-4'>Hello, my name is </h1>
<h1 class='display-4'><strong>Ang Yak Hng</strong>.</h1>
<p class="lead"><strong>Welcome to my website.</strong></p>
<hr class='my-4'>
<p>Check out this project on Github!</p>
<a href='https://github.com/yakisoap-bar/ca2' class='btn btn-dark btn-md' role="button" id='github-btn' target="_blank"><i class="fab fa-github"></i> Github</a>
</div>
</div>
<!-- About me -->
<div class='container'>
<div class='row'>
<div class='col-12 col-md-3 col-lg-2'>
<img class='img-fluid' src="Images/me.jpg" alt="A picture of me" id='img-myself'>
</div>
<div class="col-12 col-md-9 col-lg-8">
<h5>This is me.</h5>
<p>Hi. I am Ang Yak Hng from the Diploma of Infocomm Technology, or DIT course in Singapore Polytechnic. I've had a profound interest in technology ever since I joined the School of Science and Technology, Singapore, or SST, a specialised secondary school that makes use of technology to teach.</p>
<h5>Why Polytechnic?</h5>
<p>Well, it wasn't always like this. When I first joined SST, I wanted to go to JC like what many of my family members did, but over time, as I progressed through SST, I realised I liked to do hands-on activities much more than sitting down in front of a desk and cramming. Thus, in the middle of Secondary 4, my ideals changed, shifting more in favour of polytechnic, and well, here I am.</p>
</div>
</div>
</div>
<!-- Travel Photos -->
<div class='container'>
<h4>Travels</h4>
<p>Every now and then, I travel to other countries with my family. Here are some photos from my travels.</p>
<div class='col-12 col-md-10 col-lg-8 mx-auto'>
<div class='fotorama' data-width='100%' data-allowfullscreen="true" data-loop='true' data-autoplay='true'>
<img src='Images/bali_resort.jpg' data-caption='2018, Bali - The view from the resort we stayed at.' alt='Bali Resort'>
<img src='Images/bali_temple.jpg' data-caption='2018, Bali - A temple we visited.' alt='Bali Temple'>
<img src='Images/gapyeong_station.jpg' data-caption='2017, South Korea - Gapyeong station. It was cold there.' alt='Gapyeong Station'>
<img src='Images/snowy_mountains_korea.jpg' data-caption='2017, South Korea - On the way to a ski resort. First time seeing snow in person.' alt='Snowy mountains'>
<img src='Images/seongsan_sunrise_peak.jpg' data-caption='2014, South Korea - The view from halfway up a dormant volcano.' alt='Seongsan Sunrise Peak'>
</div>
</div>
</div>
<!-- Credit Modal -->
<div class="modal fade" id="credits" tabindex="-1" role="dialog" aria-labelledby="credit-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="credit-label">Credits</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class='table'>
<thead class='thead-dark'>
<tr>
<th scope='col'>Image Link</th>
<th scope='col'>Credits</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href='https://unsplash.com/photos/l8DUam8vtbc'>Welcome message background</a></td>
<td>Photo by Paweł Czerwiński on Unsplash</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer py-3 mt-3" id='footer'>
<div class="container-fluid">
<div class='row'>
<div class='col-6 my-auto'>
<a href='https://www.instagram.com/yakhnggg/' class='btn rounded-circle' id='insta-btn' target='_blank'><i class="fab fa-instagram"></i></a>
<a href='https://reddit.com/u/ayyyyyh' class='btn rounded-circle' id='reddit-btn' target='_blank'><i class='fab fa-reddit'></i></a>
</div>
<div class='col-6 text-right'>
<a class='btn' href='#' data-toggle="modal" data-target="#credits">© Ang Yak Hng, 2019</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>