This repository has been archived by the owner on Dec 29, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
296 lines (286 loc) · 15.9 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
<!DOCTYPE html>
<html lang="en">
<!-- AUTHOR: John Ling
Fonts Used: Meslo LGS, Devicon, Font Awesome
Credit for respective fonts: André Berg, Julien Monty, Dave Gandy + Font Awesome Team
-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Software engineer and web developer portfolio for John Ling">
<meta name="keywords"
content="website builder, software engineer, software developer, web developer, John Ling, portfolio, Javascript, HTML, CSS, programmer">
<title>John Ling</title>
<link href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link href="/static/css/index.css" rel="stylesheet">
<script src="/scripts/animation_observers.js" crossorigin="anonymous" defer></script>
<link rel="shortcut icon" href="/static/favicon.ico">
</head>
<body>
<nav class="navbar navbar-expand-lg py-0">
<div class="container-fluid">
<a class="navbar-brand" href="/">John Ling</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" id="page-list">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/projects/">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/tech/">Tech</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog/">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/#where-section">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/assets/documents/resume.pdf">Resume</a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<div class="hero-card" id="welcome-sign">
<h1>Hello I'm <span class="bright-orange">John</span></h1>
</div>
<div class="hero-card" id="greeter-profile">
<img src="/assets/images/profile_square.png" alt="Photo of me" id="landing-page-photo" />
<div id="summary-info">
<h2 class="purple">Some things about me</h2>
<p>I'm a Computer Science student at the University of Melbourne.
</p>
<p>
I'd say I primarily in web-dev, however I have a wide range of interests so my projects range
wildly. That being said, I do have an interest in security I'm exploring.
</p>
</div>
</div>
</header>
<main class="container">
<section class="row">
<div class="col-lg-6 order-lg-12">
<h2 class="question-prompt red">Who?</h2>
<h3>A bit more about me</h3>
<p>Hello there. My name is John Ling.</p>
<p>I made this website to act as both a portfolio for employers and a personal site. I also just like
making things.
These sort of programming projects are what I do in my spare time as it's fun building practical
applications to help myself or others.
</p>
<p>When not writing code I enjoy piano, electronics and refurbishing old computers.</p>
</div>
<div class="col-lg-6 order-lg-1">
<img class="img-fluid hidden-fade" src="/assets/images/myself.jpg" alt="Picture of me">
</div>
</section>
<section class="row ">
<div class="col-lg-6 order-lg-1">
<h2 class="question-prompt yellow">What?</h2>
<h3>The tools I use</h3>
<p>I have been programming for a while now and I tend to pick up languages that suit one project.
However, I consider my best languages Python, Javascript and maybe some C.</p>
<p> I'm not really obsessed with a particular "Tech Stack" or at least I don't subscribe to one and
follow it religiously.
A website built using, PHP, vanilla Javascript and Bootstrap is just as good as one built using
React, Typescript and Tailwind CSS as long as the
end result accomplishes what the programmer wanted.
</p>
<p>
I think the KISS (Keep It Simple Stupid) philosophy is a very valid approach to development so I
like to use the right tool rather then the hottest one.
</p>
</div>
<div class="col-lg-6 order-lg-12">
<div class="skills-group">
<div class="row">
<div class="col skill-icon hidden-slide">
<i class="devicon-javascript-plain yellow"></i>
<span class="small-caption">Javascript</span>
</div>
<div class="col skill-icon hidden-slide">
<i class="devicon-c-plain grey"></i>
<span class="caption">C</span>
</div>
<div class="col skill-icon hidden-slide">
<i class="devicon-python-plain blue"></i>
<span class="caption">Python</span>
</div>
<div class="col skill-icon hidden-slide">
<i class="devicon-nodejs-plain green"></i>
<span class="caption">NodeJS</span>
</div>
<div class="col skill-icon hidden-slide">
<i class="devicon-nginx-original green"></i>
<span class="caption">NGINX</span>
</div>
<div class="col skill-icon hidden-slide">
<i class="devicon-react-original cyan"></i>
<span class="caption">React</span>
</div>
<div class="col skill-icon hidden-slide">
<i class="devicon-flask-plain grey"></i>
<span class="caption">Flask</span>
</div>
<div class="col skill-icon hidden-slide">
<i class="devicon-mysql-plain blue"></i>
<span class="caption">MySQL</span>
</div>
<div class="col skill-icon hidden-slide">
<i class="devicon-ubuntu-plain orange"></i>
<span class="caption">Ubuntu</span>
</div>
<div class="col skill-icon hidden-slide">
<i class="devicon-firebase-plain yellow"></i>
<span class="caption">Firebase</span>
</div>
<div class="col skill-icon hidden-slide">
<i class="devicon-bootstrap-plain purple"></i>
<span class="caption">Bootstrap</span>
</div>
<div class="col skill-icon hidden-slide">
<i class="devicon-docker-plain blue"></i>
<span class="caption">Docker</span>
</div>
</div>
</div>
</div>
</section>
<section class="row align-items-center">
<div class="col-lg-6 order-lg-12">
<h2 class="question-prompt blue">When?</h2>
<h3>Where it all began</h3>
<p>While I had taken some Python introductory classes the year before, my first real project was
created in September 2019.
It was an automated kahoot player using the Selenium library which while primitive, was something I
was proud
of since I built myself. I even tested it in my class much to the confusion of my teacher.</p>
<p>Ever since, I've continued because it was something I found legitimately fun. Also job security and
all that.</p>
</div>
<div class="col-lg-6 order-lg-1">
<h3 class="text-center">Some projects I've done</h3>
<div id="project-display">
<div class="project-card">
<h2 class="title">Pseudocode Compiler</h2>
<h3>October 2022 - May 2023</h3>
<p>Compiler built in C++ to make A-Level pseudocode an exectuable language.</p>
<a href="https://github.com/John-Ling/Pseudocode-Compiler"><span class="link">Source
Code</span></a>
</div>
<div class="project-card">
<h2 class="title">ramble.johnling.me</h2>
<h3>April 2024 - April 2024</h3>
<p>Productivity / unintentional mental health app and winning submission to 2024 CODEBREW
Hackathon at my university under team "Cissa hackathon thing"</p>
<a href="https://github.com/John-Ling/CODEBREW-2024" link">Source
Code</span></a>
</div>
<div class="project-card">
<h2 class="title">Trello Tabliss Integration</h2>
<h3>January 2023 - May 2023</h3>
<p>Fork of browser extension Tabliss with Trello interoperability. Made with NodeJS, Firebase
and React.</p>
<a
href="https://github.com/John-Ling/Tabliss-Trello-Integration/tree/main/src/plugins/widgets/trello"><span
class="link">Source Code</span></a>
</div>
<div class="project-card">
<h2 class="title">johnling.me</h2>
<h3>June 2022 - August 2022</h3>
<p>Personal website about me, my projects and my work. Built using Bootstrap, Sass and
Javascript.</p>
<a href="https://github.com/John-Ling/johnling.me"><span class="link">Source
Code</span></a>
</div>
<div class="project-card">
<h2 class="title">Cameraman</h2>
<h3>November 2021 - Feburary 2022</h3>
<p>Uses microcontrollers, motor and OpenCV to track and follow a face in real-time.
Filmed by Apple to promote their distinguished schools program.</p>
<a href="https://github.com/John-Ling/Cameraman"><span class="link">Source Code</span></a>
</div>
<div class="project-card">
<h2 class="title">CS Fundamentals</h2>
<h3>August 2021 - Present</h3>
<p>Ongoing code implementations of various data structures and algorithms.</p>
<a href="https://github.com/John-Ling/CS-Fundamentals"><span class="link">Source Code</span></a>
</div>
<div class="project-card">
<h2 class="title">Desktop Kahoot Bot</h2>
<h3>November 2021 - May 2022</h3>
<p>Homage to my first Kahoot Bot. Written in C# and built with Winforms.</p>
<a href="https://github.com/John-Ling/Desktop-Kahoot-Bot"><span class="link">Source
Code</span></a>
</div>
</div>
</div>
</section>
<section class="row text-center" id="where-section">
<div class="col-lg-12 order-lg-12">
<h2 class="question-prompt purple">Where?</h2>
<h3>(can you find me)</h3>
<div class="findme-section">
<a class="hidden-fade" href="https://www.linkedin.com/in/john-ling-721721243/"><i
class="fa-brands fa-linkedin"></i></a>
<a class="hidden-fade" href="https://github.com/John-Ling"><i class="fa-brands fa-github"></i></a>
</div>
<p id="mail-link"><a href="mailto:johnlingbusiness@gmail.com?subject=Hello John"
class="link">johnlingbusiness@gmail.com</a></p>
</div>
</section>
<section class="row">
<div class="col-lg-12">
<h2 class="question-prompt green">Why?</h2>
<h3>Why code?</h3>
<p>As corporate as it sounds, I enjoy applying theory and skills I know to build things for myself and
others to assist in their
everyday lives.
Whether it be a Raspberry Pi powered dashboard, facial detection tracking camera systems for hybrid
learning, producivity web apps or a compiler for A level students
at the end of the day all my projects are made with a desire to help others even in a minor way.
Just like how electronics and mechanical systems can be used to solve a problem, software is another
method
with its own benefits and drawbacks.
</p>
<p>
Many tools are available online for free making programming accessible to all backgrounds.
The same applies for knowledge. It's only in this day and age where one can watch undergrad lectures
for compilers
before they even go to university.
</p>
<p>
The accessibility of free professional tools and easy access to knowledge makes software engineering
one of the easiest fields
to get into in my opinion.
It's that ease of access combined with nearly limitless potential that makes it fun.
</p>
<p>
Hope you enjoyed the website :)
</p>
</div>
</section>
</main>
<footer>
<p>Made by John Ling</p>
<p>Source code at <a href="https://github.com/John-Ling/johnling.me" class="link">Github</a></p>
<p><a href="/" id="return-link"><span class="link">Return Home</span></a></p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/927c1aac4a.js" crossorigin="anonymous"></script>
</body>
</html>