Skip to content

Commit b0848bd

Browse files
PkLavcPkLavc
committed
fiz css and links
1 parent 231dd3d commit b0848bd

5 files changed

Lines changed: 39 additions & 64 deletions

File tree

‎about/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -564,7 +564,7 @@ <h2><lottie-player src="/images/link.json" background="transparent" speed="1" cl
564564
</div>
565565
<div class="contact-item">
566566
<a href="https://www.linkedin.com/in/pklavc/" target="_blank" rel="noopener noreferrer"><lottie-player src="/images/linkedin.json" background="transparent" speed="1" class="contact-item-icon" loop autoplay title="Patrick Araujo - Professional LinkedIn Profile"></lottie-player></a>
567-
<span class="contact-value" data-href="https://www.linkedin.com/in/pklavc/">patrickajm</span>
567+
<span class="contact-value" data-href="https://www.linkedin.com/in/pklavc/">pklavc</span>
568568
<button class="copy-btn" type="button" data-copy="https://www.linkedin.com/in/pklavc/" title="Copy to clipboard" aria-label="Copy LinkedIn profile URL to clipboard">
569569
<lottie-player src="/images/copy.json" background="transparent" speed="0.55" class="copy-btn-icon" loop autoplay aria-hidden="true"></lottie-player><span>copy</span>
570570
</button>

‎css/global.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,12 @@ body.seo-layout .footer-minimal {
263263

264264
.footer-minimal p {
265265
font-size: 13px;
266-
color: #9aa3a8;
266+
color: #bcc5ca;
267+
}
268+
269+
.footer-minimal .github-dev-badge,
270+
.footer-minimal b {
271+
color: #e4edf1;
267272
}
268273

269274
.footer-minimal .footer-container {
@@ -348,7 +353,7 @@ body.seo-layout .footer-minimal {
348353

349354
.credits-grid a {
350355
font-size: 11px;
351-
color: #8b9398;
356+
color: #a7b1b7;
352357
text-decoration: none;
353358
}
354359

‎css/projects.css‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,11 @@ body {
8282
}
8383

8484
.project-tech-marquee {
85-
display: flex;
85+
display: inline-flex;
8686
align-items: center;
87-
gap: 0;
88-
width: max-content;
89-
animation: project-tech-marquee var(--marquee-duration, 14s) linear infinite;
87+
gap: 0.75em;
88+
min-width: max-content;
89+
animation: project-tech-marquee 14s linear infinite;
9090
will-change: transform;
9191
}
9292

@@ -95,16 +95,12 @@ body {
9595
white-space: nowrap;
9696
}
9797

98-
.project-tech-item:first-child {
99-
margin-right: 0.5em;
100-
}
101-
10298
@keyframes project-tech-marquee {
10399
from {
104100
transform: translateX(0);
105101
}
106102
to {
107-
transform: translateX(calc(-1 * var(--marquee-item-width, 240px)));
103+
transform: translateX(calc(-50% - 0.375em));
108104
}
109105
}
110106
.project-card h2 {

‎js/projects-readmore.js‎

Lines changed: 21 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
(function () {
22

3+
const desktopMedia = window.matchMedia("(min-width: 769px)");
4+
35
function initProjectTechTicker() {
46
const techNodes = document.querySelectorAll(".project-tech");
57

6-
function isDesktop() {
7-
return window.matchMedia("(min-width: 769px)").matches;
8-
}
9-
108
function prepareNode(node) {
11-
// Only prepare marquee for desktop
12-
if (!isDesktop()) {
9+
if (!desktopMedia.matches) {
1310
return;
1411
}
1512

1613
if (node.querySelector(".project-tech-marquee")) {
1714
return;
1815
}
1916

20-
const rawText = node.textContent.trim();
17+
const rawText = node.dataset.techText || node.textContent.trim();
18+
node.dataset.techText = rawText;
2119
node.textContent = "";
2220

2321
const marquee = document.createElement("div");
@@ -38,53 +36,28 @@
3836
}
3937

4038
function removeMarquee(node) {
41-
const marquee = node.querySelector(".project-tech-marquee");
42-
if (marquee) {
43-
const text = marquee.textContent;
44-
node.textContent = text;
39+
if (node.dataset.techText) {
40+
node.textContent = node.dataset.techText;
4541
}
4642
}
4743

48-
function updateNode(node) {
49-
const marquee = node.querySelector(".project-tech-marquee");
50-
const firstItem = marquee ? marquee.querySelector(".project-tech-item") : null;
51-
if (!marquee || !firstItem) {
52-
return;
53-
}
54-
55-
const itemWidth = Math.max(40, Math.ceil(firstItem.scrollWidth));
56-
const pxPerSecond = 30;
57-
const duration = Math.max(8, itemWidth / pxPerSecond);
58-
59-
node.style.setProperty("--marquee-item-width", itemWidth + "px");
60-
node.style.setProperty("--marquee-duration", duration.toFixed(2) + "s");
44+
function syncNodes() {
45+
techNodes.forEach(function (node) {
46+
if (desktopMedia.matches) {
47+
prepareNode(node);
48+
} else {
49+
removeMarquee(node);
50+
}
51+
});
6152
}
6253

63-
techNodes.forEach(function (node) {
64-
if (isDesktop()) {
65-
prepareNode(node);
66-
updateNode(node);
67-
} else {
68-
removeMarquee(node);
69-
}
70-
});
54+
syncNodes();
7155

72-
let resizeTimeout = null;
73-
window.addEventListener("resize", function () {
74-
if (resizeTimeout) {
75-
window.clearTimeout(resizeTimeout);
76-
}
77-
resizeTimeout = window.setTimeout(function () {
78-
techNodes.forEach(function (node) {
79-
if (isDesktop()) {
80-
prepareNode(node);
81-
updateNode(node);
82-
} else {
83-
removeMarquee(node);
84-
}
85-
});
86-
}, 150);
87-
});
56+
if (typeof desktopMedia.addEventListener === "function") {
57+
desktopMedia.addEventListener("change", syncNodes);
58+
} else if (typeof desktopMedia.addListener === "function") {
59+
desktopMedia.addListener(syncNodes);
60+
}
8861
}
8962

9063
function createReadMoreForCard(card, index) {

‎projects/index.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,13 @@
3535
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
3636
<link rel="preconnect" href="https://fonts.googleapis.com">
3737
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
38-
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Monoton&family=Poppins:wght@500&family=Raleway:wght@300&display=swap" onload="this.onload=null;this.rel='stylesheet'">
39-
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Monoton&family=Poppins:wght@500&family=Raleway:wght@300&display=swap"></noscript>
38+
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
39+
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Monoton&family=Poppins:wght@500&family=Raleway:wght@300&display=optional" onload="this.onload=null;this.rel='stylesheet'">
40+
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Monoton&family=Poppins:wght@500&family=Raleway:wght@300&display=optional"></noscript>
41+
<link rel="preload" href="/css/global.css" as="style">
42+
<link rel="preload" href="/css/projects.css" as="style">
4043
<link rel="stylesheet" href="/css/global.css">
4144
<link rel="stylesheet" href="/css/projects.css">
42-
<link rel="preload" as="style" href="/css/index.css" onload="this.onload=null;this.rel='stylesheet'">
43-
<noscript><link rel="stylesheet" href="/css/index.css"></noscript>
4445
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js" defer></script>
4546
</head>
4647
<body>

0 commit comments

Comments
 (0)