-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
323 lines (273 loc) · 13.9 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
<!DOCTYPE html>
<html lang="en-US" data-bs-theme="">
<head>
<meta charset="utf-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport" />
<title>Ibrahim Syafiq | UI/UX Portfolio</title>
<meta property="og:title" content="Ibrahim Syafiq | UI/UX Portfolio" />
<meta property="og:locale" content="en_US" />
<link rel="canonical" href="https://ibrahimsyafiq15.github.io" />
<meta property="og:url" content="https://ibrahimsyafiq15.github.io" />
<meta name="author" content="Ibrahim Syafiq" />
<meta name="description" content="UI/UX Designer. Experienced as UI/UX since 2020 for IT consulting firms and Bank & Financial Service clients." />
<link rel="icon" type="image/png" href="assets/img/syafiq-favicon.png" />
<meta property="og:site_name" content="Atlas Template" />
<meta property="og:image" content="assets/img/syafiq-favicon.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ibrahimsyafiq15" />
<link crossorigin="crossorigin" href="https://fonts.gstatic.com" rel="preconnect" />
<link as="style" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
rel="preload" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/boxicons.min.css" />
<link crossorigin="anonymous" href="assets/styles/main.min.css" media="screen" rel="stylesheet" />
<link href="assets/styles/main.css" media="screen" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/atom-one-dark.min.css" />
<script>
hljs.initHighlightingOnLoad();
</script>
<!--Alpine Js V3-->
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<!-- MULAI BODY -->
<body x-data="global()" x-init="themeInit()" :class="isMobileMenuOpen ? 'max-h-screen overflow-hidden relative' : ''" class="">
<div id="main">
<!-- HEADER & MENU -->
<nav class="navbar navbar-expand-lg bg-primary px-5 fixed-top" data-bs-theme="dark">
<div class="container-fluid">
<a style="font-family: 'Poppins', sans-serif;" class="navbar-brand font-bold" href="">
<img src="assets/img/syafiq-favicon.png" alt="Logo" width="48" class="mr-2 d-inline-block align-text-center">
ibrahimsyafiq15
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item pt-1 pe-2">
<a class="nav-link active" style="font-family: 'Poppins', sans-serif; font-weight: 500;" aria-current="page" href="">Intro</a>
</li>
<li class="nav-item pt-1 pe-2">
<a class="nav-link" style="font-family: 'Poppins', sans-serif;" href="project.html">Projects</a>
</li>
<li>
<i class="btn btn-lg bi bi-sun-fill" id="toggleTema"></i>
</li>
</ul>
</div>
</div>
</nav>
<div class="mt-5 pt-5 px-5">
<div class="container mx-auto">
<div class="border-b border-grey-lighter py-16 lg:py-20">
<!-- clip ambil dari w3school -->
<svg width="64" height="64">
<mask id="svgmask">
<circle fill="#ffffff" cx="32" cy="32" r="32"></circle>
</mask>
<image href="assets/img/syafiq-profile-64.png" mask="url(#svgmask)"></image>
</svg>
<h2 class="pt-3 font-body text-4xl font-semibold ">
Hello, I'm
</h2>
<h1 class="pt-3 font-body text-4xl font-semibold md:text-5xl lg:text-6xl">
Ibrahim Syafiq.
</h1>
<p class="pt-3 font-body text-xl font-light ">
A UI/UX Designer. Has experience working as UI/UX since 2020 for IT consulting firms and Bank & Financial
Service clients. Nowadays, I work as a social media specialist and <span class="font-bold">still looking for
new opportunities as UI/UX designer</span>
again.
</p>
<div id="download-cv" class="flex flex-col items-center pt-10 sm:flex-row sm:pt-12">
<a href="https://s.id/syafiqportfolio" target="_blank" class="btn btn-primary btn-lg px-5 py-3 my-2 mx-sm-2">
Download CV
</a>
<div class="flex items-center ms-lg-4 ms-md-3 my-2 mx-sm-2">
<a href="https://www.linkedin.com/in/ibrahimsyafiq15" target="_blank">
<i
class="text-4xl bx bxl-linkedin"></i>
</a>
<a href="https://behance.com/ibrahimsyafiq15" target="_blank">
<i
class="text-4xl pl-5 bx bxl-behance"></i>
</a>
<a href="https://dribbble.com/ibrahimsyafiq15" target="_blank">
<i
class="text-4xl pl-5 bx bxl-dribbble"></i>
</a>
<a href="https://github.com/ibrahimsyafiq15" target="_blank">
<i
class="text-4xl pl-5 bx bxl-github"></i>
</a>
</div>
</div>
</div>
<div class="border-b border-grey-lighter py-16 lg:py-20">
<div class="flex items-center pb-6">
<i class="bi bi-person-badge-fill fs-3 text-warning"></i>
<h3 class="ml-3 mb-0 font-body text-2xl font-semibold col-sm mb-sm-0">
Intro
</h3>
</div>
<div>
<p class="font-body font-light ">
As I mentioned before, I am a UI/UX Designer with 3 years of working experience mainly in IT Consulting
and Financial Services. Currently working as a Social Media Designer at SDIT Insan Mandiri Jakarta. Even
so, I still take on side projects for graphic design, UI/UX design, and web development.
<br>
<br>
As someone who is passionate about UI/UX, I am currently still looking for new opportunities as a UI/UX
Designer to return to my main career in the UI/UX field. But I can move on to fields that are still
related to UI/UX, such as becoming a Junior UX Writer, UX Researcher, etc.
</div>
</div>
<!-- MY PROJECT -->
<div class="py-16 lg:py-20">
<div class="flex items-center pb-6">
<i class="bi bi-kanban-fill fs-3 text-warning"></i>
<h3 class="ml-3 mb-0 font-body text-2xl font-semibold col-sm mb-sm-0">
My Projects
</h3>
<a href="project.html" class="btn btn-outline-primary btn-sm rounded-3">
All Projects
</a>
</div>
<div>
<!-- CONTENT -->
<div>
<!-- CARD PROJECT -->
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-4">
<iframe src="https://www.behance.net/embed/project/154947847?ilo0=1"
style="height:200px;width:404px;" allowfullscreen lazyload frameborder="0" allow="clipboard-write"
refererPolicy="strict-origin-when-cross-origin" class="rounded-3 img-fluid"></iframe>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Human Capital Management System (HCMS)</h5>
<p class="card-text">
HCMS is an application intended employees to take attendance, apply for leave and work trip.
</p>
<span class="badge rounded-pill text-bg-primary">Mandiri Utama Finance</span>
<span class="badge rounded-pill text-bg-info">Mobile</span>
</div>
</div>
</div>
</div>
<!-- CARD PROJECT -->
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-4">
<iframe src="https://www.behance.net/embed/project/154947641?ilo0=1"
style="height:200px;width:404px;" allowfullscreen lazyload frameborder="0" allow="clipboard-write"
refererPolicy="strict-origin-when-cross-origin" class="rounded-3 img-fluid"></iframe>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">MUF Kit</h5>
<p class="card-text">
Mandiri Utama Finance app used by the Credit Marketing Officer (CMO) to monitor and submit
credit
contracts from customers.
</p>
<span class="badge rounded-pill text-bg-primary">Mandiri Utama Finance</span>
<span class="badge rounded-pill text-bg-info">Mobile</span>
</div>
</div>
</div>
</div>
<!-- CARD PROJECT -->
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-4">
<iframe src="https://www.behance.net/embed/project/154947357?ilo0=1"
style="height:200px;width:404px;" allowfullscreen lazyload frameborder="0" allow="clipboard-write"
refererPolicy="strict-origin-when-cross-origin" class="rounded-3 img-fluid"></iframe>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">MUF Portal</h5>
<p class="card-text">
MUF portal is a dashboard that can make it easier for dealers to monitor, track, and order car
loans to MUF.
</p>
<span class="badge rounded-pill text-bg-primary">Mandiri Utama Finance</span>
<span class="badge rounded-pill text-bg-warning">Web</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container mx-auto">
<div class="flex flex-col items-center justify-between border-t border-grey-lighter py-10 sm:flex-row sm:py-12">
<span class="flex items-center col-sm mb-3 mb-sm-0">
<a href="/" class="mr-4">
<img src="assets/img/syafiq-favicon.png" width="48px" alt="logo" />
</a>
©2023 Ibrahim Syafiq.
</span>
<div class="flex items-center">
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="https://www.linkedin.com/in/ibrahimsyafiq15" class="text-reset text-decoration-none"
target="_blank">
<i class="text-4xl hover:transition-colors bx bxl-linkedin"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://behance.com/ibrahimsyafiq15" class="text-reset text-decoration-none" target="_blank">
<i class="text-4xl pl-5 hover:transition-colors bx bxl-behance"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://dribbble.com/ibrahimsyafiq15" class="text-reset text-decoration-none" target="_blank">
<i class="text-4xl pl-5 hover:text-secondary transition-colors bx bxl-dribbble"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://github.com/ibrahimsyafiq15" class="text-reset text-decoration-none" target="_blank">
<i class="text-4xl pl-5 hover:transition-colors bx bxl-github"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="assets/js/main.js"></script>
<!-- bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<!-- GANTI TEMA -->
<script>
const htmlElement = document.querySelector('html');
const toggleTemaButton = document.getElementById('toggleTemaButton');
document.getElementById('toggleTema').addEventListener('click', function () {
const currentTheme = htmlElement.getAttribute('data-bs-theme');
// console.log(document.getElementById('toggleTema').classList);
// Ubah tema sesuai dengan keadaan saat ini
if (currentTheme === 'dark') {
htmlElement.setAttribute('data-bs-theme', 'light');
document.getElementById('toggleTema').classList.replace('bi-sun-fill', 'bi-moon-fill');
} else {
htmlElement.setAttribute('data-bs-theme', 'dark');
document.getElementById('toggleTema').classList.replace('bi-moon-fill', 'bi-sun-fill');
}
});
</script>
</body>
</html>