-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
460 lines (432 loc) · 41.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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="dist/img/logo.jpg">
<title>Evan-TKJ-2</title>
<link href="dist/output.css" rel="stylesheet"/>
<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>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<div class="overflow-x-hidden">
<!-- Header 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">evankamalludin</a>
</div>
<div class="flex items-center px-4">
<button id="hamburger" name="hamburger" type="button" class="block absolute 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-bottom-left"></span>
</button>
<nav id="nav-menu" class="hidden absolute py-5 bg-white shadow-lg rounded-lg max-w-[250px] w-full right-4 top-full lg:block lg:static lg:bg-transparent lg:max-w-full lg:shadow-none lg:rounded-none dark:bg-dark dark:shadow-slate-500 lg:dark:bg-transparent">
<ul class="block lg:flex">
<li class="group">
<a href="#home" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary dark:text-white">Home</a>
</li>
<li class="group">
<a href="#about" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary dark:text-white">About</a>
</li>
<li class="group">
<a href="#portofolio" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary dark:text-white">Portofolio</a>
</li>
<li class="group">
<a href="#clients" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary dark:text-white">Clients</a>
</li>
<li class="group">
<a href="#blog" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary dark:text-white">Blog</a>
</li>
<li class="group">
<a href="#contact" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary dark:text-white">Contact</a>
</li>
<li class="mt-3 lg:mt-0 flex items-center pl-8">
<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>
<!-- Header End -->
<!-- Hero Section Star -->
<section id="home" class="pt-36 dark:bg-dark">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full self-center px-4 lg:w-1/2" data-aos="fade-right">
<h1 class="text-base font-semibold text-primary md:text-xl" data-aos="fade-right">Halo Semua, Saya <span class="block font-bold text-dark text-4xl mt-1 lg:text-5xl dark:text-white">Evan Kamalludin</span></h1>
<h2 class="font-medium text-slate-500 text-lg mb-5 lg:text-2xl" data-aos="fade-right"><span class="text-dark dark:text-white">Web Developer</span> & Network Engineer</h2>
<p class="font-medium text-secondary mb-10 leading-relaxed" data-aos="fade-right">Siswa Kelas 12 Jurusan Teknik Komputer dan Jaringan <span class="text-dark font-bold dark:text-white">SMK Negeri 1 Nglegok</span></p>
<a href="#" class="text-base font-semibold text-white bg-primary py-3 px-8 rounded-full hover:shadow-lg hover:opacity-80 transition duration-300 ease-in-out" data-aos="fade-right">Contact Me</a>
</div>
<div class="w-full self-end px-4 lg:w-1/2">
<div class="relative mt-10 lg:mt-9 lg:right-0" data-aos="fade-left">
<img src="dist/img/gambar.png" alt="Evan Kamalludin" class="relative z-10 max-w-full mx-auto">
<span class="absolute -bottom-0 left-1/2 -translate-x-1/2 md:scale-125">
<svg width="500" height="500" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#14b8a6" d="M54.2,-16C60.2,0.7,48,25,30.4,36.5C12.8,48,-10.2,46.8,-28.8,34.5C-47.4,22.2,-61.6,-1.2,-56.1,-17.3C-50.6,-33.4,-25.3,-42.1,-0.6,-41.9C24.1,-41.8,48.3,-32.6,54.2,-16Z" transform="translate(100 100) scale(1.2)" />
</svg>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- Hero Section End -->
<!-- About Section Start -->
<section id="about" class="pt-36 pb-32 dark:bg-dark">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full px-4 mb-10 lg:w-1/2" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<h4 class="font-bold uppercase text-primary text-lg mb-3">Tentang Saya</h4>
<h2 class="font-bold text-dark text-3xl mb-5 max-w-md lg:text-4xl dark:text-white">Informasi dan Data Diri</h2>
<p class="font-medium text-base text-secondary max-w-xl lg:text-lg">Halo Saya Evan Kamalludin, saya akrab disapa Evan. Saya lahir di Banjarmasin, 18 November 2004. Alamat rumah saya di Dusun Sukoreno RT/RW 05/01, Desa Sukosewu, Kecamatan Gandusari, Kabupaten Blitar, Jawa Timur.</p>
</div>
<div class="w-full px-4 lg:w-1/2" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<h3 class="font-semibold text-dark text-2xl mb-4 lg:text-3xl lg:pt-10 dark:text-white">Mari Berteman</h3>
<p class="font-medium text-base text-secondary mb-6 lg:text-lg">Berikut ini adalah beberapa social kontak saya. Jika kalian sedang gabut, boleh lah! mampir-mampir dulu!</p>
<div class="flex items-center">
<!-- Linkedin -->
<a href="https://www.linkedin.com/in/evan-kamalludin-7bba55250" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-400 text-slate-400 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" 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/evanoz_04" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-400 text-slate-400 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" 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>
<!-- Youtube -->
<a href="https://www.youtube.com/channel/UCmV8MUd1WT_plKO3_lDABpg" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-400 text-slate-400 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" viewBox="0 0 24 24" 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/Unixevans" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-400 text-slate-400 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
<!-- Twitter -->
<a href="https://twitter.com/EKamalludin" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-400 text-slate-400 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/asdevan.alam" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-400 text-slate-400 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" 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>
</div>
</div>
</div>
</div>
</section>
<!-- About Section End -->
<!-- Portofolio Start -->
<section id="portofolio" class="pt-36 pb-16 bg-slate-100 dark:bg-slate-800">
<div class="container">
<div class="w-full px-4" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="max-w-xl mx-auto text-center mb-16">
<h4 class="font-semibold text-lg uppercase text-primary mb-2">Portofolio</h4>
<h2 class="font-bold text-dark text-3xl mb-4 sm:text-4xl lg:text-5xl dark:text-white">Project Terbaru</h2>
<p class="font-medium text-md text-secondary md:text-lg">Berikut adalah beberapa project terbaru yang telah saya kerjakan dan selesaikan belakangan ini.</p>
</div>
</div>
<div class="w-full px-4 flex flex-wrap justify-center xl:w-10/12 xl:mx-auto">
<div class="mb-12 p-4 md:w-1/2" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="rounded-md shadow-md overflow-hidden">
<img src="dist/img/portofolio/simonel.png" alt="simonel" width="w-full"/>
</div>
<h3 class="font-semibold text-xl text-dark mt-5 mb-3 dark:text-white">Website IoT Sistem Monitoring Panel</h3>
<p class="font-medium text-base text-secondary">Project Website IoT Sistem Monitoring Panel PLTS On Grid System dengan menggunakan PHP MySQL .</p>
</div>
<div class="mb-12 p-4 md:w-1/2" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="rounded-md shadow-md overflow-hidden">
<img src="dist/img/portofolio/apidataets.png" alt="apidataets" width="w-full"/>
</div>
<h3 class="font-semibold text-xl text-dark mt-5 mb-3 dark:text-white">REST SERVER API Dataets POMSI</h3>
<p class="font-medium text-base text-secondary">Project Rest Server API untuk layanan data race balap merpati MyETS POMSI dengan Codeigniter 4.</p>
</div>
<div class="mb-12 p-4 md:w-1/2" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="rounded-md shadow-md overflow-hidden">
<img src="dist/img/portofolio/apidatacontrol.png" alt="apidatacontrol" width="w-full"/>
</div>
<h3 class="font-semibold text-xl text-dark mt-5 mb-3 dark:text-white">REST SERVER API Datacontroller POMSI</h3>
<p class="font-medium text-base text-secondary">Project Rest Server API untuk layanan data controller sistem device balap merpati MyETS POMSI dengan Codeigniter 4.</p>
</div>
<div class="mb-12 p-4 md:w-1/2" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="rounded-md shadow-md overflow-hidden">
<img src="dist/img/portofolio/helmiwrtos.jpg" alt="NAS-STB" width="w-full"/>
</div>
<h3 class="font-semibold text-xl text-dark mt-5 mb-3 dark:text-white">Network Attached Storage (NAS) STB</h3>
<p class="font-medium text-base text-secondary">Project pembuatan dan perancangan perangkat penyimpanan jaringan yang dapat diakses oleh pengguna dimana saja dan kapan saja.</p>
</div>
</div>
</div>
</section>
<!-- Portofolio End -->
<!-- Clients Section Start-->
<section id="clients" class="pt-36 pb-32 bg-slate-800 dark:bg-slate-300">
<div class="container">
<div class="w-full px-4" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="mx-auto text-center mb-16">
<h4 class="font-semibold text-lg uppercase text-primary mb-2">Clients</h4>
<h2 class="font-bold text-white text-3xl mb-4 sm:text-4xl lg:text-5xl dark:text-dark">Yang Pernah Bekerjasama</h2>
<p class="font-medium text-md text-secondary md:text-lg">Berikut adalah beberapa perusahaan yang telah berhasil saya jalin kerjasama.</p>
</div>
</div>
<div class="w-full px-4">
<div class="flex flex-wrap items-center justify-center">
<a href="www.teknolab.biz.id" class="max-w-[140px] mx-4 py-4 grayscale opacity-60 transition duration-500 hover:grayscale-0 hover:opacity-100 lg:mx-6 xl:mx-8" data-aos="fade-right">
<img src="dist/img/clients/teknolab.png" alt="Teknolab">
</a>
<a href="#" class="max-w-[120px] mx-4 py-4 grayscale opacity-60 transition duration-500 hover:grayscale-0 hover:opacity-100 lg:mx-6 xl:mx-8" data-aos="fade-right">
<img src="dist/img/clients/google.png" alt="Google">
</a>
<a href="#" class="max-w-[120px] mx-4 py-4 grayscale opacity-60 transition duration-500 hover:grayscale-0 hover:opacity-100 lg:mx-6 xl:mx-8" data-aos="fade-left">
<img src="dist/img/clients/indoniaga.png" alt="Indoniaga">
</a>
<a href="#" class="max-w-[110px] mx-4 py-4 grayscale opacity-60 transition duration-500 hover:grayscale-0 hover:opacity-100 lg:mx-6 xl:mx-8" data-aos="fade-left">
<img src="dist/img/clients/logotkj.png" alt="TKJ">
</a>
</div>
</div>
</div>
</section>
<!-- Clients Section End -->
<!-- Blog Section Start -->
<section id="blog" class="pt-36 pb-32 bg-slate-100 dark:bg-dark">
<div class="container">
<div class="w-full px-4" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="max-w-xl mx-auto text-center mb-16">
<h4 class="font-semibold text-lg uppercase text-primary mb-2">Blog</h4>
<h2 class="font-bold text-dark text-3xl mb-4 sm:text-4xl lg:text-5xl dark:text-white">Tulisan Terkini</h2>
<p class="font-medium text-md text-secondary md:text-lg">Berikut adalah beberapa Materi dan Pembaruan dari saya, silahkan jika berkenan bisa berkunjung ke blog saya Selengkapnya.</p>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full px-4 lg:w-1/2 xl:w-1/3" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-10 dark:bg-slate-800">
<img src="https://source.unsplash.com/360x200?programming" alt="Programming" class="w-full">
<div class="py-8 px-6">
<h3>
<a href="#" class="block mb-3 font-semibold text-xl text-dark hover:text-primary truncate dark:text-white">Modul Materi Front End HTML CSS Javascript Web Development
</a>
</h3>
<p class="font-medium text-base text-secondary mb-6">Berikut adalah beberapa modul seputar fundamental Web Front End HTML, CSS, dan Javascript.</p>
<a href="#" class="font-medium text-sm text-white bg-primary py-2 px-4 rounded-lg hover:opacity-80">Baca Selengkapnya</a>
</div>
</div>
</div>
<div class="w-full px-4 lg:w-1/2 xl:w-1/3" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-10 dark:bg-slate-800">
<img src="https://source.unsplash.com/360x200?javascript" alt="javascript" class="w-full">
<div class="py-8 px-6">
<h3>
<a href="#" class="block mb-3 font-semibold text-xl text-dark hover:text-primary truncate dark:text-white">Modul Materi Back End PHP MySQL Web Development
</a>
</h3>
<p class="font-medium text-base text-secondary mb-6">Berikut adalah beberapa modul fundamental mengenai Back End Web Development seperti PHP MySQL dan NodeJS.</p>
<a href="#" class="font-medium text-sm text-white bg-primary py-2 px-4 rounded-lg hover:opacity-80">Baca Selengkapnya</a>
</div>
</div>
</div>
<div class="w-full px-4 lg:w-1/2 xl:w-1/3" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-10 dark:bg-slate-800">
<img src="https://source.unsplash.com/360x200?webdeveloper" alt="PHP" class="w-full">
<div class="py-8 px-6">
<h3>
<a href="#" class="block mb-3 font-semibold text-xl text-dark hover:text-primary truncate dark:text-white">Materi Back End REST API Web Development
</a>
</h3>
<p class="font-medium text-base text-secondary mb-6">REST API adalah sebuah interface yang berfungsi agar aplikasi dapat berjalan di berbagai platform pengguna.</p>
<a href="#" class="font-medium text-sm text-white bg-primary py-2 px-4 rounded-lg hover:opacity-80">Baca Selengkapnya</a>
</div>
</div>
</div>
<div class="w-full px-4 lg:w-1/2 xl:w-1/3" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-10 dark:bg-slate-800">
<img src="https://source.unsplash.com/360x200?darkweb" alt="hacking" class="w-full">
<div class="py-8 px-6">
<h3>
<a href="#" class="block mb-3 font-semibold text-xl text-dark hover:text-primary truncate dark:text-white">Materi Vulnerability Website Dan SQL-Injection
</a>
</h3>
<p class="font-medium text-base text-secondary mb-6">Modul materi mengenai celah dan kerentanan sebuah website vulnerability dengan tools SQLMap dan OWASP-ZAP Scanner.</p>
<a href="#" class="font-medium text-sm text-white bg-primary py-2 px-4 rounded-lg hover:opacity-80">Baca Selengkapnya</a>
</div>
</div>
</div>
<div class="w-full px-4 lg:w-1/2 xl:w-1/3" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-10 dark:bg-slate-800">
<img src="https://source.unsplash.com/360x200?network" alt="hacking" class="w-full">
<div class="py-8 px-6">
<h3>
<a href="#" class="block mb-3 font-semibold text-xl text-dark hover:text-primary truncate dark:text-white">Modul Materi Network Fundamental
</a>
</h3>
<p class="font-medium text-base text-secondary mb-6">Modul materi dasar-dasar jaringan yang terdiri dari materi konfigurasi dari beberapa lab MikroTik MTCNA.</p>
<a href="#" class="font-medium text-sm text-white bg-primary py-2 px-4 rounded-lg hover:opacity-80">Baca Selengkapnya</a>
</div>
</div>
</div>
<div class="w-full px-4 lg:w-1/2 xl:w-1/3" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-10 dark:bg-slate-800">
<img src="https://source.unsplash.com/360x200?server" alt="hacking" class="w-full">
<div class="py-8 px-6">
<h3>
<a href="#" class="block mb-3 font-semibold text-xl text-dark hover:text-primary truncate dark:text-white">Modul Materi System Administrator
</a>
</h3>
<p class="font-medium text-base text-secondary mb-6">Modul materi mulai dari Management Interface, SSH Server, Web Server, DNS Server, Control Panel Hosting, Load Balancing (HAProxy).</p>
<a href="#" class="font-medium text-sm text-white bg-primary py-2 px-4 rounded-lg hover:opacity-80">Baca Selengkapnya</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Blog Section End -->
<!-- Contact Section Start -->
<section id="contact" class="pt-36 pb-32 dark:bg-slate-800">
<div class="container">
<div class="w-full px-4" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<div class="max-w-xl mx-auto text-center mb-16">
<h4 class="font-semibold text-lg uppercase 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">Hubungi Kami</h2>
<p class="font-medium text-md text-secondary md:text-lg">Apabila ada kepentingan atau terdapat masalah, bisa langsung hubungi saya melalui formulir dibawah ini.</p>
</div>
</div>
<div class="w-full lg:w-2/3 lg:mx-auto">
<div class="w-full px-4 mb-8" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<form action="" method="POST" />
<label for="name" class="text-base font-bold text-primary">Nama</label>
<input type="text" id="name" name="name" class="w-full bg-slate-200 text-dark p-3 rounded-md focus:outline-none focus:ring-primary focus:ring-1 focus:border-primary">
</div>
<div class="w-full px-4 mb-8" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<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 text-dark p-3 rounded-md focus:outline-none focus:ring-primary focus:ring-1 focus:border-primary">
</div>
<div class="w-full px-4 mb-8" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<label for="message" class="text-base font-bold text-primary">Pesan</label>
<textarea type="text" id="message" name="message" class="w-full bg-slate-200 text-dark p-3 rounded-md focus:outline-none focus:ring-primary focus:ring-1 focus:border-primary h-32"></textarea>
</div>
<div class="w-full px-4" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<button 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">Kirim</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section End -->
<!-- Footer Start -->
<footer class="bg-dark pt-24 pb-12">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full px-4 mb-12 text-slate-300 font-medium md:w-1/3">
<h2 class="font-bold text-4xl text-white mb-5">EVAN</h2>
<h3 class="font-bold text-2xl mb-2">Contact Us</h3>
<p>[email protected]</p>
<p>Dsn. Sukoreno RT 05/RW 01, Sukosewu,</p>
<p>Gandusari, Blitar, Jawa Timur</p>
</div>
<div class="w-full px-4 mb-12 md:w-1/3">
<h3 class="font-semibold text-xl text-white mb-5">Aktivitas Lain</h3>
<ul class="text-slate-300">
<li>
<a href="https://evankamalludin18.blogspot.com" class="inline-block text-base hover:text-primary mb-3">Blogger</a>
</li>
<li>
<a href="#" class="inline-block text-base hover:text-primary mb-3">Daily Works</a>
</li>
<li>
<a href="#" class="inline-block text-base hover:text-primary mb-3">Technology</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">Kategori Tautan</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="#portofolio" class="inline-block text-base hover:text-primary mb-3">Portofolio</a>
</li>
<li>
<a href="#clients" class="inline-block text-base hover:text-primary mb-3">Clients</a>
</li>
<li>
<a href="#blog" class="inline-block text-base hover:text-primary mb-3">Blog</a>
</li>
<li>
<a href="#contact" class="inline-block text-base hover:text-primary mb-3">Contact</a>
</li>
</ul>
</div>
</div>
<div class="w-full pt-10 border-t border-slate-700">
<div class="flex items-center justify-center mb-5">
<!-- Linkedin -->
<a href="https://www.linkedin.com/in/evan-kamalludin-7bba55250" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-400 text-slate-400 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" 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/evanoz_04" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-400 text-slate-400 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" 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>
<!-- Youtube -->
<a href="https://www.youtube.com/channel/UCmV8MUd1WT_plKO3_lDABpg" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-400 text-slate-400 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" viewBox="0 0 24 24" 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/Unixevans" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-400 text-slate-400 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
<!-- Twitter -->
<a href="https://twitter.com/EKamalludin" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-400 text-slate-400 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/asdevan.alam" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-400 text-slate-400 hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" 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>
</div>
<p class="font-medium text-sm text-slate-500 text-center">Copyright 2023 <a href="#" class="font-bold text-primary">Evan-Kamalludin</a> All Right Reserved</p>
</div>
</div>
</footer>
<!-- Footer End -->
<!-- Back to top Start -->
<a href="#home" class="fixed bottom-4 right-4 z-[9999] hidden h-14 w-14 items-center justify-center 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 -->
</div>
<script src="dist/js/script.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
once: true,
});
</script>
</body>
</html>