-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
216 lines (206 loc) · 21.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alfian.tech</title>
<link href="src/output.css" rel="stylesheet">
</head>
<body>
<!-- Header 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="#home" class="font-bold text-lg text-primary block py-6">alfiyansyaa</a>
</div>
<div class="flex items-center px-4">
<button id="hamburger" name="hamburger" type="button" class="block absolute right-4 lg:hidden">
<span class="hamburger-line transition duration-300 ease-in-out origin-top-left"></span>
<span class="hamburger-line transition duration-300 ease-in-out"></span>
<span class="hamburger-line transition duration-300 ease-in-out origin-top-left"></span>
</button>
<nav id="nav-menu" class="hidden absolute py-5 bg-white shadow-lg rounded-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">
<ul class="block lg:flex">
<li class="group">
<a href="#home" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary">Home</a>
</li>
<li class="group">
<a href="#about" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary">About</a>
</li>
<li class="group">
<a href="#portfolio" class="text-base text-dark py-2 mx-8 flex group-hover:text-primary">Portfolio</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header end -->
<!-- Hero section start -->
<section id="home" class="pt-36">
<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 md:text-xl">Hi Everyone 👋, I'm <span class="block font-bold text-primary text-4xl mt-1 lg:text-5xl">Achmad Alfiansyah</span></h1>
<h2 class="font-semibold text-dark text-lg mb-5">Software Engineer <span class="text-dark lg:text-2xl">(Android)</span></h2>
<p class="font-medium text-dark mb-10 leading-relaxed">3 Years of Experience in creating beautiful <span class="text-dark font-bold">Android Apps</span> with <span class="text-dark font-bold">Kotlin</span> </p>
<a
href=mailto:achmadalfiansyah069@email.com?subject=Hi%20Alfiansyah,%20Let's%20Work%20Together class="text-base font-semibold text-white bg-primary py-3 px-8 rounded-full hover:shadow-lg hover:opacity-80 transition duration-300 ease-in-out">Contact me</a>
</div>
<div class="w-full self-end px-4 lg:w-1/2">
<div class="relative mt-10 lg:mt-9 lg:right-0">
<img src="src/img/alfian.png" alt="Achmad Alfiansyah" class="max-w-full mx-auto"/>
<span class="absolute bottom-0 -z-10 left-1/2 -translate-x-1/2">
<svg width="400" height="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#0ea5e9" d="M38.7,-56.1C48.8,-46,54.8,-32.8,59.1,-19.3C63.4,-5.7,66.1,8.3,63.4,21.8C60.6,35.3,52.5,48.2,41.1,57C29.6,65.9,14.8,70.6,0.9,69.3C-13,68.1,-26,60.9,-39.4,52.7C-52.8,44.5,-66.7,35.3,-74.1,21.9C-81.5,8.4,-82.6,-9.4,-76.3,-23.6C-70,-37.7,-56.4,-48.3,-42.5,-57.2C-28.5,-66.1,-14.3,-73.2,0,-73.2C14.3,-73.2,28.6,-66.2,38.7,-56.1Z" transform="translate(100 100) scale(1,1)" />
</svg>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- Hero section end -->
<!--About section start -->
<section id="about" class="pt-36 pb-32">
<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-3">About me</h4>
<h2 class="font-bold text-dark text-3xl mb-5 max-w-md lg:text-4xl">Working Student</h2>
<p class="font-medium text-base text-secondary max-w-xl lg:text-lg">Second-year Computer Science Student at Binus University Online (BiOn) while working as an Android Programmer at PT. Mitra Karsa Utama</p>
</div>
<div class="w-full px-4 lg:w-1/2">
<h3 class="font-semibold text-dark text-2xl mb-4 lg:text-3xl lg:pt-10">Let's be friends</h3>
<p class="font-medium text-base text-secondary mb-6 lg:text-lg">let's connect through social media</p>
<div class="flex items-center">
<!-- Github -->
<a href="https://github.com/alfiyansya" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border boder-slate-300 text-slate-300 hover:bg-primary hover:text-white">
<svg role="img" width="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>
<!-- Instagram -->
<a href="https://Instagram.com/alfiyansyaa" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border boder-slate-300 text-slate-300 hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg>
</a>
<!-- Twitter -->
<a href="https://Instagram.com/alfiyansyaa" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border boder-slate-300 text-slate-300 hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/in/achmad-alfiansyah/" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border boder-slate-300 text-slate-300 hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" 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>
</div>
</div>
</div>
</div>
</section>
<!--About section end -->
<!-- Portfolio section start -->
<section id="portfolio" class="pt-36 pb-16 bg-slate-100">
<div class="container">
<div class="w-full px-4">
<div class="max-w-xl mx-auto text-center mb-16">
<h4 class="font-semibold text-lg text-primary mb-2">Portfolio</h4>
<h2 class="font-bold text-dark text-3xl mb-4">My Projects</h2>
<p class="font-medium text-md text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia cumque expedita consequatur? Vero, quisquam libero? Delectus cum voluptatibus atque eaque.</p>
</div>
</div>
<div class="w-full px-4 flex flex-wrap justify-center xl:w-10/12 xl:mx-auto">
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="https://plchldr.co/i/600x300?&bg=f87171&fc=0c0a09&text=Project 1" class="w-full">
</div>
<h3 class="font-semibold text-xl text-dark mt-5">Project 1</h3>
<p class="font-medium text-base text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate necessitatibus repellendus facere!</p>
</div>
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="https://plchldr.co/i/600x300?&bg=facc15&fc=0c0a09&text=Project 2" class="w-full">
</div>
<h3 class="font-semibold text-xl text-dark mt-5">Project 2</h3>
<p class="font-medium text-base text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate necessitatibus repellendus facere!</p>
</div>
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="https://plchldr.co/i/600x300?&bg=4ade80&fc=0c0a09&text=Project 3" class="w-full">
</div>
<h3 class="font-semibold text-xl text-dark mt-5">Project 3</h3>
<p class="font-medium text-base text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate necessitatibus repellendus facere!</p>
</div>
<div class="mb-12 p-4 md:w-1/2">
<div class="rounded-md shadow-md overflow-hidden">
<img src="https://plchldr.co/i/600x312?&bg=38bdf8&fc=1c1917&text=Project 4" class="w-full">
</div>
<h3 class="font-semibold text-xl text-dark mt-5">Project 4</h3>
<p class="font-medium text-base text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate necessitatibus repellendus facere!</p>
</div>
</div>
</div>
</section>
<!-- Portfolio section end -->
<!-- Footer start -->
<footer class="bg-dark pt-24 pb-12">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full px-4 mb-12 text-slate-300 font-medium md:w-1/2 ">
<h2 class="font-bold text-4xl text-white mb-5">Alfian</h2>
<h3 class="font-bold text-2xl mb-2">Contact me</h3>
<p>achmadalfiansyah069@gmail.com</p>
<p>Sukadami, South Cikarang, Bekasi</p>
<p>West Java</p>
</div>
<div class="w-full px-4 mb-12 text-slate-300 font-medium md:w-1/2">
<h2 class="font-bold text-4xl text-white mb-5">Tautan</h2>
<ul class="text-slate-300">
<li>
<a href="#home" class="inline-block text-base hover:text-primary mb-3">
Home
</a>
</li>
</ul>
<ul class="text-slate-300">
<li>
<a href="#about" class="inline-block text-base hover:text-primary mb-3">
About
</a>
</li>
</ul>
<ul class="text-slate-300">
<li>
<a href="#portfolio" class="inline-block text-base hover:text-primary mb-3">
Portfolio
</a>
</li>
</ul>
</div>
</div>
<div class="w-full pt-10 border-t border-slate-700 ">
<div class="flex items-center justify-center mb-5">
<!-- Github -->
<a href="https://github.com/alfiyansya" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border boder-slate-300 text-slate-300 hover:bg-primary hover:text-white">
<svg role="img" width="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>
<!-- Instagram -->
<a href="https://Instagram.com/alfiyansyaa" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border boder-slate-300 text-slate-300 hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg>
</a>
<!-- Twitter -->
<a href="https://Instagram.com/alfiyansyaa" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border boder-slate-300 text-slate-300 hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/in/achmad-alfiansyah/" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border boder-slate-300 text-slate-300 hover:bg-primary hover:text-white">
<svg role="img" width="20" class="fill-current" 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>
</div>
<p class="font-medium text-xs text-slate-500 text-center">made with<span class="text-pink-500">❤️</span> by<a href="https://Instagram.com/alfiyansyaa" target="_blank" class="font-bold text-primary"> Achmad Alfiansyah</a>, using <a href="https://tailwindcss.com" target="_blank" class="font-bold text-sky-500">Tailwind CSS</a></p>
</div>
</div>
</footer>
<!-- Footer end -->
<script src="src/js/script.js"></script>
</body>
</html>