-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
351 lines (339 loc) · 24.7 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
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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MAgPIE</title>
<meta
content="Just another enthusiastic web developer / photographer who's seeking to achieve greatness in his work. Here is my portfolio showcasing some of the noteworthy work I've done during my time in the industry. Learn a little about me."
name="description">
<meta
content="MAgPIE, photography, web development, novacoax, Hugh, Herschell, Hugh Herschell, Hughherschell, portfolio, hireable"
name="keywords">
<meta name="google-site-verification" content="Rmpgo2TO84BBRjKd8aIhqJ0jRzueHAqodE-15ZoWhbk" />
<!-- Pinterest -->
<meta name="p:domain_verify" content="8aafedd0e575e20fad4cfc60b457b3e9" />
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link href="assets/css/lightbox.css" rel="stylesheet" />
<link href="assets/css/styles.css" rel="stylesheet">
<!-- Favicons -->
<link href="assets/images/favicon.ico" rel="icon">
<link href="assets/images/favicon.ico" rel="apple-touch-icon">
</head>
<body class="body-color text-white font-Lato">
<header
class="w-full md:h-screen bg-black flex flex-col md:flex-row items-center justify-center md:justify-end overflow-hidden">
<div class="max-md:my-32 flex-auto mx-4 sm:ms-10 md:ms-14">
<h1 class="text-4xl sm:text-6xl mb-4 font-Inter rellax" data-rellax-speed="2">MAgPIE</h1>
<p class="text-lg sm:text-2xl font-mono rellax" data-rellax-speed="-1">I'm a <span class="typed"
data-typed-items="Web-Developer, Photographer, Freelancer"></span></p>
</div>
<img loading="lazy" class="rellax rounded-md max-md:w-full md:h-5/6 lg:h-screen pointer-events-none"
src="assets/images/large/MA-069.jpg" alt="image" draggable="false" data-rellax-speed="-2">
</header>
<div class="h-32 md:h-36 lg:h-52 bg-gradient-to-b from-black to-gray-900"></div>
<section class="flex flex-col-reverse md:flex-row w-screen pb-24 lg:pb-40 body-color">
<div class="w-screen md:w-1/3 logo_div flex justify-center">
<img loading="lazy" class="w-[70vw] md:w-[30vw] h-[70vw] md:h-[30vw] logo pointer-events-none"
src="assets/images/MAGPIE logo-white.png" alt="image" draggable="false" data-rellax-speed="2">
</div>
<div class="m-6 flex-grow">
<p class="text-4xl font-Poppins md:text-6xl mb-2 rellax" data-rellax-speed="0.1">Context</p>
<div class="w-auto grid gap-2 md:gap-10 md:grid-cols-2 text-base md:text-lg">
<div class="grid gap-2 md:gap-3">
<p><strong>Name : </strong> <span class="typed_info font-serif" data-typed-item="Hugh Herschell"
data-typed-position="0"></span></li>
<p><strong>Website : </strong><a href="https://novacoax.github.io/magpie/"><span
class="typed_info font-serif text-indigo-600" data-typed-item="This" data-typed-position="1"></span></a>
</li>
<p><strong>Telephone : </strong> <span class="typed_info font-serif" data-typed-item="+254 719 769035"
data-typed-position="2"></span></li>
<p><strong>Residential area : </strong> <span class="typed_info font-serif"
data-typed-item="Kenya | Kikuyu Kenya" data-typed-position="3"></span></li>
</div>
<div class="grid gap-2 md:gap-3">
<p><strong>Age : </strong> <span class="typed_info font-serif" data-typed-item="August 2003 + Datetime.now()"
data-typed-position="4"></span></li>
<p><strong>Degree : </strong> <span class="typed_info font-serif" data-typed-item="null"
data-typed-position="5"></span></li>
<p><strong>Email : </strong> <span class="typed_info font-serif" data-typed-item="[email protected]"
data-typed-position="6"></span></li>
<p><strong>Role : </strong> <span class="typed_info font-serif" data-typed-item="[ photography, programming ]"
data-typed-position="7"></span></li>
</div>
</div>
</div>
</section>
<!-- <div class="w-screen overflow-hidden mb-24 lg:mb-40"> -->
<section class="body-color">
<div class="px-9 flex gap-[3vmin] select-none w-screen overflow-x-scroll scrollbar-hide" id="image-track"
data-mouse-down-at="0" data-prev-percentage="0">
<img class="image rounded-sm" loading="lazy" src="assets/images/thumbnails/MA-020.jpg" />
<img class="image rounded-sm" loading="lazy" src="assets/images/thumbnails/MA-018.jpg" />
<img class="image rounded-sm" loading="lazy" src="assets/images/thumbnails/MA-015.jpg" />
<img class="image rounded-sm" loading="lazy" src="assets/images/thumbnails/MA-026.jpg" />
<img class="image rounded-sm" loading="lazy" src="assets/images/thumbnails/MA-024.jpg" />
<img class="image rounded-sm" loading="lazy" src="assets/images/thumbnails/MA-023.jpg" />
<img class="image rounded-sm" loading="lazy" src="assets/images/thumbnails/MA-031.jpg" />
<img class="image rounded-sm" loading="lazy" src="assets/images/thumbnails/MA-033.jpg" />
</div>
</section>
<section class="socialMedia flex justify-center items-center h-[60vh] md:h-[70vh] body-color">
<ul class="grid md:grid-cols-5 grid-cols-2 sm:grid-cols-3">
<li data-text="Twitter" data-color="#1da1f2">
<a href="https://twitter.com/Nova_coax" class="twitter"><i class="bx bxl-twitter"></i></a>
</li>
<li data-text="Instagram" data-color="#d62976">
<a href="https://www.instagram.com/novacoax/" class="instagram"><i class="bx bxl-instagram"></i></a>
</li>
<li data-text="Pinterest" data-color="#bd081c">
<a href="https://www.pinterest.com/novacoax/" class="pinterest"><i class='bx bxl-pinterest-alt'></i></a>
</li>
<li data-text="Whatsapp" data-color="#25d366">
<a href="https://wa.me/+254719769035" class="whatsapp"> <i class="bx bxl-whatsapp"></i></a>
</li>
<li data-text="Linkedin" data-color="#0077b5">
<a href="https://www.linkedin.com/in/hugh-herschell-45ba33230" class="linkedin"><i
class="bx bxl-linkedin"></i></a>
</li>
</ul>
</section>
<p class="text-center mx-6 rellax text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-Yeseva" data-rellax-speed="-0.4">
See the world through my <br> lens</p>
<section class="h-screen">
<div class="h-1/2 camera-div w-screen ">
<img class="h-[20vw] camera pointer-events-none " src="assets/images/camera.png" alt="camera">
</div>
</section>
<div class="h-[70vh]"></div>
<section class="flex flex-col gap-24 sm:gap-36 w-screen px-2 overflow-clip">
<div class="gala grid grid-cols-12" data-color="#000000">
<div class="images-div box1 col-span-7 sm:col-span-4 lg:col-span-6 ">
<a href="./assets/images/large/MA-084.jpg" data-lightbox="gala1" class="max-sm:mt-16 w-44 ml-4 mb-4 max-sm:w-36 sm:ml-5 lg:w-36 lg:mr-auto">
<img loading="lazy" src="./assets/images/thumbnails/MA-084.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-077.jpg" data-lightbox="gala1" class="w-60 ml-auto mr-auto max-sm:w-44 sm:ml-5 lg:w-96">
<img loading="lazy" src="./assets/images/thumbnails/MA-077.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
</div>
<div class="box2 z-40 col-span-5 sm:col-span-3 lg:col-span-2 m-3 max-sm:text-end flex flex-col max-sm:items-end">
<h1 class="font-Yeseva text-5xl sm:text-6xl md:text-7xl lg:text-9xl">Visage</h1>
<p class="date">27 January 2023</p>
<div class="line"></div>
<div class="text-box leading-5">
<p>
Step into the realm of captivating self-portraiture. Black and white masterpieces depict my face, hair, hand, and the enigmatic allure of my left shoulder. An artful exploration of the human form.
</p>
<p>
Pushing the boundaries of perception, this series invites you to delve into the extraordinary. Transcending conventional self-portraiture, we evoke curiosity and challenge the limits of artistic expression.
</p>
</div>
</div>
<div class="images-div box3 col-span-12 sm:col-span-5 lg:col-span-4 ">
<a href="./assets/images/large/MA-082.jpg" class="ml-auto mb-4 max-sm:ml-5 lg:mr-4" data-lightbox="gala1">
<img loading="lazy" src="./assets/images/thumbnails/MA-082.jpg" alt="image" draggable="false" data-image="MA-082.jpg" class="w-32 max-sm:w-28 lg:w-36">
</a>
<a href="./assets/images/large/MA-067.jpg" data-lightbox="gala1" class="w-60 ml-auto mb-4 mr-auto max-sm:w-44 max-md:w-72 lg:w-80">
<img loading="lazy" src="./assets/images/thumbnails/MA-067.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-081.jpg" data-lightbox="gala1" class="w-44 ml-4 mb-4 max-sm:w-20 max-sm:ml-5 lg:w-36 lg:mr-auto">
<img loading="lazy" src="./assets/images/thumbnails/MA-081.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
</div>
</div>
<div class="gala grid grid-cols-12" data-color="#1a1c19">
<div class="images-div box3 col-span-12 sm:col-span-5 lg:col-span-4 ">
<a href="./assets/images/large/MA-059.jpg" data-lightbox="gala2" class="w-60 ml-auto mb-4 mr-auto max-sm:w-44 max-md:w-72 lg:w-80">
<img loading="lazy" src="./assets/images/thumbnails/MA-059.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-086.jpg" data-lightbox="gala2" class="w-32 ml-auto mb-4 max-sm:w-28 max-sm:ml-5 lg:w-36 lg:mr-4">
<img loading="lazy" src="./assets/images/thumbnails/MA-086.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-085.jpg" data-lightbox="gala2" class="w-44 ml-4 mb-4 max-sm:w-20 max-sm:ml-5 lg:w-36 lg:mr-auto">
<img loading="lazy" src="./assets/images/thumbnails/MA-085.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
</div>
<div class="box2 z-40 col-span-5 sm:col-span-3 lg:col-span-2 m-3 flex flex-col">
<h1 class="font-Yeseva text-5xl sm:text-6xl md:text-7xl lg:text-9xl">Builders</h1>
<p class="date">03 December 2022</p>
<div class="line"></div>
<div class="text-box leading-5">
<p>
Step into the world of construction-inspired artistry, where youth donned overalls and vests for a charitable cause. Captivating images capture the essence of their efforts.
</p>
<p>
This Is Me CBO organized an end-of-year party, raising funds for a children's home while showcasing creativity through construction-themed attire.
</p>
</div>
</div>
<div class="images-div box1 col-span-7 sm:col-span-4 lg:col-span-6 ">
<a href="./assets/images/large/MA-061.jpg" data-lightbox="gala2" class="max-md:mt-20 lg:mt-36 w-44 ml-4 mb-4 max-sm:w-36 sm:ml-5 lg:w-36 lg:mr-auto">
<img loading="lazy" src="./assets/images/thumbnails/MA-061.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-058.jpg" data-lightbox="gala2" class="w-60 ml-auto mb-3 mr-auto max-sm:w-44 lg:w-96">
<img loading="lazy" src="./assets/images/thumbnails/MA-058.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-021.jpg" data-lightbox="gala2" class="w-32 ml-4 mb-4 max-sm:w-20 max-sm:ml-5 lg:w-28 lg:mr-auto">
<img loading="lazy" src="./assets/images/thumbnails/MA-021.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
</div>
</div>
<div class="gala grid grid-cols-12" data-color="#1b1c1b">
<div class="images-div box3 col-span-12 sm:col-span-5 lg:col-span-4 ">
<a href="./assets/images/large/MA-049.jpg" data-lightbox="gala3" class="w-44 ml-4 mb-4 max-sm:w-20 max-sm:ml-5 lg:w-36 lg:mr-auto">
<img loading="lazy" src="./assets/images/thumbnails/MA-049.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-050.jpg" data-lightbox="gala3" class="w-60 ml-auto mb-4 mr-auto max-sm:w-44 max-md:w-72 lg:w-80">
<img loading="lazy" src="./assets/images/thumbnails/MA-050.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-051.jpg" data-lightbox="gala3" class="w-32 ml-auto mb-4 max-sm:w-28 max-sm:ml-5 lg:w-36 lg:mr-4">
<img loading="lazy" src="./assets/images/thumbnails/MA-051.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
</div>
<div class="box2 z-40 col-span-5 sm:col-span-3 lg:col-span-2 m-3 flex flex-col">
<h1 class="font-Yeseva text-5xl sm:text-6xl md:text-7xl lg:text-9xl">Nurture</h1>
<p class="date">19 November 2022</p>
<div class="line"></div>
<div class="text-box leading-5">
<p>
Powerful images capture the essence of a charity event at a primary school.
</p>
<p>
This Is Me CBO orchestrated this impactful event, fostering environmental consciousness and supporting educational needs in the community.
</p>
</div>
</div>
<div class="images-div box1 col-span-7 sm:col-span-4 lg:col-span-6 ">
<a href="./assets/images/large/MA-088.jpg" data-lightbox="gala3" class="max-md:mt-20 md:mt-24 lg:mt-36 w-60 ml-auto mr-5 mb-4 max-sm:w-44 md:w-44">
<img loading="lazy" src="./assets/images/thumbnails/MA-088.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-087.jpg" data-lightbox="gala3" class="w-60 ml-5 max-sm:w-44 lg:w-96">
<img loading="lazy" src="./assets/images/thumbnails/MA-087.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
</div>
</div>
<div class="gala grid grid-cols-12" data-color="#1c1b1c">
<div class="images-div box3 col-span-12 sm:col-span-5 lg:col-span-4 ">
<a href="./assets/images/large/MA-090.jpg" data-lightbox="gala4" class="w-24 ml-auto mb-4 max-sm:w-28 max-sm:ml-5 lg:w-36 lg:mr-4">
<img loading="lazy" src="./assets/images/thumbnails/MA-090.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-089.jpg" data-lightbox="gala4" class="w-52 ml-auto mb-4 mr-auto max-sm:w-44 max-md:w-72 lg:w-64">
<img loading="lazy" src="./assets/images/thumbnails/MA-089.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-091.jpg" data-lightbox="gala4" class="w-44 ml-4 mb-4 max-sm:w-20 max-sm:ml-5 lg:w-36 lg:mr-auto">
<img loading="lazy" src="./assets/images/thumbnails/MA-091.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
</div>
<div class="box2 z-40 col-span-5 sm:col-span-3 lg:col-span-2 m-3 flex flex-col">
<h1 class="font-Yeseva text-5xl sm:text-6xl md:text-7xl lg:text-9xl">Smiles</h1>
<p class="date">19 March 2023</p>
<div class="line"></div>
<div class="text-box leading-5">
<p>
Captivating closeup portraits capture the radiant smiles of This Is Me members, spreading joy during a charity event.
</p>
<p>
Commemorating a heartwarming project, they visited a children's home, generously donating food and toys. This Is Me CBO orchestrated this meaningful event.
</p>
</div>
</div>
<div class="images-div box1 col-span-7 sm:col-span-4 lg:col-span-6 ">
<a href="./assets/images/large/MA-093.jpg" data-lightbox="gala4" class="max-md:mt-16 lg:mt-36 w-40 max-lg:w-28 ml-4 mb-4 max-sm:w-36 sm:ml-5 lg:w-36 lg:mr-auto">
<img loading="lazy" src="./assets/images/thumbnails/MA-093.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-092.jpg" data-lightbox="gala4" class="sm:w-52 ml-auto mr-auto max-sm:w-44 sm:ml-5 lg:w-72">
<img loading="lazy" src="./assets/images/thumbnails/MA-092.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
</div>
</div>
<div class="gala grid grid-cols-12" data-color="#1b1b1d">
<div class="images-div box3 col-span-12 sm:col-span-5 lg:col-span-4">
<a href="./assets/images/large/MA-019.jpg" data-lightbox="gala5" class="w-60 ml-auto mb-4 mr-auto max-sm:w-44 max-md:w-72 lg:w-80">
<img loading="lazy" src="./assets/images/thumbnails/MA-019.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
</div>
<div class="box2 z-40 col-span-5 sm:col-span-3 lg:col-span-2 m-3 flex flex-col">
<h1 class="font-Yeseva text-4xl sm:text-5xl md:text-6xl lg:text-8xl">Enchantment</h1>
<p class="date">03 December 2022</p>
<div class="line"></div>
<div class="text-box leading-5">
<p>
Discover the enchantment of Lord Egertorn castle through captivating images captured during a youth retreat for a church.
</p>
<p>
Unveiling the allure of the castle and its surroundings, these photos embody the spirit of a memorable and transformative experience.
</p>
</div>
</div>
<div class="images-div box1 col-span-7 sm:col-span-4 lg:col-span-6">
<a href="./assets/images/large/MA-030.jpg" data-lightbox="gala5" class="max-md:mt-24 md:mt-28 w-44 ml-4 mb-4 max-sm:w-36 sm:ml-5 lg:w-36 lg:mr-auto">
<img loading="lazy" src="./assets/images/thumbnails/MA-030.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-032.jpg" data-lightbox="gala5" class="w-60 ml-auto mb-3 mr-auto max-sm:w-44 lg:w-96">
<img loading="lazy" src="./assets/images/thumbnails/MA-032.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
<a href="./assets/images/large/MA-021.jpg" data-lightbox="gala5" class="w-32 ml-4 mb-4 max-sm:w-20 max-sm:ml-5 lg:w-28 lg:mr-auto">
<img loading="lazy" src="./assets/images/thumbnails/MA-021.jpg" alt="image" draggable="false" data-image="MA-082.jpg">
</a>
</div>
</div>
</section>
<div class="flex justify-end my-7 mx-9">
<a class="text-xs sm:text-sm underline underline-offset-4 opacity-70" href="./gallery.html">View all <i class='bx bx-chevron-right bx-fade-right'></i></a>
</div>
<p class="text-2xl sm:text-4xl text-center my-12 font-Poppins decoration-double underline underline-offset-8">Accolades</p>
<div class="certs flex flex-col gap-3 m-3">
<div class="flex justify-center gap-2 sm:gap-3 flex-wrap" class="edx">
<a href="https://courses.edx.org/certificates/e6e0f9e8259344768d56d6dc48d892c8"> <img class="w-32 sm:w-60 md:w-96" src="assets/images/certs/edX-1.png" loading="lazy" class="rounded p-1" alt="CS50x: CS50's Introduction to Computer Science"> </a>
<a href="https://courses.edx.org/certificates/ece5eea18dcf466689257460e64a5095"> <img class="w-32 sm:w-60 md:w-96" src="assets/images/certs/edX-2.png" loading="lazy" class="rounded p-1" alt="CS50W: CS50's Web Programming with Python and JavaScript"> </a>
</div>
<div class="flex justify-center gap-2 sm:gap-3 flex-wrap " class="google">
<a href="https://www.cloudskillsboost.google/public_profiles/86fdc12a-f416-4b44-ae39-f3c5ca03aee5/badges/2893096"> <img class="w-28 md:w-56" src="https://cdn.qwiklabs.com/MjBmWJWkQK3w%2FSHVV5Fab0yr9xq2S4aNz7zekxE5g7w%3D"alt="Elastic Google Cloud Infrastructure: Scaling and Automation"> </a>
<a href="https://www.clouaskillsboost.google/public_profiles/86fdc12a-f416-4b44-ae39-f3c5ca03aee5/badges/2863037"> <img class="w-28 md:w-56" src="https://cdn.qwiklabs.com/ztrsj%2BvHYgz%2B%2BFCEqHBbirKffWPkYvF%2BHTgnJfw6MHg%3D"alt="Essential Google Cloud Infrastructure: Core Services"> </a>
<a href="https://www.cloudskillsboost.google/public_profiles/86fdc12a-f416-4b44-ae39-f3c5ca03aee5/badges/2847697"> <img class="w-28 md:w-56" src="https://cdn.qwiklabs.com/Fguu9bRznKkQVnntbiwduaSFpCzmTUVPrNF5T5o2iiU%3D"alt="Essential Google Cloud Infrastructure: Foundation"> </a>
<a href="https://www.cloudskillsboost.google/public_profiles/86fdc12a-f416-4b44-ae39-f3c5ca03aee5/badges/2803529"> <img class="w-28 md:w-56" src="https://cdn.qwiklabs.com/%2Fd5BBONavZMTUIIPzH2DospMU6O7p2r88lLVe3EgkLg%3D"alt="Google Cloud Fundamentals: Core Infrastructure"> </a>
<a href="https://www.cloudskillsboost.google/public_profiles/86fdc12a-f416-4b44-ae39-f3c5ca03aee5/badges/2774608"> <img class="w-28 md:w-56" src="https://cdn.qwiklabs.com/xQt6es4NApxqKgwCq6btEhGa04apc5kW8UHhWfom2Ec%3D"alt="Preparing for Your Associate Cloud Engineer Journey"> </a>
</div>
<div class="flex justify-center gap-2 sm:gap-3 flex-wrap " class="grasshopper">
<a href="https://learndigital.withgoogle.com/digitalgarage/course/grasshopper-learn-to-code"><img src='assets/images/certs/grasshopper-cert-1.jpg' loading="lazy" class="w-24 md:w-52" alt='Grasshopper Animations' ></a>
<a href="https://learndigital.withgoogle.com/digitalgarage/course/grasshopper-learn-to-code"><img src='assets/images/certs/grasshopper-cert-2.jpg' loading="lazy" class="w-24 md:w-52" alt='Grasshopper Animations II' ></a>
<a href="https://learndigital.withgoogle.com/digitalgarage/course/grasshopper-learn-to-code"><img src='assets/images/certs/grasshopper-cert-3.jpg' loading="lazy" class="w-24 md:w-52" alt='Grasshopper Array Methods'"></a>
<a href="https://learndigital.withgoogle.com/digitalgarage/course/grasshopper-learn-to-code"><img src='assets/images/certs/grasshopper-cert-4.jpg' loading="lazy" class="w-24 md:w-52" alt='Grasshopper Automation' ></a>
<a href="https://learndigital.withgoogle.com/digitalgarage/course/grasshopper-learn-to-code"><img src='assets/images/certs/grasshopper-cert-5.jpg' loading="lazy" class="w-24 md:w-52" alt='Grasshopper Debugging Code' ></a>
<a href="https://learndigital.withgoogle.com/digitalgarage/course/grasshopper-learn-to-code"><img src='assets/images/certs/grasshopper-cert-6.jpg' loading="lazy" class="w-24 md:w-52" alt='Grasshopper Fundamentals' ></a>
<a href="https://learndigital.withgoogle.com/digitalgarage/course/grasshopper-learn-to-code"><img src='assets/images/certs/grasshopper-cert-7.jpg' loading="lazy" class="w-24 md:w-52" alt='Grasshopper Fundamentals II' ></a>
<a href="https://learndigital.withgoogle.com/digitalgarage/course/grasshopper-learn-to-code"><img src='assets/images/certs/grasshopper-cert-8.jpg' loading="lazy" class="w-24 md:w-52" alt='Grasshopper Intro into interviewing' ></a>
<a href="https://learndigital.withgoogle.com/digitalgarage/course/grasshopper-learn-to-code"><img src='assets/images/certs/grasshopper-cert-9.jpg' loading="lazy" class="w-24 md:w-52" alt='Grasshopper Intro ino Webpages' ></a>
<a href="https://learndigital.withgoogle.com/digitalgarage/course/grasshopper-learn-to-code"><img src='assets/images/certs/grasshopper-cert-10.jpg' loading="lazy" class="w-24 md:w-52" alt='Grasshopper Using a code Editor' ></a>
</div>
<div class="flex justify-center gap-2 sm:gap-3 flex-wrap " class="typing">
<a href="https://www.ratatype.com/certificates/en/en/4/5/0/5383450.webp?1688836120"><img src='assets/images/certs/typing.webp' loading="lazy" class="w-32 md:w-64" alt='typing certificate' ></a>
</div>
</div>
<div class="h-1/3">
<p class="text-2xl sm:text-4xl text-center my-12 font-Yeseva">谢谢</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.5/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/studio-freight/[email protected]/bundled/lenis.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-engine"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles/tsparticles.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-particles"></script>
<script src="assets/js/typed.js/typed.min.js"></script>
<script src="assets/js/vanilla-tilt.min.js"></script>
<script src="assets/js/rellax.min.js"></script>
<script src="assets/js/lightbox.js"></script>
<script src="assets/js/index.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-6STV1XZBWR"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-6STV1XZBWR');
</script>
</body>
</html>