-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
292 lines (290 loc) · 10.5 KB
/
blog.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>experimental stuff</title>
<link rel="icon" href="./images/me-square.jpg" type="image/x-icon" />
<meta name="description" content="the inner thoughts of the guy who is taking pictures" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/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-2 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 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="about" class="nav-link px-3">about</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"
>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:kevin9019888@gmail.com" 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>not the blog atm...</h1>
<p>
I think for now I'm just gonna put all of my experimental feature of the site right here.
This is mainly just for my use as a developer, but there's nothing stopping you from doing
whatever you want here.
</p>
<hr />
<br />
<!-- Pic and button for TTC -->
<div class="photograph-div">
<button
type="button"
class="photograph-btn"
data-bs-toggle="modal"
data-bs-target="#toronto-streetcar"
class="photograph-btn"
>
<img src="./photographs/smaller/Midnight Dundas-7797-smaller.JPG" class="photograph" />
</button>
<p class="image-specs">85mm, f/3.5, 1/100s, ISO 1100</p>
<p class="story">
Probably my favourite shot out of the bunch. The soft background, the contrast between
the red streetcar and the blue lights, the lines of rain being illuminated by the
headlights, the reflective road from being wet — so much went right for me to get this
picture and I love it.
</p>
</div>
<!-- Modal for TTC shot -->
<div
class="modal fade"
id="toronto-streetcar"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<!-- This is where you put in the extra classes and shit -->
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Midnight Express</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<img
src="./photographs/full-sized/Midnight Dundas-7797.JPG"
class="photograph"
alt="A red streetcar riding on a rainy Toronto night."
/>
</div>
<div class="modal-footer justify-content-start">
<p class="image-specs">85mm, f/3.5, 1/100s, ISO 1100</p>
<p class="story">
Probably my favourite shot out of the bunch. The soft background, the
contrast between the red streetcar and the blue lights, the lines of rain
being illuminated by the headlights, the reflective road from being wet — so
much went right for me to get this picture and I love it.
</p>
</div>
<div class="modal-footer justify-content-end">
<a
class="download-image-a"
href="./photographs/full-sized/Midnight Dundas-7797.JPG"
download
>
<button class="download-image-btn">download</button>
</a>
</div>
</div>
</div>
</div>
<br />
<!-- Pic and button for Icha Tea -->
<div class="photograph-div">
<button
type="button"
class="photograph-btn"
data-bs-toggle="modal"
data-bs-target="#icha-tea-storefront"
class="photograph-btn"
>
<img
src="./photographs/smaller/Meetup Spadina and Grange-1930-smaller.JPG"
class="photograph"
/>
</button>
<p class="image-specs">26mm, f/4, 1/1250s, ISO 500</p>
<p class="story">
Icha Tea. It's a neat little bubble tea shop on Spadina. Their prices are a bit higher
but the interior vibe perfectly reflects the premium. They even have a little space for
you to drink your tea and order desserts in way in the back. Thankfully, I don't think
all the money has been put into the design of the shop; I had their chrysanthemum pu er
tea, and I was pleasantly reminded of the familiar taste of chrysanthemum with just the
right compliment of bitterness. Their signature strawberry matcha is also popular among
guests, but I never got to try it yet.
</p>
</div>
<!-- Modal for Icha Tea shot -->
<div
class="modal fade"
id="icha-tea-storefront"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<!-- This is where you put in the extra classes and shit -->
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">All about tea</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<img
src="./photographs/full-sized/Meetup Spadina and Grange-1930.JPG"
class="photograph"
alt="A red streetcar riding on a rainy Toronto night."
/>
</div>
<div class="modal-footer justify-content-start">
<p class="image-specs">26mm, f/4, 1/1250s, ISO 500</p>
<p class="story">
Icha Tea. It's a neat little bubble tea shop on Spadina. Their prices are a
bit higher but the interior vibe perfectly reflects the premium. They even
have a little space for you to drink your tea and order desserts in way in
the back. Thankfully, I don't think all the money has been put into the
design of the shop; I had their chrysanthemum pu er tea, and I was
pleasantly reminded of the familiar taste of chrysanthemum with just the
right compliment of bitterness. Their signature strawberry matcha is also
popular among guests, but I never got to try it yet.
</p>
</div>
<div class="modal-footer justify-content-end">
<a
class="download-image-a"
href="./photographs/full-sized/Meetup Spadina and Grange-1930.JPG"
download
>
<button class="download-image-btn">download</button>
</a>
</div>
</div>
</div>
</div>
</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>