fix somethings in projects layout

Author: PkLavc

css/projects.css

@@ -47,6 +47,7 @@ body {
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
+    gap: 12px;
     height: 100%;
 }
 .project-card:hover {
@@ -57,8 +58,9 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 15px;
+    margin-bottom: 0;
     gap: 15px;
+    min-height: 38px;
 }
 .project-category {
     background: #181818;
@@ -72,25 +74,65 @@ body {
 .project-tech {
     color: #888;
     font-size: 0.9rem;
-    flex: 1;
-    text-align: right;
+    width: 100%;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: clip;
+}
+
+.project-tech-marquee {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    width: max-content;
+    animation: project-tech-marquee var(--marquee-duration, 14s) linear infinite;
+    will-change: transform;
+}
+
+.project-tech-item {
+    flex: none;
+    white-space: nowrap;
+}
+
+.project-tech-item:first-child {
+    margin-right: 0.5em;
+}
+
+@keyframes project-tech-marquee {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(calc(-1 * var(--marquee-item-width, 240px)));
+    }
 }
 .project-card h2 {
     color: #ffffff;
     font-size: 1.5rem;
-    margin-bottom: 10px;
+    margin-bottom: 0;
+    min-height: 3.1em;
+    line-height: 1.55;
 }
 .project-card p {
     color: #888;
     font-size: 1rem;
     line-height: 1.6;
-    margin-bottom: 15px;
+    margin-bottom: 0;
+}
+
+.project-description {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex-grow: 1;
+    min-height: 0;
 }
 
 .project-readmore-toggle-wrap {
     display: flex;
     justify-content: flex-end;
-    margin-bottom: 14px;
+    margin: 0;
 }
 
 .project-readmore-toggle {
@@ -302,8 +344,9 @@ body.readme-open {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    margin-bottom: 20px;
-    margin-top: auto;
+    margin: 0;
+    min-height: 64px;
+    align-content: flex-start;
 }
 .project-features span {
     background: rgba(255, 255, 255, 0.1);
@@ -320,7 +363,7 @@ body.readme-open {
     text-decoration: none;
     font-weight: 600;
     transition: color 0.3s ease;
-    margin-top: auto;
+    margin-top: 0;
 }
 .project-link:hover {
     color: #ffffff;
@@ -331,7 +374,14 @@ body.readme-open {
     justify-content: space-between;
     align-items: center;
     margin-top: auto;
+    padding-top: 10px;
     width: 100%;
+    min-height: 36px;
+}
+
+.project-card > .project-link {
+    margin-top: auto;
+    padding-top: 10px;
 }
 
 .project-demo-link {
@@ -350,7 +400,7 @@ body.readme-open {
 /* CORREÇÃO DO BOTÃO NO MOBILE */
 @media (max-width: 768px) {
     .project-readmore-toggle-wrap {
-        margin-bottom: 10px;
+        margin-top: 2px;
     }
 
     .project-readmore-toggle {
@@ -387,6 +437,7 @@ body.readme-open {
         flex-direction: column;
         gap: 8px;
         width: 100%;
+        padding-top: 8px;
     }
 
     .project-link {
@@ -462,20 +513,51 @@ body.readme-open {
     .project-header {
         flex-direction: column;
         align-items: flex-start;
+        justify-content: flex-start;
+        min-height: auto;
         gap: 5px;
         margin-bottom: 10px;
     }
 
     .project-tech {
         font-size: 0.7rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: clip;
+        max-width: 100%;
+    }
+
+    .project-tech-marquee {
+        animation: none !important;
+        display: inline;
+    }
+
+    .project-tech-item {
+        display: none;
+    }
+
+    .project-tech-item:first-child {
+        display: inline;
     }
 
     .project-card h2 {
         font-size: 1.1rem;
+        min-height: 0;
+        line-height: 1.4;
+    }
+
+    .project-description {
+        gap: 0;
+        flex-grow: 0;
     }
 
     .project-features {
         gap: 2px;
+        min-height: 0;
+    }
+
+    .project-actions {
+        min-height: 0;
     }
 
     .project-features span {
@@ -492,3 +574,13 @@ body.readme-open {
         margin-top: 5px;
     }
 }
+
+@media (min-width: 769px) {
+    .project-header {
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        gap: 8px;
+        min-height: 58px;
+    }
+}

js/projects-readmore.js

@@ -230,6 +230,93 @@
         return markdown;
     }
 
+    function initProjectTechTicker() {
+        const techNodes = document.querySelectorAll(".project-tech");
+
+        function isDesktop() {
+            return window.matchMedia("(min-width: 769px)").matches;
+        }
+
+        function prepareNode(node) {
+            // Only prepare marquee for desktop
+            if (!isDesktop()) {
+                return;
+            }
+
+            if (node.querySelector(".project-tech-marquee")) {
+                return;
+            }
+
+            const rawText = node.textContent.trim();
+            node.textContent = "";
+
+            const marquee = document.createElement("div");
+            marquee.className = "project-tech-marquee";
+
+            const itemA = document.createElement("span");
+            itemA.className = "project-tech-item";
+            itemA.textContent = "• " + rawText;
+
+            const itemB = document.createElement("span");
+            itemB.className = "project-tech-item";
+            itemB.textContent = "• " + rawText;
+            itemB.setAttribute("aria-hidden", "true");
+
+            marquee.appendChild(itemA);
+            marquee.appendChild(itemB);
+            node.appendChild(marquee);
+        }
+
+        function removeMarquee(node) {
+            const marquee = node.querySelector(".project-tech-marquee");
+            if (marquee) {
+                const text = marquee.textContent;
+                node.textContent = text;
+            }
+        }
+
+        function updateNode(node) {
+            const marquee = node.querySelector(".project-tech-marquee");
+            const firstItem = marquee ? marquee.querySelector(".project-tech-item") : null;
+            if (!marquee || !firstItem) {
+                return;
+            }
+
+            const itemWidth = Math.max(40, Math.ceil(firstItem.scrollWidth));
+            const pxPerSecond = 30;
+            const duration = Math.max(8, itemWidth / pxPerSecond);
+
+            node.style.setProperty("--marquee-item-width", itemWidth + "px");
+            node.style.setProperty("--marquee-duration", duration.toFixed(2) + "s");
+        }
+
+        techNodes.forEach(function (node) {
+            if (isDesktop()) {
+                prepareNode(node);
+                updateNode(node);
+            } else {
+                removeMarquee(node);
+            }
+        });
+
+        let resizeTimeout = null;
+        window.addEventListener("resize", function () {
+            if (resizeTimeout) {
+                window.clearTimeout(resizeTimeout);
+            }
+            resizeTimeout = window.setTimeout(function () {
+                techNodes.forEach(function (node) {
+                    if (isDesktop()) {
+                        prepareNode(node);
+                        updateNode(node);
+                    } else {
+                        removeMarquee(node);
+                    }
+                });
+            }, 150);
+        });
+    }
+
     function createReadMoreForCard(card, index) {
         const titleNode = card.querySelector("h2");
         const featuresNode = card.querySelector(".project-features");
@@ -250,6 +337,21 @@
             return;
         }
 
+        if (!card.querySelector(".project-description")) {
+            const directParagraphs = Array.from(card.children).filter(function (child) {
+                return child.tagName === "P";
+            });
+
+            if (directParagraphs.length > 0) {
+                const descriptionBlock = document.createElement("div");
+                descriptionBlock.className = "project-description";
+                card.insertBefore(descriptionBlock, directParagraphs[0]);
+                directParagraphs.forEach(function (paragraph) {
+                    descriptionBlock.appendChild(paragraph);
+                });
+            }
+        }
+
         const toggleWrap = document.createElement("div");
         toggleWrap.className = "project-readmore-toggle-wrap";
 
@@ -284,5 +386,6 @@
     }
 
     const cards = document.querySelectorAll(".project-card");
+    initProjectTechTicker();
     cards.forEach(createReadMoreForCard);
 })();