-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
176 lines (152 loc) · 8.15 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
<!DOCTYPE html>
<html>
<head>
<title>Jin Cheng's Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
.bgimg {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('https://img.freepik.com/premium-photo/abstract-black-background_609138-986.jpg');
min-height: 100%;
}
</style>
</head>
<body>
<!-- Sidebar with image -->
<nav class="w3-sidebar w3-hide-medium w3-hide-small" style="width:40%">
<div class="bgimg"></div>
</nav>
<!-- Hidden Sidebar (reveals when clicked on menu icon)-->
<nav class="w3-sidebar w3-black w3-animate-right w3-xxlarge" style="display:none;padding-top:150px;right:0;z-index:2" id="mySidebar">
<a href="javascript:void(0)" onclick="closeNav()" class="w3-button w3-black w3-xxxlarge w3-display-topright" style="padding:0 12px;">
<i class="fa fa-remove"></i>
</a>
<div class="w3-bar-block w3-center">
<a href="#" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">Home</a>
<a href="#portfolio" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">Portfolio</a>
<a href="#about" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">About</a>
<a href="#contact" class="w3-bar-item w3-button w3-text-grey w3-hover-black" onclick="closeNav()">Contact</a>
</div>
</nav>
<!-- Page Content -->
<div class="w3-main w3-padding-large" style="margin-left:40%">
<!-- Menu icon to open sidebar -->
<span class="w3-button w3-top w3-white w3-xxlarge w3-text-grey w3-hover-text-black" style="width:auto;right:0;" onclick="openNav()"><i class="fa fa-bars"></i></span>
<!-- Header -->
<header class="w3-container w3-center" style="padding:128px 16px" id="home">
<h1 class="w3-jumbo"><b>Sim Jin Cheng</b></h1>
<p>Student with strong interest in IT</p>
<img src="C:\Users\Jc\VSC\892f8089-6c99-4155-a0ca-57bea6835031.jpg" class="w3-image w3-hide-large w3-hide-medium w3-round" width="1000" height="1333">
</header>
<!-- Portfolio Section -->
<div class="w3-padding-32 w3-content" id="portfolio">
<h2 class="w3-text-grey">My Portfolio</h2>
<hr class="w3-opacity">
<!-- Grid for photos -->
<div class="w3-row-padding" style="margin:0 -16px">
<div class="w3-half">
<img src="./IMG_8831.jpg" style="width:100%">
<img src="./IMG_8813.jpg" style="width:100%">
<img src="./1000028801.jpeg" style="width:100%">
</div>
<div class="w3-half">
<img src="./f7d57c24-eb94-4719-a981-2869790bdc80.jpg" style="width:100%">
<img src="./Screenshot 2024-04-18 224145.png" width="500" height="500">
<img src="./816617ad-b727-4b33-a319-0df141e708ed.jpg" width="500" height="500">
</div>
<!-- End photo grid -->
</div>
<!-- End Portfolio Section -->
</div>
<!-- About Section -->
<div class="w3-content w3-justify w3-text-grey w3-padding-32" id="about">
<h2>About Me</h2>
<hr class="w3-opacity">
<p>I see myself as a creative and innovative person. With a burning passion for everything computer and IT related, I strive to use my creativity
to establish revolutionary ideas to further push technology to help people save time and do the more important things in life. Despite starting late and only building my
first Personal Computer at Secondary 3, I am resilient, a fast-learner and have learnt many things related to IT in a short span of time and have done several projects like a dns server which blocks ads for all devices in my household and this website!
</p>
<h3 class="w3-padding-16">My Skills</h3>
<p class="w3-wide">Computer Literacy/Knowledge</p>
<div class="w3-light-grey">
<div class="w3-container w3-center w3-padding-small w3-dark-grey" style="width:95%">95%</div>
</div>
<p class="w3-wide">PC Building/Knowledge</p>
<div class="w3-light-grey">
<div class="w3-container w3-center w3-padding-small w3-dark-grey" style="width:90%">90%</div>
</div>
<p class="w3-wide">Web Design</p>
<div class="w3-light-grey">
<div class="w3-container w3-center w3-padding-small w3-dark-grey" style="width:70%">70%</div>
</div>
<p class="w3-wide">Basic Python</p>
<div class="w3-light-grey">
<div class="w3-container w3-center w3-padding-small w3-dark-grey" style="width:65%">65%</div>
</div><br>
<button class="w3-button w3-light-grey w3-padding-large w3-section">
<i class="fa fa-download"></i> Download Resume
</button>
<!-- Achievements -->
<h3 class="w3-padding-24">My Achievements</h3>
<img src="https://www.shirleyuni.com/wp-content/uploads/2022/10/Presbyterian-High-School-icon-v2-150x150.jpg" alt="PHS" class="w3-left w3-circle w3-margin-right" style="width:80px">
<p><span class="w3-large w3-text-black w3-margin-right">Presbyterian High School</span> Edusave Awards</p>
<p>Receiving Edusave Awards in Secondary school from 2021-2023</p><br>
<img src="https://huaminpri.moe.edu.sg/images/School%20Logo%20Version%202022%20Aug.jpg" alt="HMPS" class="w3-left w3-circle w3-margin-right" style="width:80px">
<p><span class="w3-large w3-text-black w3-margin-right">Huamin Primary School</span> Edusave/Inter-School Awards</p>
<p>Received Prestigious EAGLES Award in P6 as well as numerous edusave awards and school awards from 2015-2020</p><br>
<!-- End About Section -->
</div>
<!-- My other hobbies -->
<div class="w3-content w3-justify w3-text-grey w3-padding-32" id="about">
<h2>My other hobbies and interests</h2>
<hr class="w3-opacity">
<p>I also enjoy playing musical instruments like Piano and the electric guitar, I take lessons for piano and currently, I am pursuing a Grade 7 certification. On other days, I enjoy playing video games on my computer and one of my favourite games is PC builder simulator which allows me to construct PCs within the game.
</p>
<div class="w3-row-padding" style="margin:0 -16px">
<div class="w3-half">
<img src="./878c6b8a-4265-4ab6-9b18-a908a6cf1ec4.jpg" style="width:100%">
</div>
<div class="w3-half">
<img src="./IMG_8854.jpg" style="width:105%"></p><br>
</div>
<!-- Contact Section -->
<div class="w3-padding-32 w3-content w3-text-grey" id="contact" style="margin-bottom:64px">
<h2>Contact Me</h2>
<hr class="w3-opacity">
<div class="w3-section">
<p><i class="fa fa-phone fa-fw w3-xxlarge w3-margin-right"></i> Phone: +65 8805 7527</p>
<p><i class="fa fa-envelope fa-fw w3-xxlarge w3-margin-right"> </i> Email: jinchengsim@gmail.com
</p>
</div>
<!-- Image of location/map -->
<img src="" class="w3-image w3-greyscale" style="width:100%;margin:32px 0">
</div>
<!-- Footer. -->
<footer class="w3-container w3-padding-64 w3-light-grey w3-center w3-opacity w3-xlarge" style="margin:-24px">
<p class="w3-small">This website was not made entirely by me! Credits to W3schools for a main outline to create my website.</p>
<a class="fa fa-linkedin w3-hover-opacity" href="https://www.linkedin.com/in/jin-cheng-sim-71856b2ba/" target="_blank"></a>
<a class="fa fa-github w3-hover-opacity" href="https://github.com/jcsaar" target="_blank"></a
<!-- End footer -->
</footer>
<!-- END PAGE CONTENT -->
</div>
<script>
// Open and close sidebar
function openNav() {
document.getElementById("mySidebar").style.width = "60%";
document.getElementById("mySidebar").style.display = "block";
}
function closeNav() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</body>
</html>