feat(css): 实现现代化毛玻璃效果和动态主题系统

- 引入CSS变量系统，定义完整的色彩和样式变量
- 应用radial-gradient和linear-gradient创建动态背景效果
- 实现backdrop-filter毛玻璃效果，增强视觉层次感
- 添加悬停交互反馈和过渡动画
- 统一文字颜色和背景透明度处理
- 优化移动端显示效果和响应式设计
- 增强阴影效果和边框样式一致性
- 添加orbit轨道动画和相位控制
- 改进渐变色应用和文本填充效果
- 优化技术栈标签云的视觉表现

about.html

@@ -116,6 +116,8 @@
                         <span class="cloud-tag" data-weight="4" data-category="core">Python</span>
                         <span class="cloud-tag" data-weight="4" data-category="core">JavaScript</span>
                         <span class="cloud-tag" data-weight="5" data-category="backend">Spring Boot</span>
+                        <span class="cloud-tag" data-weight="5" data-category="backend">WebFlux</span>
+                        <span class="cloud-tag" data-weight="5" data-category="backend">Reactor</span>
                         <span class="cloud-tag" data-weight="3" data-category="core">TypeScript</span>
                         <span class="cloud-tag" data-weight="4" data-category="backend">Spring Cloud</span>
                         <span class="cloud-tag" data-weight="3" data-category="core">Go</span>
@@ -144,7 +146,10 @@
                         <span class="cloud-tag" data-weight="2" data-category="ai">Transformers</span>
                         <span class="cloud-tag" data-weight="2" data-category="ai">Scikit-learn</span>
                         <span class="cloud-tag" data-weight="1" data-category="ai">Ollama</span>
+                        <span class="cloud-tag" data-weight="1" data-category="ai">Dify</span>
+                        <span class="cloud-tag" data-weight="1" data-category="ai">Spring AI</span>
                         <span class="cloud-tag" data-weight="1" data-category="data">ClickHouse</span>
+                        <span class="cloud-tag" data-weight="1" data-category="data">Postgresql</span>
                     </div>
                 </div>
                 <div class="tech-philosophy">
@@ -196,6 +201,8 @@
                     <h2 class="section-title">开源项目</h2>
                     <p class="section-subtitle">用代码改变世界</p>
                 </div>
+                <div id="github-profile"></div>
+                <div id="github-commits"></div>
                 <div class="projects-masonry" id="projects-container">
                     <div class="loading-placeholder">
                         <div class="loading-spinner"></div>
@@ -291,7 +298,7 @@
                         <span class="close" onclick="hideWechatQR()">&times;</span>
                         <h3>微信公众号</h3>
                         <div class="qr-code">
-                            <img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg alt="微信公众号二维码" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuW+ruS/oeS6jOe7tOeggeWNs+WwhuS4iue6vzwvdGV4dD48L3N2Zz4='">
+                            <img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg" alt="微信公众号二维码" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuW+ruS/oeS6jOe7tOeggeWNs+WwhuS4iue6vzwvdGV4dD48L3N2Zz4='">
                         </div>
                         <p>扫码关注获取最新技术文章</p>
                     </div>

data/articles.json

