UI Update

Author: Magicherry

src/components/About/Techstack.js

@@ -4,7 +4,7 @@ import { Col, Row } from "react-bootstrap";
 const techStackIcons = [
     // Languages & Backend
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/cplusplus/cplusplus-original.svg" alt="C++" style={{ width: "1em", height: "1em" }} />, name: "C++", link: "https://isocpp.org/" },
-    { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/java/java-original.svg" alt="Java" style={{ width: "1em", height: "1em", filter: "brightness(2.5) contrast(1.1)" }} />, name: "Java", link: "https://www.java.com/" },
+    { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/java/java-original.svg" alt="Java" className="tech-icon-java" style={{ width: "1em", height: "1em" }} />, name: "Java", link: "https://www.java.com/" },
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/spring/spring-original.svg" alt="Spring Boot" style={{ width: "1em", height: "1em" }} />, name: "Spring Boot", link: "https://spring.io/projects/spring-boot" },
     { icon: <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/go/go-original.svg" alt="Go" style={{ width: "1em", height: "1em" }} />, name: "Go", link: "https://go.dev/" },
     { icon: <img src="https://raw.githubusercontent.com/gin-gonic/logo/master/color.png" alt="Gin" style={{ width: "1em", height: "1em", objectFit: "contain" }} />, name: "Gin", link: "https://gin-gonic.com/" },

src/css/style.css

@@ -248,8 +248,6 @@ body {
     --project-date-bg-grid: var(--surface-overlay-dark-strong);
     --project-overlay-bg: var(--surface-overlay-dark);
     --project-image-container-bg: rgba(0, 0, 0, 0.15);
-    --title-underline: linear-gradient(to right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-    --divider-line: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
     --button-pill-bg: rgba(16, 76, 115, 0.85);
     --button-pill-text: #ffffff;
     --github-btn-bg: rgba(255, 255, 255, 0.9);
@@ -405,8 +403,6 @@ body {
     --project-date-bg-grid: rgba(255, 255, 255, 0.9);
     --project-overlay-bg: rgba(255, 255, 255, 0.8);
     --project-image-container-bg: rgba(255, 255, 255, 0.4);
-    --title-underline: linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
-    --divider-line: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
     --button-pill-bg: rgba(0, 0, 0, 0.8);
     --button-pill-text: #fff;
     --github-btn-bg: rgba(0, 0, 0, 0.8);
@@ -1288,7 +1284,7 @@ a.floating-nav-contact-item:hover {
 .floating-nav-divider {
     height: 1px;
     width: 100%;
-    background: var(--divider-line);
+    background: var(--border-medium);
     margin: 6px 10px 4px 0;
     box-sizing: border-box;
     flex-shrink: 0;
@@ -2462,14 +2458,15 @@ body.homepage .home-about-section {
     width: 100%;
 }
 
+/* Match track timeline cards: .experience-description border-top */
 .project-card__title::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 1px;
-    background: var(--title-underline);
+    height: 0;
+    border-bottom: 1px solid var(--border-strong);
 }
 
 .project-card__tags {
@@ -2617,8 +2614,8 @@ body.homepage .home-about-section {
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 1px;
-    background: var(--title-underline);
+    height: 0;
+    border-bottom: 1px solid var(--border-strong);
 }
 
 .project-card-list-view__tags {
@@ -2858,6 +2855,11 @@ body.homepage .home-about-section {
     color: var(--color-text);
 }
 
+/* java-original is very dark; lighten only in dark theme (light mode: unfiltered asset) */
+[data-theme="dark"] .tech-icons__icon img.tech-icon-java {
+    filter: brightness(2.5) contrast(1.1);
+}
+
 .tech-icons__name {
     font-size: 1.05rem;
     font-weight: 600;
@@ -3820,23 +3822,6 @@ body.homepage .home-about-section {
         width: 100%;
     }
 
-    .project-card-list-view__title::after,
-    .project-card__title::after {
-        width: 100%;
-        left: 0;
-        transform: none;
-        height: 2px;
-        background: linear-gradient(
-            90deg,
-            transparent 0%,
-            rgba(255, 255, 255, 0.12) 20%,
-            rgba(255, 255, 255, 0.22) 50%,
-            rgba(255, 255, 255, 0.12) 80%,
-            transparent 100%
-        );
-        border-radius: 1px;
-    }
-
     .project-card-list-view__tags {
         justify-content: center;
     }