-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
289 lines (279 loc) · 19.5 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
<!DOCTYPE html>
<html>
<head class="scroll-smooth">
<title>muhrizkiakbar</title>
<link rel="stylesheet" href="./dist/output.css">
<meta http-equiv="Permissions-Policy" content="interest-cohort=()">
</head>
<body>
<!--Header Section Start-->
<header class="bg-transparent absolute top-0 left-0 w-full flex items-center z-10">
<div class="container">
<div class="flex items-center justify-between relative">
<div class="px-4">
<a href="#main" class="font-bold text-lg text-primary block py-6">Portofolioku</a>
</div>
<div class="flex items-center px-4">
<button id="toggleMenu" class="block absolute right-4 lg:hidden">
<span class="hamburger-line origin-top-left transition duration-300 ease-in-out"></span>
<span class="hamburger-line transition duration-300 ease-in-out"></span>
<span class="hamburger-line origin-bottom-left transition duration-300 ease-in-out"></span>
</button>
<nav id="navMenu" class="hidden absolute py-5 bg-white rounded-lg shadow-lg max-w-[250px] w-full right-4 top-full lg:block lg:static lg:bg-transparent lg:max-w-full lg:shadow-none lg:rounded-none dark:bg-dark dark:bg-opacity-0">
<ul class="block lg:flex">
<li class="group">
<a href="#main" class="text-base text-dark py-2 mx-8 group-hover:text-primary flex dark:text-primary">Beranda</a>
</li>
<li class="group">
<a href="#about" class="text-base text-dark py-2 mx-8 group-hover:text-primary flex dark:text-primary">Tentang</a>
</li>
<li class="group">
<a href="#github" class="text-base text-dark py-2 mx-8 group-hover:text-primary flex dark:text-primary">Github</a>
</li>
<li class="group">
<a href="#portofolio" class="text-base text-dark py-2 mx-8 group-hover:text-primary flex dark:text-primary">Portofolio</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!--Header Section End-->
<!--Main Section Start-->
<section id="main" class="pt-36 dark:bg-dark">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full self-center px-4 lg:w-1/2">
<h1 class="text-base font-semibold text-primary md:text-xl lg:text-2xl">
Hallo, Saya <span class="block font-bold text-dark text-4xl mt-1 lg:text-5xl md:text-3xl dark:text-slate-400"><span class="font-extralight text-dark text-lg lg:text-5xl md:text-3xl dark:text-slate-600">M. Rizki</span> Akbar</span>
</h1>
<h2 class="font-medium text-slate-500 text-lg mb-5">
Software Engineer
</h2>
</div>
<div class="w-full self-end px-4 lg:w-1/2">
<div class="mt-10 relative">
<img src="assets/images/profile.png" alt="" class="max-w-full mx-auto z-0 md:max-h-27 top-0 bottom-0 left-0 right-0 relative z-10">
<span class="absolute top-10 bottom-0 left-50 translate-x-1/2 dark:-z-0">
<svg width="400" height="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#0EA5E9" d="M39.5,-58.3C52.9,-52.9,66.6,-44.8,66.5,-33.7C66.3,-22.6,52.3,-8.6,47.8,5.2C43.2,19,48.2,32.5,44.7,41.6C41.3,50.8,29.5,55.6,18.1,56.6C6.7,57.6,-4.3,54.9,-14.9,51.4C-25.5,48,-35.8,43.9,-42.1,36.5C-48.5,29.1,-50.9,18.4,-55.7,6.1C-60.5,-6.2,-67.6,-20.2,-63.9,-29.5C-60.2,-38.9,-45.6,-43.6,-33.2,-49.5C-20.7,-55.3,-10.4,-62.3,1.4,-64.4C13.1,-66.5,26.1,-63.7,39.5,-58.3Z" transform="translate(100 100) scale(1.5)" />
</svg>
</span>
</div>
</div>
</div>
</div>
</section>
<!--Main Section End-->
<!--About Section Start-->
<section id="about" class="pt-36 pb-32 dark:bg-dark">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full px-4 mb-10 lg:w-1/2">
<h4 class="font-bold uppercase text-primary text-lg mb-5">
Tentang
</h4>
<p class="font-medium text-base text-slate-500 max-w-xl">
Seorang ayah dari 1 anak yang passionate tentang software engineer, seorang petani hidroponik, sedikit konyol, suka main catur.
</p>
</div>
<div class="w-full px-4 mb-10 lg:w-1/2">
<h2 class="font-semibold text-slate-600 text-2lg mb-3 max-w-xl lg:pt-10 lg:text-4xl dark:text-white">Yuk berteman !</h2>
<p class="font-medium text-base mb-5 text-slate-500 max-w-xl lg:text-lg">
Barang kali ada kerjaan, boleh hubungi saya di bawah ini.
</p>
<div class="flex item-center mt-3">
<a href="https://www.linkedin.com/in/muhammad-rizki-akbar-69220316b/" target="_blank"
class="w-9 h-9 mr-3 rounded-full flex justify-center items-center text-slate-400 border border-secondary hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" class="fill-current" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>LinkedIn</title>
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="https://instagram.com/muhrizkiakbar" target="_blank"
class="w-9 h-9 mr-3 rounded-full flex justify-center items-center text-slate-400 border border-secondary hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" height="20" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
</a>
<a href="https://instagram.com/muhrizkiakbar" target="_blank"
class="w-9 h-9 mr-3 rounded-full flex justify-center items-center text-slate-400 border border-secondary hover:border-primary hover:bg-primary hover:text-white">
<svg role="img" width="20" height="20" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!--About Section End-->
<!--Github Section Start-->
<section id="github" class="pt-36 pb-32 dark:bg-dark">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full px-4 mb-10 lg:w-1/2">
<h4 class="font-bold uppercase text-primary text-lg mb-5">
Github
</h4>
<img class="img-fluid" src="https://camo.githubusercontent.com/da4e42d680cb13ac715d96b3374c414e2f8b09c9d773c103081e8eaefa030f63/68747470733a2f2f6769746875622d726561646d652d73746174732e76657263656c2e6170702f6170693f757365726e616d653d6d756872697a6b69616b62617226686964653d636f6e74726962732c7072732673686f775f69636f6e733d7472756526686964655f626f726465723d74727565267469746c655f636f6c6f723d303030" alt="">
</div>
<div class="w-full px-4 pt-10 lg:w-1/2">
<img class="img-fluid mb-3 max-w-xl" src="https://camo.githubusercontent.com/f3b22e0cb3c6d58f7edce88d60ddfe7f6af1db8544644bcb055d9ce427b387f4/68747470733a2f2f6769746875622d726561646d652d73746174732e76657263656c2e6170702f6170692f746f702d6c616e67732f3f757365726e616d653d6d756872697a6b69616b626172266c61796f75743d636f6d70616374" alt="">
</div>
</div>
</div>
</section>
<!--Github Section End-->
<!--Portofolio Section Start-->
<section id="portofolio" class="pt-36 pb-32 dark:bg-slate-800">
<div class="container">
<div class="w-full px-4">
<div class="max-w-xl mx-auto text-center mb-16">
<h1 class="font-semibold text-xl uppercase text-primary mb-2">
Portofolio
</h1>
</div>
</div>
<div class="w-full px-4 flex flex-wrap justify-center">
<div class="mb-12 p-4 md:w-1/2 lg:w-1/2">
<div class="rounded-md bg-white shadow-md overflow-hidden">
<img src="assets/images/eabsen/login.png" alt="Eabsen" class="w-full">
</div>
<h3 class="font-semibold text-xl text-dark mt-5 dark:text-white"><a href="pages/eabsen.html">Eabsen Online</a></h3>
</div>
<div class="mb-12 p-4 md:w-1/2 lg:w-1/2">
<div class="rounded-md bg-white shadow-md overflow-hidden">
<img src="assets/images/restuguru/dashboard.png" alt="Restuguru" class="w-full">
</div>
<h3 class="font-semibold text-xl text-dark mt-5 dark:text-white"><a href="pages/restuguru.html">Kasir Percetakan</a></h3>
</div>
<div class="mb-12 p-4 md:w-1/2 lg:w-1/2">
<div class="rounded-md bg-white shadow-md overflow-hidden">
<img src="assets/images/wip.jpg" alt="Eabsen" class="w-full">
</div>
<h3 class="font-semibold text-xl text-dark mt-5 dark:text-white">POS Cak Hari Soto Lamongan</h3>
<p class="text-base text-slate-400">
Perlu setup laptop dlu
</p>
</div>
</div>
</div>
</section>
<!--Portofolio Section End-->
<!--Footer Start-->
<footer id="hubungisaya" class="pt-20 bg-primary">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full px-4 lg:w-1/2 xl:w-1/2 sm:w-1/2">
<div class="max-w-xl mx-auto">
<h2 class="font-bold flex flex-wrap uppercase text-xl mb-5 text-white">
Hubungi saya
</h2>
<h4 class="font-semibold text-base text-white">
Email:
</h4>
<a class="text-base text-white flex flex-wrap" href="mail_to:[email protected]">
</a>
<a class="text-base text-white flex flex-wrap" href="mail_to:[email protected]">
</a>
<h4 class="font-semibold text-base mt-5 text-white">
Nomor telpon:
</h4>
<a class="text-base text-white flex flex-wrap" href="tel:081257634242">
0812-5763-4242
</a>
</div>
</div>
<div class="w-full px-4 lg:w-1/2 xl:w-1/2 sm:mt-5 sm:w-1/2">
<div class="max-w-xl mx-auto">
<h2 class="font-bold flex flex-wrap uppercase text-xl mb-3 text-white">
Tautan
</h2>
<a class="text-base text-white flex flex-wrap" href="#main">
Beranda
</a>
<a class="text-base text-white flex flex-wrap" href="#about">
Tentang
</a>
<a class="text-base text-white flex flex-wrap" href="#portofolio">
Portofolio
</a>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full pt-16 pb-7">
<p class="justify-center items-center text-center text-base text-white flex flex-wrap">
Di buat dengan <svg class="mx-2" clip-rule="evenodd" width="20" height="20" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#ff037d" d="m12 5.72c-2.624-4.517-10-3.198-10 2.461 0 3.725 4.345 7.727 9.303 12.54.194.189.446.283.697.283s.503-.094.697-.283c4.977-4.831 9.303-8.814 9.303-12.54 0-5.678-7.396-6.944-10-2.461z" fill-rule="nonzero"/></svg> menggunakan
<svg role="img" class="ml-2" width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Tailwind CSS</title><path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"/></svg>
<a class="ml-2 text-base text-white"
href="https://tailwindcss.com/">tailwindcss</a>.
</p>
</div>
</div>
</div>
</footer>
<!--Footer End-->
<!--Back To Start-->
<a id="totop" class="fixed items-center justify-center bottom-4 right-4 z-[400] hidden h-14 w-14 bg-primary shadow-lg rounded-full p-4" href="#">
<span class="block w-5 h-5 border-t-2 border-l-2 rotate-45">
</span>
</a>
<!--Back To End-->
<!--Dark Mode Start-->
<button id="togglemode" class="fixed items-center justify-center bottom-20 right-4 z-[402] flex h-14 w-14 rounded-full shadow-lg p-4" style="background-color:rgb(148 163 184);">
<svg id="sun" fill="#ffffff" class="hidden" height="20px" width="20px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 457.32 457.32" xml:space="preserve">
<g id="XMLID_467_">
<path id="XMLID_922_" d="M228.66,112.692c-63.945,0-115.968,52.022-115.968,115.967c0,63.945,52.023,115.968,115.968,115.968
s115.968-52.023,115.968-115.968C344.628,164.715,292.605,112.692,228.66,112.692z"/>
<path id="XMLID_1397_" d="M401.429,228.66l42.467-57.07c2.903-3.9,3.734-8.966,2.232-13.59c-1.503-4.624-5.153-8.233-9.794-9.683
l-67.901-21.209l0.811-71.132c0.056-4.862-2.249-9.449-6.182-12.307c-3.934-2.858-9.009-3.633-13.615-2.077l-67.399,22.753
L240.895,6.322C238.082,2.356,233.522,0,228.66,0c-4.862,0-9.422,2.356-12.235,6.322l-41.154,58.024l-67.4-22.753
c-4.607-1.555-9.682-0.781-13.615,2.077c-3.933,2.858-6.238,7.445-6.182,12.307l0.812,71.132l-67.901,21.209
c-4.641,1.45-8.291,5.059-9.793,9.683c-1.503,4.624-0.671,9.689,2.232,13.59l42.467,57.07l-42.467,57.07
c-2.903,3.9-3.734,8.966-2.232,13.59c1.502,4.624,5.153,8.233,9.793,9.683l67.901,21.208l-0.812,71.132
c-0.056,4.862,2.249,9.449,6.182,12.307c3.934,2.857,9.007,3.632,13.615,2.077l67.4-22.753l41.154,58.024
c2.813,3.966,7.373,6.322,12.235,6.322c4.862,0,9.422-2.356,12.235-6.322l41.154-58.024l67.399,22.753
c4.606,1.555,9.681,0.781,13.615-2.077c3.933-2.858,6.238-7.445,6.182-12.306l-0.811-71.133l67.901-21.208
c4.641-1.45,8.291-5.059,9.794-9.683c1.502-4.624,0.671-9.689-2.232-13.59L401.429,228.66z M228.66,374.627
c-80.487,0-145.968-65.481-145.968-145.968S148.173,82.692,228.66,82.692s145.968,65.48,145.968,145.967
S309.147,374.627,228.66,374.627z"/>
</g>
</svg>
<svg id="moon" class="hidden" fill="#ffffff" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="20px" height="20px" viewBox="0 0 45.74 45.74" xml:space="preserve"
>
<g>
<g>
<g>
<g>
<g>
<path d="M12.2,15.267c0-3.322,0.896-6.43,2.448-9.113c0.376-0.649-0.191-1.451-0.918-1.265
C5.35,7.041-0.711,14.961,0.067,24.179c0.736,8.701,7.768,15.803,16.463,16.617c6.033,0.565,11.517-1.811,15.221-5.848
c0.5-0.546,0.073-1.432-0.666-1.401c-0.196,0.009-0.395,0.013-0.594,0.013C20.389,33.56,12.2,25.371,12.2,15.267z"/>
</g>
</g>
<g>
<path d="M23.144,5.6l0.917,2.633l2.788,0.061c0.354,0.008,0.498,0.456,0.218,0.669l-2.221,1.687l0.805,2.669
c0.104,0.338-0.279,0.614-0.568,0.414l-2.292-1.59l-2.29,1.59c-0.29,0.201-0.669-0.076-0.569-0.414l0.805-2.669l-2.221-1.687
c-0.28-0.213-0.134-0.661,0.218-0.669l2.788-0.061L22.44,5.6C22.556,5.267,23.027,5.267,23.144,5.6z"/>
</g>
<g>
<path d="M40.26,26.44l0.881,2.53l2.679,0.057c0.389,0.009,0.549,0.502,0.24,0.737l-2.134,1.621l0.772,2.564
c0.111,0.371-0.309,0.677-0.627,0.454l-2.201-1.527l-2.2,1.527c-0.318,0.223-0.739-0.083-0.626-0.454l0.772-2.564l-2.133-1.621
c-0.31-0.234-0.149-0.729,0.238-0.737l2.679-0.057l0.884-2.53C39.612,26.074,40.131,26.074,40.26,26.44z"/>
</g>
<g>
<path d="M39.926,8.098l1.325,3.799l4.021,0.086c0.452,0.01,0.639,0.584,0.278,0.858l-3.204,2.434l1.162,3.853
c0.131,0.433-0.356,0.788-0.729,0.529l-3.306-2.294l-3.305,2.294c-0.372,0.259-0.86-0.097-0.729-0.529l1.161-3.853l-3.205-2.434
c-0.358-0.273-0.172-0.849,0.279-0.858l4.022-0.086l1.324-3.799C39.173,7.672,39.776,7.672,39.926,8.098z"/>
</g>
</g>
</g>
</g>
</svg>
</button>
<!--Dark Mode End-->
<script src="dist/script.js"></script>
</body>
</html>