@@ -0,0 +1,44 @@
+[
+  {
+    "title": "向量数据库全攻略：从算法公式到选型指南，一篇吃透高维数据存储术",
+    "excerpt": "深入探讨向量数据库的核心算法、应用场景和选型策略，帮助开发者掌握高维数据存储的关键技术...",
+    "link": "https://blog.hehouhui.cn/posts/vector-database-guide",
+    "pubDate": "2025-01-02",
+    "category": "技术分享"
+  },
+  {
+    "title": "CompletableFuture 从源码到实战：让异步编程像喝奶茶一样丝滑",
+    "excerpt": "全面解析CompletableFuture的源码实现和实战应用，让Java异步编程变得简单优雅...",
+    "link": "https://blog.hehouhui.cn/posts/completablefuture-guide",
+    "pubDate": "2025-01-02",
+    "category": "Java开发"
+  },
+  {
+    "title": "从规范到架构：一篇读懂 Java 工程建模、分层、命名与演进之路",
+    "excerpt": "深入讲解Java工程的规范化建设，包括项目结构、分层架构、命名规范等最佳实践...",
+    "link": "https://blog.hehouhui.cn/posts/java-project-architecture",
+    "pubDate": "2025-01-01",
+    "category": "架构设计"
+  },
+  {
+    "title": "Spring Boot 3.0 新特性详解与实战应用",
+    "excerpt": "全面介绍Spring Boot 3.0的新特性，包括原生镜像支持、可观测性增强等...",
+    "link": "https://blog.hehouhui.cn/posts/spring-boot-3-features",
+    "pubDate": "2024-12-30",
+    "category": "Spring框架"
+  },
+  {
+    "title": "微服务架构设计模式与最佳实践",
+    "excerpt": "深入分析微服务架构的设计模式，包括服务拆分、数据一致性、分布式事务等核心问题...",
+    "link": "https://blog.hehouhui.cn/posts/microservices-patterns",
+    "pubDate": "2024-12-28",
+    "category": "微服务"
+  },
+  {
+    "title": "Redis 高可用集群搭建与性能优化实战",
+    "excerpt": "详细介绍Redis集群的搭建过程、高可用配置以及性能调优技巧...",
+    "link": "https://blog.hehouhui.cn/posts/redis-cluster-optimization",
+    "pubDate": "2024-12-25",
+    "category": "数据库"
+  }
+]

data/github_repos.json

@@ -0,0 +1,32 @@
+[
+  {
+    "id": 1011713435,
+    "name": "yunxiao-LLM-reviewer",
+    "html_url": "https://github.com/listener-He/yunxiao-LLM-reviewer",
+    "description": "一款专为阿里云云效 Flow 平台设计的自动化代码审查工具。通过集成 Qwen、DeepSeek 等先进大模型，该工具能够实时分析 Git 合并请求（MR）中的代码变更，智能识别潜在问题并自动生成结构化评审意见。",
+    "stargazers_count": 9,
+    "forks_count": 3,
+    "language": "TypeScript",
+    "updated_at": "2025-10-10T11:06:34Z"
+  },
+  {
+    "id": 1064414600,
+    "name": "hexo-theme-stellar",
+    "html_url": "https://github.com/listener-He/hexo-theme-stellar",
+    "description": "综合型hexo主题：博客+知识库+专栏+笔记，内置海量的标签组件和动态数据组件。",
+    "stargazers_count": 0,
+    "forks_count": 0,
+    "language": null,
+    "updated_at": "2025-09-26T02:12:18Z"
+  },
+  {
+    "id": 1060085476,
+    "name": "Universal-IoT-Java",
+    "html_url": "https://github.com/listener-He/Universal-IoT-Java",
+    "description": "通用 IoT Java 平台（示例）",
+    "stargazers_count": 0,
+    "forks_count": 0,
+    "language": null,
+    "updated_at": "2025-10-13T02:30:28Z"
+  }
+]

data/github_user.json

@@ -0,0 +1,19 @@
+{
+  "login": "listener-He",
+  "id": 39252579,
+  "node_id": "MDQ6VXNlcjM5MjUyNTc5",
+  "avatar_url": "https://avatars.githubusercontent.com/u/39252579?v=4",
+  "url": "https://api.github.com/users/listener-He",
+  "html_url": "https://github.com/listener-He",
+  "type": "User",
+  "name": "Honesty",
+  "blog": "https://www.hehouhui.cn",
+  "hireable": true,
+  "bio": "Honesty Shanghai Student",
+  "public_repos": 165,
+  "public_gists": 0,
+  "followers": 6,
+  "following": 12,
+  "created_at": "2018-05-14T02:57:55Z",
+  "updated_at": "2025-11-09T05:45:15Z"
+}

js/about.js

