feat(about): 优化页面样式与功能增强

- 新增渐变色彩变量，用于文本和标签的视觉效果提升
- 增强导航项和操作按钮的悬停动效与交互反馈
- 重构技术标签和兴趣模块，支持动态渐变色彩展示
- 优化移动端布局，包括底部导航、技术标签滚动及兴趣模块适配
- 引入Artalk主题切换支持，提升评论区体验一致性
- 博客内容获取逻辑升级：优先使用RSS源并添加缓存机制
- GitHub仓库数据过滤非原创项目，并增加fork数量显示
- 技术标签3D球体增大半径以改善标签分布与可读性
- 页面结构调整，明确划分开源项目与博客文章区域
- 修复多处移动端显示异常问题，提高整体响应式表现

about.html

@@ -125,6 +125,9 @@
                     <div class="mbti-head">
                         <span class="mbti-code gradient-text">INFJ</span>
                         <span class="mbti-name" data-i18n="mbti.name">Advocate</span>
+                        <span class="mbti-icon">
+                         <img src="https://blog-file.hehouhui.cn/INFJ.png" alt="INFJ" style="width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,0.4)"/>
+                        </span>
                     </div>
                     <p class="mbti-desc" data-i18n="mbti.desc">"理想主义与道德感，果断决绝的行动力。深度洞察与创意，关怀与同理心。"</p>
                     <div class="mbti-tags">
@@ -194,9 +197,8 @@
             </div>
         </div>
 
-        <!-- 第二部分：开源与博客 (瀑布流/列表) -->
+        <!-- 第二部分：开源项目 -->
         <div class="content-section">
-            <!-- 左侧：GitHub -->
             <div class="content-col">
                 <div class="col-header">
                     <h3 class="glow-title"><i class="ri-github-line"></i> <span data-i18n="github.title">Open Source</span></h3>
@@ -211,8 +213,10 @@
                     </div>
                 </div>
             </div>
-
+        </div>
-            <!-- 右侧：Blog -->
+        
+        <!-- 第三部分：最新文章 -->
+        <div class="content-section">
             <div class="content-col">
                 <div class="col-header">
                     <h3 class="glow-title"><i class="ri-article-line"></i> <span data-i18n="blog.title">Latest Posts</span></h3>
@@ -226,7 +230,7 @@
             </div>
         </div>
 
-        <!-- 第三部分：评论 -->
+        <!-- 第四部分：评论 -->
         <div class="comments-wrapper">
             <div class="col-header">
                 <h3 class="glow-title"><i class="ri-discuss-line"></i> <span data-i18n="comment.title">Message Board</span></h3>

css/about.css

@@ -28,6 +28,13 @@
 
     --dock-bg: rgba(255, 255, 255, 0.85);
     --radius: 24px;
