forked from Josephaedan/PortfolioIn2Hours
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
318 lines (299 loc) · 16.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<!--hello joseph-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Remember to change this -->
<title>Jacob Tan</title>
</head>
<body id>
<!-- Navbar -->
<div id="root" class="root">
<div id="navbar">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand px-3" style="font-size: 30px;" href="#">
Jacob.
</a>
<button class="navbar-toggler navbar-light" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav ms-auto justify-content-end px-lg-5 px-3">
<li class="nav-item">
<a class="nav-link" href="#about-me">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container-lg-fluid py-lg-4">
<!-- Cover Section (Image + Introduction)-->
<div id="homepage" class="container-lg-fluid row vh-80 align-items-center justify-content-between py-lg-4 my-lg-5
mx-1">
<div class="col-md-auto col-lg-8">
<h1 class="display-1 my-2">HI I'M JACOB TAN!</h1>
<p class="my-5" style="font-size: 150%; color:black;">I am currently a <span
class="text-warning">Year 2 Computer
Science</span> student at NUS.</p>
<p class="my-5" style="font-size: 159%; color:black;">Nothing excites me more than
making projects to help people!</p>
<p class="my-5" style="font-size: 150%; color:black;">Scroll down to learn more about
me!
</p>
</div>
<img src="image/Person.png" class="col-lg-3 d-none d-lg-block h-auto mx-4">
</div>
<!-- About Me -->
<div id="about-me" class="py-4 vh-lg-80">
<!--About Me Header-->
<div class="container-fluid d-flex align-content-center">
<h1 id="about-me">
<i class="bi bi-person-badge-fill mx-2"></i>About Me
</h1>
</div>
<!--About Me Description-->
<div class="text-start py-lg-3 mx-5">
<h2>
Currently in my second year of Undergraduate at the National University of Singapore,
I am a member of Google Student Developer Clubs and I strongly believe in #TechForGood. </h2>
<h2 class="py-3"> My Interests include Website Development and
Web Security. In my free time, I like to read books
and watch documentaries. </h2>
<!--Skills-->
<h2>I have experience using:
<ul class="container-fluid list-group list-group-horizontal list-unstyled"
style="font-size: 50%;color:black;">
<li>
<img src="image/Adobe Photoshop.png" class="icon " />
<p>Adobe<br>Photoshop</p>
</li>
<li class="px-2">
<img src="image/Adobe Illustrator.png" class="icon" />
<p>Adobe<br>Illustrator</p>
</li>
<li>
<img src="image/csharp.png" class="icon" />
<p>C#</p>
</li>
<li>
<img src="image/ReactJS.png" class="icon" />
<p>ReactJS</p>
</li>
</ul>
</h2>
</div>
</div>
<!-- Experience -->
<div id="Experience" class="py-4 vh-lg-80">
<!--Experience header-->
<h1 class="container-fluid d-flex my-3">
<i class="bi bi-building mx-2"></i> Professional Experiences
</h1>
<!--1st Experience entry-->
<div class="text-start py-lg-3 mx-5">
<div class="mx-4">
<!--Experience entry title-->
<h2>Betflix</h2>
<div class="d-lg-flex">
<h3>Graphics Designer Intern</h3>
<h3 class="px-lg-2">(Jan 2021 - June 2021)</h3>
</div>
<!--Experience entry description-->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, eveniet!
<ul class="container">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</p>
</div>
</div>
<!--2nd Experience entry-->
<div class="text-start py-lg-3 mx-5">
<div class="mx-4">
<!--Experience entry title-->
<h2>Anazon</h2>
<div class="d-lg-flex">
<h3>Software Engineer Intern </h3>
<h3 class="px-lg-2">(April 2020 - Dec 2020)</h3>
</div>
<!--Experience entry description-->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, eveniet!
<ul class="container">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</p>
</div>
</div>
</div>
<!-- Projects -->
<div id="Projects" class="py-4 vh-lg-80">
<!--Project header-->
<h1 class="container-fluid d-flex my-3">
<i class="bi bi-box mx-2"></i> Past Projects
</h1>
<!--1st Project entry-->
<div class="d-lg-flex text-start py-3 mx-5 justify-content-between">
<!--Project description-->
<div class="my-lg-2 col-lg-6 px-lg-3">
<!--Title of game + duration-->
<div class="d-lg-flex">
<h3>Plantation Game</h3>
<h3 class="px-lg-2">(Aug 2020 - Jan 2021)</h3>
</div>
<h3>Graphic Designer</h3>
<!--Game Description-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ab repellendus
explicabo numquam doloremque! Unde doloremque nesciunt, modi tempora quam excepturi
reprehenderit consequatur perspiciatis porro necessitatibus?
Expedita ex velit nesciunt ipsam, assumenda necessitatibus veritatis. Nam quaerat dolore
optio, illum aliquam sunt similique enim labore dolores omnis quas quod animi sapiente?
</p>
<p>Made with:
<ul class="container-fluid list-group list-group-horizontal list-unstyled">
<li><img src="image/ReactJS.png" class="icon" />
<p>ReactJS</p>
</li>
<li>
<img src="image/Adobe Photoshop.png" class="icon" />
<p>Adobe<br>Photoshop</p>
</li>
</ul>
</p>
</div>
<img class="col-5 img-fluid project-image" src="./image/tablet-game.svg"
alt="Screenshot of project">
</div>
<!--2nd Project entry-->
<div class="d-lg-flex text-start py-3 mx-5 justify-content-between">
<div class="my-lg-2 col-lg-6 px-lg-3">
<!--Title of game + duration-->
<div class="d-lg-flex">
<h3>Nario Game</h3>
<h3 class="px-lg-2">(April 2020 - July 2020)</h3>
</div>
<h3>Software Engineer</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis mollitia quia
consequatur a odit asperiores aperiam dolorem illum distinctio. Odio pariatur
exercitationem quidem nisi similique cum minima quae in quis.</p>
<p>Made with:
<ul class="container-fluid list-group list-group-horizontal list-unstyled">
<li>
<img src="image/Adobe Illustrator.png" class="icon" />
<p>Adobe<br>Illustrator</p>
</li>
<li>
<img src="image/csharp.png" class="icon" />
<p>C#</p>
</li>
</ul>
</p>
</div>
<!--Project Image-->
<img src="./image/Platformer-Game.svg" alt="Screenshot of project 2" class="col-5 project-image">
</div>
</div>
<!-- Contact Me + End of the Page-->
<div id="Contact" class="py-4">
<!--Contact header-->
<h1 class="container-fluid my-3"><i class="bi bi-telephone-inbound mx-2"></i>Let's get in touch!</h1>
<!--Contact Container-->
<!--Static Contact-->
<div class="text-start py-lg-3 mx-5">
<h2 class="container-fluid">Drop me a message at any of my socials below!</h2>
<div class="container-sm-fluid d-flex text-start py-lg-3 mx-lg-5">
<img src="image/Contact.png" class="col-lg-3 d-none d-lg-block h-auto mx-4">
<ul class="list-unstyled">
<li class="d-flex">
<a class="h1" href="https://github.com/" target="_blank"><i
class="bi bi-github"></i></a> 
<a href="https://github.com/">
<h2 class="my-2">Github</h2>
</li>
<li class="d-flex"><a class="h1 d-flex align-content-center" href="https://linkedin.com/"
target="_blank"><i class="bi bi-linkedin"></i>
</a> <a href="https://linkedin.com/">
<h2 class="my-2">LinkedIn</h2>
</a>
</li>
<li class="d-flex"><a class="h1 d-flex align-content-center"
href="mailto:[email protected]"><i class="bi bi-envelope"></i>
</a> <a href="mailto:[email protected]">
<h2 class="my-2">Gmail</h2>
</a>
</li>
</ul>
</div>
</div>
<!-- Dynamic Contact -->
<!--
<div class="container-fluid d-flex text-start py-lg-3 mx-5 align-items-center justify-content-between">
<form class="col-lg-6">
<div class="d-lg-flex">
<div class="form-group">
<label for="InputFirstName">Your First Name</label>
<input type="text" class="form-control" id="InputFirstName"
placeholder="Enter your first name" required>
</div>
<div class="form-group px-lg-3">
<label for="InputLastName">Your Last Name</label>
<input type="text" class="form-control" id="InputFirstName"
placeholder="Enter your last name" required>
</div>
</div>
<div class="py-1 form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" id="InputEmail" placeholder="Enter email" required>
</div>
<div class="py-1 form-group">
<label for="InputPhoneNumber">Phone Number</label>
<input type="tel" class="form-control" id="InputPhoneNumber"
placeholder="Enter contact number">
</div>
<div><label for="InputMessage">Drop me a message!</label>
</div>
<div class="py-1">
<textarea class="col-12 form-control" id="InputMessage" rows="3"
placeholder="Enter your message here" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<img src="image/Contact.png" class="col-lg-4 row-d-none d-none d-lg-block h-75 mx-3">
</div>
</div> -->
<!-- Bootstrap Bundle with Popper -->
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>