-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·507 lines (473 loc) · 52.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
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
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<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">
<title>PORTFOLIO ILHAN MANZIS</title>
<link rel="stylesheet" href="css/style.css"/>
<!-- Dark Theme start-->
<script>
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
}
else {
document.documentElement.classList.remove('dark')
}
</script>
<!-- Dark Theme end -->
</head>
<body>
<!-- Navbar start -->
<header class="bg-transparent absolute top-0 left-0 w-full flex items-center z-10">
<div class="container">
<div class="flex items-center justify-between relative">
<div class="px-4">
<a href="#home" class="font-bold text-lg text-primary block py-6">ILHAN MANZIS</a>
</div>
<div class="flex px-4">
<button id="hamburger" name="hamburger" tipe="button" class="block right-4 lg:hidden">
<span class="hamburger-line transition duration-300 ease-in-out origin-top-left"></span>
<span class="hamburger-line transition duration-300 ease-in-out"></span>
<span class="hamburger-line transition duration-300 ease-in-out origin-top-left"></span>
</button>
<nav id="nav-menu" class="hidden dark:bg-dark dark:shadow-slate-500 lg:dark:bg-transparent absolute lg:block lg:static py-5 top-full bg-white shadow-lg rounded-lg max-w-[250px] w-full right-4 lg:bg-transparent lg:max-w-full lg:shadow-none lg:rounded-none">
<ul class="block lg:flex">
<li class="group">
<a href="#home" class="text-base flex text-dark py-2 mx-8 group-hover:text-primary dark:text-white">Home</a>
</li>
<li class="group">
<a href="#about" class="text-base flex text-dark py-2 mx-8 group-hover:text-primary dark:text-white">About Me</a>
</li>
<li class="group">
<a href="#project" class="text-base flex text-dark py-2 mx-8 group-hover:text-primary dark:text-white">Project</a>
</li>
<li class="group">
<a href="#sertifikat" class="text-base flex text-dark py-2 mx-8 group-hover:text-primary dark:text-white">Certificate</a>
</li>
<!--
<li class="group">
<a href="#blog" class="text-base flex text-dark py-2 mx-8 group-hover:text-primary dark:text-white">Blog</a>
</li>
-->
<li class="group">
<a href="#contact" class="text-base flex text-dark py-2 mx-8 group-hover:text-primary dark:text-white">Contact</a>
</li>
<li class="flex items-center pl-8 lg:mt-0">
<div class="flex">
<span class="mr-2 text-sm text-slate-500">Light</span>
<input type="checkbox" class="hidden" id="dark-toggle" />
<label for="dark-toggle">
<div class="flex h-5 w-9 cursor-pointer items-center rounded-full bg-slate-500 p-1">
<div class="toggle-circle h-4 w-4 rounded-full bg-white transition duration-300 ease-in-out"></div>
</div>
</label>
<span class="ml-2 text-sm text-slate-500">Dark</span>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Navbar end -->
<!-- profil start -->
<section id="home" class="pt-36 lg:pt-10 dark:bg-dark">
<div class="container" id="home">
<div class="flex flex-wrap">
<div class="w-full self-center px-4 lg:w-1/2">
<h1 class="text-base font-semibold text-primary md:text-xl">Hi everyone, I'm<span class="block font-bold text-dark text-4xl mt-1 lg:text-5xl dark:text-white">Ilhan Manzis</span></h1>
<h2 class="font-medium text-secondary text-lg mb-5 pb-5 lg:text-xl">Informatics Engineering <span class="text-dark dark:text-white">| Web Developer | DevOps</span></h2>
<p class="font-medium text-secondary mb-10 leading-relaxed"><span class="font-bold text-dark"></span></p>
<a href="#contact" class="text-base font-semibold text-white bg-primary py-3 px-8 rounded-full hover:shadow-lg hover:opacity-80 transition duration-300">Contact Me</a>
</div>
<div class="w-full self-end px-4 lg:w-1/2">
<div class="mt-10 ">
<img src="img/ilhan.png" alt="ilhan" class="max-w-full mx-auto"/>
</div>
</div>
</div>
</div>
</section>
<!-- profil end -->
<!-- About start-->
<section id="about" class="pt-36 pb-32 dark:bg-dark">
<div class="container">
<div class="flex flex-wrap" id="about">
<div class="w-full px-4 mb-10 lg:w-1/2">
<h4 class="font-bold uppercase text-primary text-lg mb-3">About Me</h4>
<h2 class="font-bold text-dark text-3xl mb-4 lg:text-4xl max-w-md dark:text-white">Ilhan Manzis</h2>
<p class="font-medium text-base text-secondary text-justify">I am a student at STMIK El Rahma Yogyakarta City, with an Informatics Engineering study program. Since 2022, my main interest has been focused on web development and DevOps practices. With great dedication, I have developed skills in Linux system administration and Docker usage through training from Adinusa. My experience also spans various fields, including network security, IT support, and beginner network administration through courses I took at Digitalent Kominfo. I have also gained basic programming in JavaScript, SQL, and Kotlin through training at Dicoding Indonesia. I am passionate about continuing to learn and contribute in presenting innovative technology solutions.</p>
</div>
<div class="w-full px-4 lg:w-1/2 lg:pl-10">
<h3 class="font-semibold text-dark mb-4 text-2xl lg:text-3xl lg:pt-10 lg:mb-6 dark:text-white">Come Connect With Me</h3>
<p class="font-medium text-base text-secondary mb-6 text-justify">Interested in a closer relationship? Come join me on my journey through the stories and experiences I share on my social media profiles. Let's connect and be a part of this story together!</p>
<div class="flex">
<!-- linkedin -->
<a href="https://www.linkedin.com/in/ilhanmanzis1207" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white dark:text-white">
<svg role="img" class="fill-current" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<!-- Instagram -->
<a href="https://www.instagram.com/janggarfals" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white dark:text-white">
<svg role="img" class="fill-current" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/ilhan.manzis.129" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white dark:text-white">
<svg role="img" class="fill-current" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<!-- Tiktok -->
<a href="https://www.tiktok.com/@tips_komputer" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white dark:text-white">
<svg role="img" class="fill-current" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>TikTok</title><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
</a>
<!-- Youtube -->
<!--
<a href="#" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white dark:text-white">
<svg role="img" viewBox="0 0 24 24" class="fill-current" width="20" xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
</a>
-->
<!-- github -->
<a href="https://github.com/ilhanmanzis" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white dark:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
<path d="M17.791,46.836C18.502,46.53,19,45.823,19,45v-5.4c0-0.197,0.016-0.402,0.041-0.61C19.027,38.994,19.014,38.997,19,39 c0,0-3,0-3.6,0c-1.5,0-2.8-0.6-3.4-1.8c-0.7-1.3-1-3.5-2.8-4.7C8.9,32.3,9.1,32,9.7,32c0.6,0.1,1.9,0.9,2.7,2c0.9,1.1,1.8,2,3.4,2 c2.487,0,3.82-0.125,4.622-0.555C21.356,34.056,22.649,33,24,33v-0.025c-5.668-0.182-9.289-2.066-10.975-4.975 c-3.665,0.042-6.856,0.405-8.677,0.707c-0.058-0.327-0.108-0.656-0.151-0.987c1.797-0.296,4.843-0.647,8.345-0.714 c-0.112-0.276-0.209-0.559-0.291-0.849c-3.511-0.178-6.541-0.039-8.187,0.097c-0.02-0.332-0.047-0.663-0.051-0.999 c1.649-0.135,4.597-0.27,8.018-0.111c-0.079-0.5-0.13-1.011-0.13-1.543c0-1.7,0.6-3.5,1.7-5c-0.5-1.7-1.2-5.3,0.2-6.6 c2.7,0,4.6,1.3,5.5,2.1C21,13.4,22.9,13,25,13s4,0.4,5.6,1.1c0.9-0.8,2.8-2.1,5.5-2.1c1.5,1.4,0.7,5,0.2,6.6c1.1,1.5,1.7,3.2,1.6,5 c0,0.484-0.045,0.951-0.11,1.409c3.499-0.172,6.527-0.034,8.204,0.102c-0.002,0.337-0.033,0.666-0.051,0.999 c-1.671-0.138-4.775-0.28-8.359-0.089c-0.089,0.336-0.197,0.663-0.325,0.98c3.546,0.046,6.665,0.389,8.548,0.689 c-0.043,0.332-0.093,0.661-0.151,0.987c-1.912-0.306-5.171-0.664-8.879-0.682C35.112,30.873,31.557,32.75,26,32.969V33 c2.6,0,5,3.9,5,6.6V45c0,0.823,0.498,1.53,1.209,1.836C41.37,43.804,48,35.164,48,25C48,12.318,37.683,2,25,2S2,12.318,2,25 C2,35.164,8.63,43.804,17.791,46.836z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- About end -->
<!-- Project start -->
<section id="project" class="bg-slate-100 pt-36 pb-16 dark:bg-slate-800">
<div class="container content" id="content" >
<div class="w-full px-4">
<div class="mx-auto mb-16 text-center">
<h4 class="fot-semibold mb-2 text-lg text-primary lg:text-4xl lg:pb-5">Portfolio</h4>
<h2 class="font-bold text-dark text-3xl mb-4 sm:text-4xl lg:text-5xl dark:text-white">Recent Projects</h2>
<p class="font-medium text-md text-secondary md:text-lg"></p>
</div>
</div>
<!-- leanding page -->
<div class="w-full px-4 flex-wrap flex justify-center xl:w-10/12 xl:mx-auto">
<div class="mb-12 p-4 md:w-1/2">
<a href="index.html">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/project/portfolio.png" alt="Portfolio" width="w-full"/>
</div>
<h3 class="font-semibold text-xl hover:text-primary text-dark mt-5 mb-3 dark:text-white">Leanding Page Ilhan Manzis</h3>
</a>
<p class="font-medium text-justify text-base text-secondary dark:text-slate-400 ">I am excited to present the latest step forward in my web development journey. After pursuing courses on static web and web design, I'm proud to have created this portfolio page with an innovative twist. Using the skills I gained from college, I utilized the Tailwind CSS framework to create a modern, responsive, aesthetically pleasing, dark and light themed website. This development process combined my acquired design knowledge with technical skills in designing attractive and functional layouts. Through this portfolio page, I hope to share my creativity and ability to embrace the development of web technology.</p>
</div>
<!-- docker -->
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/project/docker.png" alt="Portfolio" width="w-full"/>
</div>
<h3 class="font-semibold text-xl text-dark mt-5 mb-3 dark:text-white lg:pt-4">Running Mysql and Laravel in Docker Container</h3>
<p class="font-medium text-base text-secondary dark:text-slate-400 text-justify">I am proud to have successfully implemented the Laravel and MySQL development environment into a Docker container using Dockerfile and docker-compose. This step is proof of my progress after completing the Docker Fundamentals training from Adinusa. I am now able to create and manage isolated and replicable development environments with ease, increasing efficiency and consistency in the software development process.</p>
</div>
<!-- uas -->
<div class="mb-12 p-4 md:w-1/2">
<a href="https://github.com/ilhanmanzis/html-semester1-uas" class="hover:text-primary">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/project/uas.png" alt="Portfolio" width="w-full"/>
</div>
<h3 class="font-semibold text-xl text-dark mt-5 mb-3 dark:text-white">Leanding Page Company</h3>
</a>
<p class="font-medium text-base text-secondary dark:text-slate-400 text-justify">I am proud to share my experience with my team, we successfully completed our final course project with our Static Web course. This project involves creating a completely static web-based corporate website. As part of the team, my role includes conceptualizing the design, developing the appearance and user interface, responsive websites, and ensuring visual alignment and consistent functionality. We embrace the challenge of presenting company information and values clearly through the use of modern web technologies, while ensuring a responsive and intuitive user experience. This project not only enhanced my understanding of web development, but also honed my team collaboration, problem solving and time management skills. I am very excited to include this achievement in my portfolio, as a concrete testament to our ability to deliver effective and visual web solutions at the same time.</p>
</div>
<div class="mb-12 p-4 md:w-1/2">
<a href="https://github.com/ilhanmanzis/html-semester1-uts">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/project/uts.png" alt="Portfolio" width="w-full"/>
</div>
<h3 class="font-semibold text-xl text-dark mt-5 mb-3 dark:text-white">Leanding page Tegal City</h3>
</a>
<p class="font-medium text-base text-secondary dark:text-slate-400 text-justify">I am proud to share that my team and I have successfully completed our first task of creating a static website. In this project, we created a website that describes the beauty and uniqueness of a city, namely Tegal. Even though our course has not yet entered the CSS topic, we are trying to make this website look attractive by adding a touch of design using CSS. The result is a website that not only provides information about the city of Tegal, but also provides an interesting visual experience for its visitors. This project not only demonstrates our ability to design informative content, but also creativity in beautifying the appearance using the technology we currently have. I'm excited to continue to grow our skills in website creation and explore more design elements in the future.</p>
</div>
<div class="mb-12 p-4 md:w-1/2">
<a href="https://github.com/ilhanmanzis/c-plus-plus-semester2-uas">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/project/c.png" alt="Portfolio" width="w-full"/>
</div>
<h3 class="font-semibold text-xl text-dark mt-5 mb-3 dark:text-white">C++ Programming Final Project</h3>
</a>
<p class="font-medium text-base text-secondary dark:text-slate-400 text-justify">With pride, I would like to share my experience that I have successfully completed my final project for Structural Programming and Data Structural Programming courses. In this final project, I have succeeded in developing a program that covers various important programming concepts such as Arrays, Structures, Linked Lists, and Stacks with the use of pointers. I also managed to implement a sorting algorithm to sort data efficiently and a searching algorithm to find data accurately. I do all of this using the C++ programming language with the Borland C++ development environment. This project not only demonstrated my understanding of basic concepts in data structures, but also my ability to apply this knowledge to create concrete solutions. I am proud of my work and believe that this project will be a valuable asset in my portfolio, representing my dedication and skills in programming and data analysis.</p>
</div>
</div>
</div>
<!-- button lengkap -->
<div class="items-center text-center">
<button id="see-more-button" onclick="toggleKlik();" class="font-semibold text-white bg-primary p-1 items-center justify-center px-8 rounded-full hover:shadow-lg hover:opacity-80 transition duration-300">Lihat Selengkapnya ▼</button>
</div>
</section>
<!-- project end -->
<!-- sertifikat start -->
<section id="sertifikat" class="pt-36 pb-16 bg-slate-800 dark:bg-slate-300">
<div class="container max-project" id="max-project">
<div class="w-full px-4">
<!-- Adinusa -->
<div class=" mx-auto mb-16 text-center">
<h4 class="fot-semibold mb-2 text-lg text-primary lg:text-4xl lg:pb-5">Certificate</h4>
<h2 id="adinusa" class="font-bold text-white text-3xl mb-4 sm:text-4xl lg:text-5xl dark:text-dark">Adinusa & Btech Academy</h2>
<p class="font-medium text-md text-slate-400 md:text-lg"></p>
</div>
</div>
<div class="w-full px-4 flex-wrap flex justify-center xl:w-10/12 xl:mx-auto">
<!-- Docker -->
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/adinusa/docker.jpg" alt="docker" width="w-full"/>
</div>
<a href="https://sertiva.id/credential/642baff0-b02d-4000-ab78-2be6abfac9d7">
<h3 class="font-semibold text-xl text-white mt-5 mb-3 hover:text-primary dark:text-dark">Docker Fundmental</h3>
</a>
<p class="font-medium text-justify text-base text-slate-400 dark:text-slate-800 ">I have successfully completed the Docker Fundamentals training from Adinusa, where I dived into various important aspects of container management using Docker. During the training, I gained an in-depth understanding of Docker installation in an Ubuntu Linux environment, the ability to efficiently run containers, as well as skills in creating custom images via the Dockerfile. In addition, I also learned to use Docker Compose to manage multi-container applications, and implement Docker Portainer to make container management easier. This training also gave me the opportunity to integrate the Laravel and HAProxy frameworks into the Docker environment, demonstrating my ability to manage a modern and efficient development environment using containerization technologies.</p>
</div>
<!-- Linux -->
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/adinusa/linux.png" alt="linux" width="w-full"/>
</div>
<a href="https://sertiva.id/credential/20c817fa-69c3-4a00-b9f0-63aaa6450f30#verify">
<h3 class="font-semibold text-xl text-white mt-5 mb-3 hover:text-primary dark:text-dark">Linux System Administration</h3>
</a>
<p class="font-medium text-justify text-base text-slate-400 dark:text-slate-800 ">I am proud to have completed the Linux System Administration training at Adinusa. During this training, I dived into various important aspects of Linux system administration, including user management, network configuration, system security, and troubleshooting. Through an in-depth understanding of the Linux environment, I was able to develop skills that will allow me to manage IT infrastructure efficiently and effectively using a variety of relevant tools and techniques. This experience has broadened my horizons in the world of information technology and is ready to take on challenges in ensuring smooth and secure system operations.</p>
</div>
</div>
<!-- dts -->
<div class="w-full px-4">
<div class=" mx-auto mb-16 text-center">
<h2 id="dts" class="font-bold text-white text-3xl mb-4 sm:text-4xl lg:text-5xl dark:text-dark">Digital Talent Scholarship</h2>
<p class="font-medium text-md text-secondary md:text-lg"></p>
</div>
</div>
<div class="w-full px-4 flex-wrap flex justify-center xl:w-10/12 xl:mx-auto">
<!-- Cyber Security -->
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/dts/cyber.jpg" alt="cyber-securty" width="w-full"/>
</div>
<a href="https://www.credly.com/badges/0df61a43-cb2b-4cf1-b4dd-433aeed56ec7">
<h3 class="font-semibold text-xl text-white mt-5 mb-3 hover:text-primary dark:text-dark">Cyber-Security</h3>
</a>
<p class="font-medium text-base text-slate-400 dark:text-slate-800 text-justify">I am proud to announce that I have successfully completed the Cyber Security training organized by Digitalent Kominfo. This training has given me an in-depth understanding of key aspects of cybersecurity, including risk analysis, network security, threat detection, and best practices in protecting systems and data from potential cyberattacks. During the training, I have honed my technical skills and conceptual understanding in this domain, and I am prepared to apply this knowledge to contribute to maintaining the integrity and security of information technology in environments of need. I am very grateful to Digitalent Kominfo for this opportunity and am committed to continuing to develop myself in the field of cyber security in order to create a safer and more secure digital environment.</p>
</div>
<!-- IT Support -->
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/dts/it.jpg" alt="it" />
</div>
<a href="https://www.coursera.org/account/accomplishments/specialization/certificate/YPJLZDY8JRPS">
<h3 class="font-semibold text-xl text-white mt-5 mb-3 hover:text-primary dark:text-dark">IT Support</h3>
</a>
<p class="font-medium text-base text-slate-400 dark:text-slate-800 text-justify">I am proud to have completed the IT Support training from Digitalent Kominfo. Through this program, I have gained a solid understanding of basic concepts in the world of information technology and technical support. During the training, I was actively involved in solving various technical challenges, broadening my knowledge I am passionate about hardware and software troubleshooting, as well as improving communication skills to provide effective solutions to users. I am ready to apply the knowledge and skills I have acquired in a professional environment, and contribute to providing superior technical support to support the company's operational success.</p>
</div>
<!-- Network Security -->
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/dts/ns.jpg" alt="ns" />
</div>
<a href="https://drive.google.com/file/d/1al4ygtdm2RW0-fbkxHWpi6Vnkt-A397w/view">
<h3 class="font-semibold text-xl text-white mt-5 mb-3 hover:text-primary dark:text-dark">Network Security</h3>
</a>
<p class="font-medium text-base text-slate-400 dark:text-slate-800 text-justify">I am proud to have completed the Network Security training organized by Digitalent Kominfo. This training has provided an in-depth understanding of key concepts in network security, including threat identification, infrastructure security, data encryption, and best practices in dealing with today's cyber security challenges. Armed with the knowledge I gained during the training, I am ready to contribute in mitigating network security risks and protecting digital infrastructure from various potential threats. This training has strengthened my knowledge base in the world of network security and is a valuable addition in my career journey into the wider field of information technology and security.</p>
</div>
<!-- Network Essentials -->
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/dts/ne.jpg" alt="ne" />
</div>
<a href="https://drive.google.com/file/d/1af-2bG-AXRUYlUvr3GQ-Rky7J_rWKa-6/view">
<h3 class="font-semibold text-xl text-white mt-5 mb-3 hover:text-primary dark:text-dark">Network Essentials</h3>
</a>
<p class="font-medium text-base text-slate-400 dark:text-slate-800 text-justify">I am proud to announce that I have successfully completed the Network Essentials training organized by Digitalent Kominfo. This training provides an in-depth understanding of essential computer network concepts, including an understanding of network architecture, communication protocols, topology, and network security. During the training, I mastered key skills in managing and optimizing networks, and understood the importance of maintaining data integrity and confidentiality in an ever-evolving network environment. I hope to be able to apply the knowledge I gained from this training in various network technology challenges in the future.</p>
</div>
<!-- JNA -->
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/dts/jna.jpg" alt="jna" />
</div>
<a href="https://drive.google.com/file/d/1af-2bG-AXRUYlUvr3GQ-Rky7J_rWKa-6/view">
<h3 class="font-semibold text-xl text-white mt-5 mb-3 hover:text-primary dark:text-dark">Junior Network Administrator</h3>
</a>
<p class="font-medium text-base text-slate-400 dark:text-slate-800 text-justify">I am proud to have successfully completed the Junior Network Administrator training organized by Digitalent Kominfo. This training has provided an in-depth understanding of computer network concepts, network administration, and the latest technology in the industry. During the training, I was actively involved in various practices related to network configuration, hardware maintenance, and problem solving within the network environment. The new skills I have acquired in managing networks, together with the dedication to continuously learning and developing myself, I will apply them effectively in my work environment, to support the reliability and optimal performance of computer networks. I am very enthusiastic to contribute in the professional world as a qualified and reliable Junior Network Administrator.</p>
</div>
</div>
<!-- dicoding -->
<div class="w-full px-4">
<div class=" mx-auto mb-16 text-center">
<h2 id="dicoding" class="font-bold text-white text-3xl mb-4 sm:text-4xl lg:text-5xl dark:text-dark">Dicoding Academy</h2>
<p class="font-medium text-md text-slate-400 dark:text-slate-800 md:text-lg"></p>
</div>
</div>
<div class="w-full px-4 flex-wrap flex justify-center xl:w-10/12 xl:mx-auto">
<!-- kotlin -->
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/dicoding/kotlin.jpg" alt="docker" width="w-full"/>
</div>
<a href="https://www.dicoding.com/certificates/GRX5D0KGRX0M">
<h3 class="font-semibold text-xl text-white mt-5 mb-3 hover:text-primary dark:text-dark">Start Programming With Kotlin</h3>
</a>
<p class="font-medium text-justify text-base text-slate-400 dark:text-slate-800 ">I am proud to have successfully completed Dicoding Academy's "Getting Started Programming in Kotlin". During this training, I explored basic concepts in software development using the Kotlin programming language. Through a series of structured lessons and hands-on practice, I've gained a solid understanding of Kotlin syntax, using data types, program flow control, and function creation. This new skill will give me a solid foundation in developing modern and innovative applications. I am excited to continue developing my programming skills and apply the knowledge I have gained in future projects.</p>
</div>
<!-- proyek -->
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/dicoding/proyek.jpg" alt="linux" width="w-full"/>
</div>
<a href="https://www.dicoding.com/certificates/98XWG16V9PM3">
<h3 class="font-semibold text-xl text-white mt-5 mb-3 hover:text-primary dark:text-dark">Learn Basic Project Management</h3>
</a>
<p class="font-medium text-justify text-base text-slate-400 dark:text-slate-800 ">I am proud to have completed the "Learn Basics of Project Management" training from Dicoding Academy. Through this course, I have gained an in-depth understanding of the main principles of managing projects effectively. From planning to execution and evaluation, I've learned important techniques for optimizing resources, managing schedules, and communicating effectively with teams and stakeholders. This training not only increased my knowledge in project management, but also equipped me with practical skills that I can apply in various project challenges in the future.</p>
</div>
<!-- sql -->
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/dicoding/sql.jpg" alt="linux" width="w-full"/>
</div>
<a href="https://www.dicoding.com/certificates/QLZ9QWDDDZ5D">
<h3 class="font-semibold text-xl text-white mt-5 mb-3 hover:text-primary dark:text-dark">Learn Basic Structured Query Leangue</h3>
</a>
<p class="font-medium text-justify text-base text-slate-400 dark:text-slate-800 ">I am proud to have completed the "Learn Basic SQL" training from Dicoding. Through this course, I was able to gain an in-depth understanding of this important query language used to manage and manipulate databases. During the training, I learned fundamental concepts such as fetching data with SELECT, data manipulation with UPDATE and DELETE, and database schema management using CREATE, ALTER, and DROP. With practical application through various projects, I now have solid skills in managing information in databases using SQL. This training has given me a solid foundation to continue growing in the field of data analysis and information management.</p>
</div>
<!-- java -->
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="img/dicoding/java.jpg" alt="linux" width="w-full"/>
</div>
<a href="https://www.dicoding.com/certificates/81P23ER6QXOY">
<h3 class="font-semibold text-xl text-white mt-5 mb-3 hover:text-primary dark:text-dark">Learn Basic JavaScript Programming</h3>
</a>
<p class="font-medium text-justify text-base text-slate-400 dark:text-slate-800 ">I am proud to have successfully completed the 'Learn Basics of JavaScript Programming' training from Dicoding. Through this course, I gained a solid understanding of the basic concepts of the JavaScript programming language, including variables, flow control, functions, and DOM manipulation. Interactive practices and the final project included in this training has also given me the opportunity to implement the knowledge I have acquired into real code. I am excited to continue to build on these JavaScript programming skills and apply them in future projects.</p>
</div>
</div>
</div>
<!-- button lengkap -->
<div class="items-center text-center">
<button id="see-more-button2" onclick="toggleKlik();" class="font-semibold text-white bg-primary p-1 items-center justify-center px-8 rounded-full hover:shadow-lg hover:opacity-80 transition duration-300">Lihat Selengkapnya ▼</button>
</div>
</section>
<!-- sertifikat end -->
<!-- Contact start -->
<section id="contact" class="pt-36 pb-32 dark:bg-slate-800">
<div class="container">
<div class="w-full px-4">
<div class="max-w-xl mx-auto text-center mb-16">
<h4 class="font-semibold text-lg text-primary mb-2 ">Contact</h4>
<h2 class="font-bold text-dark text-3xl mb-4 sm:text-4xl lg:text-5xl dark:text-white">Contact Me</h2>
<p class="font-medium text-md text-slate-400 md:text-lg"></p>
</div>
</div>
<form action="https://formspree.io/f/xrgwqgrk" method="POST">
<div class="w-full lg:w-2/3 lg:mx-auto">
<div class="w-full px-4 mb-8">
<label for="name" class="text-base font-bold text-primary">Name</label>
<input type="text" id="name" name="name" class="w-full bg-slate-200 focus:outline-none focus:ring-primary focus:ring-1 focus:border-primary text-dark p-3 rounded-md"/>
</div>
<div class="w-full px-4 mb-8">
<label for="email" class="text-base font-bold text-primary">Email</label>
<input type="email" id="email" name="email" class="w-full bg-slate-200 focus:outline-none focus:ring-primary focus:ring-1 focus:border-primary text-dark p-3 rounded-md"/>
</div>
<div class="w-full px-4 mb-8">
<label for="message" class="text-base font-bold text-primary">Message</label>
<textarea type="message" id="message" name="message" class="w-full h-32 bg-slate-200 focus:outline-none focus:ring-primary focus:ring-1 focus:border-primary text-dark p-3 rounded-md"></textarea>
</div>
<div class="w-full px-4">
<button type="submit" class="text-base font-semibold text-white bg-primary py-3 px-8 rounded-full w-full hover:opacity-80 hover:shadow-lg transition duration-500">Send</button>
</div>
</div>
</form>
</div>
</section>
<!-- contact end -->
<!-- footer start -->
<footer class="bg-dark pt-20 pb-10 md:pl-10 md:pr-10">
<div class="conatainer">
<div class="md:flex md:flex-wrap">
<div class="w-full px-4 mb-12 text-slate-300 font-medium md:w-1/3">
<h2 class="font-bold text-3xl text-white mb-5">Ilhan Manzis</h2>
<h3 class="font-bold text-2xl mb-2">Contact Me</h3>
<p><a href="mailto:[email protected]" class="hover:text-primary">[email protected]</a></p>
<p> <a href="https://wa.me/6281282544112" class="hover:text-primary">+62-8128-2544-112</a></p>
</div>
<div class="w-full px-4 mb-12 md:w-1/3">
<h3 class="font-semibold text-xl text-white mb-5">Category</h3>
<ul class="text-slate-300">
<li>
<a href="#home" class="inline-block text-base hover:text-primary mb-3">Home</a>
</li>
<li>
<a href="#about" class="inline-block text-base hover:text-primary mb-3">About Me</a>
</li>
<li>
<a href="#project" class="inline-block text-base hover:text-primary mb-3">Project</a>
</li>
<li>
<a href="#sertifikat" class="inline-block text-base hover:text-primary mb-3">Certificate</a>
</li>
<li>
<a href="#contact" class="inline-block text-base hover:text-primary mb-3">Contact</a>
</li>
</ul>
</div>
<div class="w-full px-4 mb-12 md:w-1/3">
<h3 class="font-semibold text-xl text-white mb-5">Certificate</h3>
<ul class="text-slate-300">
<li>
<a href="#adinusa" class="inline-block text-base hover:text-primary mb-3">Adinusa & Btech Academy</a>
</li>
<li>
<a href="#dts" class="inline-block text-base hover:text-primary mb-3">Digital Talent Scholarshipe</a>
</li>
<li>
<a href="#dicoding" class="inline-block text-base hover:text-primary mb-3">Dicoding Academy</a>
</li>
</ul>
</div>
<div class="w-full pt-10 border-t items-center justify-center">
<div class="flex text-white items-center justify-center pb-5">
<!-- linkedin -->
<a href="https://www.linkedin.com/in/ilhanmanzis1207/" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" class="fill-current" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<!-- Instagram -->
<a href="https://www.instagram.com/janggarfals/" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" class="fill-current" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/ilhan.manzis.129" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" class="fill-current" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<!-- Tiktok -->
<a href="https://www.tiktok.com/@tips_komputer" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" class="fill-current" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>TikTok</title><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
</a>
<!-- Youtube -->
<!--
<a href="#" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" viewBox="0 0 24 24" class="fill-current" width="20" xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
</a>
-->
<a href="https://github.com/ilhanmanzis" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-primary hover:bg-primary hover:text-white dark:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
<path d="M17.791,46.836C18.502,46.53,19,45.823,19,45v-5.4c0-0.197,0.016-0.402,0.041-0.61C19.027,38.994,19.014,38.997,19,39 c0,0-3,0-3.6,0c-1.5,0-2.8-0.6-3.4-1.8c-0.7-1.3-1-3.5-2.8-4.7C8.9,32.3,9.1,32,9.7,32c0.6,0.1,1.9,0.9,2.7,2c0.9,1.1,1.8,2,3.4,2 c2.487,0,3.82-0.125,4.622-0.555C21.356,34.056,22.649,33,24,33v-0.025c-5.668-0.182-9.289-2.066-10.975-4.975 c-3.665,0.042-6.856,0.405-8.677,0.707c-0.058-0.327-0.108-0.656-0.151-0.987c1.797-0.296,4.843-0.647,8.345-0.714 c-0.112-0.276-0.209-0.559-0.291-0.849c-3.511-0.178-6.541-0.039-8.187,0.097c-0.02-0.332-0.047-0.663-0.051-0.999 c1.649-0.135,4.597-0.27,8.018-0.111c-0.079-0.5-0.13-1.011-0.13-1.543c0-1.7,0.6-3.5,1.7-5c-0.5-1.7-1.2-5.3,0.2-6.6 c2.7,0,4.6,1.3,5.5,2.1C21,13.4,22.9,13,25,13s4,0.4,5.6,1.1c0.9-0.8,2.8-2.1,5.5-2.1c1.5,1.4,0.7,5,0.2,6.6c1.1,1.5,1.7,3.2,1.6,5 c0,0.484-0.045,0.951-0.11,1.409c3.499-0.172,6.527-0.034,8.204,0.102c-0.002,0.337-0.033,0.666-0.051,0.999 c-1.671-0.138-4.775-0.28-8.359-0.089c-0.089,0.336-0.197,0.663-0.325,0.98c3.546,0.046,6.665,0.389,8.548,0.689 c-0.043,0.332-0.093,0.661-0.151,0.987c-1.912-0.306-5.171-0.664-8.879-0.682C35.112,30.873,31.557,32.75,26,32.969V33 c2.6,0,5,3.9,5,6.6V45c0,0.823,0.498,1.53,1.209,1.836C41.37,43.804,48,35.164,48,25C48,12.318,37.683,2,25,2S2,12.318,2,25 C2,35.164,8.63,43.804,17.791,46.836z"></path>
</svg>
</a>
</div>
<p class="font-medium text-md text-slate-500 items-center text-center">©Ilhan Manzis 2023</p>
</div>
</div>
</div>
</footer>
<!-- footer end -->
<!-- Back to top start -->
<a href="#home" class="fixed bottom-4 right-4 z-[9999] h-14 w-14 items-center justify-center hidden rounded-full bg-primary p-4 hover:animate-pulse" id="to-top">
<span class="mt-2 block h-5 w-5 rotate-45 border-t-2 border-l-2"></span>
</a>
<!-- back to top end -->
<script src="js/script.js"></script>
</body>
</html>