+    
+    /* 渐变色彩 */
+    --gradient-1: linear-gradient(135deg, #a1c4fd, #6c5ce7);
+    --gradient-2: linear-gradient(135deg, #c2e9fb, #00cec9);
+    --gradient-3: linear-gradient(135deg, #ff9a9e, #f093fb);
+    --gradient-4: linear-gradient(135deg, #a8edea, #4facfe);
+    --gradient-5: linear-gradient(135deg, #d299c2, #fef9d7);
 }
 
 [data-theme="night"] {
@@ -108,6 +115,16 @@ body {
 .neon-font { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); }
 [data-theme="night"] .neon-font { color: #fff; text-shadow: 0 0 10px var(--accent); }
 
+.glow-title {
+    font-size: 1.3rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-primary);
+    text-shadow: 0 0 10px rgba(108, 92, 231, 0.3);
+}
+
 /* =========================================
    3. Navigation
    ========================================= */
@@ -127,13 +144,41 @@ body {
     .nav-item {
         display: flex; align-items: center; gap: 6px; color: var(--text-secondary);
         text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.3s;
+        padding: 8px 16px;
+        border-radius: 20px;
+    }
+    .nav-item:hover, .nav-item.active { 
+        color: var(--text-primary); 
+        background: rgba(108, 92, 231, 0.1);
     }
-    .nav-item:hover, .nav-item.active { color: var(--text-primary); }
     .nav-item i { font-size: 1.2rem; }
 
     .nav-divider { width: 1px; height: 20px; background: var(--text-tertiary); opacity: 0.3; }
-    .action-btn { display: flex; align-items: center; gap: 4px; color: var(--text-primary); font-size: 0.9rem; opacity: 0.8; transition: opacity 0.3s; }
+    
-    .action-btn:hover { opacity: 1; }
+    /* 增强主题和语言切换按钮样式 */
+    .action-btn { 
+        display: flex; align-items: center; gap: 4px; 
+        color: var(--text-primary); 
+        font-size: 0.9rem; 
+        opacity: 0.8; 
+        transition: all 0.3s;
+        padding: 8px 16px;
+        border-radius: 20px;
+        background: rgba(128,128,128,0.1);
+        border: none;
+        cursor: pointer;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+    .action-btn:hover { 
+        opacity: 1; 
+        background: var(--accent);
+        color: white;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
+    }
+    .action-btn:active {
+        transform: translateY(0);
+    }
     [data-theme="day"] .icon-sun { display: none; }
     [data-theme="night"] .icon-moon { display: none; }
 }
@@ -205,6 +250,7 @@ body {
 .mbti-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
 .mbti-code { font-size: 2.2rem; font-weight: 900; font-family: var(--font-mono); }
 .mbti-name { font-weight: 600; color: var(--text-secondary); }
+.mbti-icon { font-size: 1.5rem; }
 .mbti-desc { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 15px; line-height: 1.5; }
 .mbti-tags { display: flex; gap: 8px; flex-wrap: wrap; }
 .tag { font-size: 0.75rem; background: rgba(128,128,128,0.1); padding: 4px 10px; border-radius: 6px; color: var(--text-secondary); }
@@ -216,62 +262,242 @@ body {
 /* PC 3D Container */
 .tech-wrapper { flex: 1; position: relative; min-height: 250px; width: 100%; }
 .tech-tag-3d {
-    position: absolute; font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
+    position: absolute; 
-    padding: 6px 12px; background: rgba(255,255,255,0.3); border-radius: 6px;
+    font-size: 0.85rem; 
-    border: 1px solid rgba(255,255,255,0.4); user-select: none; white-space: nowrap;
+    font-weight: 600; 
+    color: var(--text-primary);
+    padding: 6px 12px; 
+    border-radius: 6px;
+    user-select: none; 
+    white-space: nowrap;
     backface-visibility: hidden;
+    /* 移除背景色和边框，只保留文字渐变效果 */
+    background: none;
+    border: none;
+    /* 添加文字渐变 */
+    background: var(--gradient-1);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    pointer-events: none; /* 禁用鼠标事件避免干扰 */
+}
+[data-theme="night"] .tech-tag-3d { 
+    color: #00cec9; 
+}
+
+/* 不同颜色的标签 */
+.tech-tag-3d.tag-color-1, .tech-tag-mobile.tag-color-1 {
+    background: var(--gradient-1);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.tech-tag-3d.tag-color-2, .tech-tag-mobile.tag-color-2 {
+    background: var(--gradient-2);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.tech-tag-3d.tag-color-3, .tech-tag-mobile.tag-color-3 {
+    background: var(--gradient-3);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.tech-tag-3d.tag-color-4, .tech-tag-mobile.tag-color-4 {
+    background: var(--gradient-4);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.tech-tag-3d.tag-color-5, .tech-tag-mobile.tag-color-5 {
+    background: var(--gradient-5);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
 }
-[data-theme="night"] .tech-tag-3d { background: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.1); color: #fff; }
 
 /* --- Interests --- */
 .area-interests { padding: 20px; }
-.interest-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; height: 100%; align-content: center; }
+.interest-list { 
-.interest-item { background: rgba(128,128,128,0.05); padding: 15px; border-radius: 12px; display: flex; align-items: center; gap: 12px; transition: background 0.3s; }
+    display: grid; 
+    grid-template-columns: 1fr 1fr; 
+    gap: 15px; 
+    height: 100%; 
+    align-content: center;
+}
+.interest-item { 
+    background: rgba(128,128,128,0.05); 
+    padding: 15px; 
+    border-radius: 12px; 
+    display: flex; 
+    align-items: center; 
+    gap: 12px; 
+    transition: background 0.3s;
+}
 .interest-item:hover { background: rgba(128,128,128,0.1); }
 .i-emoji { font-size: 1.5rem; }
-.i-text { display: flex; flex-direction: column; }
+.i-text { display: flex; flex-direction: column; min-width: 0; } /* 添加 min-width: 0 防止溢出 */
-.i-text strong { font-size: 0.9rem; color: var(--text-primary); }
+.i-text strong { 
-.i-text span { font-size: 0.75rem; color: var(--text-tertiary); }
+    font-size: 0.9rem; 
+    color: var(--text-primary);
+    /* 为兴趣标签添加渐变色彩 */
+    background: var(--gradient-1);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+.i-text span { 
+    font-size: 0.75rem; 
+    color: var(--text-tertiary);
+    /* 为兴趣描述添加渐变色彩 */
+    background: var(--gradient-2);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
 
 /* =========================================
    5. Content Sections (Blog/Github)
    ========================================= */
-.content-section { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
+.content-section { 
-.col-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+    display: flex; 
-.glow-title { font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
+    flex-direction: column; 
-.more-link { font-size: 0.9rem; color: var(--accent); font-weight: 600; }
+    gap: 24px; 
+    margin-top: 40px; 
+}
+.col-header { 
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center; 
+    margin-bottom: 20px; 
+}
+.glow-title { 
+    font-size: 1.3rem; 
+    font-weight: 700; 
+    display: flex; 
+    align-items: center; 
+    gap: 8px; 
+    color: var(--text-primary); 
+}
+.more-link { 
+    font-size: 0.9rem; 
+    color: var(--accent); 
+    font-weight: 600; 
+    text-decoration: none;
+}
 
-.glass-panel { padding: 20px; min-height: 300px; }
+.glass-panel { 
+    padding: 20px; 
+    min-height: 300px; 
+}
 
 /* Github Lists */
-.projects-list { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; max-height: 400px; overflow-y: auto; }
+.projects-list { 
-.repo-card {
+    margin-top: 15px; 
-    padding: 15px; background: rgba(128,128,128,0.05); border-radius: 12px; cursor: pointer;
+    display: flex; 
-    border: 1px solid transparent; transition: border 0.3s;
+    flex-direction: column; 
+    gap: 10px; 
+    max-height: 400px; 
+    overflow-y: auto; 
+}
+.repo-card {
+    padding: 15px; 
+    background: rgba(128,128,128,0.05); 
+    border-radius: 12px; 
+    cursor: pointer;
+    border: 1px solid transparent; 
+    transition: border 0.3s;
+}
+.repo-card:hover { 
+    border-color: var(--accent); 
+}
+.repo-head { 
+    display: flex; 
+    justify-content: space-between; 
+    font-weight: 700; 
+    color: var(--text-primary); 
+    font-size: 0.95rem; 
+}
+.repo-desc { 
+    font-size: 0.8rem; 
+    color: var(--text-secondary); 
+    margin-top: 6px; 
+    display: -webkit-box; 
+    -webkit-line-clamp: 2; 
+    -webkit-box-orient: vertical; 
+    overflow: hidden; 
 }
-.repo-card:hover { border-color: var(--accent); }
-.repo-head { display: flex; justify-content: space-between; font-weight: 700; color: var(--text-primary); font-size: 0.95rem; }
-.repo-desc { font-size: 0.8rem; color: var(--text-secondary); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 
 /* Blog List */
-.blog-list { display: flex; flex-direction: column; gap: 12px; }
+.blog-list { 
-.blog-item {
+    display: flex; 
-    padding: 12px 16px; border-radius: 12px; background: rgba(128,128,128,0.03);
+    flex-direction: column; 
-    display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background 0.3s;
+    gap: 12px; 
+}
+.blog-item {
+    padding: 12px 16px; 
+    border-radius: 12px; 
+    background: rgba(128,128,128,0.03);
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center; 
+    cursor: pointer; 
+    transition: background 0.3s;
+}
+.blog-item:hover { 
+    background: rgba(128,128,128,0.08); 
+}
+.b-info { 
+    flex: 1; 
+    min-width: 0; 
+    margin-right: 15px; 
+}
+.b-title { 
+    font-weight: 600; 
+    font-size: 0.95rem; 
+    color: var(--text-primary); 
+    white-space: nowrap; 
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+}
+.b-date { 
+    font-size: 0.75rem; 
+    color: var(--text-tertiary); 
+}
+.b-cat { 
+    font-size: 0.75rem; 
+    color: var(--accent); 
+    background: rgba(128,128,128,0.1); 
+    padding: 2px 8px; 
+    border-radius: 4px; 
+    white-space: nowrap; 
 }
-.blog-item:hover { background: rgba(128,128,128,0.08); }
-.b-info { flex: 1; min-width: 0; margin-right: 15px; }
-.b-title { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.b-date { font-size: 0.75rem; color: var(--text-tertiary); }
-.b-cat { font-size: 0.75rem; color: var(--accent); background: rgba(128,128,128,0.1); padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
 
 /* Loading Skeleton */
-.skeleton-card { height: 60px; background: rgba(128,128,128,0.1); border-radius: 10px; animation: pulse 1.5s infinite; }
+.skeleton-card { 
-@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
+    height: 60px; 
+    background: rgba(128,128,128,0.1); 
+    border-radius: 10px; 
+    animation: pulse 1.5s infinite; 
+}
+@keyframes pulse { 
+    0% { opacity: 0.6; } 
+    50% { opacity: 1; } 
+    100% { opacity: 0.6; } 
+}
 
 /* Comments */
-.comments-wrapper { margin: 40px 0 80px; }
+.comments-wrapper { 
-.comment-box { padding: 30px; }
+    margin: 40px 0 80px; 
+}
+.comment-box { 
+    padding: 30px; 
+}
 
 /* =========================================
    6. Tablet Adaptive (768px - 1024px)
@@ -288,82 +514,326 @@ body {
         grid-template-rows: auto;
     }
     .area-profile { flex-direction: row; gap: 20px; }
-    .content-section { grid-template-columns: 1fr; }
+    .content-section { 
+        display: flex; 
+        flex-direction: column; 
+    }
+    
+    /* 修复平板模式下兴趣模块的高度问题 */
+    .interest-list {
+        grid-template-columns: 1fr 1fr;
+        max-height: 150px; /* 限制高度 */ 
+        overflow: hidden;
+    }
+    
+    .i-text {
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+    }
+    
+    .i-text strong, .i-text span {
+        white-space: nowrap;
+    }
+    
+    /* 兴趣模块文本渐变色彩 */
+    .i-text strong {
+        background: var(--gradient-1);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+    }
+    
+    .i-text span {
+        background: var(--gradient-2);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+    }
 }
 
 /* =========================================
    7. Mobile Layout (< 768px)
    ========================================= */
 @media (max-width: 768px) {
-    .main-container { margin: 20px auto 100px; padding: 0 16px; }
+    .main-container { 
+        margin: 20px auto 100px; 
+        padding: 0 16px; 
+    }
 
     /* Bottom Dock */
     .glass-nav {
-        position: fixed; top: auto; bottom: 0; left: 0; width: 100%; height: auto;
+        position: fixed; 
-        border-radius: 0; background: var(--dock-bg); border-top: 1px solid rgba(128,128,128,0.1);
+        top: auto; 
+        bottom: 0; 
+        left: 0; 
+        width: 100%; 
+        height: auto;
+        border-radius: 0; 
+        background: var(--dock-bg); 
+        border-top: 1px solid rgba(128,128,128,0.1);
         padding-bottom: env(safe-area-inset-bottom);
+        z-index: 1000;
+    }
+    .logo-brand, .nav-divider { 
+        display: none; 
+    }
+    .nav-menu { 
+        width: 100%; 
+        justify-content: space-around; 
+        padding: 10px 0; 
+    }
+    .nav-item { 
+        flex-direction: column; 
+        gap: 2px; 
+        font-size: 0.7rem; 
+        padding: 8px 0;
+    }
+    .nav-item i { 
+        font-size: 1.4rem; 
+    }
+    .nav-label { 
+        font-size: 10px; 
+    }
+    .action-btn .btn-text { 
+        display: none; 
+    }
+    .action-btn { 
+        font-size: 1.2rem; 
+        padding: 5px; 
+        background: transparent;
     }
-    .logo-brand, .nav-divider { display: none; }
-    .nav-menu { width: 100%; justify-content: space-around; padding: 10px 0; }
-    .nav-item { flex-direction: column; gap: 2px; font-size: 0.7rem; }
-    .nav-item i { font-size: 1.4rem; }
-    .nav-label { font-size: 10px; }
-    .action-btn .btn-text { display: none; }
-    .action-btn { font-size: 1.2rem; padding: 5px; }
 
     /* Stacking Bento */
-    .bento-grid { display: flex; flex-direction: column; gap: 16px; }
+    .bento-grid { 
+        display: flex; 
+        flex-direction: column; 
+        gap: 16px; 
+    }
 
     /* Profile Mobile */
-    .area-profile { padding: 20px; flex-direction: row; gap: 15px; align-items: center; text-align: left; }
+    .area-profile { 
-    .avatar-ring { width: 80px; height: 80px; padding: 2px; margin: 0; }
+        padding: 20px; 
-    .status-dot { right: 0; bottom: 0; width: 12px; height: 12px; font-size: 0; padding: 0; }
+        flex-direction: row; 
-    .hero-name { margin: 0 0 4px; font-size: 1.5rem; }
+        gap: 15px; 
-    .hero-role { font-size: 0.8rem; margin-bottom: 6px; }
+        align-items: center; 
-    .location-tag { justify-content: flex-start; }
+        text-align: left; 
-    .desktop-social { display: none; }
+    }
+    .avatar-ring { 
+        width: 80px; 
+        height: 80px; 
+        padding: 2px; 
+        margin: 0; 
+    }
+    .status-dot { 
+        right: 0; 
+        bottom: 0; 
+        width: 12px; 
+        height: 12px; 
+        font-size: 0; 
+        padding: 0; 
+    }
+    .hero-name { 
+        margin: 0 0 4px; 
+        font-size: 1.5rem; 
+    }
+    .hero-role { 
+        font-size: 0.8rem; 
+        margin-bottom: 6px; 
+    }
+    .location-tag { 
+        justify-content: flex-start; 
+    }
+    .desktop-social { 
+        display: none; 
+    }
 
     /* Mobile Stats */
-    .area-stats { flex-direction: row; padding: 15px; }
+    .area-stats { 
-    .stat-item { flex-direction: column; border-bottom: none; border-right: 1px solid rgba(128,128,128,0.1); padding: 0 10px; flex: 1; text-align: center; }
+        flex-direction: row; 
-    .stat-item:last-child { border-right: none; }
+        padding: 15px; 
-    .stat-val { font-size: 1.2rem; }
+    }
+    .stat-item { 
+        flex-direction: column; 
+        border-bottom: none; 
+        border-right: 1px solid rgba(128,128,128,0.1); 
+        padding: 0 10px; 
+        flex: 1; 
+        text-align: center; 
+    }
+    .stat-item:last-child { 
+        border-right: none; 
+    }
+    .stat-val { 
+        font-size: 1.2rem; 
+    }
 
     /* Mobile Tech Scroll (Horizontal) */
-    .area-tech { height: auto; }
+    .area-tech { 
-    .tech-wrapper { display: none; } /* Hide PC wrapper */
+        height: auto; 
-    .tech-wrapper.mobile-scroll {
-        display: grid; height: auto; min-height: 120px;
-        grid-template-rows: repeat(3, auto);
-        grid-auto-flow: column; gap: 10px;
-        overflow-x: auto; padding: 10px 0 20px;
-        scroll-snap-type: x mandatory;
     }
+    .tech-wrapper { 
+        display: none; 
+    } /* Hide PC wrapper */
+    .tech-wrapper.mobile-scroll {
+        display: grid;
+        height: auto;
+        min-height: 120px;
+        grid-template-rows: repeat(3, 30px); /* 三行，每行30px */
+        grid-auto-flow: column;
+        gap: 10px;
+        overflow-x: auto;
+        padding: 10px 0 20px;
+        scroll-snap-type: x mandatory;
+        /* 添加淡入淡出效果 */
+        mask-image: linear-gradient(
+            to right,
+            transparent 0%,
+            black 10%,
+            black 90%,
+            transparent 100%
+        );
+        -webkit-mask-image: linear-gradient(
+            to right,
+            transparent 0%,
+            black 10%,
+            black 90%,
+            transparent 100%
+        );
+        /* 添加持续滚动动画 */
+        animation: scrollLine 15s linear infinite;
+    }
+    
+    @keyframes scrollLine {
+        0% { transform: translateX(0); }
+        100% { transform: translateX(-50%); }
+    }
+    
     .tech-tag-mobile {
         scroll-snap-align: start;
-        background: rgba(128,128,128,0.08); padding: 6px 12px; border-radius: 20px;
+        padding: 6px 12px;
-        font-size: 0.8rem; font-family: var(--font-mono); color: var(--text-secondary);
+        border-radius: 20px;
-        white-space: nowrap; border: 1px solid rgba(128,128,128,0.1);
+        font-size: 0.8rem;
+        font-family: var(--font-mono);
+        white-space: nowrap;
+        border: none;
+        font-weight: bold;
+        /* 添加文字渐变效果 */
+        background: var(--gradient-1);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        pointer-events: none;
     }
 
     /* Mobile Social */
-    .mobile-social { display: flex; justify-content: space-around; padding: 20px; }
+    .mobile-social { 
-    .ms-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(128,128,128,0.1); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 1.4rem; }
+        display: flex; 
+        justify-content: space-around; 
+        padding: 20px; 
+    }
+    .ms-btn { 
+        width: 40px; 
+        height: 40px; 
+        border-radius: 50%; 
+        background: rgba(128,128,128,0.1); 
+        display: flex; 
+        align-items: center; 
+        justify-content: center; 
+        color: var(--text-secondary); 
+        font-size: 1.4rem; 
+    }
 
-    .content-section { display: flex; flex-direction: column; }
+    .content-section { 
+        display: flex; 
+        flex-direction: column; 
+    }
+    
+    /* 修复兴趣模块在移动端的溢出问题 */
+    .interest-list {
+        grid-template-columns: 1fr;
+        max-height: none;
+    }
+    
+    .interest-item {
+        min-width: 0;
+    }
+    
+    .i-text {
+        min-width: 0;
+    }
+    
+    /* 修复移动端兴趣模块标签和描述在同一行 */
+    .i-text {
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        flex-wrap: wrap;
+    }
+    
+    .i-text strong, .i-text span {
+        white-space: nowrap;
+    }
+    
+    /* 兴趣模块文本渐变色彩 */
+    .i-text strong {
+        background: var(--gradient-1);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+    }
+    
+    .i-text span {
+        background: var(--gradient-2);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+    }
 }
 
 /* =========================================
    8. Modal & Footer
    ========================================= */
 .modal-overlay {
-    position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
+    position: fixed; 
-    display: none; align-items: center; justify-content: center;
+    inset: 0; 
+    z-index: 2000; 
+    background: rgba(0,0,0,0.6); 
+    backdrop-filter: blur(8px);
+    display: none; 
+    align-items: center; 
+    justify-content: center;
+}
+.modal-glass { 
+    width: 300px; 
+    padding: 30px; 
+    text-align: center; 
+    position: relative; 
+}
+.modal-close { 
+    position: absolute; 
+    top: 15px; 
+    right: 15px; 
+    font-size: 1.5rem; 
+    color: var(--text-secondary); 
+}
+.qr-box { 
+    margin: 20px 0; 
+}
+.qr-box img { 
+    width: 100%; 
+    border-radius: 12px; 
+}
+.qr-fallback { 
+    padding: 40px; 
+    background: #eee; 
+    border-radius: 12px; 
+    font-size: 0.8rem; 
 }
-.modal-glass { width: 300px; padding: 30px; text-align: center; position: relative; }
-.modal-close { position: absolute; top: 15px; right: 15px; font-size: 1.5rem; color: var(--text-secondary); }
-.qr-box { margin: 20px 0; }
-.qr-box img { width: 100%; border-radius: 12px; }
-.qr-fallback { padding: 40px; background: #eee; border-radius: 12px; font-size: 0.8rem; }
 
-.site-footer { text-align: center; color: var(--text-tertiary); font-size: 0.75rem; padding-bottom: 100px; }
+.site-footer { 
+    text-align: center; 
+    color: var(--text-tertiary); 
+    font-size: 0.75rem; 
+    padding-bottom: 100px; 
+}

js/about.js

@@ -95,6 +95,11 @@ class ThemeManager {
             if(next === 'night') this.root.setAttribute('data-theme', 'night');
             else this.root.removeAttribute('data-theme');
             localStorage.setItem('theme', next);
+            
+            // 更新Artalk主题
+            if (typeof Artalk !== 'undefined') {
+                Artalk.reload();
+            }
         });
     }
 }
@@ -144,11 +149,19 @@ class DataManager {
             // Parallel Fetch
             const [uRes, rRes] = await Promise.allSettled([
                 fetch(`https://api.github.com/users/${user}`),
-                fetch(`https://api.github.com/users/${user}/repos?sort=stars&per_page=6`)
+                fetch(`https://api.github.com/users/${user}/repos?sort=stars&per_page=100`)
             ]);
 
             const userData = uRes.status === 'fulfilled' ? await uRes.value.json() : this.defaults.user;
-            const repoData = rRes.status === 'fulfilled' ? await rRes.value.json() : this.defaults.repos;
+            let repoData = rRes.status === 'fulfilled' ? await rRes.value.json() : this.defaults.repos;
+
+            // 过滤掉fork项目并按星数排序
+            if (Array.isArray(repoData)) {
+                repoData = repoData
+                    .filter(repo => !repo.fork && (repo.stargazers_count > 0 || repo.forks_count > 0))
+                    .sort((a, b) => (b.stargazers_count || 0) - (a.stargazers_count || 0))
+                    .slice(0, 12); // 只取前12个
+            }
 
             // Cache & Render
             localStorage.setItem(cacheKey, JSON.stringify({
@@ -177,6 +190,7 @@ class DataManager {
         list.slice(0, 5).forEach(repo => {
             // Fix: API field compatibility
             const stars = repo.stargazers_count !== undefined ? repo.stargazers_count : (repo.stars || 0);
+            const forks = repo.forks_count !== undefined ? repo.forks_count : (repo.forks || 0);
             const desc = repo.description || repo.desc || 'No description.';
             const url = repo.html_url || repo.url || '#';
 
@@ -184,7 +198,10 @@ class DataManager {
             <div class="repo-card" onclick="window.open('${url}')">
                 <div class="repo-head">
                     <span>${repo.name}</span>
-                    <span style="color:#f1c40f"><i class="ri-star-fill"></i> ${stars}</span>
+                    <span>
+                        <i class="ri-star-fill"></i> ${stars}
+                        <i class="ri-git-branch-fill"></i> ${forks}
+                    </span>
                 </div>
                 <div class="repo-desc">${desc}</div>
             </div>`;
@@ -192,11 +209,70 @@ class DataManager {
         $('#projects-container').html(html);
     }
 
-    fetchBlog() {
+    // 从RSS获取博客文章
-        fetch('data/articles.json')
+    async fetchBlog() {
-            .then(r => r.json())
+        const rssUrl = window.SiteConfig?.blog?.rssUrl || 'https://blog.hehouhui.cn/api/rss';
-            .then(data => this.renderBlog(data))
+        const cacheKey = 'blog_data_v2';
-            .catch(() => this.renderBlog(this.defaults.posts));
+        const cached = JSON.parse(localStorage.getItem(cacheKey));
+        const now = Date.now();
+
+        // Check Cache (1 hour)
+        if(cached && (now - cached.time < 3600000)) {
+            this.renderBlog(cached.posts);
+            return;
+        }
+
+        try {
+            // 尝试从RSS获取
+            const response = await fetch(rssUrl);
+            if (!response.ok) throw new Error('RSS fetch failed');
+            
+            const xmlText = await response.text();
+            const parser = new DOMParser();
+            const xmlDoc = parser.parseFromString(xmlText, "application/xml");
+            
+            if (xmlDoc.documentElement.nodeName === "parsererror") {
+                throw new Error('RSS XML parse error');
+            }
+
+            // 解析RSS项目
+            const items = xmlDoc.getElementsByTagName("item");
+            const posts = [];
+            
+            for (let i = 0; i < Math.min(items.length, 5); i++) {
+                const item = items[i];
+                const title = item.querySelector("title")?.textContent || "无标题";
+                const link = item.querySelector("link")?.textContent || "#";
+                const pubDate = item.querySelector("pubDate")?.textContent || "";
+                const category = item.querySelector("category")?.textContent || "Tech";
+                
+                posts.push({
+                    title,
+                    link,
+                    date: pubDate,
+                    cat: category
+                });
+            }
+
+            // Cache & Render
+            localStorage.setItem(cacheKey, JSON.stringify({
+                posts,
+                time: now
+            }));
+            this.renderBlog(posts);
+
+        } catch (e) {
+            console.warn("RSS API Fail", e);
+            // 降级到本地JSON文件
+            try {
+                const response = await fetch('data/articles.json');
+                const data = await response.json();
+                this.renderBlog(data);
+            } catch (e2) {
+                console.warn("Local JSON Fail", e2);
+                this.renderBlog(this.defaults.posts);
+            }
+        }
     }
 
     renderBlog(list) {
@@ -272,9 +348,14 @@ class UIManager {
         if(isMobile) {
             // Mobile: Horizontal Scroll Snap (Compact 3 rows)
             container.classList.add('mobile-scroll');
-            techStack.forEach(item => {
+            // 创建多个标签副本以实现无缝滚动效果
+            const extendedTechStack = [...techStack, ...techStack, ...techStack];
+            extendedTechStack.forEach((item, index) => {
                 const el = document.createElement('span');
                 el.className = 'tech-tag-mobile';
+                // 添加不同颜色的渐变类
+                const colorClass = `tag-color-${(index % 5) + 1}`;
+                el.classList.add(colorClass);
                 el.innerText = item.name;
                 container.appendChild(el);
             });
@@ -283,15 +364,22 @@ class UIManager {
             container.classList.remove('mobile-scroll');
             const tags = [];
 
-            techStack.forEach(item => {
+            techStack.forEach((item, index) => {
                 const el = document.createElement('a');
                 el.className = 'tech-tag-3d';
+                // 添加不同颜色的渐变类
+                const colorClass = `tag-color-${(index % 5) + 1}`;
+                el.classList.add(colorClass);
                 el.innerText = item.name;
+                // 移除背景和边框样式
+                el.style.background = 'none';
+                el.style.border = 'none';
                 container.appendChild(el);
                 tags.push({ el, x:0, y:0, z:0 });
             });
 
-            let radius = 120; // Smaller radius to fit
+            // 增大球体半径以避免标签重叠
+            let radius = 220;
             const dtr = Math.PI/180;
             let lasta=1, lastb=1;
             let active=false, mouseX=0, mouseY=0;