-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
711 lines (668 loc) · 49.1 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
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio Saya</title>
<!-- Tambahkan link ke CDN Tailwind CSS -->
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> -->
<!-- My Css -->
<link rel="stylesheet" href="src/input.css">
<!-- Tailwind Css -->
<link href="/dist/output.css" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/66335ad124.js" crossorigin="anonymous"></script>
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Poppins&display=swap"
rel="stylesheet">
<!-- ANIMATE ON SCROLL -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body class="bg-gray-100 font-sans no-scrollbar">
<style>
html {
scroll-behavior: smooth;
}
</style>
<!-- Navbar -->
<nav id="navbar"
class="bg-bgbase shadow-md opacity-0 py-2 fixed top-0 w-full transition-all duration-1000 ease-in-out z-50">
<div class="container mx-auto">
<div class="flex justify-between items-center">
<!-- logo -->
<div class="flex items-center">
<img src="dist/img/logocilik.png" alt="Logo" class="h-8 w-8">
</div>
<!-- nama -->
<span class="ml-2 text-xl font-bold font-montserrat text-primary">Maghdzany</span>
<!-- dark mode dan menu -->
<div class="flex justify-between">
<button id="darkModeToggle"
class="bg-card2 hover:bg-card1 active:bg-bgdark w-10 h-10 rounded-md">
<i class="fa-solid fa-moon" style="color: white;"></i>
</button>
<button id="menuToggle"
class="w-10 h-10 ml-2 rounded-md bg-card2 hover:bg-card1 active:bg-bgdark">
<i class="fa-solid fa-bars" style="color: white;"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Sidebar Dimming Overlay -->
<div id="sidebarDimming"
class="opacity-100 hidden bg-black bg-opacity-50 fixed top-0 left-0 w-full h-full z-50 transition-opacity duration-300 ease-in-out">
</div>
<!-- Sidebar -->
<div id="sidebar"
class="rounded-l-lg bg-gradient-to-br from-bgbase to-bgdark h-screen w-64 fixed top-0 right-0 overflow-y-auto transition-all duration-300 transform translate-x-full z-50">
<div class="px-4 py-2">
<!-- Close Button -->
<div class="text-right flex justify-between">
<a href="#home">
<button id="darkModeToggle"
class="w-10 h-10 rounded-md bg-card2 hover:bg-card1 active:bg-bgdark">
<i class="fa-solid fa-house" style="color: white;"></i>
</button>
</a>
<a href="#download">
<button id="darkModeToggle"
class="w-10 h-10 rounded-md bg-card2 hover:bg-card1 active:bg-bgdark">
<i class="fa-solid fa-download" style="color: white;"></i>
</button>
</a>
<a href="#about">
<button id="darkModeToggle"
class="w-10 h-10 rounded-md bg-card2 hover:bg-card1 active:bg-bgdark">
<i class="fa-solid fa-user" style="color: white;"></i>
</button>
</a>
<a href="dark">
<button id="darkModeToggle"
class="w-10 h-10 rounded-md bg-card2 hover:bg-card1 active:bg-bgdark">
<i class="fa-solid fa-moon" style="color: white;"></i>
</button>
</a>
<button id="closeSidebar"
class="w-10 h-10 rounded-md bg-card2 hover:bg-card1 active:bg-bgdark">
<i class="fa-solid fa-circle-xmark" style="color: white;"></i>
</button>
</div>
<!-- Logo in Sidebar -->
<div class="flex justify-center mt-12">
<img src="dist/img/sandemo.png" alt="Logo" class="h-24 w-24">
</div>
<h1 class="text-3xl block font-poppins font-extrabold text-center text-primary">Maghdzany Fikri Burhanudin
</h1>
<!-- Menu Items in Sidebar -->
<div class="mt-6">
<a href="#home" class=" block sidebar-link">
<div class="flex items-center space-x-2" data-aos="fade-left">
<i class="fa-solid fa-house" style="color: white;"></i>
<span class="ml-2 text-base text-primary font-bold font-poppins">Home</span>
</div>
<div class="h-1 bg-primary mt-1 transition-transform transform scale-x-0 group-hover:scale-x-100"></div>
</a>
<a href="#about" class="mb-2 block sidebar-link">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-address-card" style="color: white;"></i>
<span class="ml-2 text-base text-primary font-bold font-poppins">About Me</span>
</div>
</a>
<a href="#skills" class="mb-2 block sidebar-link">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-pen-ruler" style="color: white;"></i>
<span class="ml-2 text-base text-primary font-bold font-poppins">Skills</span>
</div>
</a>
<a href="#gallery" class="mb-2 block sidebar-link">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-image" style="color: white;"></i>
<span class="ml-2 text-base text-primary font-bold font-poppins">Portfolio</span>
</div>
</a>
<a href="#review" class="mb-2 block sidebar-link">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-comments" style="color: white;"></i>
<span class="ml-2 text-base text-primary font-bold font-poppins">Review</span>
</div>
</a>
<a href="#education" class="mb-2 block sidebar-link">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-user-graduate" style="color: #ffffff;"></i>
<span class="ml-2 text-base text-primary font-bold font-poppins">Education</span>
</div>
</a>
<a href="#social" class="mb-2 block sidebar-link">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-users" style="color: white;"></i>
<span class="ml-2 text-base text-primary font-bold font-poppins">Social Media</span>
</div>
</a>
<a href="#contact" class="mb-2 block sidebar-link">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-address-book" style="color: white;"></i>
<span class="ml-2 text-base text-primary font-bold font-poppins">Contact</span>
</div>
</a>
</div>
</div>
</div>
<!-- Sticky Footer -->
<!-- Hero Section -->
<section id="home" class="bg-bgdark py-20 home">
<div class="container mx-auto mt-10">
<div class="flex flex-wrap">
<!-- BAGIAN PERTAMA KIRI -->
<div class="w-full self-center px-4 md:w-full lg:w-1/2 xl:w-1/2 relative">
<img src="dist/img/monster.png" alt="Sandhika Galih"
class="opacity-30 max-w-full max-h-full right-0 ml-auto mb-5 absolute top-0 left-0 w-auto h-auto z-10">
<h1 class="text-base font-semibold font-poppins text-biru md:text-xl re">
<span class="hello relative">Hello 👋, I'm </span>
<span
class="mt-1 block text-4xl font-bold font-montserrat text-primary dark:text-primary lg:text-5xl relative z-20 maghdzany">Maghdzany</span>
<span
class="mt-1 block text-4xl font-bold font-montserrat text-primary dark:text-primary lg:text-5xl relative z-20 fikri">Fikri</span>
</h1>
<h2 class="mb-5 text-lg font-medium font-poppins text-biru lg:text-2xl relative z-20 tagline">3D
Artist & <span class="text-primary font-poppins dark:text-white">Environment Designer</span>
</h2>
<p
class="mb-10 font-medium font-poppins leading-relaxed text-secondary relative z-20 taglinedetail">
<span class="font-bold font-poppins"> "Transforming <span class="font-poppins text-biru">
Visions</span> into <span class="text-biru font-poppins">3D Realities</span>:</span>
<span class="block font-poppins">Crafting Immersive Worlds, One Pixel at a Time"</span></p>
<!-- <a href="#" class="rounded-full bg-gradient-to-t from-aksen1 to-aksen2 py-2 px-5 text-base font-semibold text-white transition duration-300 ease-in-out hover:opacity-80 hover:shadow-lg relative z-20 tombolcv">Download CV</a> -->
<a href=""
class="tombolcv font-poppins text-primary rounded-full bg-gradient-to-t from-aksen1 to-aksen2 py-2 px-5 text-base font-semibold relative z-20">Download
CV</a>
</div>
<!-- BAGIAN KEDUA KANAN -->
<div id="about" class="w-full self-top px-4 pt-44 lg:py-0 md:w-full lg:w-1/2 xl:w-1/2 relative">
<h4 class="mb-3 text-base font-bold uppercase text-biru font-poppins" data-aos="fade-right" data-aos-offset="200">About Me
</h4>
<h2 class="mb-5 max-w-md text-3xl font-bold text-primary dark:text-white lg:text-4xl font-montserrat"
data-aos="fade-right" data-aos-delay="100">I'm a 3D Artist based in Malang</h2>
<p class="max-w-xl text-base font-medium text-secondary lg:text-lg font-poppins" data-aos="zoom-in"
data-aos-delay="150">I am a Junior 3D Artist and Environment Designer with a passion for
crafting mesmerizing visual worlds. I am delighted to have the chance to share my work with you
and explore the various projects I've been involved in</p>
</div>
<!-- ============================= -->
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="py-16 bg-gradient-to-b from-bgdark to-bgbase">
<div class="container mx-auto">
<div class="w-full px-4">
<div class="mx-auto mb-16 text-center">
<h4 class="mb-2 text-base text-biru uppercase font-bold font-poppins" data-aos="fade-up">Skills</h4>
<h2 class="mb-4 text-3xl font-bold text-primary dark:text-dark sm:text-4xl lg:text-5xl font-montserrat"
data-aos="fade-up" data-aos-delay="100">Software that I use</h2>
<p class="text-md text-base font-medium text-secondary md:text-lg font-poppins" data-aos="zoom-in"
data-aos-delay="150">I use AutoCAD for 2D drawing, and I use SketchUp with the help of Enscape
for architectural modeling and rendering quickly. Whereas I use Blender for modeling complex
objects and complex environments</p>
</div>
</div>
<div class="w-full px-4">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
<a href="https://www.autodesk.com/products/autocad/overview?term=1-YEAR&tab=subscription" target="_blank" class="" data-aos="zoom-out">
<div class="flex items-center justify-center px-8 py-2 opacity-50 hover:scale-125 hover:opacity-100 transition-all duration-300">
<img src="dist/img/softwarelogo/autocad-svg.svg" alt="Autocad" />
</div>
</a>
<a href="https://www.blender.org/" target="_blank" class="" data-aos="zoom-out">
<div class="flex items-center justify-center px-12 py-2 opacity-50 hover:opacity-100 hover:scale-125 transition-all duration-300">
<img src="dist/img/softwarelogo/blender-svg.svg" alt="Blender" />
</div>
</a>
<a href="https://enscape3d.com/" target="_blank" class="" data-aos="zoom-out">
<div class="flex items-center justify-center px-10 py-2 opacity-50 hover:opacity-100 hover:scale-125 transition-all duration-300">
<img src="dist/img/softwarelogo/enscape-svg.svg" alt="Autocad" />
</div>
</a>
<a href="https://www.sketchup.com/" target="_blank" class="" data-aos="zoom-out">
<div class="flex items-center justify-center px-12 py-2 opacity-50 hover:opacity-100 hover:scale-125 transition-all duration-300">
<img src="dist/img/softwarelogo/sketchup-svg.svg" alt="Autocad" />
</div>
</a>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="bg-gradient-to-b from-bgbase from-10% via-bgdark via-30% to-bgdark to-90%">
<div class="container mx-auto">
<div class="w-full px-4">
<div class="mx-auto mb-16 max-w-xl text-center py-16">
<h4 class="mb-2 text-base font-bold text-biru uppercase font-poppins" data-aos="fade-up">Portfolio
</h4>
<h2 class="mb-4 text-3xl font-bold text-primary dark:text-white sm:text-4xl lg:text-5xl font-montserrat"
data-aos="fade-up" data-aos-delay="100">Project Gallery</h2>
<p class="text-md text-base font-medium text-secondary md:text-lg font-poppins" data-aos="zoom-in"
data-aos-delay="150">
Welcome to my project gallery, where I showcase a selection of my work as a 3D artist and
environment designer. Each project represents a journey of creativity and innovation, bringing
imaginative worlds and concepts to life through the medium of 3D art.
</p>
</div>
<!-- Gambar -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="grid gap-4">
<div data-aos="zoom-in">
<img class="h-auto max-w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image.jpg" alt="">
</div>
<div data-aos="zoom-in">
<img class="h-auto max-w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-1.jpg" alt="">
</div>
<div data-aos="zoom-in">
<img class="h-auto max-w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-2.jpg" alt="">
</div>
</div>
<div class="grid gap-4">
<div data-aos="zoom-in">
<img class="h-auto max-w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-3.jpg" alt="">
</div>
<div data-aos="zoom-in">
<img class="h-auto max-w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-4.jpg" alt="">
</div>
<div data-aos="zoom-in">
<img class="h-auto max-w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-5.jpg" alt="">
</div>
</div>
<div class="grid gap-4">
<div data-aos="zoom-in">
<img class="h-auto max-w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-6.jpg" alt="">
</div>
<div data-aos="zoom-in">
<img class="h-auto max-w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-7.jpg" alt="">
</div>
<div data-aos="zoom-in">
<img class="h-auto max-w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-8.jpg" alt="">
</div>
</div>
<div class="grid gap-4">
<div data-aos="zoom-in">
<img class="h-auto max-w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-9.jpg" alt="">
</div>
<div data-aos="zoom-in">
<img class="h-auto max-w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-10.jpg" alt="">
</div>
<div data-aos="zoom-in">
<img class="h-auto max-w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-11.jpg" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- Review Section -->
<section id="review" class="py-16 bg-bgdark">
<div class="container mx-auto">
<div class="w-full px-4">
<div class="mx-auto mb-16 max-w-xl text-center">
<h4 class="mb-2 text-base font-bold text-biru uppercase font-poppins" data-aos="fade-up">review</h4>
<h2 class="mb-4 text-3xl font-bold text-primary dark:text-white sm:text-4xl lg:text-5xl font-montserrat"
data-aos="fade-up" data-aos-delay="100">What People Said</h2>
<p class="text-md font-medium text-secondary md:text-lg font-poppins" data-aos="zoom-in"
data-aos-delay="150">
Theese are honest reviews from people who have used my services
</p>
</div>
<div class="grid mb-8 rounded-lg shadow-sm md:mb-12 md:grid-cols-2 gap-4">
<figure data-aos="zoom-in"
class="flex flex-col items-center justify-center p-8 text-center bg-gradient-to-br from-card1 to-card2 rounded-lg dark:bg-gray-800 dark:border-gray-700">
<blockquote class="max-w-2xl mx-auto mb-4 text-gray-500 lg:mb-8 dark:text-gray-400">
<h3 class="text-lg font-semibold text-primary dark:text-white font-poppins">Belum ada review
</h3>
<p class="my-4 text-textdark font-poppins">"Ulasan yang jujur dan positif dari pelanggan
yang sebenarnya akan lebih berharga daripada ulasan palsu dalam jangka panjang."</p>
</blockquote>
<figcaption class="flex items-center justify-center space-x-3">
<img class="rounded-full w-9 h-9" src="dist/img/profile/raiden.webp" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div><span class="text-primary font-poppins">Raiden Shogun</span></div>
<div class="text-sm text-biru dark:text-gray-400 font-poppins">The God of Eternity</div>
</div>
</figcaption>
</figure>
<figure data-aos="zoom-in"
class="flex flex-col items-center justify-center p-8 text-center bg-gradient-to-br from-card1 to-card2 rounded-lg dark:bg-gray-800 dark:border-gray-700">
<blockquote class="max-w-2xl mx-auto mb-4 text-gray-500 lg:mb-8 dark:text-gray-400">
<h3 class="text-lg font-semibold text-primary dark:text-white font-poppins">Belum ada review
</h3>
<p class="my-4 text-textdark font-poppins">"Ulasan yang jujur dan positif dari pelanggan
yang sebenarnya akan lebih berharga daripada ulasan palsu dalam jangka panjang."</p>
</blockquote>
<figcaption class="flex items-center justify-center space-x-3">
<img class="rounded-full w-9 h-9" src="dist/img/profile/furina.webp" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div><span class="text-primary font-poppins">Furina</span></div>
<div class="text-sm text-biru dark:text-gray-400 font-poppins">The God of Justice</div>
</div>
</figcaption>
</figure>
<figure data-aos="zoom-in"
class="flex flex-col items-center justify-center p-8 text-center bg-gradient-to-br from-card1 to-card2 rounded-lg dark:bg-gray-800 dark:border-gray-700">
<blockquote class="max-w-2xl mx-auto mb-4 text-gray-500 lg:mb-8 dark:text-gray-400">
<h3 class="text-lg font-semibold text-primary dark:text-white font-poppins">Belum ada review
</h3>
<p class="my-4 text-textdark font-poppins">"Ulasan yang jujur dan positif dari pelanggan
yang sebenarnya akan lebih berharga daripada ulasan palsu dalam jangka panjang."</p>
</blockquote>
<figcaption class="flex items-center justify-center space-x-3">
<img class="rounded-full w-9 h-9" src="dist/img/profile/nahida.webp" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div><span class="text-primary font-poppins">Nahida</span></div>
<div class="text-sm text-biru dark:text-gray-400 font-poppins">The God of Wisdom</div>
</div>
</figcaption>
</figure>
<figure data-aos="zoom-in"
class="flex flex-col items-center justify-center p-8 text-center bg-gradient-to-br from-card1 to-card2 rounded-lg dark:bg-gray-800 dark:border-gray-700">
<blockquote class="max-w-2xl mx-auto mb-4 text-gray-500 lg:mb-8 dark:text-gray-400">
<h3 class="text-lg font-semibold text-primary dark:text-white font-poppins">Belum ada review
</h3>
<p class="my-4 text-textdark font-poppins">"Ulasan yang jujur dan positif dari pelanggan
yang sebenarnya akan lebih berharga daripada ulasan palsu dalam jangka panjang."</p>
</blockquote>
<figcaption class="flex items-center justify-center space-x-3">
<img class="rounded-full w-9 h-9" src="dist/img/profile/ayaka.webp" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div><span class="text-primary font-poppins">Kamisato Ayaka</span></div>
<div class="text-sm text-biru dark:text-gray-400 font-poppins">Shirasagi no Himegimi
</div>
</div>
</figcaption>
</figure>
<figure data-aos="zoom-in"
class="flex flex-col items-center justify-center p-8 text-center bg-gradient-to-br from-card1 to-card2 rounded-lg dark:bg-gray-800 dark:border-gray-700">
<blockquote class="max-w-2xl mx-auto mb-4 text-gray-500 lg:mb-8 dark:text-gray-400">
<h3 class="text-lg font-semibold text-primary dark:text-white font-poppins">Belum ada review
</h3>
<p class="my-4 text-textdark font-poppins">"Ulasan yang jujur dan positif dari pelanggan
yang sebenarnya akan lebih berharga daripada ulasan palsu dalam jangka panjang."</p>
</blockquote>
<figcaption class="flex items-center justify-center space-x-3">
<img class="rounded-full w-9 h-9" src="dist/img/profile/nilou.webp" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div><span class="text-primary font-poppins">Nilou</span></div>
<div class="text-sm text-biru dark:text-gray-400 font-poppins">Flower Dancer</div>
</div>
</figcaption>
</figure>
<figure data-aos="zoom-in"
class="flex flex-col items-center justify-center p-8 text-center bg-gradient-to-br from-card1 to-card2 rounded-lg dark:bg-gray-800 dark:border-gray-700">
<blockquote class="max-w-2xl mx-auto mb-4 text-gray-500 lg:mb-8 dark:text-gray-400">
<h3 class="text-lg font-semibold text-primary dark:text-white font-poppins">Belum ada review
</h3>
<p class="my-4 text-textdark font-poppins">"Ulasan yang jujur dan positif dari pelanggan
yang sebenarnya akan lebih berharga daripada ulasan palsu dalam jangka panjang."</p>
</blockquote>
<figcaption class="flex items-center justify-center space-x-3">
<img class="rounded-full w-9 h-9" src="dist/img/profile/keqing.webp" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white text-left">
<div><span class="text-primary font-poppins">Keqing</span></div>
<div class="text-sm text-biru dark:text-gray-400 font-poppins">Qixing</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<!-- Education Section -->
<section id="education" class="bg-gradient-to-b from-bgdark to-bgbase pb-32">
<div class="container mx-auto">
<div class="w-full px-4">
<div class="mx-auto mb-16 max-w-xl text-center py-16">
<h4 class="mb-2 text-base font-bold text-biru uppercase font-poppins" data-aos="fade-up">education
</h4>
<h2 class="mb-4 text-3xl font-bold text-primary dark:text-white sm:text-4xl lg:text-5xl font-montserrat"
data-aos="fade-up" data-aos-delay="100">My Education</h2>
<p class="text-md text-base font-medium text-secondary md:text-lg font-poppins" data-aos="zoom-in"
data-aos-delay="150">
My educational background forms the foundation of my journey as a 3D artist and environment
designer. It has equipped me with the skills and knowledge necessary to bring creative visions
to life in the world of digital art.
</p>
</div>
<div class="w-full px-4 pl-10">
<ol data-aos="fade-right" class="relative border-l border-secondary dark:border-gray-700">
<li class="mb-10 ml-6">
<span data-aos="zoom-in" data-aos-delay="300"
class="absolute flex items-center justify-center w-6 h-6 bg-biru rounded-full -left-3 ring-4 ring-bgbiru dark:ring-gray-900 dark:bg-blue-900">
<svg class="w-2.5 h-2.5 text-primary dark:text-blue-300" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path
d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
</svg>
</span>
<h3 data-aos="fade-right"
class="flex items-center mb-1 text-lg font-semibold text-primary dark:text-white font-poppins">
Malang State University</h3>
<time data-aos="fade-right" data-aos-delay="100"
class="block mb-2 text-sm font-normal leading-none text-biru dark:text-gray-500 font-poppins">2018-2022</time>
<p data-aos="fade-right" data-aos-delay="200"
class="mb-4 text-base font-normal text-secondary dark:text-gray-400 font-poppins">I
majored in civil Engineering and Education Study. I got knowledge and experience about
how to teach, and how to manage construction </p>
</li>
<li class="mb-10 ml-6">
<span data-aos="zoom-in" data-aos-delay="300"
class="absolute flex items-center justify-center w-6 h-6 bg-biru rounded-full -left-3 ring-4 ring-bgbiru dark:ring-gray-900 dark:bg-blue-900">
<svg class="w-2.5 h-2.5 text-primary dark:text-blue-300" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path
d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
</svg>
</span>
<h3 data-aos="fade-right"
class="mb-1 text-lg font-semibold text-primary dark:text-white font-poppins">State
Vocational High School 3 Boyolangu Tulungagung</h3>
<time data-aos="fade-right" data-aos-delay="100"
class="block mb-2 text-sm font-normal leading-none text-biru dark:text-gray-500 font-poppins">2015-2018</time>
<p data-aos="fade-right" data-aos-delay="200"
class="text-base font-normal text-secondary dark:text-gray-400 font-poppins">I majored
in modeling design and building information at this school. I once won a student
competency competition at district level</p>
</li>
<li class="ml-6">
<span data-aos="zoom-in" data-aos-delay="300"
class="absolute flex items-center justify-center w-6 h-6 bg-biru rounded-full -left-3 ring-4 ring-bgbiru dark:ring-gray-900 dark:bg-blue-900">
<svg class="w-2.5 h-2.5 text-primary dark:text-blue-300" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path
d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
</svg>
</span>
<h3 data-aos="fade-right"
class="mb-1 text-lg font-semibold text-primary dark:text-white font-poppins">Junior High
School 6 Tulungagung</h3>
<time data-aos="fade-right" data-aos-delay="100"
class="block mb-2 text-sm font-normal leading-none text-biru dark:text-gray-500 font-poppins">2012-2015</time>
<p data-aos="fade-right" data-aos-delay="200"
class="text-base font-normal text-secondary dark:text-gray-400 font-poppins">I follow
the Art Club, Band Club, and Young Indonesia Red Cross Society. We have won band
competitions and Young Indonesia Red Cross Society at district level</p>
</li>
</ol>
</div>
</div>
</div>
</section>
<!-- Contact Me Section -->
<section id="social" class="bg-gradient-to-b from-bgbase via-bgdark to-bgbase ">
<div class="container mx-auto">
<div class="w-full px-4">
<div class="mx-auto mb-16 max-w-xl text-center py-16">
<h4 class="mb-2 text-base font-bold text-biru uppercase font-poppins" data-aos="fade-down">contact
me</h4>
<p class="text-md text-base font-medium text-secondary md:text-lg font-poppins" data-aos="zoom-in"
data-aos-delay="300">
Feel free to contact me to work on colaboration project or just saying hi
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- sosmed -->
<div class="mb-20">
<h2 class="mb-4 text-3xl font-bold text-primary dark:text-white sm:text-4xl lg:text-5xl font-montserrat"
data-aos="fade-right">My Social Media</h2>
<div class="grid grid-cols-6 gap-3">
<!-- Tautan Email -->
<div data-aos="fade-right"
class="bg-gradient-to-tr from-mail1 to-mail2 rounded-lg p-3 justify-center">
<a href="mailto:[email protected]" target="_blank"
class="text-blue-500 hover:text-blue-600">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Mail.Ru</title>
<path fill="#ffffff"
d="M15.61 12c0 1.99-1.62 3.61-3.61 3.61-1.99 0-3.61-1.62-3.61-3.61 0-1.99 1.62-3.61 3.61-3.61 1.99 0 3.61 1.62 3.61 3.61M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12c2.424 0 4.761-.722 6.76-2.087l.034-.024-1.617-1.879-.027.017A9.494 9.494 0 0 1 12 21.54c-5.26 0-9.54-4.28-9.54-9.54 0-5.26 4.28-9.54 9.54-9.54 5.26 0 9.54 4.28 9.54 9.54a9.63 9.63 0 0 1-.225 2.05c-.301 1.239-1.169 1.618-1.82 1.568-.654-.053-1.42-.52-1.426-1.661V12A6.076 6.076 0 0 0 12 5.93 6.076 6.076 0 0 0 5.93 12 6.076 6.076 0 0 0 12 18.07a6.02 6.02 0 0 0 4.3-1.792 3.9 3.9 0 0 0 3.32 1.805c.874 0 1.74-.292 2.437-.821.719-.547 1.256-1.336 1.553-2.285.047-.154.135-.504.135-.507l.002-.013c.175-.76.253-1.52.253-2.457 0-6.617-5.383-12-12-12" />
</svg>
</a>
</div>
<!-- Tautan WhatsApp -->
<div data-aos="fade-right" data-aos-delay="100"
class="bg-gradient-to-tr from-wa1 to-wa2 rounded-lg p-3 justify-center">
<a href="https://wa.me/yourphonenumber" target="_blank"
class="text-green-500 hover:text-green-600">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>WhatsApp</title>
<path fill="#ffffff"
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
</svg>
</a>
</div>
<!-- Tautan Facebook -->
<div data-aos="fade-right" data-aos-delay="200"
class="bg-gradient-to-tr from-fb1 to-fb2 rounded-lg p-3 justify-center">
<a href="https://www.facebook.com/yourprofile" target="_blank"
class="text-blue-500 hover:text-blue-600">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Facebook</title>
<path fill="#ffffff"
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>
<!-- Tautan Instagram -->
<div data-aos="fade-right" data-aos-delay="300"
class="bg-gradient-to-tr from-ig1 to-ig2 rounded-lg p-3 justify-center">
<a href="https://www.instagram.com/yourprofile" target="_blank">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Instagram</title>
<path fill="#ffffff"
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>
</div class="bg-bgdark rounded-lg ">
<!-- Tautan Twitter -->
<div data-aos="fade-right" data-aos-delay="400"
class="bg-gradient-to-tr from-tw1 to-tw2 rounded-lg p-3 justify-center">
<a href="https://twitter.com/yourprofile" target="_blank">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>X</title>
<path fill="#ffffff"
d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
</svg>
</a>
</div>
<!-- Tautan Discord -->
<div data-aos="fade-right" data-aos-delay="500"
class="bg-gradient-to-tr from-dc1 to-dc2 rounded-lg p-3 justify-center">
<a href="https://discord.gg/yourserver" target="_blank">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Discord</title>
<path fill="#ffffff"
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
</svg>
</a>
</div>
</div>
</div>
<div id="contact">
<h2 class="mb-4 text-3xl font-bold text-primary dark:text-white sm:text-4xl lg:text-5xl font-montserrat"
data-aos="fade-right">Contact me</h2>
<form>
<div class="mb-4">
<label data-aos="fade-right" for="name"
class="block text-biru font-medium font-poppins">Name</label>
<input data-aos="fade-right" data-aos-delay="100" type="text" id="name" name="name"
placeholder="Your Name"
class="w-full border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:border-blue-500 font-poppins">
</div>
<div class="mb-4">
<label data-aos="fade-right" for="email"
class="block text-biru font-medium font-poppins">Email</label>
<input data-aos="fade-right" data-aos-delay="100" type="email" id="email" name="email"
placeholder="Your Email"
class="w-full border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:border-blue-500 font-poppins">
</div>
<div class="mb-4">
<label data-aos="fade-right" for="message"
class="block text-biru font-medium font-poppins">Message</label>
<textarea data-aos="fade-right" data-aos-delay="100" id="message" name="message"
rows="4" placeholder="Write Your Message"
class="w-full border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:border-blue-500 font-poppins"></textarea>
</div>
<button data-aos="zoom-in" type="submit"
class="rounded-full bg-gradient-to-t from-aksen1 to-aksen2 py-2 px-5 text-base font-semibold text-white transition duration-300 ease-in-out hover:opacity-80 hover:shadow-lg relative z-20 font-poppins">Send
Message</button>
</form>
</div>
</div>
<!-- kontak me -->
<!-- Tambahkan formulir kontak Anda di sini -->
<!-- Social Media Links -->
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<footer class="bg-bgdark shadow-md text-white py-8">
<div class="container mx-auto text-center font-poppins">
<p>© 2023 Made with ❤ by Maghdzany Fikri</p>
</div>
</footer>
<!-- JavaScript -->
<script src="dist/script.js"></script>
<!-- AOS -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
once: true,
duration: 1000,
});
</script>
<!-- GSAP GREENSHOCK ANIMATION -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<!-- gsap plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/TextPlugin.min.js"></script>
<!-- gsap script -->
<script>
gsap.registerPlugin(TextPlugin);
gsap.from('.home img', { duration: 1, delay: 3, filter: 'blur(50px)', opacity: '0' })
gsap.from('.hello', { duration: 1, y: '-50', scale: '0', opacity: '0' })
gsap.from('.maghdzany', { duration: 1.5, delay: 1, text: '', ease: 'circ' })
gsap.from('.fikri', { duration: 0.8, delay: 1.7, text: '' })
gsap.from('.tagline', { duration: 1, delay: 2, x: '-100', opacity: '0', filter: 'blur(10px)' })
gsap.from('.taglinedetail', { duration: 1, delay: 2.5, scale: '0', opacity: '0', filter: 'blur(10px)' })
gsap.from('.tombolcv', { duration: 1, delay: 3, opacity: '0', filter: 'blur(10px)' })
</script>
</body>
</html>