-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
386 lines (366 loc) · 25.3 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="color-scheme" content="light" />
<meta name="supported-color-schemes" content="light" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<title>Destiny Felix Kiisi - Portfolio</title>
<meta
name="description"
content="A User-Centric Frontend Developer: Crafting Intuitive Experiences"
/>
<meta property="og:title" content="Destiny Felix Kiisi - Portfolio" />
<meta
property="og:description"
content="A User-Centric Frontend Developer: Crafting Intuitive Experiences"
/>
<meta property="og:image" content="https://res.cloudinary.com/destinyfelixkiisi/image/upload/v1719870976/kiisi-pics_3_wqwssj.jpg" />
<meta property="og:url" content="https://kiisi.github.io/hng-internship-stage-one-task" />
<meta property="og:type" content="website" />
<!-- Twitter Card meta tags (optional) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Destiny Felix Kiisi - Portfolio" />
<meta
name="twitter:description"
content="A User-Centric Frontend Developer: Crafting Intuitive Experiences"
/>
<meta name="twitter:image" content="https://res.cloudinary.com/destinyfelixkiisi/image/upload/v1719870976/kiisi-pics_3_wqwssj.jpg" />
<meta name="author" content="Destiny Felix Kiisi" />
<meta
name="keywords"
content="Destiny Felix Kiisi, Frontend Developer, Technology, Techie, Engineer, Reactjs, Nextjs, Software, Software Engineer, HNG, HNG Internship"
/>
<link rel="canonical" href="https://kiisi.github.io/hng-internship-stage-one-task" />
<link rel="icon" href="./favicons/favicon.ico" type="image/x-icon" />
<link
rel="shortcut icon"
href="./favicons/favicon.ico"
type="image/x-icon"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="./favicons/apple-touch-icon.png"
/>
<link rel="manifest" href="./favicons/site.webmanifest" />
<link
href="https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/16ea0da941.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<nav class="navbar box">
<a href="https://hng11.slack.com/team/U07A54721BL" target="_blank">
<i class="fa-brands fa-slack"></i>
</a>
<div>
<h1>Kiisi⚡</h1>
</div>
<a href="https://github.com/kiisi" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
</nav>
<div class="container">
<section class="section__profile box">
<figure>
<img src="./images/kiisi-pics.jpg" data-testid="slackProfilePicture" alt="Destiny Felix Kiisi" />
</figure>
<div class="section__profile--info">
<div>
<h5>Slack Name</h5>
<p data-testid="slackDisplayName">Destiny Felix Kiisi</p>
</div>
<div>
<h5>Current Time in UTC</h5>
<p data-testid="currentTimeUTC" id="currentTimeUTC">...</p>
</div>
<div>
<h5>Current Day of the week</h5>
<p data-testid="currentDay" id="currentDay">...</p>
</div>
<div>
<h5>Slack Email</h5>
<p>
<a data-testid="slackEmail" href="mailto:[email protected]"
>
</p>
</div>
</div>
</section>
</div>
<div class="container">
<section class="section__goals box">
<header>
<h1 class="title">My Tech Goals for the Next 2 Years</h1>
</header>
<article>
<div>
<h2>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 32 32"
>
<title>file_type_typescript_official</title>
<rect
x="2"
y="2"
width="28"
height="28"
rx="1.312"
style="fill: #3178c6"
/>
<path
d="M18.245,23.759v3.068a6.492,6.492,0,0,0,1.764.575,11.56,11.56,0,0,0,2.146.192,9.968,9.968,0,0,0,2.088-.211,5.11,5.11,0,0,0,1.735-.7,3.542,3.542,0,0,0,1.181-1.266,4.469,4.469,0,0,0,.186-3.394,3.409,3.409,0,0,0-.717-1.117,5.236,5.236,0,0,0-1.123-.877,12.027,12.027,0,0,0-1.477-.734q-.6-.249-1.08-.484a5.5,5.5,0,0,1-.813-.479,2.089,2.089,0,0,1-.516-.518,1.091,1.091,0,0,1-.181-.618,1.039,1.039,0,0,1,.162-.571,1.4,1.4,0,0,1,.459-.436,2.439,2.439,0,0,1,.726-.283,4.211,4.211,0,0,1,.956-.1,5.942,5.942,0,0,1,.808.058,6.292,6.292,0,0,1,.856.177,5.994,5.994,0,0,1,.836.3,4.657,4.657,0,0,1,.751.422V13.9a7.509,7.509,0,0,0-1.525-.4,12.426,12.426,0,0,0-1.9-.129,8.767,8.767,0,0,0-2.064.235,5.239,5.239,0,0,0-1.716.733,3.655,3.655,0,0,0-1.171,1.271,3.731,3.731,0,0,0-.431,1.845,3.588,3.588,0,0,0,.789,2.34,6,6,0,0,0,2.395,1.639q.63.26,1.175.509a6.458,6.458,0,0,1,.942.517,2.463,2.463,0,0,1,.626.585,1.2,1.2,0,0,1,.23.719,1.1,1.1,0,0,1-.144.552,1.269,1.269,0,0,1-.435.441,2.381,2.381,0,0,1-.726.292,4.377,4.377,0,0,1-1.018.105,5.773,5.773,0,0,1-1.969-.35A5.874,5.874,0,0,1,18.245,23.759Zm-5.154-7.638h4V13.594H5.938v2.527H9.92V27.375h3.171Z"
style="fill: #ffffff; fill-rule: evenodd"
/>
</svg>
<div>Become Proficient in TypeScript</div>
</h2>
<p>
Dive deeper into advanced topics like generics, decorators and
apply TypeScript in real-world projects, particularly in front-end
frameworks like Nextjs
</p>
</div>
<div>
<h2>
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path fill="none" d="M0 0H24V24H0z" />
<path
fill="white"
d="M12 2c5.523 0 10 4.477 10 10 0 4.13-2.504 7.676-6.077 9.201l-2.518-6.55C14.354 14.148 15 13.15 15 12c0-1.657-1.343-3-3-3s-3 1.343-3 3c0 1.15.647 2.148 1.596 2.652l-2.518 6.55C4.504 19.675 2 16.13 2 12 2 6.477 6.477 2 12 2z"
/>
</g>
</svg>
<div>Contribute to Open Source Projects</div>
</h2>
<p>
Making contributions like bug fixes to open source projects that
align with my interests and skill set on platforms like GitHub and
GitLab.
</p>
</div>
<div>
<h2>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24px"
viewBox="-13 0 282 282"
preserveAspectRatio="xMinYMin meet"
>
<g fill="#8CC84B">
<path
d="M116.504 3.58c6.962-3.985 16.03-4.003 22.986 0 34.995 19.774 70.001 39.517 104.99 59.303 6.581 3.707 10.983 11.031 10.916 18.614v118.968c.049 7.897-4.788 15.396-11.731 19.019-34.88 19.665-69.742 39.354-104.616 59.019-7.106 4.063-16.356 3.75-23.24-.646-10.457-6.062-20.932-12.094-31.39-18.15-2.137-1.274-4.546-2.288-6.055-4.36 1.334-1.798 3.719-2.022 5.657-2.807 4.365-1.388 8.374-3.616 12.384-5.778 1.014-.694 2.252-.428 3.224.193 8.942 5.127 17.805 10.403 26.777 15.481 1.914 1.105 3.852-.362 5.488-1.274 34.228-19.345 68.498-38.617 102.72-57.968 1.268-.61 1.969-1.956 1.866-3.345.024-39.245.006-78.497.012-117.742.145-1.576-.767-3.025-2.192-3.67-34.759-19.575-69.5-39.18-104.253-58.76a3.621 3.621 0 0 0-4.094-.006C91.2 39.257 56.465 58.88 21.712 78.454c-1.42.646-2.373 2.071-2.204 3.653.006 39.245 0 78.497 0 117.748a3.329 3.329 0 0 0 1.89 3.303c9.274 5.259 18.56 10.481 27.84 15.722 5.228 2.814 11.647 4.486 17.407 2.33 5.083-1.823 8.646-7.01 8.549-12.407.048-39.016-.024-78.038.036-117.048-.127-1.732 1.516-3.163 3.2-3 4.456-.03 8.918-.06 13.374.012 1.86-.042 3.14 1.823 2.91 3.568-.018 39.263.048 78.527-.03 117.79.012 10.464-4.287 21.85-13.966 26.97-11.924 6.177-26.662 4.867-38.442-1.056-10.198-5.09-19.93-11.097-29.947-16.55C5.368 215.886.555 208.357.604 200.466V81.497c-.073-7.74 4.504-15.197 11.29-18.85C46.768 42.966 81.636 23.27 116.504 3.58z"
/>
<path
d="M146.928 85.99c15.21-.979 31.493-.58 45.18 6.913 10.597 5.742 16.472 17.793 16.659 29.566-.296 1.588-1.956 2.464-3.472 2.355-4.413-.006-8.827.06-13.24-.03-1.872.072-2.96-1.654-3.195-3.309-1.268-5.633-4.34-11.212-9.642-13.929-8.139-4.075-17.576-3.87-26.451-3.785-6.479.344-13.446.905-18.935 4.715-4.214 2.886-5.494 8.712-3.99 13.404 1.418 3.369 5.307 4.456 8.489 5.458 18.33 4.794 37.754 4.317 55.734 10.626 7.444 2.572 14.726 7.572 17.274 15.366 3.333 10.446 1.872 22.932-5.56 31.318-6.027 6.901-14.805 10.657-23.56 12.697-11.647 2.597-23.734 2.663-35.562 1.51-11.122-1.268-22.696-4.19-31.282-11.768-7.342-6.375-10.928-16.308-10.572-25.895.085-1.619 1.697-2.748 3.248-2.615 4.444-.036 8.888-.048 13.332.006 1.775-.127 3.091 1.407 3.182 3.08.82 5.367 2.837 11 7.517 14.182 9.032 5.827 20.365 5.428 30.707 5.591 8.568-.38 18.186-.495 25.178-6.158 3.689-3.23 4.782-8.634 3.785-13.283-1.08-3.925-5.186-5.754-8.712-6.95-18.095-5.724-37.736-3.647-55.656-10.12-7.275-2.571-14.31-7.432-17.105-14.906-3.9-10.578-2.113-23.662 6.098-31.765 8.006-8.06 19.563-11.164 30.551-12.275z"
/>
</g>
</svg>
<div>Improve My Backend skills - Nodejs</div>
</h2>
<p>
Study system design principles, including microservices
architecture, RESTful APIs and scalability, integrating them with
front-end applications and third-party APIs.
</p>
</div>
<div>
<h2>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24px"
viewBox="0 0 1024 1024"
class="icon"
version="1.1"
>
<path
d="M512.801252 512m-439.086072 0a439.086072 439.086072 0 1 0 878.172144 0 439.086072 439.086072 0 1 0-878.172144 0Z"
fill="#9DE8F7"
/>
<path
d="M528.826291 531.230047zM363.768388 704.300469l33.652582-4.807511 16.025039 30.447574 100.957747-181.082942H456.713615z"
fill="#F2385A"
/>
<path
d="M993.552426 404.632238c0-62.497653-30.447574-113.777778-65.702661-113.777778H624.976526c16.025039 25.640063 25.640063 64.100156 25.640062 112.175274s-9.615023 88.137715-25.640062 113.777778h301.270735c36.85759 0 67.305164-49.677621 67.305165-112.175274z"
fill="#E8E8E8"
/>
<path
d="M556.068858 550.460094l100.957746 179.480438 16.025039-30.447574 35.255086 4.807511-94.547731-153.840375zM576.901408 516.807512c17.627543 0 41.665102-44.87011 41.665102-113.777778s-24.037559-113.777778-41.665102-113.777778h-46.472613c10.800876 13.124507 19.678748 29.261721 26.056714 47.610391 6.858717 19.758873 10.800876 42.065728 10.800876 66.167387 0 12.836056-1.201878 25.239437-3.269108 37.113991-5.416463 31.088576-17.355117 58.106792-33.588482 76.663787H576.901408z"
fill="#F2385A"
/>
<path
d="M163.455399 404.632238c0-62.016901-29.998873-112.928451-64.901408-113.697653-0.272426 0-0.528826-0.080125-0.801252-0.080125-35.255086 0-65.70266 52.882629-65.702661 113.777778 0 54.116557 24.053584 100.541095 54.148607 111.357997 0.320501 0.112175 0.657027 0.1923 0.993553 0.304475 1.698654 0.560876 3.397308 1.057653 5.111987 1.394179 0.689077 0.1282 1.394178 0.176275 2.09928 0.272426 1.121753 0.16025 2.22748 0.400626 3.349234 0.448701 0.272426 0 0.528826-0.0641 0.785227-0.080126a34.848451 34.848451 0 0 0 4.487011-0.416651c0.544851-0.080125 1.073678-0.112175 1.618528-0.208325C136.885884 511.375023 163.455399 461.505102 163.455399 404.632238z"
fill="#E8E8E8"
/>
<path
d="M533.633803 403.029734c0-35.094836-9.598998-66.648138-24.261909-87.576839-0.336526-0.480751-0.705102-0.913427-1.057653-1.378153a88.139718 88.139718 0 0 0-2.708232-3.509484c-10.800876-13.348858-23.845258-21.313302-37.674867-21.313302H160.250391c0.416651 0.512801 0.785227 1.089703 1.185853 1.602504 21.729953 27.194491 35.671737 66.568013 35.671737 112.175274 0 0.272426-0.03205 0.528826-0.03205 0.801252-0.16025 46.152113-14.518685 87.480689-36.82554 112.976526H467.931142c35.255086 0 65.70266-51.280125 65.702661-113.777778z"
fill="#E8E8E8"
/>
<path
d="M926.247261 258.804382H97.752739C43.267606 258.804382 0 322.904538 0 404.632238s43.267606 145.827856 97.752739 145.827856h320.500782L299.668232 749.170579l80.125195-12.820031 32.050078 62.497652 123.392802-222.748044L658.629108 797.245696l32.050078-62.497652 80.125196 12.820031-118.58529-198.710485h274.028169c54.485133 0 97.752739-64.100156 97.752739-145.827856s-41.665102-144.225352-97.752739-144.225352zM104.659531 517.704914c-0.528826 0.112175-1.073678 0.1282-1.618529 0.208325a35.114867 35.114867 0 0 1-4.487011 0.416651c-0.272426 0-0.528826 0.080125-0.785227 0.080126-1.121753-0.048075-2.22748-0.288451-3.349233-0.448701-0.705102-0.09615-1.394178-0.144225-2.099281-0.272426a40.893897 40.893897 0 0 1-5.111987-1.394179c-0.336526-0.112175-0.657027-0.1923-0.993553-0.304475C56.103662 505.173333 32.050078 458.748795 32.050078 404.632238c0-60.895149 30.447574-113.777778 65.702661-113.777778 0.272426 0 0.528826 0.0641 0.801252 0.080125 34.902535 0.769202 64.901408 51.680751 64.901408 113.697653 0 56.872864-26.569515 106.742786-58.795868 113.072676zM161.436244 516.807512H160.250391c22.306854-25.495837 36.66529-66.824413 36.82554-112.976526 0-0.272426 0.03205-0.528826 0.03205-0.801252 0-45.607261-13.941784-84.980782-35.671737-112.175274-0.416651-0.512801-0.769202-1.089703-1.185853-1.602504h307.680751c13.829609 0 26.873991 7.964444 37.674867 21.313302 0.913427 1.137778 1.826854 2.291581 2.708232 3.509484 0.352551 0.480751 0.721127 0.897402 1.057653 1.378153 14.662911 20.928701 24.261909 52.482003 24.261909 87.576839 0 62.497653-30.447574 113.777778-65.702661 113.777778H161.436244zM413.446009 729.940532l-16.025039-30.447574-33.652582 4.807511L456.713615 548.85759h57.690141l-100.957747 181.082942zM534.57928 516.807512H530.428795c16.233365-18.556995 28.188044-45.575211 33.588482-76.663787 2.06723-11.858529 3.269108-24.277934 3.269108-37.113991 0-24.101659-3.94216-46.408513-10.800876-66.167387-6.377966-18.34867-15.255837-34.501909-26.056714-47.610391H576.901408c17.627543 0 41.665102 44.87011 41.665102 113.777778S594.528951 516.807512 576.901408 516.807512h-42.322128z m173.727449 187.492957l-35.255086-4.807511-16.025039 30.447574-100.957746-179.480438h57.69014l94.547731 153.840375zM926.247261 516.807512H624.976526c16.025039-25.640063 25.640063-65.70266 25.640062-113.777778s-9.615023-86.535211-25.640062-112.175274h302.873239c35.255086 0 65.70266 51.280125 65.702661 113.777778s-30.447574 112.175274-67.305165 112.175274z"
fill=""
/>
</svg>
<div>A Certified Frontend Engineer (React/Next.js)</div>
</h2>
<p>
To become a certified Frontend Engineer specializing in React and
Next.js, showcasing expertise in building and optimizing modern
web applications.
</p>
</div>
<div>
<h2>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24px"
viewBox="0 -3.33 70 70"
>
<path
d="m 46.96875,0 c -0.167848,-0.00649492 -0.280916,-0.00583375 -0.3125,0.03125 -0.04887,0.05739 -0.78732,2.32098 -1.625,5 -0.83768,2.67901 -2.91144,9.30492 -4.625,14.75 -1.71356,5.44507 -3.07745,10.00451 -3.03125,10.125 0.07278,0.18967 0.43841,0.21875 2.625,0.21875 2.05449,0 2.5514,0.05476 2.6875,0.21875 0.13642,0.16438 -0.24548,1.19973 -2.0625,5.59375 -1.2258,2.96432 -2.36008,5.64173 -2.5,5.96875 -0.13994,0.32703 -0.16975,0.5878 -0.09375,0.5625 0.24055,-0.08019 15.34375,-17.30636 15.34375,-17.5 0,-0.14981 -0.61289,-0.1875 -3.21875,-0.1875 -2.01451,0 -3.22765,-0.0383 -3.28125,-0.125 -0.04704,-0.07611 0.38644,-0.99425 0.96875,-2.03125 0.5823,-1.037 1.97796,-3.55619 3.125,-5.59375 C 55.90762,8.25799 58.21205,4.18036 58.28125,4 58.36249,3.78828 56.15801,2.60246 54.25,1.84375 52.294603,1.0661988 48.143688,0.04546445 46.96875,0 z m -8.3125,3.40625 -0.5,0.0625 C 37.5773,3.55833 34.57215,4.37355 34,4.59375 L 33.59375,4.75 l 0.0625,3.03125 0.03125,3.03125 -0.40625,0.21875 c -0.22321,0.11226 -0.83036,0.44998 -1.34375,0.75 L 31,12.3125 28.5,10.84375 C 27.12676,10.03333 25.96505,9.3438 25.90625,9.3125 c -0.15416,-0.08196 -1.82728,1.42311 -2.875,2.59375 l -0.90625,1 1.5625,2.59375 1.5625,2.59375 -0.34375,0.5625 c -0.18865,0.30755 -0.55213,0.93074 -0.78125,1.375 l -0.40625,0.8125 -3,-0.0625 -3.03125,-0.0625 -0.28125,0.6875 c -0.25338,0.66383 -0.82679,2.92512 -1,3.90625 l -0.09375,0.5 2.625,1.4375 2.625,1.4375 0,1.59375 0,1.5625 -2.625,1.4375 -2.625,1.4375 0.09375,0.5 c 0.14192,0.80383 0.7237,3.04347 1,3.84375 l 0.25,0.75 L 20.6875,39.75 23.71875,39.6875 24.125,40.5 c 0.22912,0.44425 0.5926,1.06746 0.78125,1.375 l 0.34375,0.5625 -1.5625,2.59375 -1.5625,2.59375 1.09375,1.1875 c 0.99051,1.08375 2.45483,2.4375 2.625,2.4375 0.03625,0 1.22035,-0.66666 2.625,-1.5 l 2.5625,-1.53125 0.90625,0.5625 c 0.50915,0.29749 1.12055,0.63775 1.34375,0.75 L 33.6875,49.71875 33.65625,52.75 33.59375,55.78125 34,55.9375 c 0.60976,0.2334 2.61074,0.78778 3.59375,1 0.49053,0.10587 0.92765,0.21275 0.96875,0.21875 0.04111,0.006 0.74021,-1.14752 1.53125,-2.5625 L 41.53125,52 l 1.625,0 1.625,0 1.40625,2.5625 1.40625,2.53125 0.46875,-0.0625 c 0.53053,-0.05397 3.22395,-0.71377 4.03125,-1 l 0.53125,-0.21875 0,-3.03125 0,-3.0625 0.40625,-0.1875 c 0.22639,-0.11431 0.83347,-0.45183 1.34375,-0.75 l 0.9375,-0.5625 2.53125,1.53125 c 1.38784,0.83402 2.56815,1.5 2.65625,1.5 0.2184,0 3.59375,-3.40216 3.59375,-3.625 0,-0.09787 -0.67346,-1.31045 -1.5,-2.6875 l -1.5,-2.5 0.34375,-0.5625 c 0.18865,-0.30755 0.52088,-0.93075 0.75,-1.375 l 0.40625,-0.8125 3.03125,0.0625 3.03125,0.0625 0.25,-0.75 c 0.2783,-0.80607 0.8617,-3.05014 1,-3.84375 l 0.09375,-0.5 -2.625,-1.4375 -2.59375,-1.4375 0,-1.5625 0,-1.59375 L 67.375,27.25 c 1.43384,-0.78943 2.62568,-1.4856 2.625,-1.5625 -0.003,-0.33931 -0.69932,-3.12762 -1,-4 l -0.34375,-0.96875 -3.03125,0.0625 -3.03125,0.0625 -0.40625,-0.8125 c -0.22918,-0.44438 -0.56134,-1.06745 -0.75,-1.375 L 61.09375,18.09375 62.625,15.5 64.1875,12.90625 63.09375,11.71875 C 61.9044,10.41744 60.57934,9.2394 60.40625,9.3125 60.34702,9.33753 59.65353,9.70346 58.875,10.15625 L 57.46875,11 l -2.03125,3 -2.03125,3 1.3125,1.3125 c 2.73018,2.70785 4.37204,5.87062 4.90625,9.5 0.24995,1.69815 0.25512,2.61107 0.0625,4.3125 -0.82639,7.29981 -6.28447,13.15063 -13.5625,14.53125 -1.44465,0.27408 -4.40648,0.26699 -5.9375,0 C 35.40303,45.82191 30.99633,42.6712 28.59375,38.375 26.35601,34.37354 25.8927,29.37233 27.34375,25 c 1.40443,-4.23183 4.47535,-7.73448 8.53125,-9.6875 1.30046,-0.62621 3.52494,-1.375 4.09375,-1.375 0.34741,0 0.41438,-0.22368 1.0625,-2.9375 L 41.59375,8.6875 40.125,6.03125 38.65625,3.40625 z M 10.09375,40.5 l -0.5,1.5625 -0.5,1.5625 L 8.1875,44 7.28125,44.375 5.84375,43.71875 C 5.05433,43.34638 4.3749,43.03125 4.3125,43.03125 c -0.06236,0 -0.51165,0.41217 -1,0.90625 l -0.90625,0.875 0.71875,1.40625 c 0.39853,0.76996 0.72075,1.481 0.71875,1.5625 -0.00233,0.08152 -0.13326,0.49693 -0.3125,0.9375 L 3.1875,49.53125 1.625,50.09375 0.0625,50.65625 0.03125,51.96875 0,53.25 l 1.59375,0.53125 1.5625,0.5 0.28125,0.65625 c 0.48935,1.1004 0.47601,1.20669 -0.28125,2.75 l -0.6875,1.4375 0.90625,0.9375 0.9375,0.90625 1.53125,-0.75 1.5,-0.75 0.90625,0.40625 0.875,0.40625 0.53125,1.53125 0.53125,1.53125 1.34375,0 1.3125,0 0.46875,-1.5625 0.5,-1.53125 0.875,-0.375 0.90625,-0.40625 1.5625,0.71875 1.53125,0.71875 L 19.59375,60 20.5,59.09375 l -0.71875,-1.5 -0.75,-1.5 0.3125,-0.84375 c 0.17145,-0.45845 0.38275,-0.8723 0.46875,-0.9375 0.086,-0.06521 0.81112,-0.37039 1.625,-0.65625 l 1.5,-0.5 -0.03125,-1.3125 -0.0625,-1.3125 -1.53125,-0.5 -1.5625,-0.5 -0.34375,-0.8125 c -0.18137,-0.44674 -0.3125,-0.87625 -0.3125,-0.96875 0,-0.09255 0.2868,-0.80256 0.65625,-1.59375 l 0.6875,-1.4375 -0.9375,-0.9375 -0.9375,-0.9375 -1.46875,0.78125 -1.4375,0.75 L 14.75,44 13.84375,43.65625 13.28125,42.0625 12.6875,40.5 l -1.28125,0 -1.3125,0 z m 1.375,7.84375 c 3.3321,0.0018 4.87755,4.02808 2.40625,6.25 -0.36542,0.32854 -0.91931,0.6603 -1.21875,0.75 -1.97529,0.59181 -4.07172,-0.44939 -4.625,-2.3125 -0.28333,-0.95412 -0.27092,-1.48386 0.0625,-2.375 0.53983,-1.44284 1.83425,-2.31332 3.375,-2.3125 z"
transform="translate(-223.704 -357.106) translate(223.704 357.106)"
fill="#00bcf2"
/>
</svg>
<div>Advanced Tooling and Automation</div>
</h2>
<p>
To become a certified Frontend Engineer specializing in React and
Next.js, showcasing expertise in building and optimizing modern
web applications.
</p>
</div>
<div>
<h2>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 1024 1024"
class="icon"
version="1.1"
>
<path
d="M67 709.3l470 212 420-210-494.4-166.6z"
fill="#3ED6FF"
/>
<path d="M431.8 809.3l-230-99v-561l230 60z" fill="#37BBEF" />
<path d="M431.8 809.3l220-100v-551l-220 51z" fill="#2481BA" />
<path
d="M201.8 149.3l230 60 220-51-234.4-55.6z"
fill="#3ED6FF"
/>
<path
d="M201.8 254.2l230 70.5v-20.9l-230-70.5zM431.8 423.7l-230-77.6v21.1l230 77.6zM431.8 660.2l-230-84.7v21.3l230 84.7zM431.8 541.6l-230-80.4v21.2l230 80.4z"
fill="#FFFFFF"
/>
<path
d="M651.8 571.9l-219.9 88.3v21.3l219.9-88.7zM431.9 541.6v21.2l219.9-81.2v-21.1zM431.9 423.7v21.1l219.9-73.5v-21.1zM431.9 303.8v20.9l219.9-64.5v-21.3z"
fill="#63AED3"
/>
<path d="M675.5 817.2l-140-55v-311l140 6z" fill="#37BBEF" />
<path d="M675.4 817.2l120-58v-314l-120 39z" fill="#2481BA" />
<path
d="M535.5 451.2l139.9 41 120-47L651 411.6z"
fill="#3ED6FF"
/>
<path
d="M630 605.8l-60-18.2v-21.1l60 18.2v21.1z m-60-76.6l60 17.9v-20.9l-60-17.9v20.9z m60 170.7l-60-21.5v21.3l60 21.5v-21.3z m0-57.8l-60-20v21.2l60 20v-21.2z"
fill="#FFFFFF"
/>
</svg>
<div>System and Architectural Design</div>
</h2>
<p>
Design scalable and maintainable frontend architectures by
exploring and implementing microfrontends to enhance scalability
and team collaboration.
</p>
</div>
</article>
</section>
</div>
<footer class="container">
<div class="box">
<header>
<h3>HNG reference links 🔥</h3>
</header>
<div class="footer__links">
<a
href="https://hng.tech/learn"
target="_blank"
data-testid="hngLink"
>
hng.tech/learn
</a>
<a
href="https://keyword.dog"
target="_blank"
data-testid="keywordLink"
>
keyword.dog
</a>
<a
href="https://scrapeanyweb.site"
target="_blank"
data-testid="scrapeanywebLink"
>
scrapeanyweb.site
</a>
</div>
</div>
</footer>
<script>
document.addEventListener("DOMContentLoaded", function () {
function updateUTCTime() {
const now = new Date();
const utcTime = now.toUTCString();
document.getElementById("currentTimeUTC").textContent = utcTime;
}
// Update the time every second
setInterval(updateUTCTime, 1000);
// Set the initial time
updateUTCTime();
function updateWeekday() {
const now = new Date();
const weekdays = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
const currentWeekday = weekdays[now.getUTCDay()];
document.getElementById("currentDay").textContent = currentWeekday;
}
// Set the initial weekday
updateWeekday();
});
</script>
</body>
</html>