-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
393 lines (339 loc) · 29 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
381
382
383
384
385
386
387
388
389
390
391
392
393
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Explore the creative portfolio of Petrik Siano, showcasing a diverse range of skills, projects, and experiences.">
<title>Portfolio | Petrik Siano</title>
<link href="dist/output.css" rel="stylesheet">
<link rel="icon" href="dist/img/icon.svg" type="image/x-icon">
</head>
<body class="bg-slate-50">
<!-- HEADER -->
<header class="absolute top-0 left-0 z-10 flex w-full items-center bg-transparent">
<div class="container">
<div class="relative flex items-center justify-between">
<!-- Icon -->
<div class="px-8 flex">
<img src="dist/img/icon.svg" class="w-12">
<a href="#home" class="py-6 text-lg font-bold text-primary">Petrik Siano </a>
</div>
<!-- Hamburger -->
<div class="flex items-center px-4">
<button id="hamburger" name="hamburger" type="button" class="absolute right-4 block 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>
<!-- Navigation bar -->
<nav id="nav-menu" class="absolute right-4 top-full hidden w-full max-w-[250px] rounded-lg bg-white py-5 shadow-lg lg:static lg:block lg:max-w-full lg:rounded-none lg:bg-transparent lg:shadow-none">
<!-- List of the navbar -->
<ul class="block lg:flex">
<li class="group">
<a href="#home" class="mx-8 flex py-2 text-base text-dark group-hover:text-primary smooth-scroll">Home</a>
</li>
<li class="group">
<a href="#about" class="mx-8 flex py-2 text-base text-dark group-hover:text-primary smooth-scroll">About Me</a>
</li>
<li class="group">
<a href="#experience" class="mx-8 flex py-2 text-base text-dark group-hover:text-primary smooth-scroll">Experience</a>
</li>
<li class="group">
<a href="#tools" class="mx-8 flex py-2 text-base text-dark group-hover:text-primary smooth-scroll">Tools</a>
</li>
<li class="group">
<a href="#portfolio" class="mx-8 flex py-2 text-base text-dark group-hover:text-primary smooth-scroll">Portfolio</a>
</li>
<li class="group">
<a href="#contact" class="mx-8 flex py-2 text-base text-dark group-hover:text-primary smooth-scroll">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- HERO SECTION -->
<section id="home" class="relative px-8 mt-16 mb-2">
<div class="container">
<div class="flex flex-wrap">
<!-- Greetings -->
<div class="mt-8 lg:pl-24 w-full self-center md:w-1/2 lg:h-1/2">
<h1 class="text-secondary font-semibold text-2xl lg:text-5xl">
Hello there! 👋
</h1>
<p class="pt-2">
<span class="text-secondary text-2xl lg:text-5xl font-semibold">I am </span><span class="text-3xl lg:text-5xl font-bold text-primary">Petrik Siano</span>
</p>
<p class="pt-1 text-secondary text-xl lg:text-2xl">
I love learning <span class="text-slate-950 font-bold">Data</span> and <span class="text-slate-950 font-bold">Business</span>
</p>
</div>
<!-- My image inside SVG shape -->
<div class="w-full self-center md:w-1/2 lg:h-full mb-6 flex justify-center">
<svg class="w-full sm:w-[400px] md:w-full lg:w-full xl:w-[500px]" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- Define the clipping path using a unique ID -->
<defs>
<clipPath id="clipPath">
<path fill="#FF0066" d="M50,-68.8C64.6,-58.3,75.8,-43.3,82.3,-26.1C88.7,-8.9,90.2,10.4,84.6,27.5C79.1,44.5,66.3,59.1,51,70.6C35.7,82,17.9,90.2,-0.1,90.3C-18,90.5,-36.1,82.5,-51.3,71C-66.5,59.5,-78.8,44.6,-85.3,27.1C-91.7,9.7,-92.3,-10.2,-86,-27.5C-79.7,-44.7,-66.7,-59.2,-51.2,-69.4C-35.7,-79.6,-17.9,-85.4,-0.1,-85.3C17.8,-85.2,35.5,-79.3,50,-68.8Z" transform="translate(100 100)" />
</clipPath>
</defs>
<!-- Apply the clipping path to the image -->
<image href="dist/img/petrik2.png" clip-path="url(#clipPath)" x="0" y="0" width="100%" height="100%"/>
</svg>
</div>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section id="about" class="px-16 lg:mt-24 lg:px-32 xl:px-64 mb-16">
<div class="w-full mt-4 order-1 md:order-1 lg:w-full">
<!-- Title -->
<h1 class="text-primary font-bold text-3xl lg:text-5xl mb-4 text-center">
About Me
</h1>
<!-- Content -->
<p class="text-justify mb-4 text-pretty text-base lg:text-xl md:text-center">
<span class="hidden md:inline md:font-semibold md:text-xl lg:font-bold italic">"</span>
I am passionate about the maritime industry, specializing in shipping and port operations. I coordinate vessel schedules, monitor stock levels, and maintain product data to improve forecasting. Outside of work, I use Python and JavaScript for analysis and web development. I aim to advance my maritime career, optimizing operations and supporting data-driven decisions.
<span class="hidden md:inline md:font-semibold md:text-xl lg:font-bold italic">"</span>
<span class="block mt-3 md:mt-8 italic">Here I attached my resume in case you are interested to me!</span>
</p>
<!-- Resume -->
<p class="text-justify md:text-center py-2">
<a href="dist\doc\Resume - Petrik Siano Okta Prima Lesmana.pdf" target="_blank" rel="noopener noreferrer" class="text-justify items-center text-slate-50 bg-violet-500 p-2 rounded-lg hover:opacity-80 active:opacity-60">My Resume</a>
</p>
</div>
</section>
<!-- EXPERIENCE SECTION -->
<section id="experience" class="px-8 pb-20">
<div class="container">
<!-- Title -->
<div class="w-full mt-4 order-1 md:order-1">
<h1 class="text-primary font-bold text-3xl lg:text-5xl capitalize mb-8 text-center">Experience</h1>
</div>
<!-- Experience card -->
<div class="flex flex-wrap justify-center">
<!-- Experience 1: Purchasing Import at PT. Pangan Lestari -->
<div class="w-full md:w-1/2 flex flex-wrap px-4 mb-8 xl:px-8 hover:scale-110 transition duration-500">
<div class="w-full flex flex-wrap bg-violet-50 p-4 rounded-lg shadow-md">
<img src="dist/img/import.svg" alt="Import"
class="mx-auto w-30 md:w-1/2 hidden lg:block">
<div class="pt-3 md:w-full lg:w-1/2 md:pl-6 self-center">
<h2 class="text-lg font-bold">Purchasing Import</h2>
<p class="text-gray-600"><a href="https://www.panganlestari.co.id/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover\:opacity-80">PT. Pangan Lestari</a></p>
<p><i>Mar 2024 - Present</i></p>
<br>
<p class="text-left">
Coordinating vessel schedules, monitor stock levels, and maintain product data to improve forecasting. This experience enhanced my skills in logistics and supply chain management.
</p>
</div>
</div>
</div>
<!-- Experience 2: Business Development at GAOTek Inc. -->
<div class="w-full md:w-1/2 flex flex-wrap px-4 mb-8 xl:px-8 hover:scale-110 transition duration-500">
<div class="w-full flex flex-wrap bg-violet-50 p-4 rounded-lg shadow-md">
<img src="dist/img/businessman.svg" alt="Business"
class="mx-auto w-30 md:w-1/2 hidden lg:block">
<div class="pt-3 md:w-full lg:w-1/2 md:pl-6 self-center">
<h2 class="text-lg font-bold">Business Development</h2>
<p class="text-gray-600"><a href="https://gaotek.com/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover\:opacity-80">GAOTek Inc.</a></p>
<p><i>Nov 2023 - Dec 2023</i></p>
<br>
<p class="text-left">
Engaged in market research, identified new business, and collaborated with cross-functional teams to implement effective strategies. This experience enhanced my business acumen.
</p>
</div>
</div>
</div>
<!-- Experience 3: Data Analytics for Business at Bitlabs Academy -->
<div class="w-full md:w-1/2 flex flex-wrap px-4 mb-8 xl:px-8 hover:scale-110 transition duration-500">
<div class="w-full flex flex-wrap bg-violet-50 p-4 rounded-lg shadow-md">
<img src="dist/img/analyst.svg" alt="Analyst"
class="mx-auto w-30 md:w-1/2 hidden lg:block">
<div class="pt-3 md:w-full lg:w-1/2 md:pl-6 self-center">
<h2 class="text-lg font-bold">Data Analytics for Business</h2>
<p class="text-gray-600"><a href="https://academy.bitlabs.id/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover\:opacity-80">Bitlabs Academy</a></p>
<p><i>Feb 2023 - Jun 2023</i></p>
<br>
<p class="text-left">
Gained proficiency in SQL, Python, and Looker Studio, enabling me to extract insights from raw data. This experience honed my analytical skills of data-driven decision-making.
</p>
</div>
</div>
</div>
<!-- Experience 4: GIS Analyst at Kedaireka.id -->
<div class="w-full md:w-1/2 flex flex-wrap px-4 mb-8 xl:px-8 hover:scale-110 transition duration-500">
<div class="w-full flex flex-wrap bg-violet-50 p-4 rounded-lg shadow-md">
<img src="dist/img/gis.svg" alt="GIS"
class="mx-auto w-30 md:w-1/2 hidden lg:block">
<div class="pt-3 md:w-full lg:w-1/2 md:pl-6 self-center">
<h2 class="text-lg font-bold">Geographic Information Systems Analyst</h2>
<p class="text-gray-600"><a href="https://kedaireka.id" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover\:opacity-80">Kedaireka.id</a></p>
<p><i>Aug 2022 - Dec 2022</i></p>
<br>
<p class="text-left">
Conducted oceanic surveys, improved oceanographic data, and managed most of the aquaculture project preparation. This experience boosted my expertise in environmental research.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- TOOLS SECTION -->
<section id="tools" class="bg-slate-50 pb-20">
<div class="container">
<!-- Title -->
<div class="w-full px-4">
<div class="mx-auto mb-8 text-center">
<h1 class="mb-4 text-3xl lg:text-5xl font-bold text-primary">Working Tools</h1>
</div>
</div>
<!-- Tools -->
<div class="w-full px-4">
<div class="flex flex-wrap items-center justify-center">
<!-- List of tools -->
<a href="#" class="mx-4 py-2 w-10 overflow-hidden transform transition-transform duration-300 hover:scale-110">
<img src="dist/img/googlebigquery.svg" title="Google Bigquery" class="filter brightness-110">
</a>
<a href="#" class="mx-4 py-2 w-10 overflow-hidden transform transition-transform duration-300 hover:scale-110">
<img src="dist/img/html.svg" title="Google Bigquery" class="filter brightness-110">
</a>
<a href="#" class="mx-4 py-2 w-10 overflow-hidden transform transition-transform duration-300 hover:scale-110">
<img src="dist/img/css.svg" title="Google Bigquery" class="filter brightness-110">
</a>
<a href="#" class="mx-4 py-2 w-10 overflow-hidden transform transition-transform duration-300 hover:scale-110">
<img src="dist/img/javascript.svg" title="Google Bigquery" class="filter brightness-110">
</a>
<a href="#" class="mx-4 py-2 w-10 overflow-hidden transform transition-transform duration-300 hover:scale-110">
<img src="dist/img/python.svg" title="Python" class="filter brightness-110">
</a>
<a href="#" class="mx-4 py-2 w-10 overflow-hidden transform transition-transform duration-300 hover:scale-110">
<img src="dist/img/r.svg" title="R" class="filter brightness-110">
</a>
<a href="#" class="mx-4 py-2 w-10 overflow-hidden transform transition-transform duration-300 hover:scale-110">
<img src="dist/img/idl.svg" title="IDL" class="filter brightness-110">
</a>
<a href="#" class="mx-4 py-2 w-10 overflow-hidden transform transition-transform duration-300 hover:scale-110">
<img src="dist/img/tableau.svg" title="Tableau" class="filter brightness-110">
</a>
<a href="#" class="mx-4 py-2 w-10 overflow-hidden transform transition-transform duration-300 hover:scale-110">
<img src="dist/img/powerbi.svg" title="Microsoft Power BI" class="filter brightness-110">
</a>
</div>
</div>
</div>
</section>
<!-- PORTFOLIO SECTION -->
<section id="portfolio" class="px-2 bg-slate-50 pb-16">
<div class="container">
<!-- Title -->
<div class="w-full px-4">
<div class="mx-auto mb-12 max-w-xl text-center">
<h1 class="mb-4 font-bold text-primary text-3xl lg:text-5xl">Portfolio
</h1>
<p class="text-md font-normal text-secondary md:text-lg">
Click on the project title for the detailed information. It will land you on my GitHub page!
</p>
</div>
</div>
<!-- Portfolio card -->
<div class="flex w-full flex-wrap justify-center px-4 xl:mx-auto xl:w-10/12">
<!-- Account Segmentation of Partner Ledger -->
<div class="mb-8 px-8 md:w-1/2">
<div class="overflow-hidden rounded-md shadow-md hover:transform hover:scale-105 transition-transform duration-300">
<img src="dist\img\Account Segmentation of Partner Ledger.jpg" alt="Account Segmentation of Partner Ledger" width="w-full"/>
</div>
<h3 class="mt-5 mb-3 text-xl lg:text-2xl font-semibold text-primary hover:opacity-80 transition duration-500"><a href="https://github.com/strigoimort/account-segmentation-of-partner-ledger" target="_blank" rel="noopener noreferrer">Account Segmentation of Company Partner Ledger</a></h3>
<p class="text-base lg:text-lg text-secondary">Categorize accounts based on predefined criteria, providing a clearer and more structured view of partner transactions.</p>
</div>
<!-- Customer Behavior for E-commerce Conversion -->
<div class="mb-8 px-8 md:w-1/2">
<div class="overflow-hidden rounded-md shadow-md hover:transform hover:scale-105 transition-transform duration-300">
<img src="dist\img\Customer Behavior for E-commerce Conversion.jpg" alt="Customer Behavior for E-commerce Conversion" width="w-full" />
</div>
<h3 class="mt-5 mb-3 text-xl lg:text-2xl font-semibold text-primary hover:opacity-80 transition duration-500"><a href="https://github.com/strigoimort/customer-behavior-for-e-commerce-conversion" target="_blank" rel="noopener noreferrer">Customer Behavior for E-commerce Conversion</a></h3>
<p class="text-base lg:text-lg text-secondary">Explore insights derived from user interactions, conversion funnels, and key metrics to optimize websites and marketing strategies.</p>
</div>
<!-- Cost-Effectiveness Analysis of Employee Payroll Scheme -->
<div class="mb-8 px-8 md:w-1/2">
<div class="overflow-hidden rounded-md shadow-md hover:transform hover:scale-105 transition-transform duration-300">
<img src="dist\img\Cost-Effectiveness Analysis of Employee Payroll Scheme.jpg" alt="Cost-Effectiveness Analysis of Employee Payroll Scheme" width="w-full" />
</div>
<h3 class="mt-5 mb-3 text-xl lg:text-2xl font-semibold text-primary hover:opacity-80 transition duration-500" ><a href="https://github.com/strigoimort/cost-effectiveness-analysis-of-employee-payroll-scheme" target="_blank" rel="noopener noreferrer">Cost-Effectiveness Analysis of Employee Payroll Scheme</a></h3>
<p class="text-base lg:text-lg text-secondary">Evaluate the financial efficiency and impact on the company's resources associated with different payroll strategies.</p>
</div>
<!-- Segmentation Customer with RFM (Recency, Frequency, and Monetary) Analysis -->
<div class="mb-8 px-8 md:w-1/2">
<div class="overflow-hidden rounded-md shadow-md hover:transform hover:scale-105 transition-transform duration-300">
<img src="dist\img\Segmentation Customer with Recency, Frequency, and Monetary (RFM) Analysis.jpg" alt="Segmentation Customer with RFM (Recency, Frequency, and Monetary) Analysis" width="w-full" />
</div>
<h3 class="mt-5 mb-3 text-xl lg:text-2xl font-semibold text-primary hover:opacity-80 transition duration-500"><a href="https://github.com/strigoimort/segmentation-customer-with-rfm-analysis" target="_blank" rel="noopener noreferrer">Segmentation Customer with RFM Analysis</a></h3>
<p class="text-base lg:text-lg text-secondary">Comprehensive approach to customer segmentation using RFM (Recency, Frequency, Monetary) analysis.</p>
</div>
<!-- More Project -->
<div class="h-12">
<div class="mx-auto flex">
<a href="https://github.com/strigoimort?tab=repositories" target="_blank" rel="noopener noreferrer" class="inline-block mt-0 p-2 text-primary hover:text-slate-600 hover:transition duration-700">
More project...
</a>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer id="contact" class="bg-dark pb-10">
<div class="container">
<div class="w-full border-t border-slate-700 pt-10 flex flex-col items-center">
<!-- Social media icons -->
<div class="mb-5 flex items-center justify-center space-x-3">
<!-- GitHub -->
<a href="https://github.com/strigoimort/" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center h-9 w-9 rounded-full border border-slate-300 text-slate-300 hover:border-primary 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>
<!-- LinkedIn -->
<a href="https://linkedin.com/in/petriksiano/" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center h-9 w-9 rounded-full border border-slate-300 text-slate-300 hover:border-primary 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"></path>
</svg>
</a>
<!-- Instagram -->
<a href="https://instagram.com/petriksiano/" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center h-9 w-9 rounded-full border border-slate-300 text-slate-300 hover:border-primary 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="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"></path>
</svg>
</a>
<!-- Email -->
<a href="https://mailto:petriksiano24@gmail.com/" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center h-9 w-9 rounded-full border border-slate-300 text-slate-300 hover:border-primary 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>Email</title>
<path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"></path>
</svg>
</a>
<!-- Email -->
<a href="https://linktr.ee/petriksiano/" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center h-9 w-9 rounded-full border border-slate-300 text-slate-300 hover:border-primary 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>Linktree</title>
<path d="m13.73635 5.85251 4.00467-4.11665 2.3248 2.3808-4.20064 4.00466h5.9085v3.30473h-5.9365l4.22865 4.10766-2.3248 2.3338L12.0005 12.099l-5.74052 5.76852-2.3248-2.3248 4.22864-4.10766h-5.9375V8.12132h5.9085L3.93417 4.11666l2.3248-2.3808 4.00468 4.11665V0h3.4727zm-3.4727 10.30614h3.4727V24h-3.4727z"></path>
</svg>
</a>
</div>
<!-- Closing -->
<p class="text-center text-xs font-medium text-slate-500">Thank you for visiting my portfolio website. Have a nice day!</p>
</div>
</div>
</footer>
<!-- BUTTON -->
<a href="#home" class="fixed bottom-4 right-4 z-[9999] hidden h-12 w-12 items-center justify-center rounded-full bg-primary p-3 hover:animate-pulse" id="to-top">
<img src="dist/img/arrow-up.svg" class="w-full">
</a>
<!-- JavaScript -->
<script src="dist/js/script.js"></script>
</body>
</html>