Skip to content

Commit 5e2084c

Browse files
PkLavcPkLavc
committed
add lottie
1 parent e38af7a commit 5e2084c

28 files changed

Lines changed: 98 additions & 23 deletions

‎about.html‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,14 @@
3737
<meta property="og:image:alt" content="Brand portrait of enterprise systems architect and automation expert Patrick Araujo">
3838
<meta name="twitter:image:alt" content="Brand portrait of enterprise systems architect and automation expert Patrick Araujo">
3939
<title>About Patrick Araujo | Solutions Architect (Technical Owner)</title>
40-
<link rel="icon" type="image/webp" href="images/Lavc.webp">
40+
<link rel="icon" type="image/svg+xml" href="images/favicon.svg">
4141
<link rel="stylesheet" href="css/global.css">
4242
<link rel="stylesheet" href="css/color-blue.css">
4343
<link rel="stylesheet" href="css/index.css">
4444
<link rel="stylesheet" href="css/about.css">
4545
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
4646
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js" defer></script>
47+
<script src="https://cdn.jsdelivr.net/npm/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.js" defer></script>
4748
</head>
4849
<body>
4950
<!-- About Page Schema -->
@@ -60,7 +61,7 @@
6061
"@type": "Person",
6162
"name": "Patrick Araujo",
6263
"url": "https://pklavc.github.io/about.html",
63-
"image": "https://pklavc.github.io/images/profile.webp",
64+
"image": "https://pklavc.github.io/images/profile.svg",
6465
"sameAs": [
6566
"https://github.com/PkLavc",
6667
"https://www.linkedin.com/in/patrickajm/",
@@ -779,7 +780,7 @@
779780
"@type": "Person",
780781
"name": "Patrick Araujo",
781782
"url": "https://pklavc.github.io/about.html",
782-
"image": "https://pklavc.github.io/images/profile.webp",
783+
"image": "https://pklavc.github.io/images/profile.svg",
783784
"sameAs": [
784785
"https://github.com/PkLavc",
785786
"https://www.linkedin.com/in/patrickajm/",
@@ -976,7 +977,7 @@ <h1>About <span class="color">Me</span></h1>
976977
</p>
977978

978979
<div class="brands-section">
979-
<h3><img height="20" alt="Trusted by enterprise clients badge graphic" src="images/trust.webp"/> Trusted By Enterprise Clients & Integration Partners</h3>
980+
<h3><lottie-player src="images/trust.json" background="transparent" speed="1" style="width:20px; height:20px; display:inline-block; vertical-align:middle; margin-right:8px;" loop autoplay title="Trusted by enterprise clients badge graphic"></lottie-player> Trusted By Enterprise Clients & Integration Partners</h3>
980981
<div class="slider">
981982
<div class="slide-track">
982983
<div class="slide"><img src="https://raw.githubusercontent.com/PkLavc/PkLavc/e158b54267226ba98162945be674baa6978a566f/resources/Icons/Static/logo-loja-do-sapo.png" alt="Loja do Sapo" /></div>
@@ -992,7 +993,7 @@ <h3><img height="20" alt="Trusted by enterprise clients badge graphic" src="imag
992993
</div>
993994

994995
<div class="skills-section">
995-
<h3><img height="20" alt="Professional experience badge for backend architecture and automation" src="images/skills.webp"/> Professional Experience in Backend Architecture & Automation</h3>
996+
<h3><lottie-player src="images/skills.json" background="transparent" speed="1" style="width:20px; height:20px; display:inline-block; vertical-align:middle; margin-right:8px;" loop autoplay title="Professional experience badge for backend architecture and automation"></lottie-player> Professional Experience in Backend Architecture & Automation</h3>
996997
<div class="experience-content">
997998

998999
<!-- Loja do Sapo - Solutions Architect -->
@@ -1121,7 +1122,7 @@ <h3><img height="20" alt="Professional experience badge for backend architecture
11211122

11221123

11231124
<div class="skills-section">
1124-
<h3><img height="20" alt="Key skills badge for software architecture and data engineering" src="images/Da_Vinci.webp"/> Key Skills in Software Architecture & Data Engineering</h3>
1125+
<h3><lottie-player src="images/Da_Vinci.json" background="transparent" speed="1" style="width:20px; height:20px; display:inline-block; vertical-align:middle; margin-right:8px;" loop autoplay title="Key skills badge for software architecture and data engineering"></lottie-player> Key Skills in Software Architecture & Data Engineering</h3>
11251126
<div class="skills-grid">
11261127
<span>Python</span>
11271128
<span>JavaScript</span>
@@ -1146,7 +1147,7 @@ <h3><img height="20" alt="Key skills badge for software architecture and data en
11461147
</div>
11471148

11481149
<div class="skills-section">
1149-
<h3><img height="20" alt="Global education and engineering experience icon" src="images/Globe.webp"/> Education & Engineering Foundations</h3>
1150+
<h3><lottie-player src="images/Globe.json" background="transparent" speed="1" style="width:20px; height:20px; display:inline-block; vertical-align:middle; margin-right:8px;" loop autoplay title="Global education and engineering experience icon"></lottie-player> Education & Engineering Foundations</h3>
11501151
<div class="education-content">
11511152
<div class="education-item">
11521153
<div class="education-header">
@@ -1168,24 +1169,24 @@ <h3><img height="20" alt="Global education and engineering experience icon" src=
11681169

11691170

11701171
<div class="skills-section">
1171-
<h3><img height="20" alt="Professional contact icon for inquiries" src="images/link.webp"/> Contact & Professional Inquiries</h3>
1172+
<h3><lottie-player src="images/link.json" background="transparent" speed="1" style="width:20px; height:20px; display:inline-block; vertical-align:middle; margin-right:8px;" loop autoplay title="Professional contact icon for inquiries"></lottie-player> Contact & Professional Inquiries</h3>
11721173
<div class="contact-grid">
11731174
<div class="contact-item">
1174-
<a href="https://github.com/PkLavc" target="_blank" rel="noopener noreferrer"><img alt="Patrick Araujo - GitHub Portfolio and Open Source Projects" height="42" src="images/github.webp"/></a>
1175+
<a href="https://github.com/PkLavc" target="_blank" rel="noopener noreferrer"><lottie-player src="images/github.json" background="transparent" speed="1" style="width:42px; height:42px;" loop autoplay title="Patrick Araujo - GitHub Portfolio and Open Source Projects"></lottie-player></a>
11751176
<span class="contact-value" data-href="https://github.com/PkLavc">PkLavc</span>
11761177
<button class="copy-btn" data-copy="https://github.com/PkLavc" title="Copy to clipboard">
11771178
🗎 <span>copy</span>
11781179
</button>
11791180
</div>
11801181
<div class="contact-item">
1181-
<a href="https://www.linkedin.com/in/patrickajm/" target="_blank" rel="noopener noreferrer"><img alt="Patrick Araujo - Professional LinkedIn Profile" height="42" src="images/linkedin.webp"/></a>
1182+
<a href="https://www.linkedin.com/in/patrickajm/" target="_blank" rel="noopener noreferrer"><lottie-player src="images/linkedin.json" background="transparent" speed="1" style="width:42px; height:42px;" loop autoplay title="Patrick Araujo - Professional LinkedIn Profile"></lottie-player></a>
11821183
<span class="contact-value" data-href="https://www.linkedin.com/in/patrickajm/">patrickajm</span>
11831184
<button class="copy-btn" data-copy="https://www.linkedin.com/in/patrickajm/" title="Copy to clipboard">
11841185
🗎 <span>copy</span>
11851186
</button>
11861187
</div>
11871188
<div class="contact-item">
1188-
<a href="mailto:patrickajm@gmail.com" target="_blank" rel="noopener noreferrer"><img alt="Contact Patrick Araujo via Email" height="42" src="images/mail.webp"/></a>
1189+
<a href="mailto:patrickajm@gmail.com" target="_blank" rel="noopener noreferrer"><lottie-player src="images/mail.json" background="transparent" speed="1" style="width:42px; height:42px;" loop autoplay title="Contact Patrick Araujo via Email"></lottie-player></a>
11891190
<span class="contact-value" data-href="mailto:patrickajm@gmail.com">patrickajm@gmail.com</span>
11901191
<button class="copy-btn" data-copy="patrickajm@gmail.com" title="Copy to clipboard">
11911192
🗎 <span>copy</span>
@@ -1197,7 +1198,7 @@ <h3><img height="20" alt="Professional contact icon for inquiries" src="images/l
11971198

11981199
<div class="about-profile-img">
11991200
<div class="img-border">
1200-
<img src="images/profile.webp" alt="Patrick Araujo profile avatar for solutions architect and systems engineer">
1201+
<img src="images/profile.svg" alt="Patrick Araujo profile avatar for solutions architect and systems engineer">
12011202
</div>
12021203
</div>
12031204
</div>
@@ -1282,7 +1283,7 @@ <h3><img height="20" alt="Professional contact icon for inquiries" src="images/l
12821283
</script>
12831284
<!--particles script-->
12841285
<script>
1285-
particlesJS("particles", {"particles":{"number":{"value":40,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
1286+
particlesJS("particles", {"particles":{"number":{"value":40,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"images/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
12861287
</script>
12871288

12881289
<footer class="footer-minimal">

‎css/global.css‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,9 +142,26 @@ body.ready .footer-minimal {
142142
@keyframes animateslash{ 0%{ opacity: 1; z-index: 2;} 100%{ opacity: 0; z-index: 0;} }
143143

144144
.social-media-links{ height: 100vh; position: absolute; z-index: 2; padding: 60px; width: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
145-
.social-media{ color: white; width: 33.6px; height: auto; opacity: .6; margin: 8px; transition: all .4s ease; }
145+
.social-media{
146+
color: white;
147+
width: 60px;
148+
height: 60px;
149+
min-width: 60px;
150+
min-height: 60px;
151+
opacity: .6;
152+
margin: 8px;
153+
transition: all .4s ease;
154+
display: inline-block;
155+
box-sizing: border-box;
156+
overflow: hidden;
157+
}
146158
.social-media:hover{ opacity: 1; transform: scale(1.1); }
147159

160+
.social-media, lottie-player.social-media,
161+
.contactpic, lottie-player.contactpic {
162+
display: inline-block;
163+
}
164+
148165
.navigation-links{ display: flex; align-items: center; justify-content: center; flex-direction: column; font-family:poppins; }
149166
.navigation-links a{ padding:10px; text-decoration: none; color: white; font-size: 30px; opacity: .7; transition: all .4s ease; }
150167
.navigation-links a:hover{ opacity: 1; }

‎images/Da_Vinci.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎images/Da_Vinci.webp‎

-1.33 KB
Binary file not shown.

‎images/Globe.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎images/Globe.webp‎

-1.09 KB
Binary file not shown.

‎images/Lavc.webp‎

-530 Bytes
Binary file not shown.

‎images/desktop.ini‎

282 Bytes
Binary file not shown.

‎images/favicon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎images/github.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)