-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
773 lines (746 loc) · 38.8 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
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
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
<!DOCTYPE html>
<html lang="en" class="overflow-hidden">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta
name="description"
content="Henrique Pochmann is a frontend developer, with a knack for UI/UX design, based in Porto Alegre/Brazil GMT-3"
/>
<link href="dist/output.css" rel="stylesheet" />
<link href="css/input.css" rel="stylesheet" />
<link
rel="icon"
type="image/png"
sizes="200x200"
href="img/favicon.png"
/>
<title>Henrique Pochmann - Frontend Developer</title>
</head>
<body class="flex flex-col h-screen">
<!-- Begins Menu-->
<div
id="menu-background"
class="flex grow inset-y-0 bg-black w-1/2 md:w-1/4 z-10 absolute -translate-x-full duration-300"
>
<!-- X button -->
<div class="ml-5 pt-5">
<button
id="close"
class="hover:cursor-pointer active:translate-y-0.5"
aria-label="Closes main menu"
>
<hr
class="w-5 border-2 bg-white border-white rounded-sm rotate-45 translate-y-1"
/>
<hr
class="w-5 border-2 bg-white border-white rounded-sm -rotate-45"
/>
</button>
</div>
<!-- Begins Itens Menu -->
<nav
class="flex grow items-center justify-center text-slate-300 uppercase font-condensed tracking-widest"
>
<ul id="menu" class="flex flex-col space-y-5 w-32">
<li
class="w-full progression-bar menu-item-active active:translate-y-0.5"
>
<a
href="#section-home"
class="inline-block transition-transform ease-in-out hover:translate-x-2"
>Home</a
>
</li>
<li
class="w-full progression-bar active:translate-y-0.5"
>
<a
href="#section-about"
class="inline-block transition-transform ease-in-out hover:translate-x-2"
>About</a
>
</li>
<li
class="w-full progression-bar active:translate-y-0.5"
>
<a
href="#section-experience"
class="inline-block transition-transform ease-in-out hover:translate-x-2"
>Experience</a
>
</li>
<li
class="w-full progression-bar active:translate-y-0.5"
>
<a
href="#section-projects"
class="inline-block transition-transform ease-in-out hover:translate-x-2"
>Projects</a
>
</li>
<li
class="w-full progression-bar active:translate-y-0.5"
>
<a
href="#section-skills"
class="inline-block transition-transform ease-in-out hover:translate-x-2"
>Skills</a
>
</li>
<li
class="w-full progression-bar active:translate-y-0.5"
>
<a
href="#section-education"
class="inline-block transition-transform ease-in-out hover:translate-x-2"
>Education</a
>
</li>
</ul>
</nav>
</div>
<!--Ends Menu-->
<header class="bg-white fixed top-0 left-0 right-0">
<!-- Header-->
<div class="flex mx-auto p-5">
<!-- Burger Menu -->
<div class="w-1/2">
<div class="w-10 h-10 rounded-full">
<button
id="burger"
class="w-5 mt-3 ml-2.5 space-y-0.5 delay-100 hover:cursor-pointer duration-300 ease-in opacity-0 -translate-y-full"
aria-label="Opens main menu"
>
<div><hr class="burger-menu-line" /></div>
<div><hr class="burger-menu-line" /></div>
<div><hr class="burger-menu-line" /></div>
</button>
</div>
</div>
<div
id="logo"
class="w-1/2 flex justify-end delay-300 duration-300 ease-in opacity-0"
>
<a
href="#section-home"
class="transition ease-linear border-0 margin-0 p-0"
aria-label="Link to website's home page"
>
<img
src="img/henriquepcm-logo-1x"
srcset="
img/henriquepcm-logo-1x.png 1x,
img/henriquepcm-logo-2x.png 2x,
img/henriquepcm-logo-3x.png 3x
"
class="w-24 h-24"
alt="henriquepcm.com logo"
decoding="async"
/>
</a>
</div>
</div>
</header>
<main class="flex flex-grow p-5 justify-center items-center">
<section
id="section-home"
class="flex flex-col mt-32 -translate-y-[4rem] text-center delay-[900ms] duration-300 ease-in opacity-0"
>
<h1
class="uppercase text-4xl lg:text-4xl xl:text-5xl font-bold leading-none"
>
Henrique Pochmann
</h1>
<h2
id="tagline"
class="text-2xl lg:text-2xl xl:text-3xl mt-2 leading-tight text-neutral-500"
>
Frontend developer with a knack for UI/UX design
</h2>
</section>
<section
id="section-about"
class="section-regular mt-32 -translate-y-[4rem] justify-center hidden"
>
<h2 class="h2-regular">About</h2>
<div class="space-y-5">
<p>
Hey there! I'm Henrique Pochmann from Porto
Alegre/RS - Brazil (GMT-3). With over 20 years of
experience creating, developing, and participating
in digital projects, and also with solid
experience in design, I recently found my passion
in front-end development. Currently, I'm
fine-tuning my skills to move software engineering
to the center of my professional life. Feel free
to drop me a line at
<span class="font-bold"
>henriquepcm[at]gmail.com</span
>.
</p>
</div>
</section>
<section
id="section-experience"
class="section-regular mt-32 mb-32 hidden"
>
<h2 class="h2-regular">Professional Experiences</h2>
<div class="w-full">2021 — Present</div>
<div class="vertical-line">
<h3 class="text-lg">
Trust and Safety Wrangler at
<strong>Tumblr/Automattic</strong> as a Full-Time
Employee | Remote
</h3>
<p class="mt-5">
Responsibilities: Reviewing content, ensuring
adherence to guidelines, and maintaining a safe
online environment for users. During the first
year, I worked mainly on a team focused on
preventing Spam on the platform.
</p>
<p class="mt-5">
Growth: This experience taught me mostly about the
importance of moderating content in a social
network and the impact it has on users' experience
on the platform. I also learned how to effectively
communicate in English with a distributed team in
a fast-paced, dynamic, and ever-evolving
environment.
</p>
<p class="mt-5">Skills Applied:</p>
<ul class="ul-tags">
<li class="li-tag">
<div class="tag">Content Moderation</div>
</li>
<li class="li-tag">
<div class="tag">Customer Support</div>
</li>
<li class="li-tag">
<div class="tag">
Asynchronous Communication
</div>
</li>
</ul>
</div>
<div class="w-full">2020 — 2021</div>
<div class="vertical-line">
<h3 class="text-lg">
Support and Spam Operations Agent at
<strong>Tumblr/Automattic</strong> as a Contractor
| Remote
</h3>
<p class="mt-5">
Responsibilities: Answering users' support
requests following the best practices stated in
internal documentation making sure users felt
heard, comprehend, and satisfied with the
information provided; investigating potential bugs
and escalating thorough reports to the appropriate
team; reviewing Spam reports in order to identify
potential abuses on the platform.
</p>
<p class="mt-5">
Growth: Through this experience, I learned that
providing humanized customer support influences
directly on how users perceive the company/product
and it can be explored as a marketing tool in
favor of the company.
</p>
<p class="mt-5">Skills Applied:</p>
<ul class="ul-tags">
<li class="li-tag">
<div class="tag">Customer Support</div>
</li>
<li class="li-tag">
<div class="tag">Spam Analysis</div>
</li>
<li class="li-tag">
<div class="tag">
Asynchronous Communication
</div>
</li>
</ul>
</div>
<div class="w-full">2014 — 2020</div>
<div class="vertical-line">
<h3 class="text-lg">
Professional Content Creator at
<strong>Aparelho Elétrico</strong> as
Self-Employed | Remote
</h3>
<p class="mt-5">
Responsibilities: I created, developed, and
maintained a blog/podcast called Aparelho Elétrico
(Electric Appliance) for six years. The goal of
this project was to publish content to help
professionals such as designers, software
engineers, and copywriters to succeed in working
as freelancers.
</p>
<p class="mt-5">
Growth: This experience as a professional content
creator mainly taught me how to plan, create and
promote content online. Furthermore, this project
gave me the opportunity to learn how to generate
leads, nurture them, and convert them into sales.
</p>
<p class="mt-5">Skills Applied:</p>
<ul class="ul-tags">
<li class="li-tag">
<div class="tag">Content Creation</div>
</li>
<li class="li-tag">
<div class="tag">Design</div>
</li>
<li class="li-tag">
<div class="tag">Front-End Development</div>
</li>
<li class="li-tag">
<div class="tag">Audio Editing</div>
</li>
<li class="li-tag">
<div class="tag">Email Marketing</div>
</li>
</ul>
</div>
<div class="w-full">2013 — 2014</div>
<div class="vertical-line">
<h3 class="text-lg">
Designer and Web Developer Freelance at
<strong>henriquepcm.com</strong> as Self-Employed
| Remote
</h3>
<p class="mt-5">
Responsibilities: Designing and developing
websites with WordPress in accordance with
clients' needs. Overseeing contractors. Managing
projects ensuring the achievement of established
deadlines.
</p>
<p class="mt-5">
Growth: This experience taught me mainly about
time management and productivity. Working
independently the attention is split among several
fields such as customer relationships, contractors
management, production, and finances.
</p>
<p class="mt-5">Skills Applied:</p>
<ul class="ul-tags">
<li class="li-tag">
<div class="tag">Design</div>
</li>
<li class="li-tag">
<div class="tag">Web Development</div>
</li>
<li class="li-tag">
<div class="tag">HTML</div>
</li>
<li class="li-tag">
<div class="tag">CSS</div>
</li>
<li class="li-tag">
<div class="tag">PHP</div>
</li>
<li class="li-tag">
<div class="tag">WordPress Development</div>
</li>
</ul>
</div>
<div class="w-full">2010 — 2013</div>
<div class="vertical-line">
<h3 class="text-lg">
Creative Director at
<strong>SantoCristo.st</strong> as a Business
Partner | On-Site
</h3>
<p class="mt-5">
Responsibilities: Providing creative solutions to
address customers' needs. Designing offline and
online advertising campaigns. Overseeing the duo
of interns. Hiring and managing contractors
according to demands.
</p>
<p class="mt-5">
Growth: This experience taught me mainly about the
business side of a creative company. Along with my
partner, I learned how to manage a small business
with all its peculiar challenges. Having my own
business helped me to fully understand my client's
challenges as well and therefore deliver better
solutions for their demands.
</p>
<p class="mt-5">Skills Applied:</p>
<ul class="ul-tags">
<li class="li-tag">
<div class="tag">Creative Direction</div>
</li>
<li class="li-tag">
<div class="tag">Art Direction</div>
</li>
<li class="li-tag">
<div class="tag">Design</div>
</li>
<li class="li-tag">
<div class="tag">SEO</div>
</li>
<li class="li-tag">
<div class="tag">WordPress</div>
</li>
</ul>
</div>
</section>
<section
id="section-education"
class="section-regular mt-32 mb-32 hidden"
>
<h2 class="h2-regular">Education</h2>
<div class="w-full">2023</div>
<div class="vertical-line">
<ul class="ul-details">
<li>
Course:
<strong
>Agile Fundamentals: Including Scrum &
Kanban</strong
>
on Udemy
</li>
<li>
Course:
<strong
>Advanced CSS and Sass: Flexbox, Grid,
Animations and More!</strong
>
on Udemy
</li>
<li>
Course:
<strong
>Build Responsive Real-World Websites
with HTML and CSS</strong
>
on Udemy
</li>
<li>
Course:
<strong
>Tailwind CSS From Scratch | Learn By
Building Projects</strong
>
on Udemy
</li>
<li>
Course:
<strong
>The Complete JavaScript Course 2023:
From Zero to Expert!</strong
>
on Udemy
</li>
<li>
Course:
<strong
>Figma UI UX Design Essentials</strong
>
on Udemy
</li>
</ul>
</div>
<div class="w-full">2022 — 2023</div>
<div class="vertical-line">
<ul class="ul-details">
<li>
Classes:
<strong>Conversation in English</strong> on
Cambly
</li>
<li>
Classes:
<strong>Conversation in English</strong> on
Lingo Live
</li>
</ul>
</div>
<div class="w-full">2015 — 2016</div>
<div class="vertical-line">
<ul class="ul-details">
<li>
Course:
<strong
>20 Weeks Program, General
English</strong
>
at Australian Pacific College in Melbourne-AU
</li>
</ul>
</div>
<div class="w-full">2015</div>
<div class="vertical-line">
<ul class="ul-details">
<li>
Course:
<strong
>WordPress Theme Development with
Bootstrap</strong
>
on Udemy
</li>
</ul>
</div>
<div class="w-full">2007 — 2010</div>
<div class="vertical-line">
<ul class="text-lg space-y-5 pb-11">
<li>
Technologist:
<strong>Web Design and Programming</strong>
at Universidade do Sul de Santa Catarina
</li>
</ul>
</div>
</section>
<section id="section-skills" class="mt-32 mb-32 hidden">
<h2 class="h2-regular">
Skills, Tools and Languages in Alphabetical Order
</h2>
<div class="grid lg:grid-cols-5">
<div>
<span class="mt-5 font-bold">Hard Skills</span>
<ul class="ul-tags lg:flex-col">
<li class="li-tag">
<div class="tag">CSS</div>
</li>
<li class="li-tag">
<div class="tag">HTML</div>
</li>
<li class="li-tag">
<div class="tag">JavaScript</div>
</li>
<li class="li-tag">
<div class="tag">UI/UX Design</div>
</li>
</ul>
</div>
<div>
<span class="mt-5 font-bold">Soft Skills</span>
<ul class="ul-tags lg:flex-col">
<li class="li-tag">
<div class="tag">
Attention to Detail
</div>
</li>
<li class="li-tag">
<div class="tag">Communication</div>
</li>
<li class="li-tag">
<div class="tag">Fast-Learner</div>
</li>
<li class="li-tag">
<div class="tag">Team Player</div>
</li>
</ul>
</div>
<div>
<span class="mt-5 font-bold"
>Complementary Skills</span
>
<ul class="ul-tags lg:flex-col">
<li class="li-tag">
<div class="tag">Design</div>
</li>
<li class="li-tag">
<div class="tag">PHP</div>
</li>
<li class="li-tag">
<div class="tag">SEO</div>
</li>
<li class="li-tag">
<div class="tag">WordPress</div>
</li>
</ul>
</div>
<div>
<span class="mt-5 font-bold">Tools</span>
<ul class="ul-tags lg:flex-col">
<li class="li-tag">
<div class="tag">Figma</div>
</li>
<li class="li-tag">
<div class="tag">Illustrator</div>
</li>
<li class="li-tag">
<div class="tag">Photoshop</div>
</li>
<li class="li-tag">
<div class="tag">
Visual Studio Code
</div>
</li>
</ul>
</div>
<div>
<span class="mt-5 font-bold">Languages</span>
<ul class="ul-tags lg:flex-col">
<li class="li-tag">
<div class="tag">
English - Proficient
</div>
</li>
<li class="li-tag">
<div class="tag">
Portuguese - Native
</div>
</li>
</ul>
</div>
</div>
</section>
<section
id="section-projects"
class="section-regular mt-32 mb-32 space-y-10 hidden"
>
<h2 class="h2-regular">Past Projects</h2>
<div>
<span class="font-bold"
>Segue o Fio (Follow the Thread), Newsletter,
2019</span
>
<p>
To bring this newsletter to life, I developed a
responsive email capture landing page using HTML
and CSS (Bootstrap). For the email template to be
read properly by email readers, I created a
seamless user experience with plain HTML and
inline CSS.
</p>
</div>
<div>
<span class="font-bold"
>Freelancer Full Folio, WordPress Theme,
2016</span
>
<p>
This was a premium WordPress theme I created for
independent professionals utilizing HTML, CSS
(Bootstrap), and PHP. Implemented some specific
features utilizing the Advanced Custom Fields
plugin.
</p>
</div>
<div>
<span class="font-bold"
>Freelancer Full Folio, Sales Page, 2016</span
>
<p>
To commercialize the Freelancer Full Folio theme,
I developed a responsive landing page using HTML,
CSS (Bootstrap), PHP, and WordPress. For sales
management, I utilized the WooCommerce plugin
integrated with PayPal.
</p>
</div>
<div>
<span class="font-bold"
>Aparelho Elétrico (Electric Appliance), Blog,
2015</span
>
<p>
To create this blog, I crafted a WordPress theme
from scratch with HTML, CSS (Bootstrap), and PHP.
Applied the HTML following SEO techniques. Also
implemented a paywall for subscribers using the
Advanced Custom Fields plugin.
</p>
</div>
</section>
</main>
<!-- Begins Footer -->
<footer
class="flex bg-white border-t fixed bottom-0 left-0 right-0 p-5 justify-center delay-500 duration-300 ease-in opacity-0 translate-y-5"
>
<!-- Icons -->
<ul id="footer-info" class="flex items-center space-x-2">
<li class="active:translate-y-0.5">
<a
href="https://www.linkedin.com/in/henriquepcm/?lipi=urn%3Ali%3Apage%3Ad_flagship3_feed%3B9GZ5%2FodxSjCi4Vt9Ayue9w%3D%3D"
target="_blank"
aria-label="Link to Henrique Pochmann's LinkedIn profile"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 transition ease-linear hover:scale-125"
viewBox="0 0 448 512"
aria-hidden="true"
>
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
/>
</svg>
</a>
</li>
<li class="active:translate-y-0.5">
<a
href="https://github.com/henriquepcm"
target="_blank"
aria-label="Link to Henrique Pochmann's GitHub profile"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 transition ease-linear hover:scale-125"
viewBox="0 0 496 512"
aria-hidden="true"
>
<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
/>
</svg>
</a>
</li>
</ul>
<!-- Footer Text -->
<div class="flex items-center text-xs uppercase ml-5">
<p class="tracking-wider">
Designed in
<a
class="link-inline font-bold"
href="https://www.figma.com/"
target="_blank"
data-replace="Figma"
><span>Figma</span></a
>. Coded in
<a
class="link-inline font-bold"
href="https://code.visualstudio.com/"
target="_blank"
data-replace="Visual Studio Code"
><span>Visual Studio Code</span></a
>
with
<a
class="link-inline font-bold"
href="https://tailwindcss.com/"
target="_blank"
data-replace="Tailwind CSS"
><span>Tailwind CSS</span></a
>
and
<a
class="link-inline font-bold"
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
target="_blank"
data-replace="Vanilla JavaScript"
>
<span>Vanilla JavaScript</span></a
>. Created from scratch by Henrique Pochmann.
</p>
</div>
</footer>
<script src="../scripts/main.js"></script>
</body>
</html>