-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
358 lines (358 loc) · 28.2 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
<!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">
<link rel="shortcut icon" href="./public/images/favicon.png" type="image/x-icon">
<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=Kanit:wght@300;400;500;600&display=swap" rel="stylesheet"-->
<script src="https://cdn.tailwindcss.com"></script>
<title>Dimas Aldi Pratama</title>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
@font-face {
font-family: 'Clash Display';
src: url(./public/font/OTF/ClashDisplay-Regular.otf);
font-weight: normal;
}
@font-face {
font-family: 'Clash Display';
src: url(./public/font/OTF/ClashDisplay-Semibold.otf);
font-weight: bold;
}
@font-face {
font-family: 'Clash Display';
src: url(./public/font/OTF/ClashDisplay-Medium.otf);
font-weight: medium;
}
body{
/*font-family: 'Kanit', sans-serif;*/
font-family: 'Clash Display', sans-serif;
font-weight: 300;
background-image: url(./bg-header-sm.png);
background-size: 100%;
background-repeat: no-repeat;
background-color: #1B1D21;
}
#project{
background-image: url(./bg-project-sm.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
}
@media screen and (min-width:640px) {
body{
background-image: url(./bg-header.png);
}
#project{
background-image: url(./bg-project.png);
}
}
</style>
</head>
<body x-data="{openMenu : false}" class="text-slate-400 tracking-wider">
<div class="container mx-auto px-6">
<header class="flex flex-wrap sm:flex-nowrap py-4 text-sm justify-between items-center border-b border-white/10">
<div class="logo">
<a class=" hover:text-slate-400 text-slate-300 block inline-flex items-center" href="mailto:hi.dimasaldi@gmail.com">
<div class="w-12 h-12 flex justify-center items-center mr-6 border border-white/10 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</div>
<span>Get in Touch</span>
</a>
</div>
<button @click="openMenu = !openMenu" class="py-2 px-3 block sm:hidden rounded border text-base border-white/5 bg-white/5 transition transition-all hover:bg-white/10 text-slate-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25" />
</svg>
</button>
<nav class="w-full sm:w-auto sm:block hidden mt-4 sm:mt-0" :class="openMenu ? '!block ': 'hidden'">
<ul class="flex flex-col sm:flex-row">
<li class="px-4 py-2"><a class=" hover:text-slate-400 text-slate-300 block" href="https://www.behance.net/dimasaldipr">Behance</a></li>
<!-- <li class="px-4 py-2"><a class=" hover:text-slate-400 text-slate-300 block" href="https://dribbble.com/dimasaldi">Dribbble</a></li> -->
<li class="px-4 py-2"><a class=" hover:text-slate-400 text-slate-300 block" href="https://github.com/dms-p">Github</a></li>
</ul>
</nav>
</header>
</div>
<section class="min-h-screen container mx-auto px-6 py-12 flex items-center justify-center" >
<div class="text-center">
<img src="./public/images/profile.jpg" class="rounded-full sm:h-32 sm:w-32 h-24 w-24 mx-auto mb-6" alt="Photo profile">
<h3 class="sm:text-2xl text-base">Hi there! 👋, I am </h3>
<div class="sm:text-6xl text-3xl font-bold">
<h1 class="tracking-wider text-transparent leading-relaxed bg-gradient-to-b from-white to-slate-400 bg-clip-text">
Dimas Aldi Pratama
</h1>
</div>
<h3 class="sm:text-2xl text-base mb-12 inline-flex">UI Designer and Web Developer
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="sm:w-6 sm:h-6 w-4 h-4 ml-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
</svg>
</h3>
<div>
<a href="https://api.whatsapp.com/send?phone=6288235950610" class="inline-block sm:py-4 sm:px-6 py-2 px-3 tracking-widest font-normal rounded-lg sm:text-base text-sm bg-gradient-to-r from-[#da4446] to-[#f5a67f] hover:to-[#f1976a] transition-all text-white">
<span class="flex items-center">
Contact Me
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="sm:w-6 sm:h-6 w-4 h-4 ml-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</span>
</a>
</div>
</div>
</section>
<section class="container mx-auto px-6 py-24 grid gap-8 sm:grid-cols-6 sm:grid-rows-1 grid-cols-2 grid-rows-3" >
<div> <a href="https://laravel.com/"><img src="./public/images/laravel.png" alt="" class="w-1/3 mx-auto"></a></div>
<div> <a href="https://www.adobe.com/id_en/"><img src="./public/images/photoshop.png" alt="" class="w-1/3 mx-auto"></a></div>
<div> <a href="https://tailwindcss.com/"><img src="./public/images/tailwind.png" alt="" class="w-1/3 mx-auto"></a></div>
<div> <a href="https://livewire.laravel.com/"><img src="./public/images/livewire.png" alt="" class="w-1/3 mx-auto"></a></div>
<div> <a href="https://getbootstrap.com/"><img src="./public/images/bootstrap.png" alt="" class="w-1/3 mx-auto"></a></div>
<div> <a href="https://www.figma.com/"><img src="./public/images/figma.png" alt="" class="w-1/3 mx-auto"></a></div>
</section>
<section id="project">
<div class="container mx-auto px-6 py-12 sm:py-30">
<div class="sm:text-4xl text-2xl font-medium text-center mb-24">
<h2 class="tracking-wider text-transparent leading-relaxed bg-gradient-to-b from-white to-slate-400 bg-clip-text">
Certificate
</h2>
</div>
<div class="grid gap-8 sm:gap-16 sm:grid-cols-2 grid-cols-1">
<div class="text-center">
<h4 class="mb-2 font-semibold text-lg sm:text-xl text-white/80 group-hover:text-white">HTML, CSS, & JAVASCRIPT</h4>
<span class="text-white/50 text-xs sm:text-sm mb-4 block">Penerbit : <a class="underline hover:text-white transition-all" href="https://digitalent.kominfo.go.id/" target="_blank">Digitalent - Kominfo</a></span>
<a target="_blank" href="./public/sertifikasi/Certificate of Completion-HTML,CSS,JAVASCRIPT.pdf" class="inline-block sm:py-4 sm:px-6 py-2 px-3 tracking-widest font-normal rounded-lg border sm:text-base text-sm border-white/10 bg-white/0 hover:bg-white/5 text-slate-200 backdrop-blur-sm transition-all">
<span class="flex items-center">
Lihat
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="sm:w-6 sm:h-6 w-4 h-4 ml-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</span>
</a>
</div>
<div class="text-center">
<h4 class="mb-2 font-semibold text-lg sm:text-xl text-white/80 group-hover:text-white">UIX DESIGN</h4>
<span class="text-white/50 text-xs sm:text-sm mb-4 block">Penerbit : <a class="underline hover:text-white transition-all" href="https://digitalent.kominfo.go.id/" target="_blank">Digitalent - Kominfo</a></span>
<a target="_blank" href="./public/sertifikasi/Certificate of Completion-UIUXDESIGN.pdf" class="inline-block sm:py-4 sm:px-6 py-2 px-3 tracking-widest font-normal rounded-lg border sm:text-base text-sm border-white/10 bg-white/0 hover:bg-white/5 text-slate-200 backdrop-blur-sm transition-all">
<span class="flex items-center">
Lihat
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="sm:w-6 sm:h-6 w-4 h-4 ml-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</span>
</a>
</div>
</div>
</div>
</section>
<!-- <section class="min-h-screen container mx-auto px-6 py-12">
<div class="sm:text-4xl text-2xl font-medium text-center">
<h2 class="tracking-wider text-transparent leading-relaxed bg-gradient-to-b from-white to-slate-400 bg-clip-text">
Service We Can Help You
</h2>
</div>
<h4 class="sm:text-xl text-base font-medium mb-24 text-center">Profesional Freelancer to Provide Solutions</h4>
<div class="grid sm:grid-cols-3 grid-cols-1">
<div class="p-8 pt-36 hover:bg-white/10 backdrop-blur-sm bg-white/0 transition-all hover:border-slate-700">
<img src="./public/images/responsive_1.png" class="w-16" alt="">
<h4 class="sm:text-xl text-base font-medium mb-3 mt-6">UI Design</h4>
<p class="sm:text-base text-sm tracking-widest">Designing interfaces that are intuitive, efficient, and enjoyable to use.</p>
</div>
<div class="p-8 pt-36 hover:bg-white/10 backdrop-blur-sm bg-white/0 transition-all hover:border-slate-700">
<img src="./public/images/code_2.png" class="w-16" alt="">
<h4 class="sm:text-xl text-base font-medium mb-3 mt-6">Web Development</h4>
<p class="sm:text-base text-sm tracking-widest">Designing interfaces that are intuitive, efficient, and enjoyable to use.</p>
</div>
<div class="p-8 pt-36 hover:bg-white/10 backdrop-blur-sm bg-white/0 transition-all hover:border-slate-700">
<img src="./public/images/creativeDesign_2.png" class="w-16" alt="">
<h4 class="sm:text-xl text-base font-medium mb-3 mt-6">Design & Creative</h4>
<p class="sm:text-base text-sm tracking-widest">Designing interfaces that are intuitive, efficient, and enjoyable to use.</p>
</div>
</div>
</section> -->
<section id="project">
<div class="min-h-screen container mx-auto px-6 py-12">
<div class="sm:text-4xl text-2xl font-medium text-center mb-24">
<h2 class="tracking-wider text-transparent leading-relaxed bg-gradient-to-b from-white to-slate-400 bg-clip-text">
Latest Work
</h2>
</div>
<div class="grid gap-8 sm:gap-16 sm:grid-cols-2 grid-cols-1">
<a href="https://github.com/dms-p/sistem-antrian-produksi-berbasis-web" class="group transition transition-all">
<div class="w-full aspect-video rounded-xl bg-white overflow-hidden flex items-center justify-center">
<img src="./public/images/project-produksi.jpg" class="group-hover:scale-105 transition-all ease-in" alt="">
</div>
<div class="mt-6 flex justify-between items-center">
<div>
<h4 class="mb-3 font-semibold text-lg sm:text-xl text-white/80 group-hover:text-white">Sistem Antrian Produksi</h4>
<span class="border border-white/50 text-white/50 group-hover:text-white/80 group-hover:border-white-80 px-4 py-2 text-xs sm:text-sm rounded-full">Web developement</span>
</div>
<div class="h-14 w-14 rounded-full border border-white text-white flex items-center justify-center rotate-45 group-hover:rotate-0 transition">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</div>
</div>
</a>
<a href="https://github.com/dms-p/point-of-sale-laravel" class="group transition transition-all">
<div class="w-full aspect-video rounded-xl bg-white overflow-hidden flex items-center justify-center">
<img src="./public/images/project-sistem-penjualan.jpg" class="group-hover:scale-105 transition-all ease-in" alt="">
</div>
<div class="mt-6 flex justify-between items-center">
<div>
<h4 class="mb-3 font-semibold text-lg sm:text-xl text-white/80 group-hover:text-white">Sistem Penjualan dan Inventory</h4>
<span class="border border-white/50 text-white/50 group-hover:text-white/80 group-hover:border-white-80 px-4 py-2 text-xs sm:text-sm rounded-full">Web developement</span>
</div>
<div class="h-14 w-14 rounded-full border border-white text-white flex items-center justify-center rotate-45 group-hover:rotate-0 transition">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</div>
</div>
</a>
<a href="https://www.behance.net/gallery/178659865/Landing-Page-Markas-E-Toll" class="group transition transition-all">
<div class="w-full aspect-video rounded-xl bg-white overflow-hidden flex items-center justify-center">
<img src="./public/images/project-markas-etoll.jpg" class="group-hover:scale-105 transition-all ease-in" alt="">
</div>
<div class="mt-6 flex justify-between items-center">
<div>
<h4 class="mb-3 font-semibold text-lg sm:text-xl text-white/80 group-hover:text-white">Landing Page Markas E-Toll</h4>
<span class="border border-white/50 text-white/50 group-hover:text-white/80 group-hover:border-white-80 px-4 py-2 text-xs sm:text-sm rounded-full">Web Design</span>
</div>
<div class="h-14 w-14 rounded-full border border-white text-white flex items-center justify-center rotate-45 group-hover:rotate-0 transition">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</div>
</div>
</a>
<a href="https://www.behance.net/gallery/178472665/martial-art-landing-page" class="group transition transition-all">
<div class="w-full aspect-video rounded-xl bg-white overflow-hidden flex items-center justify-center">
<img src="./public/images/project-martial-art.jpg" class="group-hover:scale-105 transition-all ease-in" alt="">
</div>
<div class="mt-6 flex justify-between items-center">
<div>
<h4 class="mb-3 font-semibold text-lg sm:text-xl text-white/80 group-hover:text-white">Landing Page Martial Art</h4>
<span class="border border-white/50 text-white/50 group-hover:text-white/80 group-hover:border-white-80 px-4 py-2 text-xs sm:text-sm rounded-full">Web Design</span>
</div>
<div class="h-14 w-14 rounded-full border border-white text-white flex items-center justify-center rotate-45 group-hover:rotate-0 transition">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</div>
</div>
</a>
<a href="https://www.behance.net/gallery/178652009/flyer-design" class="group transition transition-all">
<div class="w-full aspect-video rounded-xl bg-white overflow-hidden flex items-center justify-center">
<img src="./public/images/project-x-flyer.jpg" class="group-hover:scale-105 transition-all ease-in" alt="">
</div>
<div class="mt-6 flex justify-between items-center">
<div>
<h4 class="mb-3 font-semibold text-lg sm:text-xl text-white/80 group-hover:text-white">Brosur Markas E-Toll</h4>
<span class="border border-white/50 text-white/50 group-hover:text-white/80 group-hover:border-white-80 px-4 py-2 text-xs sm:text-sm rounded-full">Graphic Design</span>
</div>
<div class="h-14 w-14 rounded-full border border-white text-white flex items-center justify-center rotate-45 group-hover:rotate-0 transition">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</div>
</div>
</a>
<a href="https://www.behance.net/gallery/178651877/Company-Profile" class="group transition transition-all">
<div class="w-full aspect-video rounded-xl bg-white overflow-hidden flex items-center justify-center">
<img src="./public/images/project-school-company.jpg" class="group-hover:scale-105 transition-all ease-in" alt="">
</div>
<div class="mt-6 flex justify-between items-center">
<div>
<h4 class="mb-3 font-semibold text-lg sm:text-xl text-white/80 group-hover:text-white">Company Profile Sekolah</h4>
<span class="border border-white/50 text-white/50 group-hover:text-white/80 group-hover:border-white-80 px-4 py-2 text-xs sm:text-sm rounded-full">Graphic Design</span>
</div>
<div class="h-14 w-14 rounded-full border border-white text-white flex items-center justify-center rotate-45 group-hover:rotate-0 transition">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</div>
</div>
</a>
<a href="https://www.behance.net/gallery/178651525/student-admission-brochure" class="group transition transition-all">
<div class="w-full aspect-video rounded-xl bg-white overflow-hidden flex items-center justify-center">
<img src="./public/images/project-brosur-sekolah.jpg" class="group-hover:scale-105 transition-all ease-in" alt="">
</div>
<div class="mt-6 flex justify-between items-center">
<div>
<h4 class="mb-3 font-semibold text-lg sm:text-xl text-white/80 group-hover:text-white">Brosur PPDB</h4>
<span class="border border-white/50 text-white/50 group-hover:text-white/80 group-hover:border-white-80 px-4 py-2 text-xs sm:text-sm rounded-full">Graphic Design</span>
</div>
<div class="h-14 w-14 rounded-full border border-white text-white flex items-center justify-center rotate-45 group-hover:rotate-0 transition">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</div>
</div>
</a>
<a href="https://www.behance.net/gallery/178651957/x-banner-design" class="group transition transition-all">
<div class="w-full aspect-video rounded-xl bg-white overflow-hidden flex items-center justify-center">
<img src="./public/images/project-x-banner.jpg" class="group-hover:scale-105 transition-all ease-in" alt="">
</div>
<div class="mt-6 flex justify-between items-center">
<div>
<h4 class="mb-3 font-semibold text-lg sm:text-xl text-white/80 group-hover:text-white">X Banner Aurea Jaya</h4>
<span class="border border-white/50 text-white/50 group-hover:text-white/80 group-hover:border-white-80 px-4 py-2 text-xs sm:text-sm rounded-full">Graphic Design</span>
</div>
<div class="h-14 w-14 rounded-full border border-white text-white flex items-center justify-center rotate-45 group-hover:rotate-0 transition">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</div>
</div>
</a>
</div>
</div>
</section>
<section class="min-h-screen container mx-auto px-6 py-12 flex items-center justify-center">
<div class="text-center">
<div class="sm:text-6xl text-3xl font-bold text-center mb-24">
<h1 class="tracking-wider text-transparent bg-gradient-to-b from-white to-slate-400 bg-clip-text">
Tell me about your <br> next project
</h1>
</div>
<div>
<a href="https://api.whatsapp.com/send?phone=6288235950610" class="inline-block sm:py-4 sm:px-6 py-2 px-3 tracking-widest font-normal rounded-lg sm:text-base text-sm bg-gradient-to-r from-[#da4446] to-[#f5a67f] hover:to-[#f1976a] transition-all text-white">
<span class="flex items-center">
Contact Me
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="sm:w-6 sm:h-6 w-4 h-4 ml-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</span>
</a>
<!-- <a href="https://drive.google.com/file/d/1ktCunY3ZrfZ-mcylxc3oN-Sdj03NgDtk/view?usp=share_link" class="ml-4 inline-block sm:py-4 sm:px-6 py-2 px-3 tracking-widest font-normal rounded-lg border sm:text-base text-sm border-white/10 bg-white/0 hover:bg-white/5 text-slate-200 backdrop-blur-sm transition-all">
<span class="flex items-center">
Download CV
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="sm:w-6 sm:h-6 w-4 h-4 ml-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</span>
</a> -->
</div>
</section>
<section class="">
<div class="container mx-auto px-6">
<footer class="flex w-full sm:flex-row flex-col py-4 text-sm justify-between items-center border-t border-white/10">
<span class="w-full sm:w-auto text-center sm:text-left mb-4 sm:mb-0">© 2023 All rights reserved.</span>
<nav class="w-full sm:w-auto text-center sm:text-left">
<ul class="flex flex-col sm:flex-row">
<li class="px-4 py-2"><a class=" hover:text-slate-400 text-slate-300 block" href="https://www.behance.net/dimasaldipr">Behance</a></li>
<!-- <li class="px-4 py-2"><a class=" hover:text-slate-400 text-slate-300 block" href="https://dribbble.com/dimasaldi">Dribbble</a></li> -->
<li class="px-4 py-2"><a class=" hover:text-slate-400 text-slate-300 block" href="https://github.com/dms-p">Github</a></li>
</ul>
</nav>
</header>
</div>
</section>
</body>
</html>