@@ -1,7 +1,7 @@
 // 关于页面JavaScript功能 - 现代动态版本
 
 $(document).ready(function() {
-    // 初始化所有功能
+    initMotionController();
     initGitHubStats();
     initProjects();
     initBlogArticles();
@@ -15,15 +15,21 @@ $(document).ready(function() {
 
 // 初始化随机位置
 function initRandomPositions() {
-    // 为联系方式卡片设置随机初始位置
+    var cards = $('.social-card');
-    $('.social-card').each(function(index) {
+    var rings = [130, 180, 230];
-        var randomDelay = Math.random() * 5; // 0-5秒随机延迟
+    var golden = 137.5;
-        var randomRotation = Math.random() * 360; // 0-360度随机旋转
+    var speedBase = 16;
-        
+    cards.each(function(idx) {
+        var ring = rings[idx % rings.length];
+        var angle = (idx * golden) % 360;
+        var speed = speedBase + (idx % rings.length) * 4;
         $(this).css({
-            'animation-delay': randomDelay + 's',
+            '--radius': ring + 'px',
-            'transform': 'translate(-50%, -50%) rotate(' + randomRotation + 'deg)'
+            '--phase': angle + 'deg',
+            '--speed': speed + 's'
         });
+        this.style.setProperty('animation', 'orbit var(--speed) linear infinite');
+        this.style.setProperty('transform', 'translate(-50%, -50%) rotate(var(--phase)) translateX(var(--radius)) rotate(calc(-1 * var(--phase)))');
     });
     
     // 为技术标签设置随机动画延迟
@@ -32,19 +38,32 @@ function initRandomPositions() {
         $(this).css('animation-delay', randomDelay + 's');
     });
     
-    // 为时间线项目设置随机出现延迟
     $('.timeline-item').each(function(index) {
         var randomDelay = index * 0.2 + Math.random() * 0.5;
-        $(this).css({
+        $(this).css('transition-delay', randomDelay + 's');
-            'animation-delay': randomDelay + 's',
-            'opacity': '0'
-        }).animate({opacity: 1}, 800);
     });
 }
 
+function initMotionController() {
+    var isMobile = window.matchMedia('(pointer: coarse)').matches || window.innerWidth <= 768;
+    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    var supportsBackdrop = (window.CSS && (CSS.supports('backdrop-filter: blur(1px)') || CSS.supports('-webkit-backdrop-filter: blur(1px)')));
+
+    var root = document.documentElement;
+    root.setAttribute('data-motion', reduced ? 'reduced' : (isMobile ? 'mobile' : 'desktop'));
+    root.classList.toggle('motion-mobile', isMobile && !reduced);
+    root.classList.toggle('motion-desktop', !isMobile && !reduced);
+    root.classList.toggle('motion-reduced', reduced);
+
+    if (!supportsBackdrop) {
+        root.style.setProperty('--glass-blur', '0px');
+        root.style.setProperty('--glass-alpha', '0.18');
+    }
+}
+
 // GitHub 统计信息
 function initGitHubStats() {
-    var username = 'listener-He'; // 替换为实际的GitHub用户名
+    var username = 'listener-He';
     var cacheKey = 'github_stats_cache';
     var cacheTimeKey = 'github_stats_cache_time';
     
@@ -76,19 +95,22 @@ function initGitHubStats() {
             localStorage.setItem(cacheTimeKey, now.toString());
             displayGitHubProfile(data);
         },
-        error: function(xhr, status, error) {
+        error: function() {
-            console.error('获取GitHub用户信息失败:', error);
+            fetch('data/github_user.json')
-            // 使用备用数据
+                .then(function(res) { return res.json(); })
-            var fallbackData = {
+                .then(function(json) { displayGitHubProfile(json); })
-                name: 'listener-He',
+                .catch(function() {
-                login: 'listener-He',
+                    var fallbackData = {
-                bio: '全栈开发工程师，专注于Java后端和前端技术',
+                        name: 'Honesty',
-                avatar_url: 'https://avatars.githubusercontent.com/u/listener-He',
+                        login: 'listener-He',
-                public_repos: 25,
+                        bio: '开发者',
-                followers: 48,
+                        avatar_url: 'https://avatars.githubusercontent.com/u/39252579?v=4',
-                following: 32
+                        public_repos: 0,
-            };
+                        followers: 0,
-            displayGitHubProfile(fallbackData);
+                        following: 0
+                    };
+                    displayGitHubProfile(fallbackData);
+                });
         }
     });
 }
@@ -118,6 +140,8 @@ function displayGitHubProfile(data) {
         '</div>' +
     '</div>';
     $('#github-profile').html(profileHtml);
+    $('#github-repos').text(data.public_repos);
+    $('#github-followers').text(data.followers);
     
     // 获取提交统计（使用GitHub API的限制，这里模拟数据）
     var commitsHtml = '<div class="commits-stats">' +
@@ -190,30 +214,11 @@ function initProjects() {
             localStorage.setItem(cacheTimeKey, now.toString());
             displayProjects(filteredRepos);
         },
-        error: function(xhr, status, error) {
+        error: function() {
-            console.error('获取GitHub项目失败:', error);
+            fetch('data/github_repos.json')
-            // 使用备用数据
+                .then(function(res) { return res.json(); })
-            var fallbackRepos = [
+                .then(function(json) { displayProjects(json); })
-                {
+                .catch(function() { displayProjects([]); });
-                    name: 'awesome-project',
-                    description: '一个很棒的开源项目',
-                    html_url: 'https://github.com/listener-He/awesome-project',
-                    stargazers_count: 128,
-                    forks_count: 32,
-                    language: 'Java',
-                    updated_at: '2025-01-01T00:00:00Z'
-                },
-                {
-                    name: 'web-framework',
-                    description: '轻量级Web框架',
-                    html_url: 'https://github.com/listener-He/web-framework',
-                    stargazers_count: 89,
-                    forks_count: 21,
-                    language: 'JavaScript',
-                    updated_at: '2024-12-28T00:00:00Z'
-                }
-            ];
-            displayProjects(fallbackRepos);
         }
     });
 }
@@ -233,6 +238,8 @@ function displayProjects(repos) {
                            (updateDate.getMonth() + 1) + '/' + 
                            updateDate.getDate();
         
+        var starSvg = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-label="Star" role="img"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"></path></svg>';
+        var forkSvg = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-label="Fork" role="img"><path d="M7 4a3 3 0 106 0 3 3 0 00-6 0zm7 0a3 3 0 106 0 3 3 0 00-6 0zM7 20a3 3 0 106 0 3 3 0 00-6 0zm2-3.17V10a3 3 0 013-3h3"></path></svg>';
         projectsHtml += '<div class="project-card" onclick="window.open(\'' + repo.html_url + '\', \'_blank\')">' +
             '<div class="project-header">' +
                 '<div>' +
@@ -240,8 +247,8 @@ function displayProjects(repos) {
                     '<p class="project-description">' + (repo.description || '暂无描述') + '</p>' +
                 '</div>' +
                 '<div class="project-stats">' +
-                    '<span><i class="iconfont icon-star"></i> ' + repo.stargazers_count + '</span>' +
+                    '<span>' + starSvg + ' ' + (repo.stargazers_count || 0) + '</span>' +
-                    '<span><i class="iconfont icon-fork"></i> ' + repo.forks_count + '</span>' +
+                    '<span>' + forkSvg + ' ' + (repo.forks_count || 0) + '</span>' +
                 '</div>' +
             '</div>' +
             '<div class="project-languages">' + languageTags + '</div>' +
@@ -274,57 +281,14 @@ function initBlogArticles() {
     localStorage.removeItem(cacheKey);
     localStorage.removeItem(cacheTimeKey);
     
-    // 由于RSS跨域问题，直接使用备用数据
+    fetch('data/articles.json')
-    var fallbackArticles = [
+        .then(function(res) { return res.json(); })
-        {
+        .then(function(json) {
-            title: "向量数据库全攻略：从算法公式到选型指南，一篇吃透高维数据存储术",
+            localStorage.setItem(cacheKey, JSON.stringify(json));
-            excerpt: "深入探讨向量数据库的核心算法、应用场景和选型策略，帮助开发者掌握高维数据存储的关键技术...",
+            localStorage.setItem(cacheTimeKey, now.toString());
-            link: "https://blog.hehouhui.cn/posts/vector-database-guide",
+            displayBlogArticles(json);
-            pubDate: "2025-01-02",
+        })
-            category: "技术分享"
+        .catch(function() { displayBlogArticles([]); });
-        },
-        {
-            title: "CompletableFuture 从源码到实战：让异步编程像喝奶茶一样丝滑",
-            excerpt: "全面解析CompletableFuture的源码实现和实战应用，让Java异步编程变得简单优雅...",
-            link: "https://blog.hehouhui.cn/posts/completablefuture-guide",
-            pubDate: "2025-01-02",
-            category: "Java开发"
-        },
-        {
-            title: "从规范到架构：一篇读懂 Java 工程建模、分层、命名与演进之路",
-            excerpt: "深入讲解Java工程的规范化建设，包括项目结构、分层架构、命名规范等最佳实践...",
-            link: "https://blog.hehouhui.cn/posts/java-project-architecture",
-            pubDate: "2025-01-01",
-            category: "架构设计"
-        },
-        {
-            title: "Spring Boot 3.0 新特性详解与实战应用",
-            excerpt: "全面介绍Spring Boot 3.0的新特性，包括原生镜像支持、可观测性增强等...",
-            link: "https://blog.hehouhui.cn/posts/spring-boot-3-features",
-            pubDate: "2024-12-30",
-            category: "Spring框架"
-        },
-        {
-            title: "微服务架构设计模式与最佳实践",
-            excerpt: "深入分析微服务架构的设计模式，包括服务拆分、数据一致性、分布式事务等核心问题...",
-            link: "https://blog.hehouhui.cn/posts/microservices-patterns",
-            pubDate: "2024-12-28",
-            category: "微服务"
-        },
-        {
-            title: "Redis 高可用集群搭建与性能优化实战",
-            excerpt: "详细介绍Redis集群的搭建过程、高可用配置以及性能调优技巧...",
-            link: "https://blog.hehouhui.cn/posts/redis-cluster-optimization",
-            pubDate: "2024-12-25",
-            category: "数据库"
-        }
-    ];
-    
-    // 缓存备用数据
-    localStorage.setItem(cacheKey, JSON.stringify(fallbackArticles));
-    localStorage.setItem(cacheTimeKey, now.toString());
-    
-    displayBlogArticles(fallbackArticles);
 }
 
 function displayBlogArticles(articles) {
@@ -345,8 +309,6 @@ function displayBlogArticles(articles) {
     $('#blog-container').html(articlesHtml);
 }
 
-
-
 // 数字动画效果
 function animateNumber(selector, targetNumber) {
     var element = $(selector);
@@ -367,46 +329,55 @@ function animateNumber(selector, targetNumber) {
 
 // 评论系统初始化
 function initArtalkComments() {
-    // 初始化 Artalk 评论系统
+    try {
-    if (typeof Artalk !== 'undefined') {
+        var isLocal = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
-        var artalk = Artalk.init({
+        if (isLocal) {
-            el: '#artalk-container',
+            renderCommentsFallback('评论系统暂不可用');
-            pageKey: window.location.pathname,
+            return;
-            pageTitle: document.title,
+        }
-            server: 'https://artalk.hehouhui.cn', // 替换为实际的Artalk服务器地址
+        if (typeof Artalk === 'undefined') {
-            site: 'Honesty的主页',
+            renderCommentsFallback('评论系统加载失败');
-            placeholder: '来说点什么吧...',
+            return;
-            noComment: '暂无评论',
+        }
-            sendBtn: '发送',
+        var controller = new AbortController();
-            darkMode: false,
+        var timer = setTimeout(function() { controller.abort(); }, 5000);
-            gravatar: {
+        fetch('https://artalk.hehouhui.cn/api/v2/conf', { signal: controller.signal })
-                mirror: 'https://cravatar.cn/avatar/'
+          .then(function(res) {
-            },
+            clearTimeout(timer);
-            pagination: {
+            if (!res.ok) throw new Error('conf fetch failed');
-                pageSize: 20,
+            return res.json();
-                readMore: true,
+          })
-                autoLoad: true
+          .then(function() {
-            },
+            Artalk.init({
-            heightLimit: {
+                el: '#artalk-container',
-                content: 300,
+                pageKey: window.location.pathname,
-                children: 400
+                pageTitle: document.title,
-            },
+                server: 'https://artalk.hehouhui.cn',
-            imgUpload: false,
+                site: 'Honesty的主页',
-            preview: true,
+                placeholder: '来说点什么吧...',
-            versionCheck: true
+                noComment: '暂无评论',
-        });
+                sendBtn: '发送',
-        
+                darkMode: false,
-        // 自定义样式
+                gravatar: { mirror: 'https://cravatar.cn/avatar/' },
-        setTimeout(() => {
+                pagination: { pageSize: 20, readMore: true, autoLoad: true },
-            var atkMain = document.querySelector('.atk-main');
+                heightLimit: { content: 300, children: 400 },
-            if (atkMain) {
+                imgUpload: false,
-                atkMain.style.borderRadius = '15px';
+                preview: true,
-                atkMain.style.overflow = 'hidden';
+                versionCheck: true
-            }
+            });
-        }, 1000);
+          })
+          .catch(function() { renderCommentsFallback('评论系统暂不可用'); });
+    } catch (e) {
+        renderCommentsFallback('评论系统异常');
     }
 }
 
+function renderCommentsFallback(msg) {
+    var container = document.getElementById('artalk-container');
+    if (!container) return;
+    container.innerHTML = '<div class="error">' + (msg || '评论系统不可用') + '</div>';
+}
+
 // 技术云图初始化
 function initTechCloud() {
     var techItems = [
@@ -501,23 +472,44 @@ function initPageAnimations() {
         observer.observe(section);
     });
 
+    var itemObserver = new IntersectionObserver(function(entries) {
+        entries.forEach(function(entry) {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('is-entered');
+                itemObserver.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.15, rootMargin: '0px 0px -20px 0px' });
+
+    document.querySelectorAll('.timeline-item').forEach(function(el) {
+        itemObserver.observe(el);
+    });
+
     // 数字动画
     function animateNumbers() {
+        var root = document.documentElement;
+        var reduced = root.classList.contains('motion-reduced');
+        var isMobile = root.classList.contains('motion-mobile');
         $('.stat-number').each(function() {
             var $this = $(this);
             var target = parseInt($this.text().replace(/[^0-9]/g, ''));
-            var duration = 2000;
+            if (!target || reduced || isMobile) {
-            var step = target / (duration / 16);
+                if (!isNaN(target)) {
-            var current = 0;
+                    $this.text(target.toLocaleString());
-            
-            var timer = setInterval(function() {
-                current += step;
-                if (current >= target) {
-                    current = target;
-                    clearInterval(timer);
                 }
-                $this.text(Math.floor(current).toLocaleString());
+                return;
-            }, 16);
+            }
+            var start = 0;
+            var startTs;
+            var duration = 1200;
+            function step(ts) {
+                if (!startTs) startTs = ts;
+                var p = Math.min(1, (ts - startTs) / duration);
+                var val = Math.floor(start + (target - start) * p);
+                $this.text(val.toLocaleString());
+                if (p < 1) requestAnimationFrame(step);
+            }
+            requestAnimationFrame(step);
         });
     }
 
@@ -552,10 +544,10 @@ var githubStyles = '<style>' +
  '}' +
  '.github-info h3 {' +
  '    margin: 0 0 0.5rem 0;' +
- '    color: #333;' +
+ '    color: #fff;' +
  '}' +
  '.github-bio {' +
- '    color: #666;' +
+ '    color: rgba(255, 255, 255, 0.8);' +
  '    margin-bottom: 1rem;' +
  '    font-size: 0.9rem;' +
  '}' +
@@ -570,15 +562,15 @@ var githubStyles = '<style>' +
  '    display: block;' +
  '    font-size: 1.2rem;' +
  '    font-weight: 600;' +
- '    color: #333;' +
+ '    color: #fff;' +
  '}' +
  '.stat-item .stat-label {' +
  '    font-size: 0.8rem;' +
- '    color: #666;' +
+ '    color: rgba(255, 255, 255, 0.8);' +
  '}' +
  '.commits-stats h3 {' +
  '    margin-bottom: 1rem;' +
- '    color: #333;' +
+ '    color: #fff;' +
  '}' +
  '.commit-item {' +
  '    display: flex;' +
@@ -589,12 +581,12 @@ var githubStyles = '<style>' +
  '.commit-date {' +
  '    width: 60px;' +
  '    font-size: 0.9rem;' +
- '    color: #666;' +
+ '    color: rgba(255, 255, 255, 0.8);' +
  '}' +
  '.commit-bar {' +
  '    flex: 1;' +
  '    height: 8px;' +
- '    background: #f0f0f0;' +
+ '    background: rgba(255, 255, 255, 0.1);' +
  '    border-radius: 4px;' +
  '    overflow: hidden;' +
  '}' +
@@ -609,22 +601,22 @@ var githubStyles = '<style>' +
  '    text-align: right;' +
  '    font-size: 0.9rem;' +
  '    font-weight: 600;' +
- '    color: #333;' +
+ '    color: #fff;' +
  '}' +
  '.error {' +
  '    text-align: center;' +
- '    color: #999;' +
+ '    color: rgba(255, 255, 255, 0.5);' +
  '    font-style: italic;' +
  '    padding: 2rem;' +
  '}' +
  '.project-updated {' +
  '    margin-top: 1rem;' +
  '    font-size: 0.8rem;' +
- '    color: #888;' +
+ '    color: rgba(255, 255, 255, 0.8);' +
  '}' +
  '.article-category {' +
- '    background: rgba(102, 126, 234, 0.1);' +
+ '    background: rgba(102, 126, 234, 0.2);' +
- '    color: #667eea;' +
+ '    color: #fff;' +
  '    padding: 0.2rem 0.6rem;' +
  '    border-radius: 12px;' +
  '    font-size: 0.8rem;' +
@@ -673,10 +665,10 @@ function showWeChatModal() {
             '<span class="close">&times;</span>' +
             '<h3>微信公众号</h3>' +
             '<div class="qr-code">' +
-                '<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjZjVmNWY1Ii8+CjxyZWN0IHg9IjIwIiB5PSIyMCIgd2lkdGg9IjE2MCIgaGVpZ2h0PSIxNjAiIGZpbGw9IndoaXRlIiBzdHJva2U9IiNkZGQiLz4KPHN2ZyB4PSI0MCIgeT0iNDAiIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSIjMDdjMTYwIi8+Cjx0ZXh0IHg9IjUwIiB5PSI1NSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+5b6u5L+h5YWs5LyX5Y+3PC90ZXh0Pgo8L3N2Zz4KPC9zdmc+" alt="微信公众号二维码" onerror="this.style.display=\'none\'; this.nextElementSibling.style.display=\'block\';">' +
+                '<img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg" alt="微信公众号二维码" onerror="this.style.display=\'none\'; this.nextElementSibling.style.display=\'block\';">' +
-                '<div style="display: none; padding: 2rem; text-align: center; color: #666;">二维码加载失败<br>请搜索公众号：技术分享小站</div>' +
+                '<div style="display: none; padding: 2rem; text-align: center; color: rgba(255, 255, 255, 0.8);">二维码加载失败<br>请搜索公众号：技术分享小站</div>' +
             '</div>' +
-            '<p style="margin-top: 1rem; color: #666; text-align: center;">扫码关注获取最新技术文章</p>' +
+            '<p style="margin-top: 1rem; color: rgba(255, 255, 255, 0.8); text-align: center;">扫码关注获取最新技术文章</p>' +
         '</div>' +
     '</div>';
     
@@ -691,3 +683,24 @@ function showWeChatModal() {
 function hideWeChatModal() {
     $('#wechatModal').fadeOut(300);
 }
+
+// 兼容移动端的微信二维码显示功能
+function showWechatQR() {
+    // 在移动设备上使用模态框
+    if (window.innerWidth <= 768) {
+        showWeChatModal();
+    } else {
+        // 在桌面设备上使用原来的弹窗
+        var modal = document.getElementById("wechat-modal");
+        if (modal) {
+            modal.style.display = "block";
+        }
+    }
+}
+
+function hideWechatQR() {
+    var modal = document.getElementById("wechat-modal");
+    if (modal) {
+        modal.style.display = "none";
+    }
+}

js/main.js

@@ -50,7 +50,7 @@ $(document).ready(function () {
 		imgUrls = [];
 		index = 0;
         for (let i = 1; i < 8; i++) {
-            imgUrls.push("https://blog-file.hehouhui.cn/bj/"+i+".jpg");
+            imgUrls.push("/images/bj/"+i+".jpg");
         }
         sessionStorage.setItem("imgUrls", JSON.stringify(imgUrls));
         // sessionStorage.setItem("index", index);