-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
380 lines (344 loc) · 22 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
<!DOCTYPE html>
<html lang="en">
<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">
<title>Portfolio - Resa Endrawan</title>
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<!-- fontawesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<!-- font Family Poppins -->
<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=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<!-- smooth scrool -->
<style>
html {
scroll-behavior: smooth;
}
</style>
<!-- Animate css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
</head>
<body class="bg-gray-800 font-poppins overscroll-auto">
<!-- Alpine js -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<div class="bg-gray-600" x-data="topBtn">
<button @click="scrolltoTop" id="topButton"
class="text-3xl text-green-700 fixed z-10 hidden opacity-80 bottom-5 right-5">
<i class="fas fa-arrow-circle-up"></i>
</button>
</div>
<!-- navbar start -->
<div class="container">
<div class="flex flex-col md:flex-row px-4 animated wow slideInDown">
<div class="flex justify-between items-center px-4 py-4 md:py-0 border-b border-gray-700 md:border-b-0">
<div class="animated wow slideInLeft" data-wow-delay="1s">
<a href="/" class="uppercase font-semibold text-gray-100 md:mr-4 tracking-widest ">Resaendr</a>
</div>
<!-- Hamburger menu mobile -->
<div class="nav-toggler">
<button class="items-center animated slideInRight">
<svg class="transition duration-500 ease-in-out w-6 h-6 outline-none text-gray-100 block md:hidden"
className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clipRule="evenodd" /></svg>
</button>
</div>
</div>
<div
class="transition duration-500 ease-in-out nav md:flex hidden flex-col md:flex-row justify-between w-full py-4 md:py-0 md:bg-transparent bg-gray-700 rounded-xl">
<div class="transition duration-500 ease-in-out flex flex-col md:flex-row md:gap-4"></div>
<div class="transition duration-500 ease-in-out flex flex-col md:flex-row md:gap-4 p-4">
<a href="#portfolio"
class="block px-4 py-2 md:py-1 rounded-md md:my-2 text-gray-100 md:text-left text-center hover:bg-gray-800 transition duration-200 ease-in-out animated wow slideInDown">Portfolio</a>
<a href="#blog"
class="block px-4 py-2 md:py-1 rounded-md my-2 text-gray-100 md:text-left text-center hover:bg-gray-800 transition duration-200 ease-in-out animated wow slideInDown"
data-wow-delay="0.25s">Blog</a>
<a href="#Aboutme"
class="block px-4 py-2 md:py-1 rounded-md my-2 text-gray-100 md:text-left text-center hover:bg-gray-800 transition duration-200 ease-in-out animated wow slideInDown"
data-wow-delay="0.5s">About</a>
</div>
<!-- social for desktop -->
<div class="flex flex-col md:flex-row md:gap-3 md:items-center">
<a href="https://facebook.com/resa.endrawan56/"
class="hidden md:block px-4 py-2 md:py-1 rounded-md my-2 text-gray-100 animated wow slideInDown"><i
class="fab fa-facebook-f text-xl"></i></a>
<a href="https://www.twitter.com/resaendr"
class="hidden md:block px-4 py-2 md:py-1 rounded-md my-2 text-gray-100 animated wow slideInDown"
data-wow-delay="0.25s"><i class="fab fa-twitter text-xl"></i></a>
<a href="https://www.instagram.com/resaendr/"
class="hidden md:block px-4 py-2 md:py-1 rounded-md my-2 text-gray-100 animated wow slideInDown"
data-wow-delay="0.5s"><i class="fab fa-instagram text-xl"></i></a>
<!-- social for mobile -->
<div class="flex md:hidden align-center justify-around">
<a href="https://facebook.com/resa.endrawan56/"><i
class="text-gray-50 hover:text-gray-300 transition duration-300 ease-in-out fab fa-facebook-f text-xl"></i></a>
<a href="https://www.twitter.com/resaendr"><i
class="text-gray-50 hover:text-gray-300 transition duration-300 ease-in-out fab fa-twitter text-xl"></i></a>
<a href="https://www.instagram.com/resaendr/"><i
class="text-gray-50 hover:text-gray-300 transition duration-300 ease-in-out fab fa-instagram text-xl"></i></a>
</div>
</div>
</div>
</div>
<!-- navbar end -->
<!-- main page -->
<section class="mt-10">
<div class="mx-4 text-gray-50">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 px-4 h-62">
<div class="flex">
<img src="assets/images/w.png"
class="w-40 h-40 md:w-52 md:h-52 rounded-3xl md:rounded-full animated wow slideInLeft"
data-wow-delay="1s" alt="">
<div class="block ml-3 md:ml-10 py-5 animated wow slideInLeft" data-wow-delay="0.5s">
<p class="block">Hello, I'm</p>
<h2 class="block text-xl lg:text-4xl">Resa Endrawan</h2>
<p class="text-sm opacity-70 mt-2">Frontend Website Developer</p>
<div class="mt-3 md:mt-5 space-x-6">
<a href="https://github.com/resaend">
<i
class="fab fa-github md:text-2xl hover:text-gray-300 transition duration-300 ease-in-out"></i>
</a>
<a href="https://www.behance.net/resaendrawan">
<i
class="fab fa-behance md:text-2xl hover:text-gray-300 transition duration-300 ease-in-out"></i>
</a>
<a href="https://www.linkedin.com/in/resa-endrawan-29247a197">
<i
class="fab fa-linkedin-in md:text-2xl hover:text-gray-300 transition duration-300 ease-in-out"></i>
</a>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="lg:block animated wow slideInRight" data-wow-delay="0.5s">
<p class="block pt-5 text-center md:text-left">Career</p>
<ul class="mt-2">
<li class="text-lg text-center md:text-left">SMAN 2 Cikampek</li>
<p class="text-sm opacity-70 text-center md:text-left">IPA 2017 - 2019</p>
<li class="text-lg mt-2 text-center md:text-left">Universitas Komputer Indonesia</li>
<p class="text-sm opacity-70 text-center md:text-left">Teknik Informatika 2019</p>
</ul>
</div>
<div class="lg:block animated wow slideInRight" data-wow-delay="1s">
<p class="block pt-5 text-center md:text-left mt-5 md:mt-0">Organization</p>
<ul class="mt-2">
<li class="text-lg text-center md:text-left">Organisasi Siswa Intra Sekolah</li>
<p class="text-sm opacity-70 text-center md:text-left">2017 - 2018</p>
<li class="text-lg mt-2 text-center md:text-left">Himpunan Mahasiswa Teknik Informatika
</li>
<p class="text-sm opacity-70 text-center md:text-left">2020 - 2021</p>
</ul>
</div>
</div>
</div>
</div>
<div class="skills">
<h1 class="text-center text-gray-50 mt-10 md:mt-5 animated wow slideInLeft" data-wow-delay="0s">Familiar
with</h1>
<div class="imgae-logo justify-center flex gap-6">
<img src="assets/images/bootstrap.png" class="w-14 mt-3 shadow-xl rounded-xl animated wow slideInUp"
data-wow-delay="0.25s">
<img src="assets/images/tailwindcss.png"
class="w-14 mt-3 shadow-xl rounded-xl animated wow slideInUp" data-wow-delay="0.5s">
<img src="assets/images/xd.png" class="w-14 mt-3 shadow-xl rounded-xl animated wow slideInUp"
data-wow-delay="0.75s">
<img src="assets/images/figma.png" class="w-14 mt-3 shadow-xl rounded-xl animated wow slideInUp"
data-wow-delay="1s">
</div>
</div>
<div class="flex justify-between items-center mx-4 py-6 border-b border-gray-700 md:border-b-0"> </div>
</section>
<!-- To Top -->
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('topBtn', () => ({
scrolltoTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
}));
});
var topBtn = document.getElementById("topButton");
window.onscroll = function () {
(document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) ?
topBtn.classList.remove("hidden"): topBtn.classList.add("hidden");
}
</script>
<section class="portfolio">
<h1 class="text-center text-gray-50 text-lg mt-10 md:mt-0 animated wow slideInRight" data-wow-delay="0s"
id="portfolio">Portfolio</h1>
<div class="px-10 mt-5 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
<!--Card 1-->
<div class="rounded-3xl overflow-hidden bg-gray-700 animated wow slideInUp" data-wow-delay="0.25s">
<img class="w-full rounded-t-3xl" src="assets/images/bloodbank.png" alt="BloodBank">
<div class="px-6 py-4">
<div class="font-semibold text-gray-50 text-xl mb-2">BloodBank - Donate The Blood</div>
<p class="text-gray-50 text-justify text-sm">
A blood bank is a place where blood is collected and stored before it is used for
transfusions. Blood banking takes place in the lab. This is to make sure that donated blood
and blood products are safe before they are used. Blood banking also determines the blood
type.
</p>
</div>
<div class="px-6 pb-4">
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 cursor-pointer hover:bg-gray-400 transition duration-300 ease-in-out">UI
Design</span>
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 cursor-pointer hover:bg-gray-400 transition duration-300 ease-in-out">Frontend</span>
</div>
</div>
<!--Card 2-->
<div class="rounded-3xl overflow-hidden bg-gray-700 animated wow slideInUp" data-wow-delay="0.5s">
<img class="w-full rounded-t-3xl" src="assets/images/hospital.png" alt="Mountain">
<div class="px-6 py-4">
<div class="font-bold text-gray-50 text-xl mb-2">Hospital Management System</div>
<p class="text-gray-50 text-justify text-sm">
Hospital management system is a computer system that helps manage the information related to
health care and aids in the job completion of health care providers effectively. They manage
the data related to all departments of healthcare such as, Clinical.
</p>
</div>
<div class="px-6 pb-4">
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 cursor-pointer hover:bg-gray-400 transition duration-300 ease-in-out">UI
Design</span>
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 cursor-pointer hover:bg-gray-400 transition duration-300 ease-in-out">Frontend</span>
</div>
</div>
<!--Card 3-->
<div class="rounded-3xl overflow-hidden bg-gray-700 animated wow slideInUp" data-wow-delay="0.75s">
<img class="w-full rounded-t-3xl" src="assets/images/tba.png" alt="Mountain">
<div class="px-6 py-4">
<div class="font-bold text-gray-50 text-xl mb-2">Perkiraan tinggi badan anak</div>
<p class="text-gray-50 text-justify text-sm">
Aplikasi yang dibuat menggunakan javascript dan tailwind css ini dapat memperkirakan
perkiraan tinggi badan anak berdasarkan dari tinggi dari kedua orang tua. Dapat digunakan
dan diakses oleh siapapun dari smartphone, tablet maupun komputer.
</p>
</div>
<div class="px-6 pb-4">
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 cursor-pointer hover:bg-gray-400 transition duration-300 ease-in-out">UI
Design</span>
<span
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 cursor-pointer hover:bg-gray-400 transition duration-300 ease-in-out">Frontend</span>
</div>
</div>
</div>
</div>
<!-- See More Button -->
<div class="text-gray-50 text-center py-5">
<button
class="btn py-1 px-5 rounded-3xl hover:text-gray-600 transition duration-300 ease-in-out animated wow slideInLeft"
data-wow-delay="0s">See More <i class="fas fa-arrow-right"></i> </button>
</div>
</section>
<section class="blog" id="blog">
<h1 class="text-center text-gray-50 text-lg my-8 mb-4 animated wow slideInRight" data-wow-delay="0s"
id="portfolio">Blog</h1>
<div class="container">
<!-- post -->
<div class="px-10 mt-5 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-2 gap-5">
<!-- Post 1 -->
<div class="rounded-l-xl w-full flex flex-col md:flex-row animated wow slideInLeft"
data-wow-delay="0.25s">
<img src="./assets/images/tailwind.png"
class="block md:hidden lg:block rounded-t-xl lg:rounded-l-xl lg:rounded-r-nones md:h-40 lg:rounded-r-none" />
<div class="bg-gray-700 rounded-b-xl md:rounded-xl lg:rounded-r-xl lg:rounded-l-none px-4">
<div class="flex justify-between pt-4 pb-2 text-sm">
<span class="flex text-green-700">Bootstrap</span>
<span class="flex text-gray-50">August 12, 2021</span>
</div>
<div class="text-gray-50 font-semibold text-xl">
Ten Years of Bootstrap
</div>
<p class="block p-2 pl-0 pt-1 text-sm text-gray-400">
Ten years ago today, we shipped the first release of Bootstrap. Releasing it on GitHub was
my first real plunge into open source—what an introduction!
<a href="#" class="text-green-700">Read more</a>
</p>
</div>
</div>
<!-- Post 2 -->
<div class="rounded-l-xl w-full flex flex-col md:flex-row animated wow slideInRight"
data-wow-delay="0.25s">
<img src="./assets/images/tailwind.png"
class="block md:hidden lg:block rounded-t-xl lg:rounded-l-xl lg:rounded-r-none md:h-40" />
<div class="bg-gray-700 rounded-b-xl md:rounded-xl lg:rounded-r-xl lg:rounded-l-none px-4">
<div class="flex justify-between pt-4 pb-2 text-sm">
<span class="flex text-green-700">Tailwind Css</span>
<span class="flex text-gray-50">September 9, 2021</span>
</div>
<div class="text-gray-50 font-semibold text-xl">
Introducing Tailwind UI Ecommerce
</div>
<p class="block p-2 pl-0 pt-1 text-sm text-gray-400">
Almost 6 months in the making, we finally released Tailwind UI Ecommerce — the first all-new
component kit for Tailwind UI since the initial launch back in February 2020.
<a href="#" class="text-green-700">Read more </a>
</p>
</div>
</div>
</div>
<!-- See More Button -->
<div class="text-gray-50 text-center py-5">
<button
class="btn py-1 px-5 rounded-3xl hover:text-gray-600 transition duration-300 ease-in-out animated wow slideInLeft"
data-wow-delay="0s">See More <i class="fas fa-arrow-right"></i> </button>
</div>
</div>
</section>
<section class="Aboutme" id="Aboutme">
<h1 class="text-center text-gray-50 text-lg my-8 mb-4 animated wow slideInLeft" data-wow-delay="0s"
id="portfolio">About me</h1>
<div class="container px-10 md:px-56 text-justify">
<div class="flex justify-center px-10">
<div>
<img src="assets/images/res.png" alt="profile" class="w-48 md:w-80 animated wow slideInUp"
data-wow-delay="0.5s">
</div>
</div>
<div class="flex justify-center pt-5 text-gray-100 animated wow slideInUp" data-wow-delay="1s">
<p class="bg-gray-700 px-5 py-5 rounded-xl">
I am an informatics engineering student at Indonesia Computer University. I enjoy resolving the
problem and implementing the idea with design. Interest in exploring various design styles and
following the design trend.
I am a junior programmer with good knowledge of front-end techniques. I love structure and order and
I also stand for quality. I love spending time on fixing little details and optimizing web apps.
Also I like working in a team, you'll learn faster and much more. As the saying goes: 'two heads are
better than one'. </p>
</div>
<div class="text-center mt-10 animated wow slideInUp" data-wow-delay="1.5s">
<a href="mailto:[email protected]" class="shadow bg-gray-800 py-2 px-3 rounded-lg text-gray-50 hover:bg-gray-900">
Hire me <i class="far fa-envelope"></i>
</a>
</div>
</div>
</section>
</div>
<div class="footer mt-10 bg-gray-900 py-4 text-gray-50 animated wow slideInRight" data-wow-delay="1s">
<div class="text-center">
<span>2021 © Made with love by <a href="https://rend.my.id"
class="font-semibold hover:text-gray-800">res</a></span>
</div>
</div>
<!-- Jquery -->
<script src="js/jquery.min.js"></script>
<!-- animate js -->
<script src="js/wow.js"></script>
<!-- init wowjs -->
<script>
new WOW().init();
</script>
<script src="js/hamburger.js"></script>
</body>
</html>