-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
451 lines (448 loc) · 27.3 KB
/
index.htm
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
<!doctype html>
<html lang="id-ID">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Rizky Kurniawan">
<meta name="description" content="Rizky Kurniawan | Learner - Backend Developer - Tech Enthusiast">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Work+Sans:wght@500;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/cs-style.css">
<link rel="stylesheet" href="./assets/css/swiper-bundle.css">
<script src="./assets/js/fontawesome.js"></script>
<title>Rizky Kurniawan | Learner - Backend Developer - Tech Enthusiast</title>
</head>
<body id="home">
<nav class="sticky-top navbar navbar-expand-lg navbar-light cs-bg-light py-3">
<div class="container">
<a class="navbar-brand fw-bold" href="">Rizky</a>
<button style="box-shadow: none;" class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="material-icons va-top">menu_open</span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
<a class="nav-link fw-bold" href="#home">Home</a>
<a class="nav-link fw-bold" href="#about">About</a>
<a class="nav-link fw-bold" href="#skill">Skills</a>
<a class="nav-link fw-bold" href="#project">Project</a>
<a class="nav-link fw-bold" href="#blog">Blog</a>
<a class="nav-link fw-bold" href="#youtube">From YouTube</a>
<a class="nav-link fw-bold" href="#contact">Contact</a>
</div>
</div>
</div>
</nav>
<header class="cs-bg-light pt-5">
<div class="container">
<div class="row">
<div class="col-lg-8 d-flex align-items-center">
<div>
<h1 class="name fw-bold" data-aos="fade-right" data-aos-duration="2000">Rizky Kurniawan</h1>
<h6 class="mb-4" data-aos="fade-up" data-aos-duration="2000">LEARNER · BACKEND
DEVELOPER · TECH ENTHUSIAST</h6>
<div data-aos="fade-left" data-aos-duration="2000">
<a title="GitHub" style="outline: none; box-shadow: none;"
href="https://github.com/kykurniawan" target="_blank"
class="btn btn-sm btn-primary rounded-0"><i class="fa fa-github fs-5"></i></a>
<a title="YouTube" style="outline: none; box-shadow: none;"
href="https://www.youtube.com/channel/UC4G--03ELkOXX-dcSq_LMQQ" target="_blank"
class="btn btn-sm btn-primary rounded-0"><i class="fa fa-youtube fs-5"></i></a>
<a title="LinkedIn" style="outline: none; box-shadow: none;"
href="https://linkedin.com/in/kykurniawan" target="_blank"
class="btn btn-sm btn-primary rounded-0"><i class="fa fa-linkedin fs-5"></i></a>
<a title="Instagram" style="outline: none; box-shadow: none;"
href="https://instagram.com/_sweet.scar" target="_blank"
class="btn btn-sm btn-primary rounded-0"><i class="fa fa-instagram fs-5"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 d-flex align-items-center" data-aos="fade-left" data-aos-duration="2000">
<img src="./assets/img/r.png" alt="" class="img-fluid w-100 d-lg-block d-none">
</div>
</div>
</div>
</header>
<section class="about py-5" id="about">
<div class="container py-5">
<div class="row">
<div class="col-lg-4 mb-3 px-lg-3 px-5 my-picture-wrapper" data-aos="fade-right"
data-aos-duration="2000">
<img src="./assets/img/profile.jpg" alt="about me picture"
class="img-fluid rounded shadow-sm w-100 my-picture">
</div>
<div class="col-lg-8 d-flex align-items-center" data-aos="fade-up" data-aos-duration="2000">
<div>
<h2 class="cs-main-font fw-bold mb-5 text-lg-start text-center">About Me</h2>
<p>Saya Rizky Kurniawan, Mahasiswa Teknik Informatika di Universitas Islam Kalimantan,
Banjarmasin,
Kalimantan Selatan.
</p>
<p>Saya berasal dari Desa Subur Indah, Katingan Kuala, Kab. katingan, Kalimantan Tengah.</p>
<p>Aktifitas sehari-hari saya saat ini adalah mempelajari berbagai hal yang berkaitan dengan
pemrograman
web, terkadang saya juga bekerja sebagai freelancer untuk membuat website. Beberapa
bahasa pemrograman
yang biasanya saya gunakan adalah PHP, Python, Javascript, dan Kotlin. dan
framework/teknologi yang saya
pelajari biasanya Codeigniter, Laravel, Django, Nodejs.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="py-5 cs-bg-light" id="skill">
<div class="container py-5">
<h2 class="cs-main-font fw-bold mb-5 text-center">Skills</h2>
<div class="row">
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up-right" data-aos-duration="2000">
<img src="./assets/img/django-skill-icon.png" alt="" class="img-fluid rounded shadow w-50 mb-4">
<h5 class="text-muted fw-bold">Python Django</h5>
</div>
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-duration="2000">
<img src="./assets/img/nodejs-skill-icon.png" alt="" class="img-fluid rounded shadow w-50 mb-4">
<h5 class="text-muted fw-bold">Node JS</h5>
</div>
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up" data-aos-duration="2000">
<img src="./assets/img/codeigniter-skill-icon.png" alt=""
class="img-fluid rounded shadow w-50 mb-4">
<h5 class="text-muted fw-bold">Codeigniter</h5>
</div>
<div class="col-lg-3 col-md-6 text-center mb-4" data-aos="fade-up-left" data-aos-duration="2000">
<img src="./assets/img/git-skill-icon.png" alt="" class="img-fluid rounded shadow w-50 mb-4">
<h5 class="text-muted fw-bold">Version Control</h5>
</div>
</div>
</div>
</section>
<section class="project py-5 bg-light" id="project">
<div class="container py-lg-5 py-4">
<h2 class="cs-main-font fw-bold mb-5 text-center">Projects</h2>
<div id="swiper-control-button" class="text-end mb-3">
<button style="box-shadow: none;" type="button" class="swiper-prev btn btn-sm btn-primary"><span
class="material-icons va-middle">keyboard_arrow_left</span></button>
<button style="box-shadow: none;" type="button" class="swiper-next btn btn-sm btn-primary"><span
class="material-icons va-middle">keyboard_arrow_right</span></button>
</div>
<div class="row">
<div class="col-lg-6 mb-3 order-lg-0 order-md-0 order-1" data-aos="fade-right"
data-aos-duration="2000">
<div>
<h3 class="mb-4 mplus text-soft-black" id="project-title">
Web Portofolio
</h3>
<div id="project-description">
<p>Di dalam website ini terdapat berbagai postingan tentang pemrograman dan teknologi,
showcase proyek saya, dan
beberapa video yang saya ambil dari channel YouTube saya.
</p>
<ul>
<li><strong>Jenis Aplikasi:</strong> Web</li>
<li><strong>Stack:</strong> Python, Django, PostgreSQL, Javascript, Bootstrap</li>
<li><strong>Hosting:</strong> Heroku</li>
<li><strong>Storage:</strong> AWS S3</li>
<li><strong>Link:</strong>
<a href='https://rizkykurniawan.herokuapp.com'>Click Here</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-6 mb-3 order-lg-1 order-md-1 order-0" data-aos="fade-up">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card border-0 h-100">
<img loading="lazy"
src="./assets/img/7ad2161e-86d8-4c56-9913-7f2c11225bc0-Screenshot_114.png"
alt="project image" class="card-img-top img-fluid w-100">
</div>
</div>
<div class="swiper-slide">
<div class="card border-0 h-100">
<img loading="lazy"
src="./assets/img/ea942d23-8a9e-45a9-81be-d0030a585da1-Screenshot_113.png"
alt="project image" class="card-img-top img-fluid w-100">
</div>
</div>
<div class="swiper-slide">
<div class="card border-0 h-100">
<img loading="lazy"
src="./assets/img/91ff09ff-72d0-4694-a287-101209a6ca22-web-hmp-ti-uniska.png"
alt="project image" class="card-img-top img-fluid w-100">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blog py-5" id="blog">
<div class="container py-5">
<h2 class="cs-main-font fw-bold mb-5 text-center">Blogs</h2>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-3" data-aos="zoom-in" data-aos-duration="2000">
<div style="cursor: pointer;" onclick="showBlogModal(0)"
class="card h-100 blog-card border-0 rounded-0 cs-bg-light">
<img src="assets/img/1.png" alt="Mengenal Bahasa Pemrograman Kotlin"
class="card-img-top img-fluid w-100">
<div class="card-body">
<h5 class="fw-bold">Mengenal Bahasa Pemrograman Kotlin</h5>
<p>Kotlin adalah sebuah bahasa pemrograman dengan pengetikan statis yang berjalan pada
Mesin
Virtual Java ataupun menggunakan...
</p>
<small class="text-muted">15 Juni 2021</small>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-3" data-aos="zoom-in" data-aos-duration="2000">
<div style="cursor: pointer;" onclick="showBlogModal(1)"
class="card h-100 blog-card border-0 rounded-0 cs-bg-light">
<img src="assets/img/2.jpg" alt="Mengenal Bahasa Pemrograman Python"
class="card-img-top img-fluid w-100">
<div class="card-body">
<h5 class="fw-bold">Mengenal Bahasa Pemrograman Python</h5>
<p>Python adalah bahasa pemrograman interpretatif multiguna dengan filosofi perancangan
yang berfokus pada tingkat
keterbacaan kode. Python diklaim sebagai...
</p>
<small class="text-muted">14 Juni 2021</small>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-3" data-aos="zoom-in" data-aos-duration="2000">
<div style="cursor: pointer;" onclick="showBlogModal(2)"
class="card h-100 blog-card border-0 rounded-0 cs-bg-light">
<img src="assets/img/3.jpg" alt="" class="card-img-top img-fluid w-100">
<div class="card-body">
<h5 class="fw-bold">Apa itu GitHub Pages?</h5>
<p>GitHub Pages adalah layanan hosting situs statis yang mengambil file HTML, CSS, dan
JavaScript langsung dari repositori di GitHub...
</p>
<small class="text-muted">15 Juni 2021</small>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-3" data-aos="zoom-in" data-aos-duration="2000">
<div style="cursor: pointer;" onclick="showBlogModal(3)"
class="card h-100 blog-card border-0 rounded-0 cs-bg-light">
<img src="assets/img/docker.jpg" alt="" class="card-img-top img-fluid w-100">
<div class="card-body">
<h5 class="fw-bold">Apa itu Docker?</h5>
<p>Docker adalah platform perangkat lunak yang memungkinkan Anda membuat, menguji, dan
menerapkan aplikasi dengan cepat.</p>
<small class="text-muted">15 Juni 2021</small>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="project py-5 bg-light" id="youtube">
<div class="container py-5">
<h2 class="cs-main-font fw-bold mb-5 text-center">From YouTube</h2>
<div class="row">
<div class="col-lg-4 mb-3" data-aos="fade-right" data-aos-duration="2000">
<div onclick="showVideoModal('7ay61Uq_FOE')" style="cursor: pointer;"
class="card border-0 h-100 video-card" data-aos="fade-up">
<img loading="lazy" src="https://img.youtube.com/vi/7ay61Uq_FOE/0.jpg" alt="video thumbnail"
class="card-img-top">
<div class="card-body">
<h6 class="card-title text-secondary">BEGINI CARA SCREENSHOT DI VISUAL
STUDIO CODE (VS
CODE) AGAR HASILNYA BAGUS DAN RAPI
</h6>
</div>
</div>
</div>
<div class="col-lg-4 mb-3" data-aos="fade-right" data-aos-duration="2000">
<div onclick="showVideoModal('ueQhG91SKnA')" style="cursor: pointer;"
class="card border-0 h-100 video-card" data-aos="fade-up">
<img loading="lazy" src="https://img.youtube.com/vi/ueQhG91SKnA/0.jpg" alt="video thumbnail"
class="card-img-top">
<div class="card-body">
<h6 class="card-title text-secondary">MEMBUAT APLIKASI KONVERTER SUHU
SEDERHANA DENGAN
BAHASA PEMROGRAMAN PHP
</h6>
</div>
</div>
</div>
<div class="col-lg-4 mb-3" data-aos="fade-right" data-aos-duration="2000">
<div onclick="showVideoModal('nXzEG2SBBhQ')" style="cursor: pointer;"
class="card border-0 h-100 video-card" data-aos="fade-up">
<img loading="lazy" src="https://img.youtube.com/vi/nXzEG2SBBhQ/0.jpg" alt="video thumbnail"
class="card-img-top">
<div class="card-body">
<h6 class="card-title text-secondary">CARA MUDAH MENGGUNAKAN FORM, FOR
LOOP, DAN IF DI
PHP
</h6>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact py-5 cs-bg-light" id="contact">
<div class="container py-5">
<h2 class="cs-main-font fw-bold mb-5 text-center">Contact Me</h2>
<div class="row">
<div class="col-lg-6 mb-lg-0 mb-4" data-aos="fade-right" data-aos-duration="2000">
<h4 class="mb-5">Contact Info</h4>
<div class="mb-3">
<h5 class="text-primary">Alamat Email</h5>
<h6>me.rizkykurniawan@gmail.com</h6>
</div>
<div class="mb-3">
<h5 class="text-primary">Nomor Telepon</h5>
<h6>(+62) 822 5654 5404</h6>
</div>
<div class="mb-3">
<h5 class="text-primary">Alamat</h5>
<h6>Jl. Semangat Dalam, Handil Bakti, Barito Kuala, Kalimantan Selatan.</h6>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left" data-aos-duration="2000">
<form method="POST" id="contact-form">
<input type="hidden" name="csrfmiddlewaretoken"
value="NwqbOmFkD9k2Gf1Otl6xgYbNQuaOiRkq57iWp2RbVdE6w8vvhgaOfBcUksiqDqop">
<div class="row mb-lg-3 mb-2 g-2 g-lg-3">
<div class="col">
<input type="text" name="name" maxlength="128" class="form-control shadow py-3"
placeholder="Nama lengkap" required id="id_name">
</div>
<div class="col">
<input type="email" name="email" class="form-control shadow py-3"
placeholder="Alamat email" required id="id_email">
</div>
</div>
<div class="mb-lg-3 mb-2">
<input type="text" name="subject" maxlength="128" class="form-control shadow py-3"
placeholder="Subjek" required id="id_subject">
</div>
<div class="mb-lg-3 mb-2">
<textarea name="message" cols="40" rows="10" class="form-control shadow py-3"
placeholder="Pesan" required id="id_message"></textarea>
</div>
<div class="text-end">
<button type="button" class="btn shadow btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="py-5 bg-dark">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4">
<h6 class="text-light mb-5">RIZKY KURNIAWAN</h6>
<p class="text-muted">Learner · Backend Developer · Tech Enthusiast</p>
<p class="text-muted">Student at Islamic University Of Kalimantan, Muhammad Arsyad Al Banjari,
Banjarmasin.
</p>
</div>
<div class="col-lg-4 mb-4">
<h6 class="text-light mb-5">SOCIAL MEDIA</h6>
<p class="text-muted">
<a style="outline: none; box-shadow: none;" href="https://github.com/kykurniawan"
target="_blank" class="text-decoration-none">GitHub</a>
</p>
<p class="text-muted">
<a style="outline: none; box-shadow: none;"
href="https://www.youtube.com/channel/UC4G--03ELkOXX-dcSq_LMQQ" target="_blank"
class="text-decoration-none">YouTube</a>
</p>
<p class="text-muted">
<a style="outline: none; box-shadow: none;" href="https://linkedin.com/in/kykurniawan"
target="_blank" class="text-decoration-none">LinkedIn</a>
</p>
<p class="text-muted">
<a style="outline: none; box-shadow: none;" href="https://instagram.com/_sweet.scar"
target="_blank" class="text-decoration-none">Instagram</a>
</p>
</div>
<div class="col-lg-4 mb-4">
<h6 class="text-light mb-5">GET IN TOUCH</h6>
<div class="mb-2">
<p class="text-primary">Alamat Email</p>
<p class="text-muted">me.rizkykurniawan@gmail.com</p>
</div>
<div class="mb-2">
<p class="text-primary">Nomor Telepon</p>
<p class="text-muted">(+62) 822 5654 5404</p>
</div>
<div class="mb-2">
<p class="text-primary">Alamat</p>
<p class="text-muted">Jl. Semangat Dalam, Handil Bakti, Barito Kuala, Kalimantan Selatan.
</p>
</div>
</div>
</div>
<div class="border-top border-secondary my-3"></div>
<div class="fw-bold text-muted text-center">
Copyright © 2021 Rizky Kurniawan. All Rights Reserved.
</div>
</div>
</footer>
<!-- Modals -->
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="loader py-5" style="display: none;">
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div class="ratio iframe-container ratio-16x9" style="display: none;">
<iframe src="" title="YouTube video" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="blogModal" tabindex="-1" aria-labelledby="blogModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="" alt="Blog Image" class="img-fluid w-100 mb-4">
<h4 class="fw-bold text-secondary blog-title mb-4"></h4>
<article></article>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<script src="./assets/js/swiper-bundle.min.js"></script>
<script src="./assets/js/jquery-3.6.0.min.js"></script>
<script src="./assets/js/script.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>