feat(about): 优化关于页面样式与交互功能

- 调整 MBTI 标签展示方式，增加多彩渐变效果
- 重构技术栈展示逻辑，移动端采用多行无缝滚动动画
- 优化夜间模式切换逻辑，支持系统主题检测与缓存管理
- 改进博客文章分类显示，移除默认填充内容
- 更新二维码加载失败提示为注释形式
- 增强文本可读性，修复部分元素在特定容器内的颜色异常
- 统一标签与按钮样式，提升视觉一致性与用户体验
- 调整 3D 技术球体透明度上限，增强视觉层次感

about.html

@@ -132,9 +132,10 @@
                     </div>
                     <p class="mbti-desc" data-i18n="mbti.desc">"理想主义与道德感，果断决绝的行动力。深度洞察与创意，关怀与同理心。"</p>
                     <div class="mbti-tags">
-                        <span class="tag" data-i18n="mbti.tag1">Idealism</span>
+                        <span class="tag tag-color-1" data-i18n="mbti.tag1">Idealism & Morality</span>
-                        <span class="tag" data-i18n="mbti.tag2">Insight</span>
+                        <span class="tag tag-color-2" data-i18n="mbti.tag2">Decisive Action</span>
-                        <span class="tag" data-i18n="mbti.tag3">Empathy</span>
+                        <span class="tag tag-color-3" data-i18n="mbti.tag3">Deep Insight & Creativity</span>
+                        <span class="tag tag-color-4" data-i18n="mbti.tag4">Care & Empathy</span>
                     </div>
                 </div>
             </div>
@@ -142,7 +143,7 @@
             <!-- [5] 技术栈宇宙 (Tech Stack) -->
             <div class="bento-card area-tech">
                 <div class="card-header">
-                    <h3 data-i18n="tech.title">Tech Universe</h3>
+                    <h3 class="glow-title"><i class="ri-stack-line"></i> <span data-i18n="tech.title">Tech Universe</span></h3>
                 </div>
                 <!-- 容器：PC端3D球，移动端横向滚动条 -->
                 <div id="tech-container" class="tech-wrapper">
@@ -250,7 +251,7 @@
             <h3 data-i18n="modal.wechat">Official Account</h3>
             <div class="qr-box">
                 <img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg" alt="WeChat QR" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
-                <div class="qr-fallback">QR Load Failed</div>
+<!--                <div class="qr-fallback">QR Load Failed</div>-->
             </div>
             <p data-i18n="modal.desc">Scan to follow Tech Share</p>
         </div>

css/about.css

@@ -191,8 +191,8 @@ body {
     display: flex;
     align-items: center;
     gap: 8px;
-    color: var(--text-primary);
+    font-style: normal;
-    text-shadow: 0 0 10px rgba(108, 92, 231, 0.3);
+    -webkit-font-smoothing: antialiased;
 }
 
 /* =========================================
@@ -409,8 +409,23 @@ body {
     margin-bottom: 10px;
 }
 
-.animated-gradient { background-image: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientShift 6s linear infinite; text-shadow: 0 0 8px rgba(108,92,231,0.2); }
+.animated-gradient {
-@keyframes gradientShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
+    background-image: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: gradientShift 6s linear infinite;
+    text-shadow: 0 0 8px rgba(108, 92, 231, 0.2);
+}
+
+@keyframes gradientShift {
+    0% {
+        background-position: 0% 50%;
+    }
+    100% {
+        background-position: 200% 50%;
+    }
+}
 
 .location-tag {
     font-size: 0.85rem;
@@ -469,14 +484,20 @@ body {
     margin-bottom: 20px;
     text-align: justify;
 }
+
 .bio-text.collapsed {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
+
 .link-btn {
-    background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.85rem;
+    background: none;
+    border: none;
+    color: var(--accent);
+    cursor: pointer;
+    font-size: 0.85rem;
 }
 
 .quote-box {
@@ -519,7 +540,7 @@ body {
 
 /* --- MBTI --- */
 .area-mbti {
-    padding: 30px;
+    padding: 3px;
     display: flex;
     align-items: center;
 }
