-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
422 lines (393 loc) · 26.4 KB
/
index.html
File metadata and controls
422 lines (393 loc) · 26.4 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
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
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Personal Portofolio Website | Bobogeng</title>
</head>
<body>
<!-- Navbar Section Start-->
<nav class="navbar navbar-expand-lg navbar-light bg-custom shadow-sm fixed-top">
<div class="container-fluid max-width">
<a class="navbar-brand"href="#">
<div class="logo shadow-sm">
<img id="icon" src="img/Bobogeng.jpg" alt="">
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Menu</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="menu navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#works">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tools">Tools</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- Navbar Section End-->
<!-- Home Section Start -->
<section class="home" id="home">
<img src="img/Landscape.png" id="landscape">
<img src="img/Tebing.png" id="tebing">
<img src="img/Burung.png" id="burung">
<img src="img/Awan-1.png" id="awan-1">
<img src="img/Awan-2.png" id="awan-2">
<img src="img/Awan-3.png" id="awan-3">
<img src="img/Awan-4.png" id="awan-4">
<p id="text">Hello World</p>
<!--- <img src="Awan-Asli-Kanan.png" id="awan-asli-1">
<img src="Awan-Asli-Kiri.png" id="awan-asli-2"> -->
<img src="img/Matahari.png" id="matahari">
</section>
<!-- Home Section End-->
<!-- About Section Start-->
<div class="about container-fluid" id="about">
<div class="container row">
<div class="blob col-5">
<svg id="blob-besar" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<mask id="mask0" mask-type="alpha">
<path fill="#F4A861" d="M440,317Q423,394,344,388Q265,382,198,405Q131,428,122.5,357Q114,286,69,223.5Q24,161,76,103.5Q128,46,199,59Q270,72,332.5,91Q395,110,426,175Q457,240,440,317Z"/>
</mask>
<g mask="url(#mask0)">
<path fill="#F4A861" d="M440,317Q423,394,344,388Q265,382,198,405Q131,428,122.5,357Q114,286,69,223.5Q24,161,76,103.5Q128,46,199,59Q270,72,332.5,91Q395,110,426,175Q457,240,440,317Z"/>
<image id="pas-foto" clip-path="url(#blob)" xlink:href="img/Pas-Foto.png" preserveAspectRatio="xMidYMid slice"></image>
</g>
</svg>
<div>
<svg class="blob-item" id="blob-sedang" viewBox="0 0 381 306" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.92 0.0376934C222.811 0.651479 250.045 10.3046 277.618 21.7216C314.149 36.8486 366.983 39.8639 379.074 77.1201C391.176 114.41 342.822 143.817 329.174 180.583C316.331 215.18 329.555 260.269 301.903 285.008C273.942 310.023 230.225 308.035 192.92 302.483C159.32 297.483 133.336 274.939 105.443 255.772C76.8501 236.122 45.3928 219.736 28.6249 189.581C9.4861 155.162 -10.1652 112.755 5.96007 76.8617C22.0392 41.0711 69.02 33.2307 105.624 18.1898C133.768 6.62515 162.444 -0.588105 192.92 0.0376934Z" fill="#FFD9B6"/>
</svg>
<svg class="blob-item" id="blob-kecil" viewBox="0 0 164 157" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M93.6253 7.54148C112.651 5.79052 134.022 -6.56873 149.467 4.6652C164.913 15.9004 162.504 39.598 163.866 58.6338C164.934 73.5643 159.353 87.1258 156.416 101.804C152.952 119.12 158.945 141.211 145.137 152.238C131.39 163.217 111.226 151.746 93.6253 151.949C75.72 152.155 57.5888 160.737 41.2417 153.437C23.259 145.407 7.93434 129.919 2.16357 111.108C-3.56875 92.4232 3.03886 72.4765 10.9159 54.5876C18.162 38.1317 29.1513 23.1953 44.792 14.2987C59.4299 5.97241 76.8509 9.08527 93.6253 7.54148Z" fill="#D28944"/>
</svg>
<svg class="blob-item" id="blob-paling-kecil" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2684 1.48908C21.9806 1.14335 26.1507 -1.29701 29.1642 0.921154C32.1781 3.13958 31.7081 7.81871 31.9739 11.5774C32.1823 14.5254 31.0933 17.2032 30.5202 20.1015C29.8442 23.5204 31.0137 27.8824 28.3194 30.0598C25.637 32.2275 21.7026 29.9625 18.2684 30.0026C14.7746 30.0434 11.2368 31.7378 8.04717 30.2965C4.53834 28.711 1.54816 25.6527 0.42216 21.9386C-0.696341 18.2492 0.592948 14.3107 2.12994 10.7784C3.5438 7.52919 5.68805 4.57996 8.73989 2.8233C11.5961 1.17927 14.9953 1.79391 18.2684 1.48908Z" fill="#D28944"/>
</svg>
</div>
</div>
<div class="col-3"></div>
<div class="text-about col-4 offset-0 text-start">
<h1>Hi.</h1>
<h2>I'm <span class="name">Irsal Fathi Farhat</span></h2>
<p>Graphic Designer<br>
Experienced in UI/UX Design,<br>
Video Editor, and also a<br>
Network Engineer.</p>
<!--<div>
<a href="#" class="button"><span>Contact Me</span></a>
</div>-->
<div>
<a href="/my works/CV Kreatif.pdf" class="button"><span>Download CV</span></a>
</div>
<div class="about-social">
<a href="https://www.facebook.com/irsal.ff/" target="_blank" class="about-social-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg></a>
<a href="https://www.instagram.com/irsal_f.f/" target="_blank" class="about-social-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg></a>
<a href="https://www.linkedin.com/in/irsal-fathi-farhat-30296921b/" target="_blank" class="about-social-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg></a>
<a href="https://github.com/Bobogeng" target="_blank" class="about-social-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg></a>
<a href="https://www.youtube.com/channel/UCw2wRI6MUlyW1T32g8RZ-fg" target="_blank" class="about-social-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
</svg></a>
</div>
</div>
</div>
</div>
<!-- About Section End-->
<div id="wave-5">
<svg class="waves5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,1)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.5)" />
</g>
</svg>
</div>
<!-- Transition Section Start-->
<section class="transition">
<img src="img/elcarito-MHNjEBeLTgw-unsplash.jpg" id="bg-awan">
<img src="img/Chameleon.png" id="chameleon">
<img src="img/Awan-Asli-Kanan.png" class="awan-real" id="awan-kanan">
<img src="img/Awan-Asli-Kiri.png" class="awan-real" id="awan-kiri">
</section>
<!-- Transition Section End-->
<div id="wave-4">
<svg class="waves4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,1)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.5)" />
</g>
</svg>
</div>
<!-- Skills Section Start-->
<div class="skills container-fluid" id="skills">
<div class="container row">
<div class="title">
<h1>My Skills</h1>
</div>
<div class="card">
<div class="skills-icon">
<img src="icons/Front End Developer.svg" alt="">
</div>
<div class="content">
<h2>Front End Developer</h2>
<p>Just started with HTML,<br>
CSS, and Javascript.<br>
Also this website is<br>
one of my Experience<br>
in this Skill</p>
</div>
</div>
<div class="card">
<div class="skills-icon">
<img src="icons/Graphic Designer.svg" alt="">
</div>
<div class="content">
<h2>Graphic Designer</h2>
<p>2 Years Experience in this<br>
Skill and also have an<br>
Intermediate Skill with<br>
Vector,<br>
Motion Graph, and Pixel</p>
</div>
</div>
<div class="card">
<div class="skills-icon">
<img src="icons/Network Engineer.svg" alt="">
</div>
<div class="content">
<h2>Network Engineer</h2>
<p>Experienced in<br>
Cisco & Mikrotik<br>
also working in<br>
PT. Jarvis Solution<br>
as a Freelance Engineer</p>
</div>
</div>
<div class="card">
<div class="skills-icon">
<img src="icons/UI UX Designer.svg" alt="">
</div>
<div class="content">
<h2>UI/UX Designer</h2>
<p>Freelancer at this Skill,<br>
build with Figma<br>
and also learn how<br>
Client like<br>
User Interfaces</p>
</div>
</div>
</div>
</div>
<!-- Skills Section End-->
<div id="wave-3">
<svg class="waves3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(30,30,30,1)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(30,30,30,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(30,30,30,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(30,30,30,0.5)" />
</g>
</svg>
</div>
<!-- Works Section Start-->
<div class="works container-fluid" id="works">
<div class="container">
<section id="testim" class="testim">
<div class="wrap">
<div class="title">
<h1>My Works</h1>
</div>
<span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
<span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
<ul id="testim-dots" class="dots">
<li class="dot active"></li>
<!--
-->
<li class="dot"></li>
<!--
-->
<li class="dot"></li>
<!--
-->
<li class="dot"></li>
<!--
-->
</ul>
<div id="testim-content" class="cont">
<div class="active">
<div class="img"><img src="icons/3069760_circle_fiverr_round icon_icon.png" alt=""></div>
<h2>Fiver</h2>
<p>Become a Freelance in Graphic Designer, UI/UX, and others</p>
</div>
<div>
<div class="img"><img src="icons/Jarvis-Logo.png" alt=""></div>
<h2>PT. Jarvis</h2>
<p>Currently in a position as a Freelance Engineer, and Graphic Designer</p>
</div>
<div>
<div class="img"><img src="icons/4691514_unity_unity-3d_logo_icon.png" alt=""></div>
<h2>Unity</h2>
<p>Learning about C# for making my Pixel Game in the future</p>
</div>
<div>
<div class="img"><img src="icons/4202036_adobe_cc_cloud_creative_creativecloud_icon.png" alt=""></div>
<h2>Adobe CC</h2>
<p>Designing an Certificate, Flyer, and others</p>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Works Section End-->
<!-- Transition2 Section Start-->
<div id="wave-2">
<svg class="waves2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(30,30,30,1)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(30,30,30,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(30,30,30,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(30,30,30,0.5)" />
</g>
</svg>
</div>
<section class="transition2 container-fluid">
<div class="bobogeng-logo"><img id="bobogeng" src="img/Bobogeng.png" alt=""></div>
</section>
<div id="wave-1">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,1)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.5)" />
</g>
</svg>
</div>
<!-- Transition2 Section End-->
<!-- Tools Section Start -->
<div class="tools container-fluid" id="tools">
<div class="container row">
<div class="title">
<h1>Need a Designer?</h1>
</div>
<div class="content col-6">
<h2>Design services</h2>
<p>UI Design <span>/</span> Web Design <span>/</span> Flyer Design</p>
</div>
<div class="content col-6">
<h2>Tools i use</h2>
<p>Photoshop <span>/</span> Illustrator <span>/</span> Figma <span>/</span><br>
Premiere Pro <span>/</span> After Effects</p>
</div>
<div class="content col-6">
<h2>Tools i use for making this Website</h2>
<p>GSAP <span>/</span> ScrollMagic <span>/</span><br>
Photoshop <span>/</span> Illustrator</p>
</div>
</div>
</div>
<!-- Tools Section End -->
<div id="wave-0">
<svg class="waves0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(30,30,30,1)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(30,30,30,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(30,30,30,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(30,30,30,0.5)" />
</g>
</svg>
</div>
<!-- Footer Section Start -->
<footer>
<div class="footer-content">
<h3>Contact Me</h3>
<p>Thank you for visiting my website, you can contact me here!</p>
<ul class="footer-social">
<li><a href="https://www.facebook.com/irsal.ff/" target="_blank" class="footer-social-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg></a></li>
<li><a href="https://www.instagram.com/irsal_f.f/" target="_blank" class="footer-social-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg></a></li>
<li><a href="https://www.linkedin.com/in/irsal-fathi-farhat-30296921b/" target="_blank" class="footer-social-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg></a></li>
<li><a href="https://github.com/Bobogeng" target="_blank" class="footer-social-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg></a></li>
<li><a href="https://www.youtube.com/channel/UCw2wRI6MUlyW1T32g8RZ-fg" target="_blank" class="footer-social-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
</svg></a></li>
</ul>
<p>copyright ©<script>document.write(new Date().getFullYear())</script> designed by <span>Irsal</span>. All rights reserved.</p>
</div>
</footer>
<!-- Footer Section Start -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script src="https://use.fontawesome.com/1744f3f671.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<script src="main.js"></script>
</body>
</html>