-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
157 lines (136 loc) · 7.78 KB
/
about.html
File metadata and controls
157 lines (136 loc) · 7.78 KB
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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth overflow-x-hidden">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Syariful Musthofa</title>
<link href="/dist/output.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="/dist/img/tab-icons/icons.png">
<!-- Font -->
<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=Forum&family=Fredericka+the+Great&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<!-- Fredericka the Great : font-weight: 400; font-style: normal; -->
<!-- Forum : font-weight: 300-900; font-style: normal; -->
<!-- Nunito Sans : font-weight: 200-1000; font-style: normal; -->
<!-- Poppins : font-weight: 100 - 900; font-style: normal and italic -->
</head>
<body id="main" class="bg-repeat z-1 box-border" style="background-image: url(/dist/img/background.png);">
<!-- Header Start -->
<header class="bg-white 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="pr-12 flex justify-center ">
<div class=" text-black block py-6 pl-20 font-Fredericka text-xl">
<span class="md:px-1 text-pink-500">∘</span>
<span class="md:px-1 text-yellow-500">∘</span>
<span class="md:px-1 text-green-500">∘</span>
<a href="#home">SYARIFUL</a>
<span class="md:px-1 text-green-500">∘</span>
<span class="md:px-1 text-yellow-500">∘</span>
<span class="md:px-1 text-pink-500">∘</span>
</div>
</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-bottom-left"></span>
</button>
<nav id="nav-menu"
class="hidden absolute py-5 bg-white font-Poppins shadow-shadow2 rounded-lg max-w-[180px] w-full right-4 top-full lg:bg-transparent lg:block lg:static lg:max-w-full lg:shadow-none lg:rounded-none lg:justify-center ">
<ul class="block lg:flex ">
<li class="group"><a href="/#main"
class="text-base text-black py-2 px-2 mx-8 flex justify-center group-hover:bg-black group-hover:text-white group-hover:shadow-shadow85 lg:w-full transition ease-in-out duration-500">Home</a>
</li>
<li class="group"><a href="/#portofolios"
class="text-base text-black py-2 px-2 mx-8 flex justify-center border-y lg:border-y-0 lg:border-x group-hover:bg-black group-hover:text-white group-hover:shadow-shadow85 lg:w-full transition ease-in-out duration-500">Portofolios</a>
</li>
<li class="group"><a href="/about.html"
class="text-base text-black py-2 px-2 mx-8 flex justify-center group-hover:bg-black group-hover:text-white group-hover:shadow-shadow85 lg:w-full transition ease-in-out duration-500">About</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
<main>
<!-- About Me Start -->
<section id="about" class="pt-36 px-[8%] md:min-h-svh lg:min-h-full lg:pt-40 lg:px-[20%]">
<div class="relative rounded-lg border border-gray-100 bg-white p-10 ">
<span class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 "></span>
<!-- Description Start -->
<h2 class="text-gray-900 font-Fredericka text-4xl text-center pb-4">
About Me
</h2>
<p class="text-left text-lg font-Forum pb-10">
Hi there! 👋 Welcome to my profile. Nice to meet you! My name is Syariful Musthofa. I'm a data analyst &
machine learning enthusiast based in Indonesia. I am proficient in using various machine learning technologies
and data analytics tools to extract valuable insights and support decision-making.
<br><br>
In the slack time, you might find me: writing, watching movies, hiking, scrolling through Quora, playing DOTA
2 in SEA servers, and even keep coding, since coding is jalan ninjaku!
<br><br>
You can find me on <span class="md:pl-1 underline decoration-2 decoration-blue-400 font-semibold"><a
href="https://github.com/SyarifulMsth" target="_blank">Github</a></span>, and
<span class="md:pl-1 underline decoration-2 decoration-sky-400 font-semibold"><a
href="https://www.linkedin.com/in/syariful-musthofa/" target="_blank">Linkedin</a></span>. Here is my
<span class="md:pl-1 underline decoration-2 decoration-red-400 font-semibold"><a
href="https://drive.google.com/file/d/1oCPReZutkW9ZLwylqhVqQWaOgeiVvysT/view?usp=sharing"
target="_blank">Resume</a></span> if you need it!
</p>
<!-- Description End -->
<!-- Tech Stack Start -->
<!-- <h2 class="text-gray-900 font-Fredericka text-4xl text-center pb-4">
Tech Stack
</h2>
<p class="text-pretty text-sm text-gray-950 font-Forum lg:text-base">
Data analysis to enable data-driven decision-making. Have experience and have used SQL, Excel, Python,
Tableau, & etc.
</p> -->
<!-- Contact Me Start -->
<h2 class="text-gray-900 font-Fredericka text-4xl text-center pb-4">
Contact Me
</h2>
<p class="text-left text-lg font-Forum pb-10">
Want to contact me about anything? You can contact me via email at
<span class="underline decoration-2 decoration-green-400 font-semibold"><a href="syarifulmsth@gmail.com"
target="_blank">syarifulmsth@gmail.com</a></span>,
<span class="underline decoration-2 decoration-sky-400 font-semibold"><a
href="https://www.linkedin.com/in/syariful-musthofa/" target="_blank">Telegram</a></span>,
or through
<span class="underline decoration-2 decoration-sky-400 font-semibold"><a
href="https://www.linkedin.com/in/syariful-musthofa/" target="_blank">Discord</a></span>.
</p>
<!-- Contact Me End -->
</div>
</section>
</main>
<footer class="w-screen bg-white mt-14 border-t-0 border-slate-500 md:w-screen lg:mt-16 bottom-0 ">
<span class="relative flex justify-center">
<div
class="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-transparent bg-gradient-to-r from-transparent via-gray-500 to-transparent opacity-75">
</div>
</span>
<!-- Copyright -->
<div class="flex flex-col justify-center px-7 py-6">
<p class="text-center font-light font-Forum">Created with 🔥 by
<span class="lg:pl-0 md:pl-1 underline decoration-2 decoration-sky-500">Syariful Musthofa</span>,
using <span class="lg:pl-0 md:pl-1 underline decoration-2 decoration-green-400">
<a href="https://tailwindcss.com" target="_blank">Tailwind CSS.</a></span>
</p>
</div>
</footer>
<script src="dist/js/script.js"></script>
</body>
</html>