@@ -529,6 +550,7 @@ body {
 }
 
 .mbti-head {
+    margin-left: 20px;
     display: flex;
     align-items: baseline;
     gap: 10px;
@@ -551,6 +573,7 @@ body {
 }
 
 .mbti-desc {
+    margin-left: 15px;
     font-size: 0.7rem;
     color: var(--text-secondary);
     margin-bottom: 15px;
@@ -559,19 +582,62 @@ body {
 }
 
 .mbti-tags {
-    display: flex;
+    display: grid;
-    gap: 3px;
+    gap: 1px;
+    grid-template-columns: 1fr 1fr;
     flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: flex-start;
+
 }
 
 .tag {
     font-size: 0.75rem;
-    background: rgba(128, 128, 128, 0.1);
     padding: 4px 10px;
     border-radius: 6px;
     color: var(--text-secondary);
 }
 
+.mbti-tags .tag {
+    background: none;
+    border: none;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
+.mbti-tags .tag.tag-color-1 {
+    background: var(--gradient-1);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.mbti-tags .tag.tag-color-2 {
+    background: var(--gradient-2);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.mbti-tags .tag.tag-color-3 {
+    background: var(--gradient-3);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.mbti-tags .tag.tag-color-4 {
+    background: var(--gradient-4);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
 /* --- Tech Stack (PC) --- */
 .area-tech {
     display: flex;
@@ -1045,7 +1111,10 @@ body {
         background-clip: text;
         color: transparent;
     }
-    .comment-box { padding: 24px; }
+
+    .comment-box {
+        padding: 24px;
+    }
 }
 
 /* =========================================
@@ -1056,6 +1125,9 @@ body {
         margin: 20px auto 100px;
         padding: 0 16px;
     }
+    .mbti-tags {
+        margin-left: 20px;
+    }
 
     /* Bottom Dock */
     .glass-nav {
@@ -1231,12 +1303,22 @@ body {
                 black 90%,
                 transparent 100%
         );
-        animation: techMarquee 18s linear infinite;
+        /* 行内滚动动画由 .tech-row 控制 */
     }
-
+    .tech-row {
-    @keyframes techMarquee {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        white-space: nowrap;
+        will-change: transform;
+        animation: rowMarquee var(--row-speed) linear infinite;
+    }
+    .row-1 { --row-speed: 24s; }
+    .row-2 { --row-speed: 28s; }
+    .row-3 { --row-speed: 32s; }
+    @keyframes rowMarquee {
         0% { transform: translateX(0); }
-        100% { transform: translateX(-33.333%); }
+        100% { transform: translateX(-50%); }
     }
 
     .tech-tag-mobile {
@@ -1339,7 +1421,10 @@ body {
         background-clip: text;
         color: transparent;
     }
-    .comment-box { padding: 16px; }
+
+    .comment-box {
+        padding: 16px;
+    }
 }
 
 /* =========================================
@@ -1393,6 +1478,9 @@ body {
     font-size: 0.75rem;
     padding-bottom: 100px;
 }
+.site-footer a {
+    color: var(--text-tertiary);
+}
 
 .b-title {
     background: var(--gradient-3);
@@ -1418,3 +1506,28 @@ body {
 [data-theme="night"] .b-title, [data-theme="night"] .b-cat, [data-theme="night"] .b-date {
     text-shadow: 0 0 8px var(--accent-glow);
 }
+
+/* 阅读友好：blog-container 内文本使用常规颜色覆盖渐变 */
+#blog-container .b-title {
+    background: none !important;
+    -webkit-background-clip: initial;
+    background-clip: initial;
+    color: var(--text-primary) !important;
+    -webkit-text-fill-color: initial;
+}
+
+#blog-container .b-cat {
+    background: none !important;
+    -webkit-background-clip: initial;
+    background-clip: initial;
+    color: var(--text-secondary) !important;
+    -webkit-text-fill-color: initial;
+}
+
+#blog-container .b-date {
+    background: none !important;
+    -webkit-background-clip: initial;
+    background-clip: initial;
+    color: var(--text-tertiary) !important;
+    -webkit-text-fill-color: initial;
+}

js/about.js

@@ -29,7 +29,7 @@ class I18nManager {
                 "bio.quote": "我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。",
                 "stats.exp": "编程年限", "stats.repos": "开源项目", "stats.followers": "关注者",
                 "mbti.name": "提倡者", "mbti.desc": "提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。",
-                "mbti.tag1": "理想主义", "mbti.tag2": "深度洞察", "mbti.tag3": "同理心",
+                "mbti.tag1": "理想主义与道德感", "mbti.tag2": "果断决绝的行动力", "mbti.tag3": "深度洞察与创意", "mbti.tag4": "关怀与同理心",
                 "tech.title": "技术栈宇宙", "interest.title": "个人兴趣",
                 "interest.cycling": "骑行", "interest.cycling_desc": "享受在路上的自由感，用车轮丈量世界，在风景中寻找灵感",
                 "interest.reading": "阅读", "interest.reading_desc": "通过文字记录思考轨迹，分享技术见解，用代码诠释创意",
@@ -46,7 +46,7 @@ class I18nManager {
                 "bio.quote": "I pursue a deep understanding of technology rather than a broad accumulation, and the learning of every technology stems from the intrinsic drive to solve practical problems. As an INFJ personality type, I am good at deep thinking, pay attention to details, and enjoy creating meaningful products through code. I believe in the power of technology to change the world, and I am passionate about sharing knowledge and experience in the open source community.",
                 "stats.exp": "Years Exp", "stats.repos": "Projects", "stats.followers": "Followers",
                 "mbti.name": "Advocate", "mbti.desc": "Advocates of this personality type are very rare, with less than 1% of the population belonging to this type, but their contributions to the world cannot be ignored.",
-                "mbti.tag1": "Idealism", "mbti.tag2": "Insight", "mbti.tag3": "Empathy",
+                "mbti.tag1": "Idealism & Morality", "mbti.tag2": "Decisive Action", "mbti.tag3": "Deep Insight & Creativity", "mbti.tag4": "Care & Empathy",
                 "tech.title": "Tech Universe", "interest.title": "Interests",
                 "interest.cycling": "Cycling", "interest.cycling_desc": "Enjoy the freedom on the road, measure the world with wheels, and find inspiration in the scenery",
                 "interest.reading": "Reading", "interest.reading_desc": "Record thinking trajectories through text, share technical insights, and interpret creativity with code",
@@ -92,7 +92,16 @@ class ThemeManager {
         this.init();
     }
     init() {
-        const saved = localStorage.getItem('theme') || 'day';
+        const cacheKey = window.SiteConfig?.cacheKeys?.theme?.key || 'theme-v2';
+        const timeout = window.SiteConfig?.cacheKeys?.theme?.ttlMs || 360000;
+        let saved = localStorage.getItem(cacheKey);
+        if (saved == null || new Date().getTime() - timeout > saved.time) {
+            var hour = new Date().getHours();
+            var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+            var night = hour >= 18 || prefersDark;
+            saved = night ? 'night' : 'day';
+            localStorage.setItem(cacheKey, { time: new Date().getTime(), value: saved });
+        }
         if(saved === 'night') this.root.setAttribute('data-theme', 'night');
         $('#theme-btn').toggleClass('is-active', saved === 'night');
 
@@ -101,7 +110,7 @@ class ThemeManager {
             const next = curr === 'night' ? 'day' : 'night';
             if(next === 'night') this.root.setAttribute('data-theme', 'night');
             else this.root.removeAttribute('data-theme');
-            localStorage.setItem('theme', next);
+            localStorage.setItem(cacheKey, { time: new Date().getTime(), value: next });
             $('#theme-btn').toggleClass('is-active', next === 'night');
             
             // 更新Artalk主题
@@ -131,9 +140,10 @@ class DataManager {
         const cacheKey = (window.SiteConfig?.cacheKeys?.github?.key) || 'gh_data_v2';
         const cached = JSON.parse(localStorage.getItem(cacheKey));
         const now = Date.now();
+        const timeout = (window.SiteConfig?.cacheKeys?.github?.ttlMs) || 3600000;
 
         // Check Cache (1 hour)
-        if(cached && (now - cached.time < 3600000)) {
+        if(cached && (now - cached.time < timeout)) {
             this.renderUser(cached.user);
             this.renderRepos(cached.repos);
             return;
@@ -254,7 +264,7 @@ class DataManager {
                     title,
                     link,
                     date: pubDate,
-                    cats: categories.length ? categories : ["Tech"]
+                    cats: categories.length ? categories : [""]
                 });
             }
 
@@ -410,18 +420,29 @@ class UIManager {
         container.innerHTML = '';
 
         if(isMobile) {
-            // Mobile: Horizontal Scroll Snap (Compact 3 rows)
+            // Mobile: 3-row seamless marquee
             container.classList.add('mobile-scroll');
-            // 创建多个标签副本以实现无缝滚动效果
+            const rows = 3;
-            const extendedTechStack = [...techStack, ...techStack, ...techStack];
+            const buckets = Array.from({ length: rows }, () => []);
-            extendedTechStack.forEach((item, index) => {
+            techStack.forEach((item, i) => { buckets[i % rows].push(item); });
+
+            const appendItem = (rowEl, item, idx) => {
                 const el = document.createElement('span');
                 el.className = 'tech-tag-mobile';
-                const colorClass = `tag-color-${item.gradientId || ((index % 10) + 1)}`;
+                const colorClass = `tag-color-${item.gradientId || ((idx % 10) + 1)}`;
                 el.classList.add(colorClass);
                 el.innerText = item.name;
                 el.style.border = 'none';
-                container.appendChild(el);
+                rowEl.appendChild(el);
+            };
+
+            buckets.forEach((items, rIdx) => {
+                const rowEl = document.createElement('div');
+                rowEl.className = `tech-row row-${rIdx+1}`;
+                rowEl.style.gridRow = `${rIdx+1}`;
+                items.forEach((item, idx) => appendItem(rowEl, item, idx));
+                items.forEach((item, idx) => appendItem(rowEl, item, idx + items.length));
+                container.appendChild(rowEl);
             });
         } else {
             // PC: 3D Sphere
@@ -488,7 +509,7 @@ class UIManager {
                     scale = Math.min(Math.max(scale, 0.7), 1.15);
                     let opacity = (tag.z + radius)/(2*radius) + 0.2;
 
-                    tag.el.style.opacity = Math.min(Math.max(opacity, 0.1), 1);
+                    tag.el.style.opacity = Math.min(Math.max(opacity, 0.1), 0.85);
                     tag.el.style.zIndex = parseInt(scale*100);
                     let left = tag.x + container.offsetWidth/2 - tag.el.offsetWidth/2;
                     let top = tag.y + container.offsetHeight/2 - tag.el.offsetHeight/2;

js/config.js

@@ -43,8 +43,9 @@ const SiteConfig = {
 
   // 通用缓存键与TTL（毫秒）
   cacheKeys: {
-    github: { key: 'gh_data_v2', ttlMs: 3600000 },
+    github: { key: 'gh_data_v2', ttlMs: 36000000 },
-    blog: { key: 'blog_data_v2', ttlMs: 3600000 }
+    blog: { key: 'blog_data_v2', ttlMs: 3600000 },
+    theme: { key: 'theme_v2', ttlMs: 3600000 }
   },
   
   techStack: [