-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
481 lines (473 loc) · 30.7 KB
/
Copy pathindex.html
File metadata and controls
481 lines (473 loc) · 30.7 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Lim Jing Kai's software engineering portfolio featuring fullstack, cloud, data, and AI projects." />
<meta name="author" content="Lim Jing Kai" />
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="images/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<script type="text/javascript">
function Display() {
var moreabout = document.getElementById("moreAbout");
var status = moreabout.style.display;
if (status === "none") {
document.getElementById("moreAbout").style.display = "block";
document.getElementById("moreAboutDisplay").innerHTML = "Show Less";
} else {
document.getElementById("moreAbout").style.display = "none";
document.getElementById("moreAboutDisplay").innerHTML = "More About Me";
}
}
</script>
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top"><img src="images/img/logos/signature-logo.svg" alt="Lim Jing Kai" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars ms-1"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link" href="#page-top">Resume</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">My Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#Skillset">Technical Skillset</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container">
<div class="hero-kicker">Software Engineering Portfolio</div>
<div class="masthead-heading">Lim Jing Kai</div>
<div class="masthead-subheading">Full-stack developer focused on building practical, efficient software across web, cloud, data, and AI projects.</div>
<div class="hero-actions">
<a class="btn btn-primary btn-xl text-uppercase" href="Resume - Software Engineer.pdf" target="_blank">View Resume</a>
<a class="btn btn-outline-light btn-xl text-uppercase" href="#portfolio">See Projects</a>
</div>
<div class="hero-meta" aria-label="Portfolio highlights">
<span>9 years coding</span>
<span>Full-stack development</span>
<span>NUS Computer Science</span>
</div>
</div>
</header>
<!-- About-->
<section class="page-section" id="about">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">About</h2>
<h3 class="section-subheading text-muted">A little about who I am and what drives me</h3>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-3 profile-card">
<img class="img-fluid" src="images/img/team/me.jpg" alt="Lim Jing Kai">
<div class="portfolio-caption-heading">Lim Jing Kai</div>
<div class="portfolio-caption-subheading text-muted">Full-Stack Developer</div>
</div>
<div class="col-lg-8 about-copy">
<h2>Hi there! I am Lim Jing Kai.</h2>
<p>I have been coding for nine years and have worked with a range of programming languages (<a
href="#Skillset">more details below</a>).</p>
<p>I enjoy breaking problems down, thinking through the details, and finding ways to make my
solutions more efficient. Most of my experience so far has come from full-stack development
projects.
</p>
<p>As I continue building on that foundation, I am also exploring software engineering, AI and
machine learning, and cybersecurity to find the areas I want to grow deeper in.</p>
<br>
<a href="#moreAbout" onclick="Display()" id="moreAboutDisplay">More About Me</a>
<hr>
</div>
</div>
</div>
</div>
</section>
<!-- timeline -->
<section class="page-section" id="moreAbout" style="display: none">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">My Background</h2>
</div>
</div>
<div class="container">
<div class="row fullscreen align-items-center justify-content-between">
</div>
<br>
<p class="text-muted">Growing up, I looked up to my father and sister. They were both strong in the subjects I was drawn to, especially mathematics and IT, and their enthusiasm helped shape my own interest in those areas.</p>
<p class="text-muted">Their encouragement also helped me through some difficult points in my education. As my confidence grew, I took on more responsibilities and learned a great deal about leadership along the way.</p>
<p class="text-muted">The past few years have brought plenty of change, from adapting to life during the pandemic to taking on greater responsibilities as I entered adulthood. Those experiences pushed me out of my shell and helped me become more open, sociable, and thoughtful about how my words affect others.</p>
<br>
<hr>
</div>
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Timeline</h2>
<h3 class="section-subheading text-muted">The experiences and lessons that have shaped me</h3>
</div>
<ul class="timeline">
<li>
<div class="timeline-image"><img class="img-fluid" src="images/img/about/NUS.svg"
alt="..." /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2025-Present</h4>
<h4 class="subheading">National University of Singapore </h4>
<h5 class="subheading">(Bachelor's in Computer Science)</h5>
</div>
<div class="timeline-body">
<p class="text-muted">Entering NUS brought a big shift in pace and expectations. University-level computing has been far more demanding than my polytechnic studies, requiring stronger problem-solving skills and a deeper grasp of theory.</p>
<br>
<p class="text-muted">The early challenges showed me that setbacks are normal in a competitive environment. More importantly, they reinforced the value of persistence and steady improvement.</p>
<br>
<p class="text-muted">Being surrounded by driven peers motivates me to improve my learning habits and aim higher in both technical depth and project work. I am currently strengthening my foundations in algorithms, systems, and software engineering while exploring AI and low-level computing.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="img-fluid" src="images/img/about/NYP.jfif"
alt="..." /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2020-2023</h4>
<h4 class="subheading">Nanyang Polytechnic </h4>
<h5 class="subheading">(Diploma in Information Technology)</h5>
</div>
<div class="timeline-body">
<p class="text-muted">At Nanyang Polytechnic, I made a point of learning beyond the classroom. I took on three Diploma Plus programmes and participated in two hackathons. Balancing these opportunities while adapting to the pandemic was not easy, but the experience made me more resilient and better prepared for what came next.</p>
<br>
<p class="text-muted">The Diploma in Information Technology exposed me to many areas of IT and helped turn an uncertain career path into a clearer interest in software and full-stack development.</p>
<br>
<p class="text-muted">I was also a founding member of <a href="https://nyp.ai/">NYP AI</a>, an artificial intelligence interest group. Helping to plan events taught me how to work with others and take ownership, while the machine learning skills I picked up supported several of my school projects.</p>
</div>
</div>
</li>
<li>
<div class="timeline-image"><img class="img-fluid" src="images/img/about/XMSS.jfif"
alt="..." /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2016-2019</h4>
<h4 class="subheading">Xinmin Secondary School </h4>
<h5 class="subheading">(Express)</h5>
</div>
<div class="timeline-body">
<p class="text-muted">My four years in secondary school seemed to pass in an instant. The days were busy and fun, but the friendships I made were what made that time memorable. We grew up together and came away with plenty of stories to look back on.</p>
<br>
<p class="text-muted">It was also an important period of personal growth. I became more aware of how my actions and words could affect others, and I learned to reflect on my mistakes instead of brushing them aside.</p>
<br>
<p class="text-muted">To take Computing at O-Level, I first had to qualify for the demanding triple-science class. Months of hard work paid off, and getting in marked the start of my formal journey into IT.</p>
<br>
<p class="text-muted">Toward the end of those four years, I became a section leader in Symphonic Band. The role was challenging, but it taught me that a title does not automatically earn respect and that discipline is not about shouting. Leading with patience and empathy brought out far more in the people around me.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="img-fluid" src="images/img/about/HIPS.jfif"
alt="..." /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2010-2015</h4>
<h4 class="subheading">Holy Innocents' Primary School</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Primary school was where I first became more open and confident. I went from being the child who cried during show-and-tell to someone who could stand in front of a room and present with confidence.</p>
<br>
<p class="text-muted">The supportive friends and teachers I met during those years played a big part in helping me come out of my shell.</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<!-- Portfolio Grid-->
<section class="page-section bg-light" id="portfolio">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">My Projects</h2>
<h3 class="section-subheading text-muted">Things I made that I'm proud of</h3>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<!-- RepoSense-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal4">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="images/img/portfolio/reposense-logo.svg" alt="RepoSense logo" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">RepoSense</div>
<div class="portfolio-caption-subheading text-muted">NUS Orbital · Apollo Level of Achievement</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<!-- TutorHub-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="images/img/portfolio/TutorHub.png" alt="TutorHub project screenshot" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">TutorHub</div>
<div class="portfolio-caption-subheading text-muted">Full-Stack Development Project</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<!-- CallforHelp-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal3">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="images/img/portfolio/CallforHelp.png" alt="CallforHelp project screenshot" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">CallforHelp</div>
<div class="portfolio-caption-subheading text-muted">Hackathon Project</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-5 mb-4">
<h3 class="text-uppercase">Where I Started</h3>
<p class="text-muted">A small project with a lot of sentimental value</p>
</div>
<div class="row justify-content-center">
<div class="col-lg-5 col-sm-8 mb-4">
<!-- My Library-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal2">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="images/img/portfolio/mylibrary.png" alt="My Library project screenshot" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">My Library</div>
<div class="portfolio-caption-subheading text-muted">The First Website I Completed</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services-->
<section class="page-section" id="Skillset">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Technical Skillset</h2>
<h3 class="section-subheading text-muted">The tools and areas I have worked with</h3>
</div>
<div class="row text-center">
<div class="col-md-4 skill-card">
<span class="skill-icon">
<i class="fas fa-globe"></i>
</span>
<h4 class="my-3">Full Stack Development</h4>
<p class="text-muted">6 years of experience <br> Python, JavaScript, and C# <br> Some data analytics work with Python</p>
</div>
<div class="col-md-4 skill-card">
<span class="skill-icon">
<i class="fas fa-cloud"></i>
</span>
<h4 class="my-3">Cloud Computing</h4>
<p class="text-muted">3 years of experience <br> AWS and Alibaba Cloud <br> Used for hackathons and web hosting</p>
</div>
<div class="col-md-4 skill-card">
<span class="skill-icon">
<i class="fas fa-brain"></i>
</span>
<h4 class="my-3">Artificial Intelligence</h4>
<p class="text-muted">3 years of experience <br> Scikit-learn and TensorFlow <br> Building and applying machine learning models</p>
</div>
</div>
</div>
</section>
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Contact</h2>
<h3 class="section-subheading text-muted">Feel free to get in touch</h3>
</div>
<div class="contact-panel text-center">
<p><strong>Email</strong><a href="mailto:i.am.limjingkai@gmail.com">i.am.limjingkai@gmail.com</a></p>
<p><strong>Contact No</strong><a href="tel:+6588181012">+65 8818 1012</a></p>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4 text-lg-start">Copyright © Lim Jing Kai 2021</div>
<div class="col-lg-4 my-3 my-lg-0">
<a class="btn btn-dark btn-social mx-2" href="https://github.com/Elljaykei" target="_blank"><i class="fab fa-github"></i></a>
<a class="btn btn-dark btn-social mx-2" href="https://www.linkedin.com/in/jing-kai-lim/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a class="btn btn-dark btn-social mx-2" href="mailto:i.am.limjingkai@gmail.com" target="_blank"><i class="fab fa-google"></i></a>
</div>
<div class="col-lg-4 text-lg-end">
<a class="link-dark text-decoration-none me-3" href="#!">Privacy Policy</a>
<a class="link-dark text-decoration-none" href="#!">Terms of Use</a>
</div>
</div>
</div>
</footer>
<!-- Portfolio Modals-->
<!-- Portfolio item 1 modal popup-->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="images/img/close-icon.svg"
alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">TutorHub</h2>
<p class="item-intro text-muted">Build Your Skills With Tutors And Learners Alike!</p>
<img class="img-fluid d-block mx-auto" src="images/img/portfolio/TutorDetails.jpg" alt="..." />
<p>During the COVID-19 pandemic, many businesses had to move their services online. TutorHub was our response to that challenge in the tuition sector.</p>
<p>We combined ideas from platforms such as Coursera and Fiverr to create a place where people could learn from one another. The guiding idea was simple: anyone can be both a learner and a tutor.</p>
<p><strong>What makes it different:</strong> TutorHub gives tutors another way to find learners and manage the peaks and troughs that often come with tuition work.</p>
<p>We first built the project with the Python framework <strong>Flask</strong>, then began rebuilding it with <strong>Express.js</strong>.</p>
<p>The video below walks through the project in more detail.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/lW-EAPbgBqg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<ul class="list-inline">
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal"
type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item 2 modal popup-->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="images/img/close-icon.svg"
alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">My Library</h2>
<p class="item-intro text-muted">My Personal Collection of Books</p>
<img class="img-fluid d-block mx-auto" src="images/img/portfolio/mylibdetails.jpg" alt="..." />
<p>This was the first website I completed. I built it around my love of books as a small way to share that interest and encourage others to read.</p>
<p>It is a simple project, but I keep it here because it reminds me how much I have learned since I started.</p>
<p>You can <a href="Assignment 1/index.html">try it out here</a>.</p>
<ul class="list-inline">
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal"
type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item 3 modal popup-->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="images/img/close-icon.svg"
alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">CallforHelp</h2>
<p class="item-intro text-muted"></p>
<img class="img-fluid d-block mx-auto" src="images/img/portfolio/solArch.png" alt="..." />
<p><strong>The challenge:</strong> How could analytics help detect emergencies earlier and mobilise Community First Responders more quickly, especially for Singapore's growing elderly and vulnerable populations?</p>
<p><strong>Our solution:</strong> We used IBM Watson's computer vision service to identify signs of fires and heart attacks. When the system detects an incident, it alerts Community First Responders and emergency professionals to help reduce response time.</p>
<a href="https://github.com/Elljaykei/IT2005-CallforHelp_SCDFXIBM">View more details on GitHub</a>
<ul class="list-inline">
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal"
type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RepoSense modal popup-->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="images/img/close-icon.svg"
alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">RepoSense</h2>
<p class="item-intro text-muted">NUS Orbital project · Apollo Level of Achievement</p>
<img class="img-fluid d-block mx-auto" src="images/img/portfolio/reposense-overview.png" alt="RepoSense landing page showing repository analysis controls and an architecture graph" />
<p>We developed RepoSense for NUS Orbital, an independent summer software project programme, and completed the project at the Apollo achievement level.</p>
<p>RepoSense is a full-stack web application that ingests a public GitHub repository or ZIP archive and turns its codebase into an approachable architecture overview.</p>
<p>Its static-analysis pipeline scans the file tree, detects languages and frameworks, extracts JavaScript, TypeScript, and Python imports, traces supported request flows, and identifies likely entry points and module roles. Results are presented through repository metrics, module summaries, and an interactive dependency graph.</p>
<p><strong>Tech stack:</strong> React, TypeScript, Vite, Tailwind CSS, Node.js, Express, Prisma, PostgreSQL, ELK, and the TypeScript and Python AST tooling.</p>
<p>The video below walks through RepoSense and its main features.</p>
<div class="ratio ratio-16x9 mb-4">
<iframe src="https://www.youtube.com/embed/xuxR8ebBYCY" title="RepoSense project walkthrough" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p><a href="https://github.com/h0nh0nbaguette/NUS-Orbital-RepoSense" target="_blank" rel="noopener noreferrer">View RepoSense on GitHub</a></p>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal"
type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>