cv2/index.html at main · Jonaspng/cv2 · GitHub

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
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Png Yi Wei Jonas</title>
    <link rel="stylesheet" href="public/styles.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Png Yi Wei Jonas</a>
      <button class="navbar-toggler" 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" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active btn" onClick="document.getElementById('skills').scrollIntoView();">Education & Skills</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active btn" onClick="document.getElementById('experience').scrollIntoView();">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active btn" onClick="document.getElementById('contact').scrollIntoView();">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <section id="introduction">
    <div class="container">
      <div class="row">
        <div class=" jonas-intro col-lg-6">
          <div>
            <h1>Hello!</h1>
            <h2>I am Png Yi Wei Jonas</h2>
            <p>
              I am an undergraduate student at the National University Of Singapore (NUS), currently majoring in Computer Science.
            </p>
            <a href="public/PngYiWeiJonas_Resume.pdf" class="btn btn-dark download-btn">Download my CV</a>
          </div>
        </div>
        <div class="col-lg-6">
          <img id="jonas-photo"src="public/jonas.jpg" alt="">
        </div>
      </div>
    </div>
    <hr class="section-divider mx-auto">
  </section>
  <section id="skills">
    <div class="container">
      <h1 class="header">Education & Skills</h1>
      <div class="row">
        <div class="col-lg-6">
          <div class="skill-div">
            <h3>National University Of Singapore</h3>
            <p> Aug 2021 - Aug 2025</p>
            <p>
              Bachelor of Computing (Honours) in Computer Science
            </p>
          </div>

          <div class="skill-div">
            <h3>St Andrew's Junior College</h3>
            <p>Feb 2017 - December 2018</p>
            <h5>GCE A level</h5>
            <p>
              H2 Subjects: Mathematics (A), Physics (A), Chemistry (B)
              <br>
              H1 Subjects: General Paper (B), Economics (A), Project Work (A)
            </p>
          </div>

        </div>
        <div class="col-lg-6">
          <div class="skill-div">
            <h3>Programming Languages Learnt</h3>
            <p>Python, Ruby, Javascript, HTML</p>
          </div>
          <div class="skill-div">
            <h3>Programming Tools Mastered</h3>
            <p>React, Ruby on Rails, Bootstrap, jquery</p>
          </div>
          <div class="skill-div">
            <h3>Language Proficiency</h3>
            <p>English (Excellent), Mandarin Chinese (Very Good)</p>
          </div>
        </div>
      </div>
    </div>
    <hr class="section-divider mx-auto">
  </section>
  <section id="experience">
    <div class="container">
      <h1 class="header">Experience</h1>
      <h3 class="header">Self-coded CS Projects</h3>
      <div class="row">
        <div class="col-lg-4 col-md-6">
          <div class="card mx-auto">
            <div class="card-body">
              <h5 class="card-title">Basic HTML CV</h5>
              <p class="card-text">My first HTML site that I coded after learning HTML. It is a static webpage with my basic CV details.</p>
              <a class="btn btn-dark"href="https://jonaspng.github.io/cv/">Visit Site</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="card mx-auto">
            <div class="card-body">
              <h5 class="card-title">Weather Web Application</h5>
              <p class="card-text">Web application with a backend Express Server. This application allows users to get basic Weather information of cities around the world with the help of Open-Weather-Map API.</p>
              <a class="btn btn-dark"href="https://weather-api-jonas.up.railway.app/">Visit Site</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="card mx-auto">
            <div class="card-body">
              <h5 class="card-title">To Do List Web Application</h5>
              <p class="card-text">Web application with a backend Express Server. This application allows users to sign-up for a simple digital To Do List that stores users' list items on MongoDB.</p>
              <a class="btn btn-dark"href="https://todolist-jonas.up.railway.app/">Visit Site</a>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 col-md-6">
          <div class="card mx-auto">
            <div class="card-body">
              <h5 class="card-title">GPA Tracker Web Application</h5>
              <p class="card-text">Web application with a React frontend and a backend Express Server. This application allows users to sign-up for a simple digital GPA Tracker that calculates and stores users' semester GPA on MongoDB.</p>
              <a class="btn btn-dark"href="https://gpa-tracker.vercel.app/">Visit Site</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="card mx-auto">
            <div class="card-body">
              <h5 class="card-title">To Do List Web Application 2</h5>
              <p class="card-text">Web application with a React frontend and a Ruby On Rails backend with Postgresql. This application allows users to sign-up for an account that stores users' list item on Postgresql. </p>
              <a class="btn btn-dark"href="https://cvwo-todolist.vercel.app/">Visit Site</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="card mx-auto">
            <div class="card-body">
              <h5 class="card-title">Android Mobile Game</h5>
              <p class="card-text">Single-Player Survival Card Game that was developed with the help of Unity and multiple collaborators. With the storyline of a NUS Computer Science Undergraduate receiving his semster result, we hope to that this game would be able to resonate with fellow NUS Computer Science Students allowing them to play this game as a way to destress.</p>
              <a class="btn btn-dark"href="https://github.com/Jonaspng/Orbital-Project_Mastercard">Visit Github Repository</a>
            </div>
          </div>
        </div>
    </div>
  </section>
  <hr class="section-divider mx-auto">
  <section id="contact">
    <div class="container">
      <h1 class="header">Contact Me</h1>
      <p>Email: jonaspng2000@gmail.com</p>
      <a class="icon" href="https://github.com/Jonaspng"><img src="public/github.png" alt=""></a>
      <a class="icon" href="https://www.linkedin.com/in/png-yi-wei-jonas-836a4a206"><img src="public/linkedin.png" alt=""></a>
      <a class="icon" href="https://www.instagram.com/jonaspng2000/"><img src="public/instagram.png" alt=""></a>
      <a class="icon" href="https://www.facebook.com/jonasyiwei.png.5"><img src="public/facebook.png" alt=""></a>
    </div>
  </section>
  <footer>
    <p id="year"></p>
  </footer>
  <script src="public/client.js" charset="utf-8"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>