-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
486 lines (466 loc) · 40.1 KB
/
index.html
File metadata and controls
486 lines (466 loc) · 40.1 KB
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
<!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">
<meta property="og:title" content="My Personal Portfolio">
<meta property="og:description" content="Welcome to my website! Here you can find about myself, project, and certificates in this portfolio.">
<meta property="og:image" content="img/logo.png">
<meta property="og:type" content="website">
<title>My Personal Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.21.2/dist/sweetalert2.min.css">
<link rel="stylesheet" href="src/css/output.css">
<link rel="apple-touch-icon" sizes="180x180">
<link rel="icon" type="image/png" sizes="32x32">
<link rel="icon" type="image/png" sizes="16x16">
<link rel="manifest">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.21.2/dist/sweetalert2.all.min.js"></script>
<script>
// Change Themes
const faviconApple = document.querySelector('link[rel=apple-touch-icon]');
const favicon = document.querySelectorAll('link[rel=icon]');
const faviconManifest = document.querySelector('link[rel=manifest]');
if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark");
faviconApple.setAttribute('href', 'img/favicon/light/apple-touch-icon.png');
favicon.forEach(icon => icon.setAttribute('href', `img/favicon/light/favicon-${icon.attributes.sizes.value}.png`));
faviconManifest.setAttribute('href', 'img/favicon/light/site.webmanifest');
} else {
document.documentElement.classList.remove("dark");
faviconApple.setAttribute('href', 'img/favicon/dark/apple-touch-icon.png');
favicon.forEach(icon => icon.setAttribute('href', `img/favicon/dark/favicon-${icon.attributes.sizes.value}.png`));
faviconManifest.setAttribute('href', 'img/favicon/dark/site.webmanifest');
}
</script>
</head>
<body class="selection:bg-indigo-500 selection:text-white dark:bg-dark dark:selection:bg-indigo-400">
<!-- Lightbox -->
<div id="lightbox" class="container fixed top-0 left-0 z-[999999999] flex transition-all duration-300 max-w-full w-full h-full flex-col items-center justify-center bg-[#1e293bf3]" style="transform: scale(0); opacity: 0;">
<figure class="w-full p-2 lg:w-1/2">
<button type="button" id="closeBtn" class="active:scale-9 absolute top-0 left-0 m-3 rounded-full bg-dark py-1 px-2 text-xl font-bold text-white transition hover:bg-slate-700 md:text-2xl lg:m-4">
<i class="bi bi-x"></i>
</button>
<div class="overflow-hidden transition-all duration-300 delay-200" style="transform: translateY(100vh); opacity: 0; cursor: zoom-in;" id="imgContainer">
<img class="lightboxImg block shadow-2xl transition-all rounded-xl" />
</div>
<figcaption class="mt-2 text-center text-lg font-bold tracking-wide text-white sm:mt-4 md:text-3xl"></figcaption>
</figure>
</div>
<!-- Navbar -->
<header id="#navbar" class="absolute top-0 left-0 z-[99999] flex w-full items-center bg-transparent">
<div class="container">
<div class="relative flex items-center justify-between">
<div class="group hover:bg-indigo-50 lg:hover:bg-transparent px-4 py-3 md:py-5">
<a href="#home" class="block text-lg font-bold text-danger group-hover:text-danger hover:group-hover:text-indigo-500 dark:text-white sm:text-xl">Home</a>
</div>
<div class="flex items-center justify-center px-4">
<button id="hamburger" type="button" class="group absolute right-4 block active:scale-95 lg:hidden">
<span class="hamburger-line origin-top-left transition duration-500 ease-in-out group-hover:bg-danger dark:group-hover:bg-indigo-500"></span>
<span class="hamburger-line transition duration-500 ease-in-out group-hover:bg-danger dark:group-hover:bg-indigo-500"></span>
<span class="hamburger-line origin-bottom-left transition duration-500 ease-in-out group-hover:bg-danger dark:group-hover:bg-indigo-500"></span>
</button>
<nav id="navmenu" class="border-slate-100s absolute right-4 top-full hidden w-full max-w-[250px] rounded-lg border bg-white py-5 shadow-xl dark:border-slate-300 dark:bg-slate-700 lg:static lg:block lg:max-w-full lg:rounded-none lg:border-0 lg:bg-transparent lg:shadow-none lg:dark:bg-transparent">
<ul class="block lg:flex">
<li class="group hover:bg-indigo-50 lg:hover:bg-transparent">
<a href="#about" class="mx-8 flex py-2 text-base font-semibold text-dark group-hover:text-danger hover:group-hover:text-indigo-500 dark:text-slate-50">About</a>
</li>
<li class="group hover:bg-indigo-50 lg:hover:bg-transparent">
<a href="#project" class="mx-8 flex py-2 text-base font-semibold text-dark group-hover:text-danger hover:group-hover:text-indigo-500 dark:text-slate-50">Project</a>
</li>
<li class="group hover:bg-indigo-50 lg:hover:bg-transparent">
<a href="#certificate" class="group mx-8 flex py-2 text-base font-semibold text-dark group-hover:text-danger hover:group-hover:text-indigo-500 dark:text-slate-50">Certificate</a>
</li>
<li class="group hover:bg-indigo-50 lg:hover:bg-transparent">
<a href="#skills" class="group mx-8 flex py-2 text-base font-semibold text-dark group-hover:text-danger hover:group-hover:text-indigo-500 dark:text-slate-50">Skills</a>
</li>
<li class="group hover:bg-indigo-50 lg:hover:bg-transparent">
<a href="#blog" class="mx-8 flex py-2 text-base font-semibold text-dark group-hover:text-danger hover:group-hover:text-indigo-500 dark:text-slate-50">Blog</a>
</li>
<li class="group hover:bg-indigo-50 lg:hover:bg-transparent">
<a href="#contact" class="mx-8 flex py-2 text-base font-semibold text-dark group-hover:text-danger hover:group-hover:text-indigo-500 dark:text-slate-50">Contact</a>
</li>
<li class="mt-px flex items-center pl-4">
<div class="dark-mode flex">
<span class="mr-2 text-sm text-slate-500"></span>
<input type="checkbox" class="hidden" id="dark-toggle" />
<label for="dark-toggle">
<div class="flex h-7 w-12 cursor-pointer items-center rounded-full bg-slate-600 p-[2px] dark:bg-danger">
<div class="toggle-circle flex h-6 w-6 items-center justify-center rounded-full bg-white text-sm shadow-lg transition duration-300 ease-in-out">
<i class="bi bi-sun-fill text-slate-600 dark:text-danger"></i>
</div>
</div>
</label>
<span class="mr-2 text-sm text-slate-500"></span>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="pt-24 dark:bg-dark md:pt-28 lg:pt-24">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full self-center px-4 lg:w-1/2">
<h1 class="text-base font-semibold text-darkDanger dark:text-indigo-50 md:text-xl">
Hello Everyone, I'm <span class="mt-2 block bg-gradient-to-r from-danger to-teal-dark bg-clip-text text-4xl font-bold text-danger text-transparent lg:text-6xl">RendyCraft047</span>
</h1>
<h2 class="mt-3 text-sm font-medium text-secondary dark:text-slate-200 sm:text-base md:mt-4">A student who always wants to know many <span class="font-semibold text-dark opacity-90 dark:text-white">new things.</span></h2>
<p class="mt-2 mb-8 font-lora text-sm leading-relaxed text-slate-500 dark:text-slate-300 sm:text-base">Because all things come from curiosity and trying.</p>
<a href="#contact" class="mb-2 inline-block rounded-full bg-danger px-4 py-2 text-base text-sm font-bold text-white transition duration-300 ease-in-out hover:scale-95 hover:opacity-90 hover:shadow-lg hover:shadow-indigo-100 active:scale-90 dark:hover:shadow-dark md:mr-4 md:text-base">Contact Me</a>
<a href="https://github.com/RC047" target="_blank" class="inline-block rounded-full bg-dark px-4 py-2 text-base text-sm font-bold text-white transition duration-300 ease-in-out hover:scale-95 hover:opacity-90 hover:shadow-lg hover:shadow-slate-100 active:scale-90 dark:bg-white dark:text-dark dark:hover:shadow-dark md:text-base">My GitHub</a>
</div>
<div class="w-full self-end px-4 pt-[4rem] lg:w-1/2">
<div class="relative lg:right-0 tiltJS">
<img src="img/art.png" alt="RC047" class="relative z-40 mx-auto w-[180px] max-w-full md:w-[230px]" />
<span class="md:scale[1.1] absolute -bottom-0 left-1/2 -translate-x-1/2">
<svg class="h-[300px] w-[300px] md:h-[340px] md:w-[340px]" alt="blob" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#757575" d="M69.9,-23.4C77.9,1.8,62.9,33.9,39.4,49.9C15.9,66,-16.1,66.1,-34.9,51.6C-53.7,37.1,-59.2,8,-51.2,-17.3C-43.2,-42.6,-21.6,-64.2,4.7,-65.7C31,-67.2,62,-48.7,69.9,-23.4Z" transform="translate(100 100) scale(1.25)"></path>
</svg>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="pt-20 pb-32 dark:bg-dark md:pt-28 lg:pt-36">
<div class="container">
<div class="flex flex-wrap">
<div class="mb-10 w-full px-4 lg:w-1/2">
<h4 class="text-sm font-semibold uppercase tracking-widest text-darkDanger opacity-60 dark:text-indigo-50 md:text-lg lg:pt-1">About</h4>
<h3 class="mt-2 max-w-xl text-xl font-bold text-danger dark:text-white sm:text-4xl lg:text-4xl">Introduce myself</h3>
<p class="mt-4 max-w-xl font-lora text-sm leading-relaxed text-secondary dark:text-slate-100 md:text-lg">
My real name is <strong>Muhammad Rendy Adhitya</strong>, 18 years old, from Indonesia. I started to be interested in programming since I was 15 years old. My first programming language was JavaScript, I chose it because quite a lot of people use it and the syntax is quite simple. And after getting to know JavaScript I also started to get to know other languages such as HTML web language, CSS, and programming languages such as Python and C++, programming languages that are known to be quite common and very easy to use among their users. In addition to being interested in programming languages, I am also quite interested in things related to design, from its appearance to its uniqueness, designing websites, making posters, I also want to explore how comfortable users are when running applications with their own appearance and functions.
</p>
</div>
<div class="w-full px-4 lg:w-1/2 lg:pl-10">
<h3 class="text-xl font-bold text-darkDanger dark:text-white lg:text-4xl">Get to know more closely</h3>
<p class="mt-2 max-w-xl font-lora text-sm leading-relaxed text-secondary dark:text-slate-100 md:text-lg">These are the links for my social media:</p>
<div class="mt-4 flex items-center">
<a href="https://youtube.com/@RC047" target="_blank" class="group mr-4 flex h-9 w-9 scale-110 items-center justify-center rounded-full border border-danger transition-all duration-500 hover:bg-danger hover:opacity-80 hover:ring-4 hover:ring-danger active:scale-95"><i class="bi bi-youtube text-danger group-hover:text-white"></i></a>
<a href="https://instagram.com/rendycraft047" target="_blank" class="group mr-4 flex h-9 w-9 scale-110 items-center justify-center rounded-full border border-[#ea0c5f] transition-all duration-500 hover:bg-[#ea0c5f] hover:opacity-80 hover:ring-4 hover:ring-[#ea0c5d62] active:scale-95"><i class="bi bi-instagram text-[#ea0c5f] group-hover:text-white"></i></a>
<a href="https://facebook.com/rendy.adhitya.2025" target="_blank" class="group mr-4 flex h-9 w-9 scale-110 items-center justify-center rounded-full border border-primary transition-all duration-500 hover:bg-primary hover:opacity-80 hover:ring-4 hover:ring-primary active:scale-95"><i class="bi bi-facebook text-primary group-hover:text-white"></i></a>
<a href="https://tiktok.com/@rendycraft047" target="_blank" class="group mr-4 flex h-9 w-9 scale-110 items-center justify-center rounded-full border border-black transition-all duration-500 hover:bg-black hover:opacity-80 hover:ring-4 hover:ring-black active:scale-95 dark:border-white dark:hover:bg-white dark:hover:ring-slate-500"><i class="bi bi-tiktok text-black group-hover:text-white dark:text-white dark:group-hover:text-black"></i></a>
<a href="https://x.com/rendycrat047" target="_blank" class="group flex h-9 w-9 scale-110 items-center justify-center rounded-full border border-black transition-all duration-500 hover:bg-black hover:opacity-80 hover:ring-4 hover:ring-black active:scale-95 dark:border-white dark:hover:bg-white dark:hover:ring-slate-500"><i class="bi bi-twitter-x text-black group-hover:text-white dark:text-white dark:group-hover:text-black"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- Project -->
<section id="project" class="bg-indigo-50 pt-20 pb-32 dark:bg-slate-700 md:pt-28 lg:pt-36">
<div class="container">
<div class="w-full px-4 py-6">
<div class="mx-auto mb-4 max-w-xl text-center">
<h4 class="text-sm font-semibold uppercase tracking-widest text-darkDanger opacity-60 dark:text-slate-100 md:text-lg">Project</h4>
<h2 class="mt-2 max-w-xl text-3xl font-bold text-danger dark:text-white sm:text-4xl lg:text-5xl">A masterpiece that has been created</h2>
<p class="mt-4 max-w-xl font-lora text-sm leading-relaxed text-secondary dark:text-slate-100 md:text-lg">
Here are some of the project works that I have created on my <strong><a href="https://github.com/RC047?tab=repositories" target="_blank" class="hover:underline hover:opacity-80">GitHub</a></strong>.
</p>
</div>
</div>
<!-- Cards -->
<div class="flex w-full flex-wrap justify-center gap-6 px-4 xl:mx-auto xl:w-10/12">
<div class="card group mb-7 rounded-xl bg-indigo-200 p-8 transition-all duration-300 dark:bg-secondary md:w-[45%]">
<figure>
<div class="cursor-zoom-in overflow-hidden rounded-md shadow-md transition duration-300 active:scale-95">
<img src="img/project-rest_api.png" alt="Simple Rest API's" class="lightbox w-full" />
</div>
<a href="https://github.com/RC047/kuhong-api" target="_blank" class="card-link">
<figcaption class="mt-4 text-lg font-semibold text-dark group-hover:text-danger dark:text-white dark:group-hover:text-indigo-300 md:text-xl lg:text-2xl">Simple Rest API's</figcaption>
</a>
<p class="mt-2 text-sm font-medium leading-relaxed text-secondary dark:text-slate-100 md:text-justify md:text-base">A simple rest api built with NodeJS language is useful for everyday user needs in today's era, such as creating text, changing photos, and searching for various information.</p>
</figure>
</div>
<div class="card group mb-7 rounded-xl bg-indigo-200 p-8 transition-all duration-300 dark:bg-secondary md:w-[45%]">
<figure>
<div class="cursor-zoom-in overflow-hidden rounded-md shadow-md transition duration-300 active:scale-95">
<img src="img/project-wa_bot.png" alt="WhatsApp Bot" class="lightbox w-full" />
</div>
<a href="https://github.com/RC047/kuhong-bot" target="_blank" class="card-link">
<figcaption class="mt-4 text-lg font-semibold text-dark group-hover:text-danger dark:text-white dark:group-hover:text-indigo-300 md:text-xl lg:text-2xl">WhatsApp Bot</figcaption>
</a>
<p class="mt-2 text-sm font-medium leading-relaxed text-secondary dark:text-slate-100 md:text-justify md:text-base">
A simple chat bot are named "Kuhong" designed to make it easier for WhatsApp users to create something and as a bridge to access all forms of information.
</p>
</figure>
</div>
<div class="card dark:bg-secondary dark:bg-secondary group mb-7 rounded-xl bg-indigo-200 p-8 transition-all duration-300 dark:bg-secondary md:w-[45%]">
<figure>
<div class="cursor-zoom-in overflow-hidden rounded-md shadow-md transition duration-300 active:scale-95">
<img src="img/project-tetris.png" alt="Tetris Game" class="lightbox w-full" />
</div>
<a href="views/tetris.html" class="card-link">
<figcaption class="dark:group-hover:text-indigo-200 dark:text-white mt-4 text-lg font-semibold text-dark group-hover:text-danger dark:text-white dark:group-hover:text-indigo-300 md:text-xl lg:text-2xl">Tetris Game</figcaption>
</a>
<p class="mt-2 text-sm font-medium leading-relaxed text-secondary dark:text-slate-100 dark:text-slate-100 md:text-justify md:text-base">
A simple Tetris game created using JavaScript language combined with HTML and CSS becomes an extraordinary simple game!
</p>
</figure>
</div>
<div class="card group mb-7 rounded-xl bg-indigo-200 p-8 transition-all duration-300 dark:bg-secondary md:w-[45%]">
<figure>
<div class="cursor-zoom-in overflow-hidden rounded-md shadow-md transition duration-300 active:scale-95">
<img src="img/project-ping_pong.png" alt="Ping Pong" class="lightbox w-full" />
</div>
<a href="views/ping-pong.html" class="card-link">
<figcaption class="mt-4 text-lg font-semibold text-dark group-hover:text-danger dark:text-white dark:group-hover:text-indigo-300 md:text-xl lg:text-2xl">Ping Pong</figcaption>
</a>
<p class="mt-2 text-sm font-medium leading-relaxed text-secondary dark:text-slate-100 md:text-justify md:text-base">
Online ping pong game specially made to run on android which has some difficulty levels, may have some problems if run on windows.
</p>
</figure>
</div>
</div>
</div>
</section>
<!-- Certificate -->
<section id="certificate" class="bg-slate-700 pt-20 pb-20 md:pb-28 lg:pb-36 dark:bg-slate-100 md:pt-28 lg:pt-36">
<div class="container">
<div class="w-full px-4 py-6">
<div class="mx-auto mb-4 max-w-xl text-center">
<h4 class="text-sm font-semibold uppercase tracking-widest text-darkDanger text-slate-100 opacity-60 dark:text-slate-600 md:text-lg">Certificate</h4>
<h2 class="mt-2 text-3xl font-bold text-white dark:text-dark sm:text-4xl lg:text-5xl">One experience, one knowledge.</h2>
<p class="mt-4 max-w-xl font-lora text-sm leading-relaxed text-slate-300 dark:text-secondary md:text-lg">There are several certificates that I have obtained from several course classes or events as confirmation and appreciation that I have participated in these activities.</p>
</div>
</div>
<div class="w-full px-4">
<div class="mt-6 flex flex-wrap items-center justify-center gap-y-[2.5rem] sm:gap-[5rem]">
<div class="md:max-w-[350px]" target="_blank">
<img src="img/certificate-javascript.jpg" alt="Learn Basic JavaScript Programming" class="lightbox cursor-pointer rounded-xl shadow-2xl grayscale transition-all duration-300 hover:grayscale-0 active:scale-95" />
</div>
<div class="md:max-w-[350px]" target="_blank">
<img src="img/certificate-web.jpg" alt="Learn Basic Web Programming" class="lightbox cursor-pointer rounded-xl shadow-2xl grayscale transition-all duration-300 hover:grayscale-0 active:scale-95" />
</div>
<div class="md:max-w-[350px]" target="_blank">
<img src="img/certificate-aws_cloud.jpg" alt="Cloud Practitioner Essentials (AWS Cloud)" class="lightbox cursor-pointer rounded-xl shadow-2xl grayscale transition-all duration-300 hover:grayscale-0 active:scale-95" />
</div>
<div class="md:max-w-[350px]" target="_blank">
<img src="img/certificate-osn_indonesia.jpg" alt="Lational Indonesian Language Olympiad" class="lightbox cursor-pointer rounded-xl shadow-2xl grayscale transition-all duration-300 hover:grayscale-0 active:scale-95" />
</div>
<div class="md:max-w-[350px]" target="_blank">
<img src="img/certificate-school-organization.jpg" alt="Appreciation of School Organizations" class="lightbox cursor-pointer rounded-xl shadow-2xl grayscale transition-all duration-300 hover:grayscale-0 active:scale-95" />
</div>
<div class="md:max-w-[350px]" target="_blank">
<img src="img/certificate-osn_fisika.jpg" alt="National Physics Olympiad" class="lightbox cursor-pointer rounded-xl shadow-2xl grayscale transition-all duration-300 hover:grayscale-0 active:scale-95" />
</div>
</div>
</div>
</div>
</section>
<!-- Skills -->
<section id="skills" class="pt-20 pb-5 dark:bg-dark md:pt-28 lg:pt-36">
<div class="container">
<div class="mt-6 w-full px-4">
<div class="mx-auto max-w-xl text-center">
<h4 class="text-sm font-semibold uppercase tracking-widest text-darkDanger opacity-60 dark:text-indigo-50 md:text-lg">Skills</h4>
<h2 class="mt-2 max-w-xl text-3xl font-bold text-danger dark:text-white sm:text-4xl lg:text-5xl">This is my specialty</h2>
<p class="mt-4 max-w-xl font-lora text-sm leading-relaxed text-secondary dark:text-slate-100 md:text-lg">The skills I got while learning programming, even though there are skills I still have to learn more.</p>
</div>
<div class="mx-auto mt-10 w-full md:mt-20 lg:w-1/2">
<ul class="flex flex-wrap items-center justify-center gap-[3rem] sm:gap-[5rem]">
<li class="tiltJS w-[70px] md:w-[110px]">
<a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">
<figure class="text-center">
<img src="img/favicon/js.svg" alt="JavaScript" class="w-full grayscale hover:grayscale-0" />
</figure>
</a>
</li>
<li class="tiltJS w-[90px] md:w-[140px]">
<a href="https://en.wikipedia.org/wiki/HTML" target="_blank">
<figure class="text-center">
<img src="img/favicon/html.svg" alt="HTML" class="w-full grayscale hover:grayscale-0" />
</figure>
</a>
</li>
<li class="tiltJS w-[65px] md:w-[100px]">
<a href="https://en.wikipedia.org/wiki/CSS" target="_blank">
<figure class="text-center">
<img src="img/favicon/css.svg" alt="CSS" class="w-full grayscale hover:grayscale-0" />
</figure>
</a>
</li>
<li class="tiltJS w-[80px] md:w-[120px]">
<a href="https://en.wikipedia.org/wiki/Python_(programming_language)" target="_blank">
<figure class="text-center">
<img src="img/favicon/py.svg" alt="Python" class="w-full grayscale hover:grayscale-0" />
</figure>
</a>
</li>
<li class="tiltJS w-[60px] md:w-[100px]">
<a href="https://en.wikipedia.org/wiki/C%2B%2B" target="_blank">
<figure class="text-center">
<img src="img/favicon/c.svg" alt="C++" class="img-dark w-full grayscale hover:grayscale-0" />
</figure>
</a>
</li>
<li class="tiltJS w-[90px] md:w-[170px]">
<a href="https://tailwindcss.com/" target="_blank">
<figure class="text-center">
<img src="img/favicon/tailwind.svg" alt="TailwindCSS" class="img-dark w-full grayscale hover:grayscale-0" />
</figure>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Blog -->
<section id="blog" class="pt-20 pb-14 dark:bg-dark md:pt-28 lg:pt-36">
<div class="container">
<div class="w-full px-4 py-6">
<div class="mx-auto mb-6 max-w-xl text-center md:mb-10">
<h4 class="text-sm font-semibold uppercase tracking-widest text-darkDanger opacity-60 dark:text-indigo-50 md:text-lg">Blog</h4>
<h2 class="mt-2 max-w-xl text-3xl font-bold text-danger dark:text-white sm:text-4xl lg:text-5xl">Make something interesting</h2>
<p class="mt-4 max-w-xl font-lora text-sm leading-relaxed text-secondary dark:text-slate-100 md:text-lg">Besides being a programmer, I also sometimes like to create Minecraft video game content on my <a href="https://www.youtube.com/@RC047/videos" class="text-emerald-600 hover:underline" target="_blank">YouTube</a> channel when I have free time.</p>
</div>
</div>
<div class="flex flex-wrap items-center justify-center lg:ml-20">
<a href="https://www.youtube.com/watch?v=vB7NsP_dGWU" class="block" target="_blank">
<div class="px-4 lg:w-1/2 xl:w-1/3">
<figure class="mb-10 overflow-hidden rounded-xl bg-white shadow-lg transition-all duration-300 hover:bg-slate-50 dark:bg-slate-700 md:w-[300px] border-2 hover:border-indigo-400 active:scale-95">
<img src="img/blog-thumb.jpg" alt="TOP 3 SHADERS MCPE ULTRA REALISTIS!!! (1.16+)" class="w-full" />
<figcaption class="mt-2 max-w-sm px-5 py-4 pt-0 font-semibold text-danger dark:text-white">
<h3 class="mt-4 text-lg font-semibold text-danger hover:underline dark:text-white md:text-2xl">TOP 3 SHADERS MCPE ULTRA REALISTIS!!! (1.16+) <span class="text-slate-500 text pl-1 text-base">(2021)</span></h3>
<span class="mt-0 pt-0 text-amber-400 md:text-xl"> ★★★★★</span>
<p class="mt-1 max-w-xl font-lora text-sm font-normal leading-relaxed text-secondary dark:text-slate-100 md:text-base">Inilah beberapa rekomendasi shader ultra realistis yang cocok untuk Minecraft Pocket Edition versi terbaru.</p>
<a href="https://www.youtube.com/watch?v=vB7NsP_dGWU" target="_blank" class="mt-2 mr-2 block font-lora font-normal text-indigo-500 hover:opacity-80 after:pl-1 hover:after:content-['👉'] dark:text-white">Watch video</a>
</figcaption>
</figure>
</div>
</a>
<a href="https://www.youtube.com/watch?v=kW1XJENIzjI" class="block" target="_blank">
<div class="px-4 lg:w-1/2 xl:w-1/3">
<figure class="mb-10 overflow-hidden rounded-xl bg-white shadow-lg transition-all duration-300 hover:bg-slate-50 dark:bg-slate-700 md:w-[300px] border-2 hover:border-indigo-400 active:scale-95">
<img src="img/blog-thumb_2.jpg" alt="Showcase Mod Free Fire Di Minecraft Android(No Hoax)" class="w-full" />
<figcaption class="mt-2 max-w-sm px-5 py-4 pt-0 font-semibold text-danger dark:text-white">
<h3 class="mt-4 text-lg md:text-xl font-semibold text-danger hover:underline dark:text-white">Showcase Mod Free Fire Di Minecraft Android(No Hoax) <span class="text-slate-500 text pl-1 text-base">(2021)</span></h3>
<span class="mt-0 pt-0 text-amber-400 md:text-xl"> ★★★★★</span>
<p class="mt-2 max-w-xl font-lora text-sm font-normal leading-relaxed text-secondary dark:text-slate-100 md:text-base">Dengan adanya Mods, Free Fire kini hadir di Minecraft yang membuat pengalaman bermain semakin menyenangkan dapat memainkan berbagai macam-macam permainan hanya dalam satu game!</p>
<a href="https://www.youtube.com/watch?v=kW1XJENIzjI" target="_blank" class="mt-2 mr-2 block font-lora font-normal text-indigo-500 hover:opacity-80 after:pl-1 hover:after:content-['👉'] dark:text-white">Watch video</a>
</figcaption>
</figure>
</div>
</a>
<a href="https://www.youtube.com/watch?v=dky81nCyBFU" class="block" target="_blank">
<div class="px-4 lg:w-1/2 xl:w-1/3">
<figure class="mb-10 overflow-hidden rounded-xl bg-white shadow-lg transition-all duration-300 hover:bg-slate-50 dark:bg-slate-700 md:w-[300px] border-2 hover:border-indigo-400 active:scale-95">
<img src="img/blog-thumb_3.jpg" alt="Cara Mendapatkan Semua Emote MCPE Secara Gratis! (BUG/GLITCH)" class="h-[150px] w-full lg:h-[180px]" />
<figcaption class="mt-2 max-w-sm px-5 py-4 pt-0 font-semibold text-danger dark:text-white">
<h3 class="mt-4 text-lg md:text-xl font-semibold text-danger hover:underline dark:text-white">Cara Mendapatkan Semua Emote MCPE Secara Gratis! (BUG/GLITCH) <span class="text-slate-500 text pl-1 text-base"> (2020)</span></h3>
<span class="mt-0 pt-0 text-amber-400 md:text-xl"> ★★★★</span>
<p class="mt-2 max-w-xl font-lora text-sm font-normal leading-relaxed text-secondary dark:text-slate-100 md:text-base">Begini caranya untuk mendapatkan semua emote Minecraft dengan menggunakan trik bug atau glitch.</p>
<a href="https://www.youtube.com/watch?v=dky81nCyBFU" target="_blank" class="mt-2 mr-2 block font-lora font-normal text-indigo-500 hover:opacity-80 after:pl-1 hover:after:content-['👉'] dark:text-white">Watch video</a>
</figcaption>
</figure>
</div>
</a>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="pt-20 pb-32 dark:bg-dark md:pt-28 lg:pt-36">
<div class="container">
<div class="w-full px-4">
<div class="mx-auto mb-4 max-w-xl text-center">
<h4 class="text-sm font-semibold uppercase tracking-widest text-darkDanger opacity-60 dark:text-indigo-50 md:text-lg">Contact</h4>
<h3 class="mt-2 max-w-xl text-3xl font-bold text-danger dark:text-white sm:text-4xl lg:text-5xl">Send me a message!</h2>
<p class="mt-4 max-w-xl font-lora text-sm leading-relaxed text-secondary dark:text-slate-100 md:text-lg">Need to contact me? Please fill in this field.</p>
</div>
</div>
<!-- Form -->
<form class="submit-to-google-sheet">
<div class="mx-auto mt-10 w-full md:mt-[4.5rem] lg:w-2/3">
<div class="mb-6 w-full px-4">
<label for="name" class="text-sm font-bold uppercase text-danger dark:text-slate-100 md:text-base">Name</label>
<input type="text" id="name" name="name" placeholder="Steven Davinci" required="true" class="dark:focus:border-indigo-0 dark:focus:ring-indigo-0 mt-1 w-full rounded-md border-2 border-transparent bg-slate-100 py-3 px-2.5 text-sm font-semibold text-dark transition duration-300 hover:border-indigo-400 focus:border-indigo-400 focus:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-indigo-300 dark:bg-slate-700 dark:text-white dark:hover:border-slate-400 dark:focus:border-slate-600 dark:focus:ring-slate-500 md:p-4 md:text-base" />
</div>
<div class="mb-6 w-full px-4">
<label for="email" class="text-sm font-bold uppercase text-danger dark:text-slate-100 md:text-base">Email</label>
<input type="email" id="email" name="email" placeholder="davincisteven@mail.com" required="true" class="mt-1 w-full rounded-md border-2 border-transparent bg-slate-100 py-3 px-2.5 text-sm font-semibold text-dark transition duration-300 hover:border-indigo-400 focus:border-indigo-400 focus:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-indigo-300 dark:bg-slate-700 dark:text-white dark:hover:border-slate-400 dark:focus:border-slate-600 dark:focus:ring-slate-500 md:p-4 md:text-base"/>
</div>
<div class="mb-6 w-full px-4">
<label for="msg" class="text-sm font-bold uppercase text-danger dark:text-slate-100 md:text-base">Message</label>
<textarea id="msg" name="message" placeholder="Hi, how are you?" required="true" class="mt-1 h-[100px] w-full rounded-md border-2 border-transparent bg-slate-100 py-3 px-2.5 text-sm font-semibold leading-relaxed text-dark transition duration-300 hover:border-indigo-400 focus:border-indigo-400 focus:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-indigo-300 dark:bg-slate-700 dark:text-white dark:hover:border-slate-400 dark:focus:border-slate-600 dark:focus:ring-slate-500 md:p-4 md:text-base"></textarea>
</div>
<div class="w-full px-4">
<button class="btn-submit w-full rounded-full bg-danger py-3 px-8 text-sm font-bold text-white transition duration-300 hover:bg-indigo-700 hover:shadow-lg hover:shadow-indigo-100 active:scale-95 active:bg-dark dark:hover:shadow-dark dark:active:bg-indigo-500 md:text-base lg:w-[unset] lg:rounded-md"type="submit">Submit</button>
<button class="btn-loading hidden w-full cursor-no-drop rounded-full bg-danger py-3 px-8 text-sm font-bold text-white opacity-60 transition duration-300 md:text-base lg:w-[unset] lg:rounded-md" type="submit" disabled>
<svg class="-ml-1 mr-2 inline-block h-5 w-5 animate-spin text-white motion-reduce:hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-20" cx="12" cy="12" r="10" stroke="#312e81" stroke-width="4"></circle>
<path class="opacity-75" fill="#e0e7ff" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Loading...
</button>
</div>
</div>
</form>
</div>
</section>
<!-- Footer -->
<footer class="to relative bg-gradient-to-tl from-dark to-darkDanger pt-16 pt-1 pb-12">
<div class="container">
<div class="group w-full">
<button id="to-top" class="absolute -top-16 left-[50%] mx-auto mt-10 block -translate-x-[50%] rounded-full bg-indigo-50 py-3 px-2 text-base text-darkDanger shadow-lg shadow-slate-600 transition duration-200 hover:bg-indigo-100 hover:text-danger hover:opacity-100 active:scale-95 group-hover:-translate-y-1 md:px-3 md:text-lg">
<i class="bi bi-arrow-up font-bold"></i>
</button>
</div>
<div class="flex flex-wrap items-center justify-center gap-20 pt-20 md:pt-24">
<div class="w-full px-4 lg:mb-12 lg:w-1/3">
<h3 class="max-w-xl text-3xl font-bold text-white sm:text-4xl lg:text-4xl">For Bussiness :</h3>
<a href="mailto:rendycraft047@gmail.com?" class="block text-[10px] text-sm font-semibold tracking-wider text-slate-300 underline transition-all duration-300 hover:text-slate-400 md:mt-1 md:text-lg">rendycraft047@gmail.com</a>
<p class="mt-2 font-lora text-sm font-medium tracking-wider text-slate-400 transition-all duration-300 md:text-lg">Bandung, Jawa Barat, Indonesia 🇮🇩</p>
<div class="mt-5 flex flex-wrap gap-x-2 md:mt-6">
<a href="https://youtube.com/@RC047" target="_blank" class="group mr-4 flex h-9 w-9 scale-110 items-center justify-center rounded-full border border-danger transition-all duration-500 hover:bg-danger hover:opacity-80 hover:ring-4 hover:ring-danger active:scale-90 md:scale-125 md:hover:scale-[1.1] md:active:scale-[1]"><i class="bi bi-youtube text-danger group-hover:text-white"></i></a>
<a href="https://instagram.com/rendycraft047" target="_blank" class="group mr-4 flex h-9 w-9 scale-110 items-center justify-center rounded-full border border-[#ea0c5f] transition-all duration-500 hover:bg-[#ea0c5f] hover:opacity-80 hover:ring-4 hover:ring-[#ea0c5d62] active:scale-90 md:scale-125 md:hover:scale-[1.1] md:active:scale-[1]"><i class="bi bi-instagram text-[#ea0c5f] group-hover:text-white"></i></a>
<a href="https://facebook.com/rendy.adhitya.2025" target="_blank" class="group mr-4 flex h-9 w-9 scale-110 items-center justify-center rounded-full border border-primary transition-all duration-500 hover:bg-primary hover:opacity-80 hover:ring-4 hover:ring-primary active:scale-90 md:scale-125 md:hover:scale-[1.1] md:active:scale-[1]"><i class="bi bi-facebook text-primary group-hover:text-white"></i></a>
<a href="https://tiktok.com/@rendycraft047" target="_blank" class="group mr-4 flex h-9 w-9 scale-110 items-center justify-center rounded-full border border-slate-100 transition-all duration-500 hover:bg-slate-100 hover:opacity-80 hover:ring-4 hover:ring-slate-400 active:scale-90 md:scale-125 md:hover:scale-[1.1] md:active:scale-[1]"><i class="bi bi-tiktok text-white group-hover:text-dark"></i></a>
<a href="https://x.com/rendycraft047" target="_blank" class="group flex h-9 w-9 scale-110 items-center justify-center rounded-full border border-slate-100 transition-all duration-500 hover:bg-slate-100 hover:opacity-80 hover:ring-4 hover:ring-slate-400 active:scale-90 md:scale-125 md:hover:scale-[1.1] md:active:scale-[1]"><i class="bi bi-twitter-x text-white group-hover:text-dark"></i></a>
</div>
</div>
<div class="mb-12 w-full px-4 lg:w-1/3">
<h3 class="mb-2 text-base font-semibold text-slate-100 md:text-xl">Thanks for the everything <i class="bi bi-heart-fill text-danger"></i></h3>
<ul>
<li class="pl-1 active:scale-95">
<a href="https://github.com/dimaskuy" class="text-sm text-slate-100 opacity-80 transition duration-100 hover:font-semibold hover:text-white hover:opacity-100 md:text-lg" target="_blank"><i class="bi bi-arrow-right"></i> DimasRS</a>
</li>
<li class="pl-1 active:scale-95">
<a href="https://github.com/Jahirrrr" class="text-sm text-slate-100 opacity-80 transition duration-100 hover:font-semibold hover:text-white hover:opacity-100 md:text-lg" target="_blank"><i class="bi bi-arrow-right"></i> Zahir</a>
</li>
<li class="pl-1 active:scale-95">
<a href="https://github.com/Nurutomo" class="text-sm text-slate-100 opacity-80 transition duration-100 hover:font-semibold hover:text-white hover:opacity-100 md:text-lg" target="_blank"><i class="bi bi-arrow-right"></i> Nurutomo</a>
</li>
<li class="pl-1 active:scale-95">
<a href="https://github.com/ArugaZ" class="text-sm text-slate-100 opacity-80 transition duration-100 hover:font-semibold hover:text-white hover:opacity-100 md:text-lg" target="_blank"><i class="bi bi-arrow-right"></i> ArugaZ</a>
</li>
<li class="pl-1 active:scale-95">
<a href="https://github.com/MhankBarBar" class="text-sm text-slate-100 opacity-80 transition duration-100 hover:font-semibold hover:text-white hover:opacity-100 md:text-lg" target="_blank"><i class="bi bi-arrow-right"></i> MhankBarBar</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="src/js/vanilla-tilt.min.js"></script>
<script src="src/js/index.js"></script>
<script>
// TiltJS
const tiltJSEl = Array.from(document.querySelectorAll(".tiltJS"));
const isDark = localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) ? false : true;
VanillaTilt.init(tiltJSEl, {
glare: isDark,
scale: 1.1,
});
</script>
</body>
</html>