-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
574 lines (550 loc) · 45.5 KB
/
index.html
File metadata and controls
574 lines (550 loc) · 45.5 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
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>XirTech Portfolio</title>
<!-- Favicon Icon -->
<link rel="icon" type="image/x-icon" href="assets/images/favicon-icon-50.png">
<!-- Link for CSS -->
<link rel="stylesheet" type="text/css" href="assets/styles/style.css" />
<link rel="stylesheet" type="text/css" href="assets/styles/responsive.css" />
<link rel="stylesheet" type="text/css" href="assets/styles/keyframes.css" />
</head>
<body class="bg-dark text-light">
<!-- Navigation -->
<nav>
<div class="logo">
<h1>XirTech</h1>
</div>
<ul>
<li>
<a class="text-light" href="#home">Home</a>
</li>
<li>
<a class="text-light" href="#projects">Projects</a>
</li>
<li>
<a class="text-light" href="#services">Services</a>
</li>
<li>
<a class="text-light hire-me" href="mailto:john.darlucio@gmail.com" target="_blank">Hire Me</a>
</li>
</ul>
<div class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</nav>
<!-- Menubar -->
<div class="menubar">
<ul>
<li>
<a class="text-light" href="#">Home</a>
</li>
<li>
<a class="text-light" href="#projects">Projects</a>
</li>
<li>
<a class="text-light" href="#services">Services</a>
</li>
<li>
<a class="text-light hire-me" href="mailto:john.darlucio@gmail.com" target="_blank">Hire Me</a>
</li>
</ul>
</div>
<!-- Particles.js container -->
<div id="particles-js"></div>
<!-- Landing Page -->
<section id="home" class="landingPage dotted py-4 my-4">
<div class="container grid-container-2">
<div class="first-content">
<div class="title mx-3">
<p class="text-xxl">Hi! I'm Trix 👋 <br>
<strong class="text-primary text-xxl" id="typing-text"></strong>
</p>
</div>
<div class="subtitle py-0 mx-3">
<p class="text-secondary text-lg bold">I am John Carlien Trix Darlucio. Establish and nurture your
unique journey towards achieving your life goals. 🌎
</p>
</div>
<div class="title-buttons py-0 mx-3">
<button class="text-primary" onclick="window.location='#threeWays'">Get started</button>
<button class="bg-primary text-dark" onmouseover="changeText(this)" onmouseout="resetText(this)"
onclick="downloadResume()">Resume</button>
</div>
</div>
<div class="profile-section">
<img class="profile" src="assets/images/my-picture.jpg" alt="profile-picture" />
</div>
</div>
</section>
<!-- Tech Stack -->
<section id="techStack" class="py-2 ">
<div class="second-content">
<div class="slider">
<div class="slide-track">
<div class="slide">
<img src="assets/images/php.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/laravel.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/livewire.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/vue.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/javascript.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/tailwind.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/react.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/php.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/laravel.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/livewire.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/node.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/Flutter.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/electron.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/express.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/vue.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/go.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/javascript.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/tailwind.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/react.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/php.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/laravel.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/livewire.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/vue.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/javascript.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/tailwind.png" height="50" width="150" alt="" />
</div>
<div class="slide">
<img src="assets/images/react.png" height="50" width="150" alt="" />
</div>
</div>
</div>
</div>
</section>
<!-- Smarter Way -->
<section id="smarter" class="my-2">
<div class="container smart">
<p class="text-xxxl bold">A Smarter
<strong class="text-primary">Way to<br></strong> Create Projects
</p>
</div>
</section>
<!-- 3 Ways -->
<section class="py-5 threeWays dotted-middle">
<div class="container third-content grid-container-3">
<div class="moto">
<p class="moto-numbers text-xxxl gradient-text moto-number-1">1</p>
<p class="moto-title text-md uppercase-text">Simple</p>
<p class="moto-subtitle text-sm">Crafting Intuitive Experiences through Proactive Visual Design.</p>
</div>
<div class="moto">
<p class="moto-numbers text-xxxl gradient-text moto-number-2">2</p>
<p class="moto-title text-md uppercase-text moto-title-2">Clear</p>
<p class="moto-subtitle text-sm">Elevating Efficiency: Seamless Workflows and Engaging Interactions with
Our Targets.</p>
</div>
<div class="moto">
<p class="moto-numbers text-xxxl gradient-text moto-number-3">3</p>
<p class="moto-title text-md uppercase-text">Effective</p>
<p class="moto-subtitle text-sm">Seamless Journeys: Expert Integration with Third-Party APIs.</p>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-5 fourth-section ">
<div class="container fourth-content grid-container-2">
<div class="description-image">
<figure>
<img class="" src="/assets/images/jira.png" alt="image" />
</figure>
</div>
<div class="description">
<div class="description-title">
<p class="text-xxl bold parag">
The most <br>
<strong class="px-1 text-xxl">Trusted way</strong><br>
<strong class="mx-2 text-primary text-xxl to-build">To Build</strong>Projects
</p>
</div>
<div class="description-subtitle mx-2 text-wrap px-2">
Project Solo Navigator is more than simply a management tool. it's a friend for the lone
professional, offering the support and structure required to navigate projects efficiently, even
while flying solo. With Project SoloNavigator, you may transform your individual efforts into
remarkable achievements.
</div>
<div class="description-button py-0 px-2 mx-5">
<button class="py-0 px-1" onclick="projectOpenModal()">View Created Project</button>
</div>
<!-- Project Modal -->
<div class="modal" id="projectModal">
<div class="modal-content">
<span class="close text-light" onclick="projectCloseModal()">×</span>
<div class="mx-1 my-2 grid-container-2">
<div><img class="photo" src="/assets/images/aimporo.png" alt="Aimporo"></div>
<div>
<div class="title bold text-lg text-primary">Multi-Flatform Commerce</div>
<div class="description text-md">
<p>
Introducing our cutting-edge Dynamic Multi-Platform E-commerce and Freelance
solution—a revolutionary ecosystem that seamlessly integrates the worlds of
online commerce and freelance services.
</p>
</div>
<div class="language">
<h5>Laravel | Tailwind | Filament</h5>
</div>
<!-- <div class="link">
<a href="https://github.com/TrixDiaz/Aimporo" target="_blank">
<h5 class="text-primary">Code</h5>
<i class="bi bi-github"></i>
</a>
</div> -->
</div>
</div>
<div class="mx-1 my-2 grid-container-2">
<div>
<div class="title bold text-lg text-primary">Dental Clinic Reservation</div>
<div class="description text-md">
<p>The Dental Clinic Reservation System with Doctor's Approval and Email
Notification is an advanced streamline
the appointment booking process for patients while ensuring seamless
communication
between patients and dental practitioners.
</p>
</div>
<div class="language">
<h5>Laravel | Tailwind</h5>
</div>
<!-- <div class="link">
<a href="https://github.com/TrixDiaz/Dental_Appoinment_System">
<h5 class="text-primary">Code</h5>
<i class="bi bi-github"></i>
</a>
</div> -->
</div>
<div class="item-1"><img class="photo" src="assets/images/Dental.PNG" alt="Baranggay"></div>
</div>
<div class="mx-1 my-2 grid-container-2">
<div><img class="photo" src="/assets/images/geotrigoal.png" alt="geotrigoal"></div>
<div>
<div class="title bold text-lg text-primary">Geotrigoal Quiz App</div>
<div class="description text-md">
<p>
Introducing Geotrigoal Quiz App—an immersive and interactive way to explore the
world through geography-themed quizzes.
</p>
</div>
<div class="language">
<h5>Laravel | Tailwind | Filament</h5>
</div>
<!-- <div class="link">
<a href="https://github.com/TrixDiaz/Quiz_App">
<h5 class="text-primary">Code</h5>
<i class="bi bi-github"></i>
</a>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Circle -->
<section class="py-2 dotted">
<div class="container-fluid fifth-content">
<div class="mx-1 circle-title">
<p class="text-xxl bold text-wrap">Project <strong class="text-primary">Storage</strong> from getting
all</p>
</div>
<div class="mx-5 circle-subtitle py-1">
<p class="text-lg text-wrap"> Feel free to enhance this project by raising issues, sending pull
requests, or proposing new features on GitHub. Enjoy managing your tasks!</p>
</div>
<div class="outer-circle-4">
<div class="circle-ui">
<span class="text-xs bold"></span>
</div>
<div class="small-circle-13">
<span></span>
</div>
<div class="outer-circle-3">
<div class="circle-mobile">
<span class="text-xs">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
</svg>
</span>
</div>
<div class="outer-circle-2">
<div class="small-circle-web">
<span>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
viewBox="0 0 48 48">
<path
d="M 22.5 6 C 22.224 6 22 6.224 22 6.5 L 22 9.5 C 22 9.776 22.224 10 22.5 10 L 25.5 10 C 25.776 10 26 9.776 26 9.5 L 26 6.5 C 26 6.224 25.776 6 25.5 6 L 22.5 6 z M 10.5 12 C 10.224 12 10 12.224 10 12.5 L 10 15.5 C 10 15.776 10.224 16 10.5 16 L 13.5 16 C 13.776 16 14 15.776 14 15.5 L 14 12.5 C 14 12.224 13.776 12 13.5 12 L 10.5 12 z M 16.5 12 C 16.224 12 16 12.224 16 12.5 L 16 15.5 C 16 15.776 16.224 16 16.5 16 L 19.5 16 C 19.776 16 20 15.776 20 15.5 L 20 12.5 C 20 12.224 19.776 12 19.5 12 L 16.5 12 z M 22.5 12 C 22.224 12 22 12.224 22 12.5 L 22 15.5 C 22 15.776 22.224 16 22.5 16 L 25.5 16 C 25.776 16 26 15.776 26 15.5 L 26 12.5 C 26 12.224 25.776 12 25.5 12 L 22.5 12 z M 37.478516 14.300781 L 37.025391 14.951172 C 36.458391 15.825172 36.045734 16.787828 35.802734 17.798828 C 35.343734 19.731828 35.621422 21.546656 36.607422 23.097656 C 35.416422 23.758656 33.386 23.986 33 24 L 2 24 C 0.895 24 0 24.895 0 26 C 0 28 0.43371875 30.924625 1.3867188 33.515625 C 2.4757187 36.359625 4.0970781 38.454328 6.2050781 39.736328 C 8.5670781 41.177328 12.404859 42 16.755859 42 C 18.720859 42.006 20.683234 41.828703 22.615234 41.470703 C 25.301234 40.979703 27.885719 40.045078 30.261719 38.705078 C 32.219719 37.576078 33.981469 36.139172 35.480469 34.451172 C 37.985469 31.627172 39.477891 28.4815 40.587891 25.6875 C 40.592891 25.6845 40.596562 25.683688 40.601562 25.679688 C 43.598562 25.800687 45.412625 24.642688 46.390625 23.679688 C 47.008625 23.095688 47.491688 22.38275 47.804688 21.59375 L 48 21.021484 L 47.527344 20.650391 C 47.397344 20.547391 46.182141 19.632812 43.619141 19.632812 C 42.942141 19.635813 42.266609 19.694641 41.599609 19.806641 C 41.103609 16.421641 38.293969 14.769313 38.167969 14.695312 L 37.478516 14.300781 z M 4.5 18 C 4.224 18 4 18.224 4 18.5 L 4 21.5 C 4 21.776 4.224 22 4.5 22 L 7.5 22 C 7.776 22 8 21.776 8 21.5 L 8 18.5 C 8 18.224 7.776 18 7.5 18 L 4.5 18 z M 10.5 18 C 10.224 18 10 18.224 10 18.5 L 10 21.5 C 10 21.776 10.224 22 10.5 22 L 13.5 22 C 13.776 22 14 21.776 14 21.5 L 14 18.5 C 14 18.224 13.776 18 13.5 18 L 10.5 18 z M 16.5 18 C 16.224 18 16 18.224 16 18.5 L 16 21.5 C 16 21.776 16.224 22 16.5 22 L 19.5 22 C 19.776 22 20 21.776 20 21.5 L 20 18.5 C 20 18.224 19.776 18 19.5 18 L 16.5 18 z M 22.5 18 C 22.224 18 22 18.224 22 18.5 L 22 21.5 C 22 21.776 22.224 22 22.5 22 L 25.5 22 C 25.776 22 26 21.776 26 21.5 L 26 18.5 C 26 18.224 25.776 18 25.5 18 L 22.5 18 z M 28.5 18 C 28.224 18 28 18.224 28 18.5 L 28 21.5 C 28 21.776 28.224 22 28.5 22 L 31.5 22 C 31.776 22 32 21.776 32 21.5 L 32 18.5 C 32 18.224 31.776 18 31.5 18 L 28.5 18 z">
</path>
</svg>
</span>
</div>
<div class="outer-circle">
<div class="inner-circle">
<p class="text-xs bold">Integrate seamlessly across platforms</p>
</div>
<div class="circle-games">
<span>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
viewBox="0 0 22 22.969">
<path
d="M 9.691,14.8 6.411,11.488 9.6,8.3 C 9.336,8.026 9.066,7.74 8.8,7.44 A 5.857,5.857 0 0 1 7.263,3.807 l -6.97,6.97 a 1,1 0 0 0 0,1.414 l 10.777,10.778 0.7,-0.847 a 4.02,4.02 0 0 0 -0.061,-5.27 C 10.755,15.775 9.7,14.807 9.691,14.8 Z m 2.617,-6.631 3.281,3.311 -3.184,3.185 c 0.264,0.273 0.534,0.56 0.8,0.859 a 5.866,5.866 0 0 1 1.531,3.638 l 6.971,-6.971 a 1,1 0 0 0 0,-1.414 L 10.93,0 10.23,0.847 a 4.02,4.02 0 0 0 0.062,5.27 c 0.953,1.076 2.008,2.045 2.016,2.052 z">
</path>
</svg>
</span>
</div>
<div class="circle-defi">
<span>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
viewBox="0 0 30 30">
<path
d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z">
</path>
</svg>
</span>
</div>
</div>
<div class="circle-web">
<span>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
viewBox="0 0 32 32">
<path
d="M 6.5839844 9.0097656 C 5.2239844 9.0097656 3.8432813 9.5400781 3.6132812 9.8300781 C 3.5532812 9.9500781 3.4141406 10.919922 3.7441406 10.919922 C 3.8541406 10.919922 3.9046094 10.939062 4.2246094 10.789062 C 5.4246094 10.319062 6.1849219 10.330078 6.2949219 10.330078 C 7.6449219 10.200078 8.4246875 11.120547 8.3046875 12.310547 L 8.3046875 13.009766 C 7.1646875 12.739766 6.5133594 12.730469 6.1933594 12.730469 C 4.5333594 12.630469 3 13.505688 3 15.429688 C 3 17.539687 4.8832812 17.990937 5.6132812 17.960938 C 6.7032812 17.970938 7.7435937 17.480859 8.4335938 16.630859 C 8.9835938 17.860859 9.33375 17.779297 9.34375 17.779297 C 9.44375 17.779297 9.5235156 17.739453 9.6035156 17.689453 L 10.173828 17.289062 C 10.273828 17.229063 10.353281 17.129766 10.363281 17.009766 C 10.353281 16.719766 9.8330469 16.269766 9.8730469 15.259766 L 9.8730469 12.140625 C 9.9330469 11.280625 9.6542187 10.439062 9.0742188 9.7890625 C 8.3842188 9.2090625 7.4739844 8.9297656 6.5839844 9.0097656 z M 25.957031 9.0097656 C 23.957031 9.0097656 22.807891 10.259297 22.837891 11.529297 C 22.837891 13.269297 24.596875 13.820859 24.796875 13.880859 C 26.486875 14.410859 26.7175 14.430078 27.1875 14.830078 C 27.5875 15.240078 27.537266 16.040625 26.947266 16.390625 C 26.777266 16.490625 26.046484 16.929844 24.396484 16.589844 C 23.846484 16.479844 23.557422 16.350156 23.107422 16.160156 C 22.987422 16.120156 22.707031 16.049922 22.707031 16.419922 L 22.707031 16.910156 C 22.707031 17.140156 22.846641 17.349219 23.056641 17.449219 C 24.106641 17.979219 25.366719 18 25.636719 18 C 25.676719 18 27.976094 18.001219 28.746094 16.449219 C 28.905094 16.129219 29.316875 14.960937 28.546875 13.960938 C 27.906875 13.210938 27.356797 13.130859 25.716797 12.630859 C 25.576797 12.590859 24.366953 12.279687 24.376953 11.429688 C 24.316953 10.339688 25.797422 10.280781 26.107422 10.300781 C 27.357422 10.280781 27.976406 10.749297 28.316406 10.779297 C 28.466406 10.779297 28.537109 10.690234 28.537109 10.490234 L 28.537109 10.029297 C 28.547109 9.9192969 28.507266 9.8107031 28.447266 9.7207031 C 28.047266 9.2007031 26.517031 9.0097656 25.957031 9.0097656 z M 10.777344 9.2597656 C 10.667344 9.2797656 10.587422 9.39 10.607422 9.5 C 10.627422 9.63 10.647266 9.760625 10.697266 9.890625 L 12.9375 17.279297 C 12.9875 17.519297 13.146094 17.780234 13.496094 17.740234 L 14.316406 17.740234 C 14.816406 17.790234 14.886484 17.309766 14.896484 17.259766 L 16.367188 11.099609 L 17.857422 17.269531 C 17.867422 17.319531 17.937734 17.8 18.427734 17.75 L 19.257812 17.75 C 19.617812 17.79 19.787891 17.529062 19.837891 17.289062 C 22.357891 9.1790625 22.187031 9.7303906 22.207031 9.6503906 C 22.247031 9.2303906 22.006797 9.2595313 21.966797 9.2695312 L 21.076172 9.2695312 C 20.626172 9.2195313 20.537578 9.6304688 20.517578 9.7304688 L 18.857422 16.140625 L 17.357422 9.7304688 C 17.287422 9.2404687 16.887109 9.2595313 16.787109 9.2695312 L 16.017578 9.2695312 C 15.577578 9.2295313 15.4675 9.5804687 15.4375 9.7304688 L 13.947266 16.050781 L 12.347656 9.7304688 C 12.307656 9.5304687 12.177109 9.2197656 11.787109 9.2597656 L 10.777344 9.2597656 z M 6.5234375 13.890625 C 7.2434375 13.900625 7.8649219 14.009375 8.2949219 14.109375 C 8.2949219 14.609375 8.313125 14.889844 8.203125 15.339844 C 8.063125 15.819844 7.444375 16.690937 5.984375 16.710938 C 5.144375 16.750937 4.5945313 16.089844 4.6445312 15.339844 C 4.5945313 14.139844 5.8334375 13.840625 6.5234375 13.890625 z M 29.041016 20.001953 C 28.107641 20.014953 27.005922 20.224047 26.169922 20.810547 C 25.911922 20.989547 25.957141 21.238078 26.244141 21.205078 C 27.184141 21.092078 29.276391 20.838406 29.650391 21.316406 C 30.025391 21.794406 29.235719 23.766437 28.886719 24.648438 C 28.778719 24.911437 29.007047 25.020312 29.248047 24.820312 C 30.812047 23.510312 31.218438 20.764141 30.898438 20.369141 C 30.737937 20.171641 29.974391 19.988953 29.041016 20.001953 z M 1.2167969 21.001953 C 0.99873437 21.031953 0.9048125 21.308344 1.1328125 21.527344 C 5.0498125 25.201344 10.225656 27 15.972656 27 C 20.071656 27 24.830234 25.662578 28.115234 23.142578 C 28.658234 22.723578 28.195672 22.09575 27.638672 22.34375 C 23.955672 23.96875 19.955453 24.751953 16.314453 24.751953 C 10.918453 24.751953 5.69475 23.625406 1.46875 21.066406 C 1.37625 21.010406 1.2894844 20.991953 1.2167969 21.001953 z">
</path>
</svg>
</span>
</div>
</div>
<div class="small-circle-mobile-1">
<span></span>
</div>
<div class="small-circle-mobile-2">
<span></span>
</div>
</div>
<div class="small-circle-10">
<span></span>
</div>
<div class="small-circle-11">
<span class="text-xs bold"></span>
</div>
</div>
</div>
</section>
<!-- Front End Cards -->
<section id="threeWays" class="py-5 threeWays">
<div class="container third-content grid-container-3">
<div class="moto">
<p class="moto-numbers text-xxxl gradient-text moto-number-1">NODE</p>
<p class="moto-title text-md uppercase-text">
<a href="https://github.com/TrixDiaz/Node_Express_PG_TOTP_Authentication.git" target="_blank" style="color: var(--primary);">View Demo</a>
</p>
<p class="moto-subtitle text-sm">Passwordless Backend Using Node with Express</p>
</div>
<div class="moto">
<p class="moto-numbers text-xxxl gradient-text moto-number-2">Go</p>
<p class="moto-title text-md uppercase-text moto-title-2">
<a href="#" target="_blank" style="color: var(--primary);">View Demo</a>
</p>
<p class="moto-subtitle text-sm">Golang Authentication Backend</p>
</div>
<div class="moto">
<p class="moto-numbers text-xxxl gradient-text moto-number-3">Laravel</p>
<p class="moto-title text-md uppercase-text">
<a href="#" target="_blank" style="color: var(--primary);">View Demo</a>
</p>
<p class="moto-subtitle text-sm">Laravel Authentication Backend</p>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-2 six-section dotted-middle">
<div class="container sixth-content grid-container-3">
<div class="content-left grid-item-2">
<div class="content-title">
<p class="text-xxxl bold text-wrap">
CMS <br>
<strong class="text-primary">Development</strong> <br>
Services
</p>
</div>
<div class="content-subtitle my-0 text-wrap">
<p>CMS (Content Management System) development services involve the creation, customization, and
maintenance of a platform that allows users to easily manage and update digital content on their
websites.</p>
</div>
<div class="content-button">
<button class="py-0 px-1 content-button"
onclick="window.open('https://www.facebook.com/profile.php?id=100085677631685', '_blank')">Learn
more</button>
</div>
</div>
<div class="content-image my-1">
<figure>
<img class="" src="/assets/images/manOnTable.svg" alt="image" />
</figure>
</div>
</div>
</section>
<!-- Footer Section -->
<section class="footer">
<footer class="container">
<div class="logo">
<a href="#home">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
viewBox="0,0,256,256">
<g fill="#fbfbff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none" text-anchor="none"
style="mix-blend-mode: normal">
<g transform="scale(16,16)">
<path
d="M11.39453,1c-0.23437,0 -0.46875,0.08984 -0.625,0.21484c-0.15234,0.125 -0.23437,0.26172 -0.28906,0.36328h-0.00391c-0.01172,0.01563 -1.05078,1.64453 -2.11719,3.31641c-0.01562,0.02344 -0.02734,0.03906 -0.04297,0.0625c-0.06641,-0.12109 -0.12109,-0.22266 -0.19141,-0.35156c-0.27734,-0.51172 -0.55469,-1.01953 -0.55469,-1.01953c-0.00391,-0.00781 -0.00781,-0.01172 -0.00781,-0.01562c-0.12109,-0.20312 -0.45703,-0.57031 -0.9375,-0.57031h-1.8125c-0.22266,0 -0.49609,0.07422 -0.66406,0.33203c0,0 0,0 0,0.00391c-0.16797,0.25391 -0.12109,0.57422 -0.00781,0.77344l0.95313,1.74609l-1.97656,2.98828c-0.00391,0.01172 -0.01172,0.02344 -0.01953,0.03906c-0.125,0.22656 -0.13281,0.53906 0.01953,0.77344c0.00391,0.00391 0.00391,0.00391 0.00391,0.00391c0.13672,0.20703 0.39844,0.33984 0.65234,0.33984h1.85937c0.23828,0 0.47266,-0.09375 0.625,-0.21875c0.11719,-0.09375 0.1875,-0.19141 0.24219,-0.27734c0.03516,0.05078 0.05078,0.07813 0.08594,0.13672c0.27344,0.42188 0.63672,0.98438 1,1.54688c0.71875,1.11719 1.42188,2.21094 1.43359,2.23438c0.12109,0.20313 0.44922,0.57813 0.9375,0.57813h1.80859c0.23047,0 0.50781,-0.10156 0.66016,-0.33594c0.16016,-0.24609 0.13281,-0.5625 0.01953,-0.77734c-0.00781,-0.01172 -0.01562,-0.02344 -0.02344,-0.03516l-2.70312,-4.19531l4.16406,-6.50781c0.00781,-0.01562 0.01563,-0.02734 0.02344,-0.03906c0.10938,-0.21875 0.13281,-0.52734 -0.02344,-0.76953c-0.15625,-0.24219 -0.42969,-0.33984 -0.66016,-0.33984zM11.39453,2h1.39063l-4.05859,6.35156c-0.02734,0.03125 -0.07031,0.125 -0.07031,0.125l-0.03125,0.17969c0,0.00391 0.03906,0.20313 0.03906,0.20313c0.00391,0.00391 0.10547,0.15625 0.10938,0.15625l-0.07031,-0.08203l2.625,4.06641h-1.37109c-0.06641,0 -0.01172,0.02344 -0.07031,-0.07812c-0.00391,-0.00781 -0.00781,-0.01562 -0.01172,-0.01953c0,0 -0.72656,-1.12891 -1.44922,-2.25391c-0.36328,-0.5625 -0.72266,-1.125 -0.99609,-1.54687c-0.11719,-0.18359 -0.20703,-0.32812 -0.28125,-0.44531c0.02344,-0.04297 0.01953,-0.03516 0.05078,-0.08594c0.12891,-0.19922 0.30469,-0.47656 0.51172,-0.80078c0.41406,-0.64844 0.95313,-1.49609 1.49219,-2.33984c1.07031,-1.67969 2.125,-3.32812 2.125,-3.32812c0.00781,-0.00781 0.01172,-0.01172 0.01563,-0.01953c0.03516,-0.0625 0.04688,-0.07812 0.05078,-0.08203zM5.21875,4h1.40625c0.07422,0 0.01172,-0.02734 0.07031,0.07813c0.00781,0.01172 0.27734,0.5 0.55469,1.00781c0.13672,0.25391 0.27734,0.51172 0.38281,0.70313c0.01563,0.02734 0.02344,0.04297 0.03906,0.06641c-0.06641,0.10156 -0.08984,0.13672 -0.20312,0.31641c-0.20312,0.3125 -0.46875,0.71875 -0.72656,1.125c-0.52344,0.80469 -1.03906,1.59766 -1.03906,1.59766c-0.00391,0.00781 -0.00781,0.01563 -0.01172,0.02344c-0.03516,0.05859 -0.05859,0.08594 -0.05859,0.08984c-0.00391,0 0.02734,-0.00781 0,-0.00781h-1.41797l1.87891,-2.83984c0.01172,-0.01562 0.02344,-0.03516 0.03125,-0.05078c0.00781,-0.01562 0.01953,-0.04297 0.03125,-0.07812c0.01172,-0.03906 0.02344,-0.14844 0.02344,-0.14844c0,-0.00391 -0.01172,-0.11328 -0.02344,-0.15234c-0.01172,-0.03906 -0.02344,-0.0625 -0.03125,-0.07812c-0.00391,-0.00781 -0.00781,-0.01172 -0.00781,-0.01953z">
</path>
</g>
</g>
</svg>
</a>
</div>
<div class="tabs">
<!-- Facebook icon -->
<a href="https://www.facebook.com/profile.php?id=100085677631685" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
viewBox="0,0,256,256">
<g fill="#fbfbff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none" text-anchor="none"
style="mix-blend-mode: normal">
<g transform="scale(5.12,5.12)">
<path
d="M25,3c-12.13844,0 -22,9.86156 -22,22c0,11.01913 8.12753,20.13835 18.71289,21.72852l1.14844,0.17383v-17.33594h-5.19727v-3.51953h5.19727v-4.67383c0,-2.87808 0.69065,-4.77363 1.83398,-5.96289c1.14334,-1.18926 2.83269,-1.78906 5.18359,-1.78906c1.87981,0 2.61112,0.1139 3.30664,0.19922v2.88086h-2.44727c-1.38858,0 -2.52783,0.77473 -3.11914,1.80664c-0.59131,1.03191 -0.77539,2.264 -0.77539,3.51953v4.01758h6.12305l-0.54492,3.51953h-5.57812v17.36523l1.13477,-0.1543c10.73582,-1.45602 19.02148,-10.64855 19.02148,-21.77539c0,-12.13844 -9.86156,-22 -22,-22zM25,5c11.05756,0 20,8.94244 20,20c0,9.72979 -6.9642,17.7318 -16.15625,19.5332v-12.96875h5.29297l1.16211,-7.51953h-6.45508v-2.01758c0,-1.03747 0.18982,-1.96705 0.50977,-2.52539c0.31994,-0.55834 0.62835,-0.80078 1.38477,-0.80078h4.44727v-6.69141l-0.86719,-0.11719c-0.59979,-0.08116 -1.96916,-0.27148 -4.43945,-0.27148c-2.7031,0 -5.02334,0.73635 -6.625,2.40234c-1.60166,1.66599 -2.39258,4.14669 -2.39258,7.34961v2.67383h-5.19727v7.51953h5.19727v12.9043c-9.04433,-1.91589 -15.86133,-9.84626 -15.86133,-19.4707c0,-11.05756 8.94244,-20 20,-20z">
</path>
</g>
</g>
</svg>
</a>
<!-- Instagram icon -->
<a href="https://www.instagram.com/john_darlucio/?igsh=NHNnM3Jsamg0b2Fj&utm_source=qr&fbclid=IwAR25HDmJp58G7729HaYty3GFKcpmS2dPO4nZd9ED6MvOUNUiezK3JGMEuuc"
target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
viewBox="0,0,256,256">
<g fill="#fbfbff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none" text-anchor="none"
style="mix-blend-mode: normal">
<g transform="scale(5.12,5.12)">
<path
d="M16,3c-7.16752,0 -13,5.83248 -13,13v18c0,7.16752 5.83248,13 13,13h18c7.16752,0 13,-5.83248 13,-13v-18c0,-7.16752 -5.83248,-13 -13,-13zM16,5h18c6.08648,0 11,4.91352 11,11v18c0,6.08648 -4.91352,11 -11,11h-18c-6.08648,0 -11,-4.91352 -11,-11v-18c0,-6.08648 4.91352,-11 11,-11zM37,11c-1.10457,0 -2,0.89543 -2,2c0,1.10457 0.89543,2 2,2c1.10457,0 2,-0.89543 2,-2c0,-1.10457 -0.89543,-2 -2,-2zM25,14c-6.06329,0 -11,4.93671 -11,11c0,6.06329 4.93671,11 11,11c6.06329,0 11,-4.93671 11,-11c0,-6.06329 -4.93671,-11 -11,-11zM25,16c4.98241,0 9,4.01759 9,9c0,4.98241 -4.01759,9 -9,9c-4.98241,0 -9,-4.01759 -9,-9c0,-4.98241 4.01759,-9 9,-9z">
</path>
</g>
</g>
</svg>
</a>
<!-- Github Icon -->
<a href="https://github.com/TrixDiaz" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
viewBox="0,0,256,256">
<g fill="#fbfbff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none" text-anchor="none"
style="mix-blend-mode: normal">
<g transform="scale(5.12,5.12)">
<path
d="M25,2c-12.68866,0 -23,10.31134 -23,23c0,12.68867 10.31134,23 23,23c12.68867,0 23,-10.31133 23,-23c0,-12.68866 -10.31133,-23 -23,-23zM25,4c11.60734,0 21,9.39266 21,21c0,0.07137 -0.00515,0.14169 -0.00586,0.21289c-0.63961,-0.05904 -1.37863,-0.11511 -2.31836,-0.14844c-1.32872,-0.04712 -3.00352,-0.03347 -4.90234,0.06055c0.07041,-0.49035 0.11977,-0.98762 0.12109,-1.49805c0.09683,-1.87262 -0.53201,-3.62449 -1.55469,-5.17187c0.24707,-0.85373 0.5369,-1.93986 0.60938,-3.17187c0.0826,-1.40428 -0.03862,-2.96144 -1.16602,-4.01367l-0.28906,-0.26953h-0.39453c-2.68307,0 -4.51959,1.12321 -5.64258,2.01367c-1.6215,-0.62765 -3.44481,-1.01367 -5.45703,-1.01367c-2.02363,0 -3.86447,0.39142 -5.55273,1.01758c-1.12235,-0.89089 -2.96048,-2.01758 -5.64648,-2.01758h-0.39258l-0.28906,0.26758c-1.09819,1.01974 -1.19936,2.53418 -1.13086,3.93164c0.06041,1.23229 0.33345,2.35292 0.57617,3.24805c-1.03996,1.57759 -1.66406,3.37475 -1.66406,5.15234c0,0.51163 0.04758,1.01046 0.11719,1.50195c-1.80576,-0.08375 -3.41548,-0.09989 -4.69336,-0.05469c-0.9397,0.03324 -1.67878,0.08884 -2.31836,0.14844c-0.0006,-0.06534 -0.00586,-0.12983 -0.00586,-0.19531c0,-11.60733 9.39266,-21 21,-21zM14.39648,13.13086c2.01758,0.19118 3.53551,1.09211 4.23828,1.7168l0.46875,0.41406l0.57813,-0.23633c1.58145,-0.65119 3.34534,-1.02539 5.31836,-1.02539c1.97302,0 3.73739,0.37608 5.19922,1.01563l0.58594,0.25781l0.47852,-0.42578c0.70301,-0.6249 2.22351,-1.5261 4.24219,-1.7168c0.2684,0.44498 0.50163,1.07781 0.44531,2.03516c-0.0674,1.14572 -0.37387,2.39364 -0.60547,3.13477l-0.15039,0.48242l0.29883,0.4082c0.98947,1.34928 1.49398,2.80953 1.4082,4.35352l-0.00195,0.02734v0.02734c0,2.49545 -0.89861,4.49273 -2.8125,5.97266c-1.91384,1.47993 -4.93523,2.42773 -9.1875,2.42773c-4.25227,0 -7.27556,-0.94781 -9.18945,-2.42773c-1.91389,-1.47993 -2.81055,-3.4772 -2.81055,-5.97266c0,-1.46471 0.52892,-3.07601 1.50586,-4.4082l0.29297,-0.39844l-0.14062,-0.47461c-0.23173,-0.78787 -0.51577,-2.06426 -0.57227,-3.2168c-0.04699,-0.95862 0.17989,-1.56453 0.41016,-1.9707zM8.88477,26.02148c0.70669,0.00903 1.51669,0.04717 2.32813,0.08789c0.07753,0.3118 0.16593,0.61852 0.27344,0.91797c-3.30736,0.06975 -5.7816,0.40233 -7.30664,0.6875c-0.06448,-0.50035 -0.11584,-1.00482 -0.14453,-1.51562c1.12705,-0.10696 2.71584,-0.20499 4.84961,-0.17773zM41.11523,26.03711c2.13229,-0.02708 3.72049,0.07105 4.84766,0.17773c-0.02866,0.50348 -0.07914,1.00082 -0.14258,1.49414c-1.57954,-0.28977 -4.12064,-0.6223 -7.51367,-0.67578c0.1053,-0.29353 0.19299,-0.59498 0.26953,-0.90039c0.89512,-0.04798 1.76839,-0.08592 2.53906,-0.0957zM11.91211,28.01953c0.59674,1.1958 1.44941,2.26349 2.57617,3.13477c1.54054,1.19123 3.54334,2.02354 5.98828,2.46875c-0.31986,0.32865 -0.61078,0.68955 -0.86914,1.07031l-0.06055,-0.05273c0.0055,-0.0063 -0.49713,0.24525 -1.24805,0.3125c-0.75092,0.06725 -1.67721,0.04688 -2.49805,0.04688c-1.225,0 -1.76457,-0.57879 -2.62695,-1.63281c-0.47755,-0.64363 -1.05973,-1.16486 -1.625,-1.56055c-0.57881,-0.40517 -1.07257,-0.69113 -1.68359,-0.79297l-0.08203,-0.01367h-0.08398c-0.46667,0 -0.91824,0.03379 -1.33984,0.51563c-0.2108,0.24092 -0.3561,0.68694 -0.26172,1.06445c0.09438,0.37752 0.3332,0.6095 0.54688,0.75195c1.36672,0.91115 1.60826,2.71448 2.46484,4.31836c0.79992,1.59392 2.52629,2.34961 4.29102,2.34961h2.59961v4.80273c-7.03219,-2.4822 -12.33532,-8.59812 -13.66797,-16.09961c1.5309,-0.28835 4.09451,-0.63502 7.58008,-0.68359zM37.88281,28.02734c3.56273,0.0305 6.19824,0.37672 7.78711,0.66992c-1.33087,7.50424 -6.63585,13.6226 -13.66992,16.10547v-5.20312c0,-1.58457 -0.52036,-3.3319 -1.42578,-4.78906c-0.2749,-0.44241 -0.59827,-0.86081 -0.95898,-1.23633c2.31522,-0.45738 4.21713,-1.2754 5.69727,-2.41992c1.12432,-0.86939 1.97509,-1.93387 2.57031,-3.12695zM23.69922,34.09961h2.80078c0.81282,0 1.68042,0.64779 2.375,1.76563c0.69458,1.11783 1.125,2.61894 1.125,3.73438v5.79883c-1.60259,0.3908 -3.27621,0.60156 -5,0.60156c-1.72379,0 -3.39741,-0.21077 -5,-0.60156v-5.79883c0,-1.09074 0.46783,-2.5883 1.20898,-3.71094c0.74116,-1.12264 1.67741,-1.78906 2.49023,-1.78906zM12.30859,35.28125c0.86577,0.89801 1.91393,1.71875 3.49219,1.71875c0.77917,0 1.7517,0.02807 2.67578,-0.05469c0.00329,-0.00029 0.00648,-0.00166 0.00977,-0.00195c-0.12175,0.35 -0.21258,0.70217 -0.28906,1.05664h-2.79687c-1.23333,0 -2.10462,-0.44557 -2.50586,-1.24805l-0.00781,-0.01367l-0.00586,-0.01172c-0.1644,-0.30537 -0.38021,-0.91597 -0.57226,-1.44531z">
</path>
</g>
</g>
</svg>
</a>
<!-- Gmail Icon -->
<a href="mailto:john.darlucio@gmail.com" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
viewBox="0,0,256,256">
<g fill="#fbfbff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none" text-anchor="none"
style="mix-blend-mode: normal">
<g transform="scale(5.12,5.12)">
<path
d="M5.5,7c-2.46875,0 -4.48828,2.01563 -4.5,4.48438c0,0 0,0.00391 0,0.00781c0,0.00391 0,0.00391 0,0.00781v27c0,2.47266 2.02734,4.5 4.5,4.5h39c2.47266,0 4.5,-2.02734 4.5,-4.5v-27c0,-0.00391 0,-0.00391 0,-0.00781c0,-0.00391 0,-0.00781 0,-0.00781c-0.01172,-2.46875 -2.03125,-4.48437 -4.5,-4.48437zM8.10156,9h33.80078l-16.90234,11.78125zM4.77344,9.11719l20.22656,14.10156l20.23047,-14.10156c1.02344,0.30859 1.76172,1.23828 1.76953,2.37109c-0.00391,0.21094 -0.21875,0.63281 -0.53125,0.97266c-0.31641,0.34375 -0.625,0.55859 -0.625,0.55859l-0.00391,0.00781l-20.83984,14.75l-20.83984,-14.75l-0.00391,-0.00781c0,0 -0.30859,-0.21484 -0.625,-0.55859c-0.3125,-0.33984 -0.52734,-0.76172 -0.53125,-0.97266c0.00781,-1.13281 0.74609,-2.0625 1.77344,-2.37109zM3,14.65234l0.00781,0.00781l0.00781,0.00391v0.00391l2.98438,2.10938v24.22266h-0.5c-1.39062,0 -2.5,-1.10937 -2.5,-2.5zM47,14.65234v23.84766c0,1.39063 -1.10937,2.5 -2.5,2.5h-0.5v-24.22266l2.98438,-2.10937v-0.00391zM8,18.19141l17,12.03125l17,-12.03125v22.80859h-34z">
</path>
</g>
</g>
</svg>
</a>
</div>
</footer>
</section>
<!-- Scroll-to-top button -->
<button class="scroll-to-top" onclick="scrollToTop()">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
</svg>
</button>
<!-- Include Heroicons SVG icons from the CDN -->
<script src="https://unpkg.com/heroicons@1.0.1/dist/index.js"></script>
<!-- Include particles.js library -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- Link for JS -->
<script src="assets/js/script.js"></script>
</body>
</html>