-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
416 lines (403 loc) · 17.2 KB
/
about.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>about kevin</title>
<link rel="icon" href="./images/me-square.jpg" type="image/x-icon" />
<meta name="description" content="about kevin, who is taking pictures" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"
></script>
<!-- font awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- my custom style sheet -->
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<div class="p-md-5"></div>
<div class="container-fluid">
<div class="row min-vh-100 flex-column flex-md-row">
<aside class="col-12 col-md-2 p-0 flex-shrink-1">
<nav
class="navbar navbar-expand-md flex-md-column flex-row align-items-end text-center text-md-end p-3 p-md-0 sticky-top"
id="sidebar"
>
<div class="text-center d-none d-md-block p-3">
<a href="/" class="navbar-brand-mx=0 font-weight-bold text-nowrap">
<img
id="logo"
title="oh hey it's me"
src="./images/me-square-500px.jpg"
alt="me holding a camera"
width="100%"
/>
</a>
</div>
<button
type="button"
class="btn navbar-toggler border-0 order-1 m-3 p-2"
data-bs-toggle="collapse"
data-bs-target="#nav"
aria-controls="nav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<!-- <span class="navbar-toggler-icon"></span> -->
<i class="fa-solid fa-circle-chevron-up"></i>
</button>
<div class="collapse navbar-collapse prder-last" id="nav">
<ul class="navbar-nav flex-column w-100 justify-content-center">
<li class="nav-item">
<a href="/" class="nav-link px-3">home</a>
</li>
<li class="nav-item">
<a href="analog" class="nav-link px-3">analog</a>
</li>
<li class="nav-item">
<a
href="#"
title="yes yes i made it so that your cursor changes whenever you're hovering the link to the page you're already on, move along"
class="nav-link px-3 active"
>about</a
>
</li>
<li class="nav-item">
<a href="blog" class="nav-link px-3">blog</a>
</li>
<li class="nav-item">
<a href="misc/Kevin_Zhang_Resume.pdf" target="_blank" class="nav-link px-3"
>resume</a
>
</li>
</ul>
</div>
<ul class="nav justify-content-center">
<li class="nav-item social-icons">
<a
href="https://www.instagram.com/kevinistakingpictures/"
target="_blank"
class="nav-link social-button"
>
<i class="fa-brands fa-instagram-square fa-lg"></i>
</a>
</li>
<li class="nav-item social-icons">
<a
href="https://www.linkedin.com/in/kevin-zhang-uwaterloo/"
target="_blank"
class="nav-link social-button"
>
<i class="fa-brands fa-linkedin fa-lg"></i>
</a>
</li>
<li class="nav-item social-icons">
<a
href="https://github.com/kevinzhangTT"
target="_blank"
class="nav-link social-button"
>
<i class="fa-brands fa-github-square fa-lg"></i>
</a>
</li>
<li class="nav-item social-icons">
<a href="mailto:[email protected]" target="_blank" class="nav-link social-button">
<i class="fa-solid fa-square-envelope fa-lg"></i>
</a>
</li>
</ul>
</nav>
</aside>
<main class="col py-3 flex-grow-1" id="content">
<article>
<h1>i take pictures</h1>
<p>What else is there to know about me?</p>
<hr />
<br />
<h1>okay, fine. a little bio</h1>
<p>
As you may have already guessed from the title of my site, my name is Kevin. My last name is
Zhang. Kevin Zhang.
</p>
<p>
I'm currently a second-year student at the University of Waterloo, studying electrical
engineering. It's a tough program, but I find a lot of enjoyment from it. Digging deep into
the technical details of how the technologies we use and take granted every day really gives
me a sense of appreciation of the ingenuity and innovation required to make these things
work.
</p>
<p>
So aside from taking pictures, I also enjoy working on small software projects, like this
site! Although it's literally just a website, it's been one of the proudest things I have
made so far, since I get to incorporate my skills in development along with some of my
hobbies -- photography! More about the site can be found below.
</p>
<p>
Anyways, I'll pad this section out with more information about myself to make potential
employers happy.
</p>
<p>
I do the things I do not because it shows that I am capable of doing something, but because
it challenges me invest myself into learning a new technology or think a different way to
achieve what I want to achieve. Or maybe I just think that something is really hecking cool
and I want to somehow, in one way or another, replicate that. Either way, each endeavor
pushes me to work at the edges of what I am comfortable with and forces myself to seek
knowledge to aid me in what I want to do.
</p>
<p>
As a byproduct, I've picked up a lot of useful skills over the years like learning how to
CAD, make games, control a robot, or efficiently design electrical circuits. I want to
constantly get myself involved in projects that can put these things to use, and hopefully
meet some really cool people along the way!
</p>
<hr />
<br />
<h1 id="about-the-site">about the site</h1>
<!-- <br />
<h3>from start to what things are like now</h3> -->
<p>
This site was something that I had been wanting to do for a long time, but just lacked the
time and knowledge to actually push out something. From creating the
<code>index.html</code> file to me writing out this paragraph, there was about four month's
worth of time in between. Of course, most of that work was all crammed into a weeklong
period of pure HTML and CSS grinding into what you are reading right now.
</p>
<p>
Honestly, I really wasn't sure with how I wanted to go about building the site -- whether I
was just gonna edit a blog theme on hexo.io, use a prebuilt template and modify that, or
even buying design off somewhere like Squarespace. Well, I did none of those and kind of
just built this entire thing from the ground up.
</p>
<p>
Of course, I relied heavily on YouTube videos and other courses to get me started and build
<i>something.</i> I also abused the absolute shit out of Bootstrap; their entire library of
preset and JavaScript thingies are a godsend. I think I wanna try dabble in a bit of that
kind of JavaScript development myself, but for now this is pretty adequate.
</p>
<p>
Just a quick little shout-out: this entire site is inspired by
<a href="https://www.instagram.com/michal.huniewicz/" target="_blank">Michal Huniewicz</a>.
Be sure to check his work out! Recommend giving this one a look:
<a href="https://m1key.me/photography/road_to_north_korea/" target="_blank">
Road to North Korea</a
>.
</p>
<hr />
<br />
<h1>future plans</h1>
<br />
<h3>fix my shit code</h3>
<p>
So, I highly advise not looking through the source code of my site if you are any kind of
web developer who knows their stuff, because you will probably want to commit seppuku to
honour your eyes from seeing my spaghetti code.
</p>
<p>
Everything on here is currently a just mishmash of flex boxes that I have no idea how to
manipulate, along with styling that sometimes use variables, sometimes hard-coded values,
sometimes <code>px</code>, other times <code>rem</code>, along with randommly-ordered CSS
properties. Just don't look at it.
</p>
<p>
Anyways, just shitting on my website because I want to introduce some areas of improvement.
Basically just maybe somehow probably implement some better practices and be more consistent
with how I group my rules and properties. That's gonna take a lot of refactoring.
</p>
<br />
<h3>manage my content better</h3>
<p>
Another thing is how content on my site is managed. Right now, since it's all just pure HTML
and CSS, all the pictures other content are all baked into the flesh of the site. Meaning,
that if I want to changed up the pictures on my page then I have to go into the HTML and
manually make those changes, which is tedious and no elegant. To better manage the content,
I've considered (get this) content management systems like Contentful and Contentstack.
However, I don't think they have a plan for individuals like me so I just plan on making one
myself. Why not? I can just learn some PHP and MySQL and with a lot of procrastination I'll
have my very own CMS to M my C!
</p>
<br />
<h3>make an actual blog</h3>
<p>
You know, I have a link on my nav that says "blog" for a reason. And everything that I am
writing here should actually just go in there instead. But then that needs its own design,
some system to organize all of my posts which will probably require some sort of CMS which I
do not how to work with yet...
</p>
<p>
I mean maybe I can just make a static page that contains the content of each rambling I go
on.
</p>
<p title="🧢">Maybe. I'll get to that soon-ish.</p>
<br />
<h3>make this site dynamic</h3>
<p>
Currently, this site is just being hosted on GitHub Pages which is
<span style="text-decoration: line-through">fine,</span> but no it's actually not fine it's
horrible for the kind of site I want this to be. The entire point of this site is to share
my photography and maybe my thoughts on blog posts if I ever get around to making that work
but the current state of how everything is handled on the backend makes it very tedious and
error-prone because theRE IS NO BACKEND TO MANAGE MY CONTENT okay I think I'm just repeating
myself right now you know what I want sajdfkhaslhfkaj
</p>
<hr />
<br />
<!-- <h1>i'm terrible at coding</h1>
<p>
So yeah I guess I'm using this hobby as a fallback plan. But yeah check out my other site
for my more professional side, whenever I get around to make that. This site was already a
pain to do. I should probably talk about photography now since this is what the entire site
is about..
</p>
<p>
Oh! And hey! If there are any employers out there that somehow stumbled upon this portion of
the site... that was a joke!!! 哈哈哈哈哈哈
</p>
<hr />
<br /> -->
<h1>about my gear</h1>
<br />
<h1>i hecking love nikon</h1>
<br />
<h3>the metal (and plastic)</h3>
<p>
I am a loyal Nikon enjoyer and I don't have any plans to switch to a different ecosystem
anytime soon. I used to shoot a lot of digital with my trusty D810 with plans to upgrade to
the D850 or even Z7ii, but I've been all about analog lately.
</p>
<p>
I originally wanted to purchase the Nikon F3, but then I realized I'm too much of a caveman
and enjoy the all-mechanical aspect of the F2 better, then realized I'm too poor to afford
either one, let alone find them readily available locally. However, I did end up stumbling
on this gold mine of a deal on Kijiji: a Nikkormat FTn for only $50. You bet your ass I put
that thing to good use. Probably put around 15 rolls of (EXPENSIVE ASS) film through it in
less than a month. You should <a href="analog">check out</a> the shots :3
</p>
<p>
My descent into the film photography also led me to buying purchasing two Nikon L35AFs. One
I bought an impulsively because it was "only" $80 or so on Etsy but ended up not working.
However, I was lucky and the seller was nice enough refund me for the camera. The other one
I bought for a less attractive price at $225 but is mostly functional, good enough to get
some rolls of film through. I think I have an addiction.
</p>
<p>
For more of my thoughts on the film bodies I have, go to my
<a href="analog#my-film-camera-collection">analog</a> section.
</p>
<br />
<h3>the glass</h3>
<p>I don't even know why I have this many.</p>
<ul>
<li>
<strong>AF-S NIKKOR 50mm f/1.8G</strong>
<ul>
<li>
The old reliable. The nifty fifty. Sharp, nimble, and delivers that scrumptious
bokeh.
</li>
</ul>
</li>
<li>
<strong>Rokinon 85mm f/1.4</strong>
<ul>
<li>
Great for portraits. I mean, you can also shoot stuff other than portraits, but
yeah, this is what it's good for. Not as sharp, chromatic aberration is pretty
bad, but hey it absolutely obliterates the background at f/1.4.
</li>
</ul>
</li>
<li>
<strong>Tamron 28-300mm f/3.5-6.3</strong>
<ul>
<li>
Yes, the superzoom with optical stabilization. Jack of all trades, with
deplorable focus breathing. Not much else to really say about this lens, though.
Just great if you only wanna take one lens with you and you have no idea what
you wanna shoot.
</li>
</ul>
</li>
<li>
<strong>Tamron 19-35mm f/3.5-4.5</strong>
<ul>
<li>
So I was originally planning on buying the 14-24mm f/2.8 for $720 at a clearance
sale, but I found this guy instead. Don't get me wrong, $720 for that lens is a
steal, but this full frame Tamron was only $175! $175!! I don't know why this
lens is valued so low because this thing is great. Reasonably sharp, pretty wide
field of view, loud focus motor, and it has a 77mm filter thread! It's no f/2.8
lens, but do you really need a fast lens if you're going wide?
</li>
</ul>
</li>
<li>
<strong>Nikon 50mm f/1.8 Series E</strong>
<ul>
<li>
Another one so I can use it on my FTn. Buttery smooth focus ring, tactile
aperture ring, excellent optics.
</li>
</ul>
</li>
<li>
<strong>Sigma 75-200mm f/3.8 AF</strong>
<ul>
<li>
This one is super weird. Can barely find any information on it online. It
features a push-pull zoom mechanism, clicky aperture ring, and a constant f/3.8
at all focal lengths. Maybe Sigma just wanted to one-up the the world of f/4
zooms. On my lens specifically, one of the spring-loaded contacts is missing
their spring, so it doesn't make full contact on AF bodies like my D810, causing
it to spas out. I just took it out and now it's just a fully manual lens with a
shitty focus ring. Not that I ever really intend to use this for digital
shooting anyway.
</li>
</ul>
</li>
<li>
<strong>Zoom-NIKKOR 43-86mm f/3.5</strong>
<ul>
<li>
Ah yes, the worst lens Nikon has ever made, the lens that severely tainted the
reputation of Nikon glass for a while. So naturally I bought it. Okay, maybe I
clickbaited you a little since I got the version with the higher serial number,
meaning that it was a later, revised model that fixed a lot of the issues the
initial version had. It's overall a very fun lens to use with a satisfying
push-pull zoom, and s m o o t h focus ring. The odd focal length also adds to
its quirkiness.
</li>
</ul>
</li>
</ul>
<hr />
<br />
<h1>that's it for now</h1>
<p>
There's probably a lot more to discuss, but I'll save that for now. More to come in the
future.
</p>
</article>
</main>
</div>
</div>
<footer class="p-5"></footer>
<div id="copyright" title="please don't steal my pictures it's all i have" class="text-center p-3">
©2022 Kevin Zhang
</div>
</body>
</html>