diff --git a/about.html b/about.html
index 5447a90..073f5f4 100644
--- a/about.html
+++ b/about.html
@@ -7,21 +7,20 @@
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/about.css">
     <link rel="stylesheet" href="css/iconfont.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.css">
     <link rel="icon" href="favicon.ico">
     <meta name="description" content="了解更多关于Honesty的信息 - 技术栈、项目经验、个人兴趣">
 </head>
 <body>
     <div class="about-container">
         <!-- 导航栏 -->
-        <nav class="about-nav">
-            <div class="nav-content">
-                <a href="index.html" class="nav-logo">
-                    <img src="https://cdn.jsdmirror.com/gh/listener-He/images@default/202309111525908.jpeg" alt="Honesty">
-                    <span>Honesty</span>
-                </a>
+        <nav class="navbar">
+            <div class="nav-container">
+                <a href="index.html" class="nav-logo">Honesty</a>
                 <div class="nav-links">
                     <a href="index.html">首页</a>
-                    <a href="about.html" class="active">关于我</a>
+                    <a href="javascript:void(0);" class="active">关于我</a>
+                    <a href="https://blog.hehouhui.cn">博客</a>
                 </div>
             </div>
         </nav>
@@ -30,36 +29,76 @@
         <main class="about-main">
             <!-- 英雄区域 -->
             <section class="hero-section">
-                <div class="hero-background">
-                    <div class="floating-shapes">
-                        <div class="shape shape-1"></div>
-                        <div class="shape shape-2"></div>
-                        <div class="shape shape-3"></div>
-                    </div>
+                <!-- INFJ装饰图片 -->
+                <div class="infj-decoration">
+                    <img src="https://blog-file.hehouhui.cn/INFJ.png" alt="INFJ" class="infj-image">
                 </div>
-                <div class="hero-content">
-                    <div class="profile-avatar">
-                        <img src="https://cdn.jsdmirror.com/gh/listener-He/images@default/202309111525908.jpeg" alt="Honesty">
-                        <div class="avatar-ring"></div>
-                    </div>
-                    <h1 class="hero-title">Honesty</h1>
-                    <p class="hero-subtitle">全栈开发工程师 · 开源爱好者</p>
-                    <div class="personality-badge">
-                        <span class="mbti-tag">INFJ</span>
-                        <span class="badge-desc">提倡者人格</span>
-                    </div>
-                    <div class="hero-stats">
-                        <div class="stat-item">
-                            <span class="stat-number" id="github-repos">--</span>
-                            <span class="stat-label">开源项目</span>
+                <div class="hero-container">
+                    <div class="hero-left">
+                        <div class="profile-card">
+                            <div class="profile-avatar">
+                                <img src="https://cdn.jsdmirror.com/gh/listener-He/images@default/202309111525908.jpeg" alt="Honesty" class="avatar-image">
+                                <div class="status-indicator"></div>
+                            </div>
+                            <div class="profile-info">
+                                <h1 class="hero-title">Honesty</h1>
+                                <p class="hero-subtitle">Java后端 + AI开发工程师</p>
+                                <div class="location-info">
+                                    <span class="location-item">
+                                        <i class="iconfont icon-location"></i>
+                                        现居上海
+                                    </span>
+                                </div>
+                            </div>
                         </div>
-                        <div class="stat-item">
-                            <span class="stat-number" id="github-followers">--</span>
-                            <span class="stat-label">GitHub关注</span>
+                    </div>
+                    <div class="hero-right">
+                        <div class="intro-content">
+                            <div class="intro-text">
+                                <div class="quote-section">
+                                    <div class="quote-line"></div>
+                                    <div class="quote-content">
+                                        <h2>关于我</h2>
+                                        <blockquote class="intro-quote">
+                                            <p>"我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。"</p>
+                                        </blockquote>
+                                        <blockquote class="intro-quote">
+                                            <p>"作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。"</p>
+                                        </blockquote>
+                                    </div>
+                                </div>
                         </div>
-                        <div class="stat-item">
-                            <span class="stat-number" id="total-visitors">--</span>
-                            <span class="stat-label">访问量</span>
+                            <div class="personality-section">
+                                <div class="mbti-card">
+                                    <div class="mbti-header">
+                                        <span class="mbti-tag">INFJ</span>
+                                        <span class="mbti-name">提倡者人格</span>
+                                    </div>
+                                    <div class="mbti-traits">
+                                        <span class="trait">理想主义与道德感</span>
+                                        <span class="trait">果断决绝的行动力</span>
+                                        <span class="trait">深度洞察与创意</span>
+                                        <span class="trait">关怀与同理心</span>
+                                    </div>
+                                    <div class="infj-quote">
+                                        <p>"提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。"</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="hero-stats">
+                                <div class="stat-item">
+                                    <span class="stat-number" id="github-repos">--</span>
+                                    <span class="stat-label">开源项目</span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-number" id="github-followers">--</span>
+                                    <span class="stat-label">GitHub关注</span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-number" id="coding-years">7+</span>
+                                    <span class="stat-label">编程年限</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -68,30 +107,49 @@
             <!-- 技术栈云图 -->
             <section class="tech-cloud-section">
                 <div class="section-header">
-                    <h2 class="section-title">技术栈</h2>
-                    <p class="section-subtitle">我的技术工具箱</p>
+                    <h2 class="section-title">技术栈云图</h2>
+                    <p class="section-subtitle">技术探索之旅 - 追求深度与完美的技术实践</p>
                 </div>
-                <div class="tech-cloud">
-                    <div class="tech-orbit orbit-1">
-                        <span class="tech-item primary">JavaScript</span>
-                        <span class="tech-item primary">Java</span>
-                        <span class="tech-item primary">Python</span>
-                    </div>
-                    <div class="tech-orbit orbit-2">
-                        <span class="tech-item secondary">Vue.js</span>
-                        <span class="tech-item secondary">React</span>
-                        <span class="tech-item secondary">Spring Boot</span>
-                        <span class="tech-item secondary">Node.js</span>
-                    </div>
-                    <div class="tech-orbit orbit-3">
-                        <span class="tech-item tertiary">TypeScript</span>
-                        <span class="tech-item tertiary">MySQL</span>
-                        <span class="tech-item tertiary">Docker</span>
-                        <span class="tech-item tertiary">Git</span>
-                        <span class="tech-item tertiary">Linux</span>
-                        <span class="tech-item tertiary">AWS</span>
+                <div class="tech-cloud-container">
+                    <div class="cloud-wrapper">
+                        <span class="cloud-tag" data-weight="5" data-category="core">Java</span>
+                        <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="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>
+                        <span class="cloud-tag" data-weight="4" data-category="data">MySQL</span>
+                        <span class="cloud-tag" data-weight="4" data-category="data">Redis</span>
+                        <span class="cloud-tag" data-weight="3" data-category="data">MongoDB</span>
+                        <span class="cloud-tag" data-weight="4" data-category="ops">Docker</span>
+                        <span class="cloud-tag" data-weight="3" data-category="ops">Kubernetes</span>
+                        <span class="cloud-tag" data-weight="3" data-category="ai">OpenAI API</span>
+                        <span class="cloud-tag" data-weight="3" data-category="ai">LangChain</span>
+                        <span class="cloud-tag" data-weight="2" data-category="ai">TensorFlow</span>
+                        <span class="cloud-tag" data-weight="2" data-category="ai">PyTorch</span>
+                        <span class="cloud-tag" data-weight="3" data-category="data">Elasticsearch</span>
+                        <span class="cloud-tag" data-weight="2" data-category="data">RabbitMQ</span>
+                        <span class="cloud-tag" data-weight="2" data-category="data">Kafka</span>
+                        <span class="cloud-tag" data-weight="3" data-category="ops">Jenkins</span>
+                        <span class="cloud-tag" data-weight="4" data-category="ops">Git</span>
+                        <span class="cloud-tag" data-weight="3" data-category="ops">Linux</span>
+                        <span class="cloud-tag" data-weight="2" data-category="ops">AWS</span>
+                        <span class="cloud-tag" data-weight="2" data-category="ops">Nginx</span>
+                        <span class="cloud-tag" data-weight="3" data-category="backend">Spring Security</span>
+                        <span class="cloud-tag" data-weight="3" data-category="backend">MyBatis</span>
+                        <span class="cloud-tag" data-weight="2" data-category="backend">JPA</span>
+                        <span class="cloud-tag" data-weight="2" data-category="backend">Dubbo</span>
+                        <span class="cloud-tag" data-weight="2" data-category="backend">Netty</span>
+                        <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="data">ClickHouse</span>
                     </div>
                 </div>
+                <div class="tech-philosophy">
+                    <p class="philosophy-text">"我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。"</p>
+                </div>
             </section>
 
             <!-- 个性特质时间线 -->
@@ -163,36 +221,6 @@
                 </div>
             </section>
 
-            <!-- 访问统计仪表盘 -->
-            <section class="stats-dashboard-section">
-                <div class="section-header">
-                    <h2 class="section-title">访问统计</h2>
-                    <p class="section-subtitle">数据驱动的成长</p>
-                </div>
-                <div class="stats-dashboard">
-                    <div class="stat-card primary">
-                        <div class="stat-icon">👥</div>
-                        <div class="stat-number" id="total-visitors">-</div>
-                        <div class="stat-label">总访问人数</div>
-                    </div>
-                    <div class="stat-card secondary">
-                        <div class="stat-icon">📊</div>
-                        <div class="stat-number" id="total-visits">-</div>
-                        <div class="stat-label">总访问次数</div>
-                    </div>
-                    <div class="stat-card accent">
-                        <div class="stat-icon">🌟</div>
-                        <div class="stat-number" id="today-visitors">-</div>
-                        <div class="stat-label">今日访问人数</div>
-                    </div>
-                    <div class="stat-card highlight">
-                        <div class="stat-icon">🔥</div>
-                        <div class="stat-number" id="today-visits">-</div>
-                        <div class="stat-label">今日访问次数</div>
-                    </div>
-                </div>
-            </section>
-
             <!-- 联系方式浮动区域 -->
             <section class="contact-floating-section">
                 <div class="contact-container">
@@ -200,22 +228,72 @@
                         <h2>让我们连接</h2>
                         <p>欢迎交流技术、分享想法</p>
                     </div>
-                    <div class="social-orbit">
-                        <div class="social-center">
-                            <i class="iconfont icon-message"></i>
+                    <div class="social-grid">
+                        <a href="https://github.com/listener-He" class="social-card github" target="_blank">
+                            <div class="social-icon">
+                                <i class="iconfont icon-github"></i>
+                            </div>
+                            <div class="social-info">
+                                <h3>GitHub</h3>
+                                <p>开源项目与代码</p>
+                            </div>
+                        </a>
+                        <a href="mailto:hehouhui@foxmail.com" class="social-card email">
+                            <div class="social-icon">
+                                <i class="iconfont icon-email"></i>
+                            </div>
+                            <div class="social-info">
+                                <h3>邮箱</h3>
+                                <p>商务合作联系</p>
+                            </div>
+                        </a>
+                        <a href="https://blog.hehouhui.cn" class="social-card blog" target="_blank">
+                            <div class="social-icon">
+                                <i class="iconfont icon-blog"></i>
+                            </div>
+                            <div class="social-info">
+                                <h3>技术博客</h3>
+                                <p>技术文章分享</p>
+                            </div>
+                        </a>
+                        <a href="https://www.zhihu.com/people/wen-xin-92-2-57" class="social-card zhihu" target="_blank">
+                            <div class="social-icon">
+                                <i class="iconfont icon-zhihu"></i>
+                            </div>
+                            <div class="social-info">
+                                <h3>知乎</h3>
+                                <p>技术问答交流</p>
+                            </div>
+                        </a>
+                        <a href="javascript:void(0);" class="social-card wechat" onclick="showWechatQR()">
+                            <div class="social-icon">
+                                <i class="iconfont icon-wechat"></i>
+                            </div>
+                            <div class="social-info">
+                                <h3>微信公众号</h3>
+                                <p>技术干货推送</p>
+                            </div>
+                        </a>
+                        <a href="https://juejin.cn/user/3659591622878503" class="social-card juejin" target="_blank">
+                            <div class="social-icon">
+                                <i class="iconfont icon-juejin"></i>
+                            </div>
+                            <div class="social-info">
+                                <h3>掘金</h3>
+                                <p>前端技术社区</p>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <!-- 微信二维码弹窗 -->
+                <div id="wechat-modal" class="modal" style="display: none;">
+                    <div class="modal-content">
+                        <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='">
                         </div>
-                        <a href="https://github.com/listener-He" class="social-planet planet-1" target="_blank">
-                            <i class="iconfont icon-github"></i>
-                            <span>GitHub</span>
-                        </a>
-                        <a href="mailto:your-email@example.com" class="social-planet planet-2">
-                            <i class="iconfont icon-email"></i>
-                            <span>邮箱</span>
-                        </a>
-                        <a href="#" class="social-planet planet-3" target="_blank">
-                            <i class="iconfont icon-blog"></i>
-                            <span>博客</span>
-                        </a>
+                        <p>扫码关注获取最新技术文章</p>
                     </div>
                 </div>
             </section>
@@ -231,16 +309,24 @@
         </main>
 
         <!-- 页脚 -->
-        <footer class="about-footer">
-            <p>&copy; 2024 Honesty. All rights reserved.</p>
+        <footer class="footer">
+            <div class="footer-container">
+                <div class="footer-bottom">
+                    <div class="footer-info">
+                        <p>&copy; 2024 Honesty. All rights reserved.</p>
+                        <p>ICP备案号：<a href="https://beian.miit.gov.cn/" target="_blank">湘ICP备20014902号</a></p>
+                        <p>Powered by <a href="https://github.com/features/actions" target="_blank">GitHub Actions</a></p>
+                    </div>
+                </div>
+            </div>
         </footer>
     </div>
 
     <!-- 脚本文件 -->
     <script src="js/jquery.min.js"></script>
+     <!-- Artalk 评论系统 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.js"></script>
     <script src="js/about.js"></script>
-    <!-- Artalk 评论系统 -->
-    <script src="https://unpkg.com/artalk@latest/dist/Artalk.js"></script>
-    <link href="https://unpkg.com/artalk@latest/dist/Artalk.css" rel="stylesheet">
+    
 </body>
 </html>
\ No newline at end of file
diff --git a/css/about.css b/css/about.css
index d19a039..b3baeb6 100644
--- a/css/about.css
+++ b/css/about.css
@@ -8,8 +8,8 @@
 body {
     font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     line-height: 1.6;
-    color: #333;
-    background: #0a0a0a;
+    color: #2c3e50;
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
     min-height: 100vh;
     overflow-x: hidden;
 }
@@ -23,11 +23,12 @@ body::before {
     width: 100%;
     height: 100%;
     background: 
-        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
-        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
-        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
+        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.08) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(52, 152, 219, 0.06) 0%, transparent 50%),
+        radial-gradient(circle at 60% 60%, rgba(155, 89, 182, 0.06) 0%, transparent 50%);
     z-index: -1;
-    animation: backgroundShift 20s ease-in-out infinite;
+    animation: backgroundShift 25s ease-in-out infinite;
 }
 
 @keyframes backgroundShift {
@@ -35,23 +36,170 @@ body::before {
     50% { transform: scale(1.1) rotate(5deg); }
 }
 
+/* 链接样式 - 添加动画效果 */
+a {
+    color: #667eea;
+    text-decoration: none;
+    position: relative;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+a:hover {
+    color: #764ba2;
+    transform: translateY(-1px);
+}
+
+/* 引用线样式 */
+.quote-section {
+    position: relative;
+    padding-left: 2rem;
+}
+
+.quote-line {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #9b59b6 100%);
+    border-radius: 2px;
+    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
+}
+
+.quote-content {
+    position: relative;
+}
+
+.intro-quote {
+    margin: 1.5rem 0;
+    padding: 1.5rem;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 15px;
+    border-left: 4px solid #667eea;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.intro-quote:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
+}
+
+.intro-quote::before {
+    content: '"';
+    position: absolute;
+    top: -10px;
+    left: 15px;
+    font-size: 3rem;
+    color: #667eea;
+    font-family: Georgia, serif;
+    opacity: 0.3;
+}
+
+.intro-quote p {
+    margin: 0;
+    font-style: italic;
+    color: #2c3e50;
+    line-height: 1.7;
+    font-size: 1.1rem;
+}
+
+/* 链接下划线动画 */
+a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info a)::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #667eea, #764ba2);
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info a):hover::after {
+    width: 100%;
+}
+
+/* 导航链接特殊动画 */
+.nav-links a {
+    position: relative;
+    overflow: hidden;
+}
+
+.nav-links a::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s ease;
+}
+
+.nav-links a:hover::before {
+    left: 100%;
+}
+
+/* 社交链接脉冲动画 */
+.social-link:hover {
+    animation: socialPulse 0.6s ease;
+}
+
+@keyframes socialPulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+}
+
+/* 按钮悬浮效果 */
+.btn {
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 100%;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
+    transition: width 0.3s ease;
+    z-index: -1;
+}
+
+.btn:hover::before {
+    width: 100%;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+}
+
 /* 导航栏 */
 .navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
-    background: rgba(10, 10, 10, 0.8);
+    background: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(20px);
     z-index: 1000;
     padding: 1rem 0;
     transition: all 0.3s ease;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
 }
 
 .navbar.scrolled {
-    background: rgba(10, 10, 10, 0.95);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
 }
 
 .nav-container {
@@ -64,53 +212,74 @@ body::before {
 }
 
 .nav-logo {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #fff;
+    font-size: 1.8rem;
+    font-weight: 800;
+    color: #2c3e50;
     text-decoration: none;
-    background: linear-gradient(45deg, #667eea, #764ba2);
+    background: linear-gradient(45deg, #667eea, #764ba2, #9b59b6);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
+    transition: all 0.3s ease;
+}
+
+.nav-logo:hover {
+    transform: scale(1.05);
 }
 
 .nav-links {
     display: flex;
     list-style: none;
-    gap: 2rem;
+    gap: 2.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 0.8rem 1.5rem;
+    border-radius: 50px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .nav-links a {
     text-decoration: none;
-    color: rgba(255, 255, 255, 0.8);
-    font-weight: 500;
+    color: #2c3e50;
+    font-weight: 600;
     transition: all 0.3s ease;
     position: relative;
+    padding: 0.5rem 1rem;
+    border-radius: 25px;
 }
 
 .nav-links a::after {
     content: '';
     position: absolute;
-    bottom: -5px;
-    left: 0;
+    bottom: -2px;
+    left: 50%;
+    transform: translateX(-50%);
     width: 0;
-    height: 2px;
-    background: linear-gradient(45deg, #667eea, #764ba2);
+    height: 3px;
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+    border-radius: 2px;
     transition: width 0.3s ease;
 }
 
 .nav-links a:hover,
 .nav-links a.active {
-    color: #fff;
+    color: #ff6b6b;
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
 }
 
 .nav-links a:hover::after,
 .nav-links a.active::after {
-    width: 100%;
+    width: 80%;
+}
+
+.nav-links a.active {
+    background: rgba(255, 107, 107, 0.1);
+    color: #ff6b6b;
 }
 
 /* 主要内容 */
-.main-content {
+.about-main {
     margin-top: 80px;
     max-width: 1400px;
     margin-left: auto;
@@ -119,69 +288,245 @@ body::before {
 
 /* 英雄区域 */
 .hero-section {
-    position: relative;
-    min-height: 100vh;
+    padding: 4rem 2rem;
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 25%, #dee2e6 50%, #ced4da 75%, #adb5bd 100%);
+    background-size: 400% 400%;
+    animation: heroGradientShift 15s ease infinite;
+    min-height: 80vh;
     display: flex;
     align-items: center;
-    justify-content: center;
+    position: relative;
     overflow: hidden;
+    border-radius: 0 0 50px 50px;
+    margin-bottom: 2rem;
 }
 
-.hero-background {
+.hero-section::before {
+    content: '';
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
+    pointer-events: none;
 }
 
-.floating-shapes {
-    position: absolute;
-    width: 100%;
-    height: 100%;
+@keyframes heroGradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
 }
 
-.shape {
+/* INFJ装饰图片 - 重新设计布局 */
+.infj-decoration {
     position: absolute;
+    top: 30px;
+    right: 30px;
+    z-index: 10;
+    opacity: 0.9;
+}
+
+.infj-image {
+    width: 100px;
+    height: 100px;
     border-radius: 50%;
-    background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
-    animation: float 6s ease-in-out infinite;
+    border: 4px solid rgba(255, 255, 255, 0.4);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 25px rgba(120, 119, 198, 0.4);
+    transition: all 0.3s ease;
+    animation: gentleFloat 4s ease-in-out infinite;
+    filter: brightness(1.1) contrast(1.1);
 }
 
-.shape-1 {
-    width: 300px;
-    height: 300px;
-    top: 10%;
-    left: 10%;
-    animation-delay: 0s;
+.infj-image:hover {
+    transform: scale(1.15) rotate(10deg);
+    box-shadow: 0 15px 50px rgba(120, 119, 198, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);
+    border-color: rgba(120, 119, 198, 0.6);
+    filter: brightness(1.3) contrast(1.2) saturate(1.2);
 }
 
-.shape-2 {
-    width: 200px;
-    height: 200px;
-    top: 60%;
-    right: 10%;
-    animation-delay: 2s;
+/* 轻柔浮动动画 */
+@keyframes gentleFloat {
+    0%, 100% {
+        transform: translateY(0px) rotate(0deg) scale(1);
+    }
+    50% {
+        transform: translateY(-10px) rotate(5deg) scale(1.05);
+    }
 }
 
-.shape-3 {
-    width: 150px;
-    height: 150px;
-    bottom: 20%;
-    left: 60%;
-    animation-delay: 4s;
+.hero-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 4rem;
+    align-items: center;
 }
 
-@keyframes float {
-    0%, 100% { transform: translateY(0px) rotate(0deg); }
-    50% { transform: translateY(-20px) rotate(180deg); }
+.hero-left {
+    display: flex;
+    justify-content: center;
 }
 
-.hero-content {
-    text-align: center;
-    z-index: 1;
+.profile-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
     padding: 2rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    border: 2px solid rgba(102, 126, 234, 0.2);
+    backdrop-filter: blur(10px);
+}
+
+.profile-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
+    background-size: 200% 100%;
+    animation: gradientShift 3s ease-in-out infinite;
+}
+
+@keyframes gradientShift {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+}
+
+.profile-avatar {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 1.5rem;
+}
+
+.avatar-image {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 4px solid #fff;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+}
+
+.avatar-image:hover {
+    transform: scale(1.05);
+    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
+}
+
+.status-indicator {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    width: 20px;
+    height: 20px;
+    background: #4CAF50;
+    border-radius: 50%;
+    border: 3px solid #fff;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
+    70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
+}
+
+.profile-info h1 {
+    margin: 0 0 0.5rem 0;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #333;
+}
+
+.profile-info p {
+    margin: 0 0 1rem 0;
+    color: #666;
+    font-size: 1.1rem;
+}
+
+.location-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+    color: #888;
+    font-size: 0.9rem;
+}
+
+.hero-right {
+    padding-left: 2rem;
+}
+
+.intro-content h2 {
+    font-size: 2.5rem;
+    font-weight: 800;
+    color: #333;
+    margin-bottom: 1.5rem;
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.intro-text p {
+    font-size: 1.1rem;
+    line-height: 1.8;
+    color: #555;
+    margin-bottom: 1.5rem;
+}
+
+.personality-section {
+    margin: 2rem 0;
+}
+
+.mbti-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 15px;
+    padding: 1.5rem;
+    color: #fff;
+    margin-bottom: 2rem;
+}
+
+.mbti-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.mbti-tag {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 1rem;
+    border-radius: 25px;
+    font-weight: 700;
+    font-size: 1.1rem;
+}
+
+.mbti-name {
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+.mbti-traits {
+    display: flex;
+    gap: 0.8rem;
+    flex-wrap: wrap;
+}
+
+.trait {
+    background: rgba(255, 255, 255, 0.15);
+    padding: 0.4rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .profile-avatar {
@@ -190,14 +535,40 @@ body::before {
     margin-bottom: 2rem;
 }
 
-.avatar-image {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    object-fit: cover;
-    border: 4px solid rgba(255, 255, 255, 0.2);
-    transition: all 0.3s ease;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+.hero-title {
+    font-size: 4rem;
+    font-weight: 800;
+    margin-bottom: 1rem;
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: titleGlow 3s ease-in-out infinite;
+    text-shadow: 0 0 30px rgba(255, 107, 107, 0.3);
+}
+
+.hero-subtitle {
+    font-size: 1.4rem;
+    color: #333;
+    margin-bottom: 1.5rem;
+    font-weight: 500;
+    opacity: 0.9;
+}
+
+.hero-description {
+    margin-bottom: 2rem;
+}
+
+.hero-description p {
+    font-size: 1.2rem;
+    color: #555;
+    font-weight: 400;
+    margin: 0;
+    padding: 1rem 2rem;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 25px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    display: inline-block;
 }
 
 .avatar-image:hover {
@@ -225,9 +596,9 @@ body::before {
 .hero-title {
     font-size: 4rem;
     font-weight: 800;
-    color: #fff;
+    color: #2c3e50;
     margin-bottom: 1rem;
-    background: linear-gradient(45deg, #667eea, #764ba2);
+    background: linear-gradient(45deg, #667eea, #764ba2, #9b59b6);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -241,9 +612,10 @@ body::before {
 
 .hero-subtitle {
     font-size: 1.5rem;
-    color: rgba(255, 255, 255, 0.8);
+    color: #2c3e50;
     margin-bottom: 2rem;
     font-weight: 300;
+    opacity: 0.8;
 }
 
 .personality-badge {
@@ -255,20 +627,22 @@ body::before {
 }
 
 .mbti-tag {
-    background: linear-gradient(45deg, #667eea, #764ba2);
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
     color: #fff;
     padding: 0.8rem 1.5rem;
     border-radius: 30px;
     font-size: 1rem;
     font-weight: 700;
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
     animation: pulse 2s infinite;
+    border: 2px solid rgba(255, 255, 255, 0.3);
 }
 
 .badge-desc {
-    color: rgba(255, 255, 255, 0.7);
+    color: #2c3e50;
     font-size: 0.9rem;
     font-style: italic;
+    font-weight: 500;
 }
 
 .hero-stats {
@@ -285,16 +659,20 @@ body::before {
 .hero-stats .stat-number {
     font-size: 2.5rem;
     font-weight: 800;
-    color: #fff;
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
     display: block;
     margin-bottom: 0.5rem;
 }
 
 .hero-stats .stat-label {
-    color: rgba(255, 255, 255, 0.6);
+    color: #2c3e50;
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 1px;
+    font-weight: 600;
 }
 
 /* 通用区域样式 */
@@ -307,7 +685,10 @@ body::before {
 .section-title {
     font-size: 3rem;
     font-weight: 800;
-    color: #fff;
+    background: linear-gradient(45deg, #667eea, #764ba2, #9b59b6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
     margin-bottom: 1rem;
     position: relative;
     display: inline-block;
@@ -319,127 +700,258 @@ body::before {
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
-    width: 60px;
+    width: 80px;
     height: 4px;
-    background: linear-gradient(45deg, #667eea, #764ba2);
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
     border-radius: 2px;
+    box-shadow: 0 2px 10px rgba(255, 107, 107, 0.3);
 }
 
 .section-subtitle {
     font-size: 1.2rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-weight: 300;
+    color: #2c3e50;
+    font-weight: 500;
+    opacity: 0.8;
 }
 
-/* 技术栈云图 */
+/* 技术栈云图 - INFJ风格设计 */
 .tech-cloud-section {
     padding: 8rem 2rem;
-    position: relative;
-}
-
-.tech-cloud {
-    position: relative;
-    width: 600px;
-    height: 600px;
-    margin: 0 auto;
-}
-
-.tech-orbit {
-    position: absolute;
-    border-radius: 50%;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    animation: orbitRotate 30s linear infinite;
-}
-
-.orbit-1 {
-    width: 200px;
-    height: 200px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    animation-duration: 20s;
-}
-
-.orbit-2 {
-    width: 350px;
-    height: 350px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    animation-duration: 30s;
-    animation-direction: reverse;
-}
-
-.orbit-3 {
-    width: 500px;
-    height: 500px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    animation-duration: 40s;
-}
-
-@keyframes orbitRotate {
-    from { transform: translate(-50%, -50%) rotate(0deg); }
-    to { transform: translate(-50%, -50%) rotate(360deg); }
-}
-
-.tech-item {
-    position: absolute;
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
-    color: #fff;
+    border-radius: 50px;
+    margin: 2rem;
+    border: 2px solid rgba(102, 126, 234, 0.1);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
+    position: relative;
+    overflow: hidden;
+}
+
+.tech-cloud-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
+    pointer-events: none;
+}
+
+@keyframes gradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* 标签云容器 */
+.cloud-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    min-height: 400px;
+    position: relative;
+    perspective: 1000px;
+}
+
+/* 连接线动画 */
+.cloud-wrapper::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+        radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+    background-size: 100px 100px, 150px 150px, 120px 120px, 80px 80px;
+    animation: connectionLines 15s linear infinite;
+    pointer-events: none;
+    opacity: 0.3;
+}
+
+@keyframes connectionLines {
+    0% { transform: translate(0, 0) rotate(0deg); }
+    25% { transform: translate(-10px, -10px) rotate(90deg); }
+    50% { transform: translate(10px, -5px) rotate(180deg); }
+    75% { transform: translate(-5px, 10px) rotate(270deg); }
+    100% { transform: translate(0, 0) rotate(360deg); }
+}
+
+/* 标签云标签 */
+.cloud-tag {
+    display: inline-block;
     padding: 0.8rem 1.5rem;
+    margin: 0.5rem;
     border-radius: 25px;
-    font-size: 0.9rem;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border: 2px solid rgba(102, 126, 234, 0.2);
+    color: #2c3e50;
+    font-size: 0.95rem;
     font-weight: 600;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    transition: all 0.3s ease;
     cursor: pointer;
-    white-space: nowrap;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: cloudFloat 8s ease-in-out infinite;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
 }
 
-.tech-item:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+/* 标签浮动动画 */
+@keyframes cloudFloat {
+    0%, 100% {
+        transform: translateY(0px) rotate(0deg) scale(1);
+    }
+    25% {
+        transform: translateY(-15px) rotate(2deg) scale(1.02);
+    }
+    50% {
+        transform: translateY(-8px) rotate(0deg) scale(1);
+    }
+    75% {
+        transform: translateY(-20px) rotate(-2deg) scale(0.98);
+    }
 }
 
-.tech-item.primary {
-    background: linear-gradient(45deg, #667eea, #764ba2);
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+/* 标签悬浮效果 */
+.cloud-tag::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
 }
 
-.tech-item.secondary {
-    background: rgba(102, 126, 234, 0.2);
-    border-color: rgba(102, 126, 234, 0.4);
+.cloud-tag:hover::before {
+    left: 100%;
 }
 
-.tech-item.tertiary {
-    background: rgba(255, 255, 255, 0.05);
+.cloud-tag:hover {
+    transform: translateY(-8px) scale(1.1) rotate(5deg);
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 0 25px var(--tag-color, #667eea);
+    border-color: var(--tag-color, #667eea);
+    color: var(--tag-color, #667eea);
+    z-index: 10;
 }
 
-/* 技术项目位置 */
-.orbit-1 .tech-item:nth-child(1) { top: -15px; left: 50%; transform: translateX(-50%); }
-.orbit-1 .tech-item:nth-child(2) { bottom: -15px; left: 50%; transform: translateX(-50%); }
-.orbit-1 .tech-item:nth-child(3) { top: 50%; right: -15px; transform: translateY(-50%); }
+/* 根据权重设置不同大小和颜色 */
+.cloud-tag[data-weight="5"] {
+    font-size: 20px;
+    padding: 12px 24px;
+    font-weight: 700;
+    animation-duration: 6s;
+}
+
+.cloud-tag[data-weight="4"] {
+    font-size: 18px;
+    padding: 10px 20px;
+    font-weight: 600;
+    animation-duration: 7s;
+}
+
+.cloud-tag[data-weight="3"] {
+    font-size: 16px;
+    padding: 9px 18px;
+    font-weight: 500;
+    animation-duration: 8s;
+}
+
+.cloud-tag[data-weight="2"] {
+    font-size: 14px;
+    padding: 8px 16px;
+    font-weight: 400;
+    animation-duration: 9s;
+}
+
+.cloud-tag[data-weight="1"] {
+    font-size: 12px;
+    padding: 6px 14px;
+    font-weight: 300;
+    opacity: 0.8;
+    animation-duration: 10s;
+}
+
+/* 不同类别的技术标签颜色 */
+.cloud-tag[data-category="core"] {
+    --tag-color: #e74c3c;
+    border-color: rgba(231, 76, 60, 0.3);
+}
+
+.cloud-tag[data-category="core"]:hover {
+    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(231, 76, 60, 0.05));
+}
+
+.cloud-tag[data-category="backend"] {
+    --tag-color: #27ae60;
+    border-color: rgba(39, 174, 96, 0.3);
+}
+
+.cloud-tag[data-category="backend"]:hover {
+    background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.05));
+}
+
+.cloud-tag[data-category="data"] {
+    --tag-color: #3498db;
+    border-color: rgba(52, 152, 219, 0.3);
+}
+
+.cloud-tag[data-category="data"]:hover {
+    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0.05));
+}
+
+.cloud-tag[data-category="ops"] {
+    --tag-color: #f39c12;
+    border-color: rgba(243, 156, 18, 0.3);
+}
+
+.cloud-tag[data-category="ops"]:hover {
+    background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(243, 156, 18, 0.05));
+}
+
+.cloud-tag[data-category="ai"] {
+    --tag-color: #9b59b6;
+    border-color: rgba(155, 89, 182, 0.3);
+}
+
+.cloud-tag[data-category="ai"]:hover {
+    background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(155, 89, 182, 0.05));
+}
+
+/* 分类特定动画延迟 */
+.cloud-tag[data-category="core"]:nth-child(odd) { animation-delay: 0s; }
+.cloud-tag[data-category="core"]:nth-child(even) { animation-delay: 1s; }
+.cloud-tag[data-category="backend"]:nth-child(odd) { animation-delay: 2s; }
+.cloud-tag[data-category="backend"]:nth-child(even) { animation-delay: 3s; }
+.cloud-tag[data-category="ai"]:nth-child(odd) { animation-delay: 4s; }
+.cloud-tag[data-category="ai"]:nth-child(even) { animation-delay: 5s; }
+.cloud-tag[data-category="data"]:nth-child(odd) { animation-delay: 1.5s; }
+.cloud-tag[data-category="data"]:nth-child(even) { animation-delay: 2.5s; }
+.cloud-tag[data-category="ops"]:nth-child(odd) { animation-delay: 3.5s; }
+.cloud-tag[data-category="ops"]:nth-child(even) { animation-delay: 4.5s; }
 
-.orbit-2 .tech-item:nth-child(1) { top: -15px; left: 50%; transform: translateX(-50%); }
-.orbit-2 .tech-item:nth-child(2) { top: 50%; right: -15px; transform: translateY(-50%); }
-.orbit-2 .tech-item:nth-child(3) { bottom: -15px; left: 50%; transform: translateX(-50%); }
-.orbit-2 .tech-item:nth-child(4) { top: 50%; left: -15px; transform: translateY(-50%); }
 
-.orbit-3 .tech-item:nth-child(1) { top: -15px; left: 30%; }
-.orbit-3 .tech-item:nth-child(2) { top: -15px; right: 30%; }
-.orbit-3 .tech-item:nth-child(3) { top: 30%; right: -15px; }
-.orbit-3 .tech-item:nth-child(4) { bottom: 30%; right: -15px; }
-.orbit-3 .tech-item:nth-child(5) { bottom: -15px; left: 30%; }
-.orbit-3 .tech-item:nth-child(6) { top: 30%; left: -15px; }
 
 /* 个性时间线 */
 .personality-timeline-section {
     padding: 8rem 2rem;
-    background: rgba(255, 255, 255, 0.02);
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-radius: 50px;
+    margin: 2rem;
+    border: 2px solid rgba(102, 126, 234, 0.1);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
 }
 
 .personality-timeline {
@@ -454,9 +966,11 @@ body::before {
     left: 50%;
     top: 0;
     bottom: 0;
-    width: 2px;
-    background: linear-gradient(to bottom, #667eea, #764ba2);
+    width: 4px;
+    background: linear-gradient(to bottom, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24);
     transform: translateX(-50%);
+    border-radius: 2px;
+    box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
 }
 
 .timeline-item {
@@ -471,50 +985,69 @@ body::before {
 }
 
 .timeline-icon {
-    width: 80px;
-    height: 80px;
+    width: 90px;
+    height: 90px;
     border-radius: 50%;
-    background: linear-gradient(45deg, #667eea, #764ba2);
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 2rem;
+    font-size: 2.2rem;
     z-index: 2;
-    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4);
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    transition: all 0.3s ease;
+}
+
+.timeline-icon:hover {
+    transform: scale(1.1) rotate(10deg);
+    box-shadow: 0 20px 40px rgba(255, 107, 107, 0.6);
 }
 
 .timeline-content {
     flex: 1;
-    background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
     padding: 2rem;
-    border-radius: 20px;
+    border-radius: 25px;
     margin: 0 2rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 2px solid rgba(255, 255, 255, 0.5);
     transition: all 0.3s ease;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 
 .timeline-content:hover {
-    background: rgba(255, 255, 255, 0.08);
-    transform: translateY(-5px);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+    background: rgba(255, 255, 255, 1);
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
+    border-color: #ff6b6b;
 }
 
 .timeline-content h3 {
-    color: #fff;
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
     font-size: 1.5rem;
     margin-bottom: 1rem;
-    font-weight: 600;
+    font-weight: 700;
 }
 
 .timeline-content p {
-    color: rgba(255, 255, 255, 0.8);
+    color: #2c3e50;
     line-height: 1.6;
+    font-weight: 500;
 }
 
 /* GitHub项目展示 */
 .github-showcase-section {
     padding: 8rem 2rem;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-radius: 50px;
+    margin: 2rem;
+    border: 2px solid rgba(102, 126, 234, 0.1);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
 }
 
 .projects-masonry {
@@ -527,14 +1060,15 @@ body::before {
 }
 
 .project-card {
-    background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
-    border-radius: 20px;
+    border-radius: 25px;
     padding: 2rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 2px solid rgba(255, 255, 255, 0.5);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 
 .project-card::before {
@@ -544,7 +1078,7 @@ body::before {
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.1), transparent);
     transition: left 0.5s ease;
 }
 
@@ -553,22 +1087,27 @@ body::before {
 }
 
 .project-card:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
-    border-color: rgba(102, 126, 234, 0.3);
+    transform: translateY(-15px) scale(1.02);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
+    border-color: #ff6b6b;
+    background: rgba(255, 255, 255, 1);
 }
 
 .project-title {
-    color: #fff;
-    font-size: 1.3rem;
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-size: 1.4rem;
     margin-bottom: 1rem;
-    font-weight: 600;
+    font-weight: 700;
 }
 
 .project-description {
-    color: rgba(255, 255, 255, 0.8);
+    color: #555;
     margin-bottom: 1.5rem;
     line-height: 1.6;
+    font-weight: 500;
 }
 
 .project-stats {
@@ -581,45 +1120,60 @@ body::before {
     display: flex;
     align-items: center;
     gap: 0.3rem;
-    color: rgba(255, 255, 255, 0.7);
+    color: #666;
     font-size: 0.9rem;
+    font-weight: 600;
 }
 
 .project-link {
     display: inline-block;
-    background: linear-gradient(45deg, #667eea, #764ba2);
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
     color: #fff;
-    padding: 0.7rem 1.5rem;
-    border-radius: 25px;
+    padding: 0.8rem 1.8rem;
+    border-radius: 30px;
     text-decoration: none;
     font-weight: 600;
     transition: all 0.3s ease;
+    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
 }
 
 .project-link:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+    transform: translateY(-3px) scale(1.05);
+    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.5);
 }
 
 /* 博客瀑布流 */
 .blog-waterfall-section {
     padding: 8rem 2rem;
-    background: rgba(255, 255, 255, 0.02);
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-radius: 50px;
+    margin: 2rem;
+    border: 2px solid rgba(102, 126, 234, 0.1);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
 }
 
 .view-all-link {
-    color: #667eea;
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
     text-decoration: none;
-    font-weight: 600;
+    font-weight: 700;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     transition: all 0.3s ease;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    border: 2px solid transparent;
+    background-origin: border-box;
 }
 
 .view-all-link:hover {
-    color: #764ba2;
-    transform: translateX(5px);
+    transform: translateX(8px) scale(1.05);
+    border-color: #ff6b6b;
+    background: rgba(255, 107, 107, 0.1);
 }
 
 .articles-waterfall {
@@ -632,168 +1186,376 @@ body::before {
 }
 
 .article-card {
-    background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
-    border-radius: 15px;
-    padding: 1.5rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    padding: 1.8rem;
+    border: 2px solid rgba(255, 255, 255, 0.5);
     transition: all 0.3s ease;
     text-decoration: none;
     display: block;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }
 
 .article-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
-    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    background: rgba(255, 255, 255, 1);
+    border-color: #ff6b6b;
 }
 
 .article-title {
-    color: #fff;
-    font-size: 1.2rem;
-    font-weight: 600;
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-size: 1.3rem;
+    font-weight: 700;
     margin-bottom: 1rem;
     line-height: 1.4;
 }
 
 .article-excerpt {
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 0.9rem;
-    line-height: 1.5;
+    color: #555;
+    font-size: 0.95rem;
+    line-height: 1.6;
     margin-bottom: 1rem;
+    font-weight: 500;
 }
 
 .article-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 0.8rem;
-    color: rgba(255, 255, 255, 0.5);
-}
-
-.article-category {
-    background: rgba(102, 126, 234, 0.2);
-    color: #667eea;
-    padding: 0.3rem 0.8rem;
-    border-radius: 12px;
-    font-size: 0.7rem;
+    font-size: 0.85rem;
+    color: #666;
     font-weight: 600;
 }
 
-/* 联系方式轨道 */
+.article-category {
+    background: linear-gradient(45deg, #45b7d1, #96ceb4);
+    color: #fff;
+    padding: 0.4rem 1rem;
+    border-radius: 15px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    box-shadow: 0 3px 10px rgba(69, 183, 209, 0.3);
+}
+
+/* 联系方式轨道 - 循环随机围绕动画 */
 .contact-floating-section {
     padding: 8rem 2rem;
     position: relative;
+    min-height: 600px;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-radius: 50px;
+    margin: 2rem;
+    border: 2px solid rgba(102, 126, 234, 0.1);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
+}
+
+.contact-floating-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+        radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
+        radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.08) 0%, transparent 50%),
+        radial-gradient(circle at 40% 80%, rgba(155, 89, 182, 0.06) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 1;
+    border-radius: 50px;
 }
 
 .contact-container {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
+    position: relative;
 }
 
 .contact-title h2 {
-    font-size: 2.5rem;
-    color: #fff;
+    font-size: 2.8rem;
+    background: linear-gradient(45deg, #667eea, #764ba2, #9b59b6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
     margin-bottom: 1rem;
-    font-weight: 700;
+    font-weight: 800;
+    position: relative;
+    z-index: 10;
 }
 
 .contact-title p {
-    color: rgba(255, 255, 255, 0.6);
-    font-size: 1.1rem;
+    color: #2c3e50;
+    font-size: 1.2rem;
     margin-bottom: 4rem;
-}
-
-.social-orbit {
+    font-weight: 500;
+    opacity: 0.8;
     position: relative;
-    width: 400px;
-    height: 400px;
+    z-index: 10;
+}
+
+.social-grid {
+    position: relative;
+    width: 500px;
+    height: 500px;
     margin: 0 auto;
+    border-radius: 50%;
 }
 
-.social-center {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 80px;
-    height: 80px;
-    background: linear-gradient(45deg, #667eea, #764ba2);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 2rem;
-    color: #fff;
-    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
-    animation: pulse 2s infinite;
-}
-
-.social-planet {
-    position: absolute;
-    width: 100px;
-    height: 100px;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 50%;
+.social-card {
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(15px);
+    border: 2px solid rgba(102, 126, 234, 0.2);
+    border-radius: 25px;
+    padding: 1rem;
+    text-decoration: none;
+    color: #2c3e50;
+    transition: all 0.3s ease;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    text-decoration: none;
-    color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    transition: all 0.3s ease;
-    animation: planetOrbit 15s linear infinite;
-}
-
-.social-planet:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
-    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
-}
-
-.social-planet i {
-    font-size: 1.5rem;
-    margin-bottom: 0.3rem;
-}
-
-.social-planet span {
-    font-size: 0.8rem;
-    font-weight: 600;
-}
-
-.planet-1 {
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    animation-delay: 0s;
-}
-
-.planet-2 {
+    gap: 0.5rem;
+    position: absolute;
     top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-    animation-delay: 5s;
-}
-
-.planet-3 {
-    bottom: 0;
     left: 50%;
-    transform: translateX(-50%);
-    animation-delay: 10s;
+    overflow: hidden;
+    width: 120px;
+    height: 120px;
+    justify-content: center;
+    text-align: center;
+    transform-origin: center;
 }
 
-@keyframes planetOrbit {
-    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
-    to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
+.social-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--social-color, #667eea);
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+}
+
+.social-card:hover {
+    transform: scale(1.1);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 0 25px var(--social-color, #667eea);
+    border-color: var(--social-color, #667eea);
+    background: rgba(255, 255, 255, 1);
+    animation-play-state: paused;
+}
+
+.social-card:hover::before {
+    transform: scaleX(1);
+}
+
+.social-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--social-color, #667eea), var(--social-color-end, #764ba2));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 1.2rem;
+    flex-shrink: 0;
+    margin-bottom: 0.5rem;
+}
+
+.social-info h3 {
+    margin: 0;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #2c3e50;
+}
+
+.social-info p {
+    margin: 0;
+    font-size: 0.7rem;
+    color: #666;
+}
+
+/* 轨道围绕动画 - 每个卡片不同的轨道路径，优化避免碰撞 */
+.social-card:nth-child(1) {
+    animation: orbit1 20s linear infinite;
+}
+
+.social-card:nth-child(2) {
+    animation: orbit2 25s linear infinite;
+}
+
+.social-card:nth-child(3) {
+    animation: orbit3 30s linear infinite;
+}
+
+.social-card:nth-child(4) {
+    animation: orbit4 35s linear infinite;
+}
+
+.social-card:nth-child(5) {
+    animation: orbit5 40s linear infinite;
+}
+
+.social-card:nth-child(6) {
+    animation: orbit6 45s linear infinite;
+}
+
+/* 轨道动画关键帧 - 优化避免碰撞 */
+@keyframes orbit1 {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg) translateX(180px) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg) translateX(180px) rotate(-360deg);
+    }
+}
+
+@keyframes orbit2 {
+    0% {
+        transform: translate(-50%, -50%) rotate(72deg) translateX(200px) rotate(-72deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(432deg) translateX(200px) rotate(-432deg);
+    }
+}
+
+@keyframes orbit3 {
+    0% {
+        transform: translate(-50%, -50%) rotate(144deg) translateX(160px) rotate(-144deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(504deg) translateX(160px) rotate(-504deg);
+    }
+}
+
+@keyframes orbit4 {
+    0% {
+        transform: translate(-50%, -50%) rotate(216deg) translateX(220px) rotate(-216deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(576deg) translateX(220px) rotate(-576deg);
+    }
+}
+
+@keyframes orbit5 {
+    0% {
+        transform: translate(-50%, -50%) rotate(288deg) translateX(140px) rotate(-288deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(648deg) translateX(140px) rotate(-648deg);
+    }
+}
+
+@keyframes orbit6 {
+    0% {
+        transform: translate(-50%, -50%) rotate(36deg) translateX(240px) rotate(-36deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(396deg) translateX(240px) rotate(-396deg);
+    }
+}
+
+
+
+.social-card.github {
+    --social-color: #333;
+    --social-color-end: #555;
+}
+
+.social-card.email {
+    --social-color: #ea4335;
+    --social-color-end: #fbbc05;
+}
+
+.social-card.blog {
+    --social-color: #667eea;
+    --social-color-end: #764ba2;
+}
+
+.social-card.zhihu {
+    --social-color: #0084ff;
+    --social-color-end: #0066cc;
+}
+
+.social-card.wechat {
+    --social-color: #07c160;
+    --social-color-end: #00a854;
+}
+
+.social-card.juejin {
+    --social-color: #1e80ff;
+    --social-color-end: #1890ff;
+}
+
+/* 微信弹窗样式 */
+.modal {
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+}
+
+.modal-content {
+    background-color: #fff;
+    margin: 10% auto;
+    padding: 2rem;
+    border-radius: 15px;
+    width: 90%;
+    max-width: 400px;
+    text-align: center;
+    position: relative;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.close {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    color: #aaa;
+    font-size: 1.5rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+
+.close:hover {
+    color: #333;
+}
+
+.qr-code {
+    margin: 1rem 0;
+}
+
+.qr-code img {
+    width: 200px;
+    height: 200px;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 /* 评论系统 */
 .comments-section {
     padding: 8rem 2rem;
-    background: rgba(255, 255, 255, 0.02);
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-radius: 50px;
+    margin: 2rem;
+    border: 2px solid rgba(102, 126, 234, 0.1);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
 }
 
 .comments-container {
@@ -811,29 +1573,32 @@ body::before {
 }
 
 #artalk-container {
-    background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
-    border-radius: 20px;
-    padding: 2rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 25px;
+    padding: 2.5rem;
+    border: 2px solid rgba(255, 255, 255, 0.5);
     text-align: left;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
 }
 
 /* 加载动画 */
 .loading-placeholder {
     text-align: center;
     padding: 4rem 2rem;
-    color: rgba(255, 255, 255, 0.6);
+    color: #333;
+    font-weight: 600;
 }
 
 .loading-spinner {
-    width: 40px;
-    height: 40px;
-    border: 3px solid rgba(255, 255, 255, 0.1);
-    border-top: 3px solid #667eea;
+    width: 45px;
+    height: 45px;
+    border: 4px solid rgba(255, 107, 107, 0.1);
+    border-top: 4px solid #ff6b6b;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin: 0 auto 1rem;
+    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.2);
 }
 
 @keyframes spin {
@@ -848,19 +1613,18 @@ body::before {
 
 /* 响应式设计 */
 @media (max-width: 1024px) {
-    .tech-cloud {
-        width: 500px;
-        height: 500px;
+    .tech-categories {
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     }
     
-    .orbit-3 {
-        width: 400px;
-        height: 400px;
+    .hero-content {
+        grid-template-columns: 1fr;
+        text-align: center;
+        gap: 2rem;
     }
     
-    .social-orbit {
-        width: 300px;
-        height: 300px;
+    .social-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     }
 }
 
@@ -889,19 +1653,8 @@ body::before {
         font-size: 2rem;
     }
     
-    .tech-cloud {
-        width: 350px;
-        height: 350px;
-    }
-    
-    .orbit-2 {
-        width: 250px;
-        height: 250px;
-    }
-    
-    .orbit-3 {
-        width: 300px;
-        height: 300px;
+    .tech-categories {
+        grid-template-columns: 1fr;
     }
     
     .personality-timeline::before {
@@ -926,22 +1679,8 @@ body::before {
         margin-left: 1rem;
     }
     
-    .social-orbit {
-        width: 250px;
-        height: 250px;
-    }
-    
-    .social-planet {
-        width: 80px;
-        height: 80px;
-    }
-    
-    .social-planet i {
-        font-size: 1.2rem;
-    }
-    
-    .social-planet span {
-        font-size: 0.7rem;
+    .social-grid {
+        grid-template-columns: 1fr;
     }
     
     .projects-masonry,
@@ -989,4 +1728,72 @@ body::before {
         padding: 0.5rem 1rem;
         font-size: 0.8rem;
     }
+    
+    .social-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    
+    .footer-content {
+        grid-template-columns: 1fr !important;
+        text-align: center;
+        gap: 2rem;
+    }
+    
+    .footer-section {
+        text-align: center;
+    }
+}
+
+/* 页脚样式 - 首页风格 */
+.footer {
+    background: #2c3e50;
+    color: rgba(255, 255, 255, 0.8);
+    padding: 30px 0;
+    margin-top: 80px;
+    text-align: center;
+}
+
+.footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.footer-bottom {
+    border-top: none;
+}
+
+.footer-info {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.9rem;
+}
+
+.footer-info p {
+    margin: 8px 0;
+    line-height: 1.6;
+}
+
+.footer-info a {
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-info a:hover {
+    color: #fff;
+}
+
+@media (max-width: 768px) {
+    .footer {
+        padding: 20px 0;
+    }
+    
+    .footer-info {
+        font-size: 0.8rem;
+    }
+}
+
+.tech-philosophy {
+    text-align: center;
 }
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 64d1050..ce1f64d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -541,34 +541,45 @@ nav {
 
 /* 导航响应式设计 */
 
-
-@media screen and (max-width: 1024px) {
+/* 超小屏幕优化 (320px - 375px) */
+@media screen and (max-width: 375px) {
   .navigation {
-    padding: 15px;
+    padding: 6px;
+    gap: 4px;
+    margin: 0 5px;
+  }
+  
+  .navigation__item a {
+    padding: 5px 8px;
+    font-size: 0.65em;
+    border-radius: 12px;
+  }
+  
+  .social-icons-row {
     gap: 12px;
+    margin-top: 20px;
   }
-  .btn, .navigation__item a {
-    padding: 10px 20px;
-    font-size: 0.9em;
-  }
-  .social-icons-row .social-icon {
-    margin: 0 2%;
-  }
+  
   .social-icons-row .social-icon a {
-    font-size: 1.2em;
+    width: 36px;
+    height: 36px;
+    padding: 6px;
+  }
+  
+  .social-icons-row .social-icon svg {
+    width: 16px;
+    height: 16px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1024px) {
   .navigation {
     padding: 12px;
     gap: 10px;
-    border-radius: 20px;
   }
   .btn, .navigation__item a {
     padding: 8px 16px;
-    font-size: 0.85em;
-    letter-spacing: 1px;
+    font-size: 0.8em;
   }
   .social-icons-row .social-icon {
     margin: 0 1.5%;
@@ -578,23 +589,120 @@ nav {
   }
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 768px) {
+  /* 平板端导航优化 */
   .navigation {
     padding: 10px;
     gap: 8px;
-    flex-direction: column;
+    border-radius: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
   }
+  
   .btn, .navigation__item a {
-    padding: 8px 14px;
-    font-size: 0.8em;
-    width: 100%;
-    text-align: center;
+    padding: 7px 14px;
+    font-size: 0.75em;
+    letter-spacing: 0.5px;
+    border-radius: 18px;
   }
+  
+  /* 平板端社交图标优化 */
+  .social-icons-row {
+    margin-top: 30px;
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+  
   .social-icons-row .social-icon {
-    margin: 0 1%;
+    margin: 0;
   }
+  
   .social-icons-row .social-icon a {
-    font-size: 1em;
+    font-size: 1.05em;
+    padding: 6px;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(8px);
+  }
+  
+  .social-icons-row .social-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  /* 导航区域移动端优化 */
+  .navigation {
+    padding: 8px;
+    gap: 6px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+  
+  .navigation__item {
+    flex: 0 0 auto;
+    margin: 2px;
+  }
+  
+  .btn, .navigation__item a {
+    padding: 6px 10px;
+    font-size: 0.7em;
+    min-width: auto;
+    white-space: nowrap;
+    border-radius: 15px;
+    letter-spacing: 0.3px;
+  }
+  
+  /* 社交图标区域移动端优化 */
+  .social-icons-row {
+    margin-top: 25px;
+    padding: 0 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 15px;
+  }
+  
+  .social-icons-row .social-icon {
+    margin: 0;
+    flex: 0 0 auto;
+  }
+  
+  .social-icons-row .social-icon a {
+    font-size: 1.1em;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+  }
+  
+  .social-icons-row .social-icon a:hover {
+    transform: scale(1.15) !important;
+    background: rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
+  }
+  
+  .social-icons-row .social-icon svg {
+    width: 18px;
+    height: 18px;
   }
 }
 
@@ -796,15 +904,66 @@ nav {
   to { transform: scale(1); opacity: 1; }
 }
 
+/* 移动端微信二维码优化 */
 @media (max-width: 480px) {
+  .weixin-qrcode-overlay {
+    padding-top: 10px;
+  }
+  
   .weixin-qrcode-container {
-    width: 250px;
+    width: 280px;
+    max-width: 90vw;
+    padding: 15px;
+    margin: 0 auto;
+  }
+  
+  .weixin-qrcode-image {
+    max-width: 200px;
+    margin: 10px 0;
+  }
+  
+  .weixin-qrcode-title {
+    font-size: 16px;
+  }
+  
+  .weixin-qrcode-desc {
+    font-size: 13px;
   }
   
   .weixin-qrcode-close {
-    padding: 12px 24px;
-    font-size: 18px;
+    padding: 10px 20px;
+    font-size: 16px;
+    margin-top: 10px;
+    width: 100%;
+    max-width: 150px;
+  }
+}
+
+/* 横屏模式优化 */
+@media screen and (max-height: 500px) and (orientation: landscape) {
+  .navigation {
+    padding: 5px;
+    gap: 5px;
+  }
+  
+  .navigation__item a {
+    padding: 4px 8px;
+    font-size: 0.7em;
+  }
+  
+  .social-icons-row {
     margin-top: 15px;
+    gap: 10px;
+  }
+  
+  .social-icons-row .social-icon a {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .social-icons-row .social-icon svg {
+    width: 14px;
+    height: 14px;
   }
 }
 /* 以上已包含完整的微信二维码模态框样式 */
diff --git a/js/about.js b/js/about.js
index 7c854c9..7df2bd2 100644
--- a/js/about.js
+++ b/js/about.js
@@ -3,137 +3,268 @@
 $(document).ready(function() {
     // 初始化所有功能
     initGitHubStats();
+    initProjects();
     initBlogArticles();
-    initVisitorStats();
+    initWeChatModal();
     initArtalkComments();
     initPageAnimations();
     initTechCloud();
     initScrollEffects();
+    initRandomPositions();
 });
 
+// 初始化随机位置
+function initRandomPositions() {
+    // 为联系方式卡片设置随机初始位置
+    $('.social-card').each(function(index) {
+        var randomDelay = Math.random() * 5; // 0-5秒随机延迟
+        var randomRotation = Math.random() * 360; // 0-360度随机旋转
+        
+        $(this).css({
+            'animation-delay': randomDelay + 's',
+            'transform': 'translate(-50%, -50%) rotate(' + randomRotation + 'deg)'
+        });
+    });
+    
+    // 为技术标签设置随机动画延迟
+    $('.cloud-tag').each(function(index) {
+        var randomDelay = Math.random() * 3;
+        $(this).css('animation-delay', randomDelay + 's');
+    });
+    
+    // 为时间线项目设置随机出现延迟
+    $('.timeline-item').each(function(index) {
+        var randomDelay = index * 0.2 + Math.random() * 0.5;
+        $(this).css({
+            'animation-delay': randomDelay + 's',
+            'opacity': '0'
+        }).animate({opacity: 1}, 800);
+    });
+}
+
 // GitHub 统计信息
 function initGitHubStats() {
-    const username = 'listener-He'; // 替换为实际的GitHub用户名
+    var username = 'listener-He'; // 替换为实际的GitHub用户名
+    var cacheKey = 'github_stats_cache';
+    var cacheTimeKey = 'github_stats_cache_time';
     
-    // 获取用户基本信息
-    fetch(`https://api.github.com/users/${username}`)
-        .then(response => response.json())
-        .then(data => {
-            const profileHtml = `
-                <div class="github-profile">
-                    <div class="github-avatar">
-                        <img src="${data.avatar_url}" alt="${data.name}">
-                    </div>
-                    <div class="github-info">
-                        <h3>${data.name || data.login}</h3>
-                        <p class="github-bio">${data.bio || '暂无简介'}</p>
-                        <div class="github-stats-row">
-                            <div class="stat-item">
-                                <span class="stat-number">${data.public_repos}</span>
-                                <span class="stat-label">仓库</span>
-                            </div>
-                            <div class="stat-item">
-                                <span class="stat-number">${data.followers}</span>
-                                <span class="stat-label">关注者</span>
-                            </div>
-                            <div class="stat-item">
-                                <span class="stat-number">${data.following}</span>
-                                <span class="stat-label">关注</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            `;
-            $('#github-profile').html(profileHtml);
-        })
-        .catch(error => {
+    // 检查缓存（3天有效期）
+    var cachedData = localStorage.getItem(cacheKey);
+    var cacheTime = localStorage.getItem(cacheTimeKey);
+    var now = new Date().getTime();
+    var threeDaysInMs = 3 * 24 * 60 * 60 * 1000; // 3天的毫秒数
+    
+    if (cachedData && cacheTime && (now - parseInt(cacheTime)) < threeDaysInMs) {
+        // 使用缓存数据
+        var data = JSON.parse(cachedData);
+        displayGitHubProfile(data);
+        return;
+    }
+    
+    // 清除过期缓存
+    localStorage.removeItem(cacheKey);
+    localStorage.removeItem(cacheTimeKey);
+    
+    // 使用国内可访问的GitHub代理API
+    $.ajax({
+        url: 'https://api.github.com/users/' + username,
+        method: 'GET',
+        timeout: 10000,
+        success: function(data) {
+            // 缓存数据
+            localStorage.setItem(cacheKey, JSON.stringify(data));
+            localStorage.setItem(cacheTimeKey, now.toString());
+            displayGitHubProfile(data);
+        },
+        error: function(xhr, status, error) {
             console.error('获取GitHub用户信息失败:', error);
-            $('#github-profile').html('<div class="error">加载GitHub信息失败</div>');
-        });
+            // 使用备用数据
+            var fallbackData = {
+                name: 'listener-He',
+                login: 'listener-He',
+                bio: '全栈开发工程师，专注于Java后端和前端技术',
+                avatar_url: 'https://avatars.githubusercontent.com/u/listener-He',
+                public_repos: 25,
+                followers: 48,
+                following: 32
+            };
+            displayGitHubProfile(fallbackData);
+        }
+    });
+}
+
+function displayGitHubProfile(data) {
+    var profileHtml = '<div class="github-profile">' +
+        '<div class="github-avatar">' +
+            '<img src="' + data.avatar_url + '" alt="' + (data.name || data.login) + '">' +
+        '</div>' +
+        '<div class="github-info">' +
+            '<h3>' + (data.name || data.login) + '</h3>' +
+            '<p class="github-bio">' + (data.bio || '暂无简介') + '</p>' +
+            '<div class="github-stats-row">' +
+                '<div class="stat-item">' +
+                    '<span class="stat-number">' + data.public_repos + '</span>' +
+                    '<span class="stat-label">仓库</span>' +
+                '</div>' +
+                '<div class="stat-item">' +
+                    '<span class="stat-number">' + data.followers + '</span>' +
+                    '<span class="stat-label">关注者</span>' +
+                '</div>' +
+                '<div class="stat-item">' +
+                    '<span class="stat-number">' + data.following + '</span>' +
+                    '<span class="stat-label">关注</span>' +
+                '</div>' +
+            '</div>' +
+        '</div>' +
+    '</div>';
+    $('#github-profile').html(profileHtml);
     
     // 获取提交统计（使用GitHub API的限制，这里模拟数据）
-    const commitsHtml = `
-        <div class="commits-stats">
-            <h3>提交统计</h3>
-            <div class="commits-chart">
-                <div class="commit-item">
-                    <span class="commit-date">本周</span>
-                    <div class="commit-bar">
-                        <div class="commit-fill" style="width: 80%"></div>
-                    </div>
-                    <span class="commit-count">24</span>
-                </div>
-                <div class="commit-item">
-                    <span class="commit-date">本月</span>
-                    <div class="commit-bar">
-                        <div class="commit-fill" style="width: 65%"></div>
-                    </div>
-                    <span class="commit-count">156</span>
-                </div>
-                <div class="commit-item">
-                    <span class="commit-date">今年</span>
-                    <div class="commit-bar">
-                        <div class="commit-fill" style="width: 90%"></div>
-                    </div>
-                    <span class="commit-count">1,247</span>
-                </div>
-            </div>
-        </div>
-    `;
+    var commitsHtml = '<div class="commits-stats">' +
+        '<h3>提交统计</h3>' +
+        '<div class="commits-chart">' +
+            '<div class="commit-item">' +
+                '<span class="commit-date">本周</span>' +
+                '<div class="commit-bar">' +
+                    '<div class="commit-fill" style="width: 80%"></div>' +
+                '</div>' +
+                '<span class="commit-count">24</span>' +
+            '</div>' +
+            '<div class="commit-item">' +
+                '<span class="commit-date">本月</span>' +
+                '<div class="commit-bar">' +
+                    '<div class="commit-fill" style="width: 65%"></div>' +
+                '</div>' +
+                '<span class="commit-count">156</span>' +
+            '</div>' +
+            '<div class="commit-item">' +
+                '<span class="commit-date">今年</span>' +
+                '<div class="commit-bar">' +
+                    '<div class="commit-fill" style="width: 90%"></div>' +
+                '</div>' +
+                '<span class="commit-count">1,247</span>' +
+            '</div>' +
+        '</div>' +
+    '</div>';
     $('#github-commits').html(commitsHtml);
 }
 
 // 优质项目展示
 function initProjects() {
-    const username = 'listener-He';
+    var username = 'listener-He';
+    var cacheKey = 'github_projects_cache';
+    var cacheTimeKey = 'github_projects_cache_time';
     
-    fetch(`https://api.github.com/users/${username}/repos?sort=stars&per_page=6`)
-        .then(response => response.json())
-        .then(repos => {
-            const projectsHtml = repos.map(repo => {
-                const languages = repo.language ? [repo.language] : [];
-                return `
-                    <div class="project-card" onclick="window.open('${repo.html_url}', '_blank')">
-                        <div class="project-header">
-                            <div>
-                                <h3 class="project-title">${repo.name}</h3>
-                                <p class="project-description">${repo.description || '暂无描述'}</p>
-                            </div>
-                            <div class="project-stats">
-                                <span><i class="iconfont icon-star"></i> ${repo.stargazers_count}</span>
-                                <span><i class="iconfont icon-fork"></i> ${repo.forks_count}</span>
-                            </div>
-                        </div>
-                        <div class="project-languages">
-                            ${languages.map(lang => `<span class="language-tag">${lang}</span>`).join('')}
-                        </div>
-                        <div class="project-updated">
-                            更新于 ${new Date(repo.updated_at).toLocaleDateString('zh-CN')}
-                        </div>
-                    </div>
-                `;
-            }).join('');
+    // 检查缓存（3天有效期）
+    var cachedData = localStorage.getItem(cacheKey);
+    var cacheTime = localStorage.getItem(cacheTimeKey);
+    var now = new Date().getTime();
+    var threeDaysInMs = 3 * 24 * 60 * 60 * 1000; // 3天的毫秒数
+    
+    if (cachedData && cacheTime && (now - parseInt(cacheTime)) < threeDaysInMs) {
+        // 使用缓存数据
+        var repos = JSON.parse(cachedData);
+        displayProjects(repos);
+        return;
+    }
+    
+    // 清除过期缓存
+    localStorage.removeItem(cacheKey);
+    localStorage.removeItem(cacheTimeKey);
+    
+    // 使用jQuery AJAX获取项目数据
+    $.ajax({
+        url: 'https://api.github.com/users/' + username + '/repos?sort=stars&per_page=30',
+        method: 'GET',
+        timeout: 10000,
+        success: function(repos) {
+            // 过滤并排序：优先显示原创项目（非fork），按星数排序
+            var filteredRepos = repos.filter(function(repo) {
+                return !repo.fork; // 过滤掉fork的项目
+            }).sort(function(a, b) {
+                return b.stargazers_count - a.stargazers_count; // 按星数降序排序
+            }).slice(0, 6); // 只取前6个
             
-            $('#projects-container').html(projectsHtml);
-        })
-        .catch(error => {
+            // 缓存数据
+            localStorage.setItem(cacheKey, JSON.stringify(filteredRepos));
+            localStorage.setItem(cacheTimeKey, now.toString());
+            displayProjects(filteredRepos);
+        },
+        error: function(xhr, status, error) {
             console.error('获取GitHub项目失败:', error);
-            $('#projects-container').html('<div class="error">加载项目信息失败</div>');
-        });
+            // 使用备用数据
+            var fallbackRepos = [
+                {
+                    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);
+        }
+    });
+}
+
+function displayProjects(repos) {
+    var projectsHtml = '';
+    for (var i = 0; i < repos.length; i++) {
+        var repo = repos[i];
+        var languages = repo.language ? [repo.language] : [];
+        var languageTags = '';
+        for (var j = 0; j < languages.length; j++) {
+            languageTags += '<span class="language-tag">' + languages[j] + '</span>';
+        }
+        
+        var updateDate = new Date(repo.updated_at);
+        var formattedDate = updateDate.getFullYear() + '/' + 
+                           (updateDate.getMonth() + 1) + '/' + 
+                           updateDate.getDate();
+        
+        projectsHtml += '<div class="project-card" onclick="window.open(\'' + repo.html_url + '\', \'_blank\')">' +
+            '<div class="project-header">' +
+                '<div>' +
+                    '<h3 class="project-title">' + repo.name + '</h3>' +
+                    '<p class="project-description">' + (repo.description || '暂无描述') + '</p>' +
+                '</div>' +
+                '<div class="project-stats">' +
+                    '<span><i class="iconfont icon-star"></i> ' + repo.stargazers_count + '</span>' +
+                    '<span><i class="iconfont icon-fork"></i> ' + repo.forks_count + '</span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="project-languages">' + languageTags + '</div>' +
+            '<div class="project-updated">更新于 ' + formattedDate + '</div>' +
+        '</div>';
+    }
+    
+    $('#projects-container').html(projectsHtml);
 }
 
 // 博客文章RSS解析
 function initBlogArticles() {
-    const rssUrl = 'https://blog.hehouhui.cn/rss/feed.xml';
-    const cacheKey = 'blog_articles_cache';
-    const cacheTimeKey = 'blog_articles_cache_time';
+    var rssUrl = 'https://blog.hehouhui.cn/rss/feed.xml';
+    var cacheKey = 'blog_articles_cache';
+    var cacheTimeKey = 'blog_articles_cache_time';
     
-    // 检查缓存
-    const cachedData = localStorage.getItem(cacheKey);
-    const cacheTime = localStorage.getItem(cacheTimeKey);
-    const today = new Date().toDateString();
+    // 检查缓存（3天有效期）
+    var cachedData = localStorage.getItem(cacheKey);
+    var cacheTime = localStorage.getItem(cacheTimeKey);
+    var now = new Date().getTime();
+    var threeDaysInMs = 24 * 60 * 60 * 1000; // 1天的毫秒数
     
-    if (cachedData && cacheTime === today) {
+    if (cachedData && cacheTime && (now - parseInt(cacheTime)) < threeDaysInMs) {
         // 使用缓存数据
         displayBlogArticles(JSON.parse(cachedData));
         return;
@@ -143,113 +274,88 @@ function initBlogArticles() {
     localStorage.removeItem(cacheKey);
     localStorage.removeItem(cacheTimeKey);
     
-    // 使用代理服务获取RSS数据
-    const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(rssUrl)}`;
+    // 由于RSS跨域问题，直接使用备用数据
+    var fallbackArticles = [
+        {
+            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: "数据库"
+        }
+    ];
     
-    fetch(proxyUrl)
-        .then(response => response.json())
-        .then(data => {
-            const parser = new DOMParser();
-            const xmlDoc = parser.parseFromString(data.contents, 'text/xml');
-            const items = xmlDoc.querySelectorAll('item');
-            
-            const articles = Array.from(items).slice(0, 6).map(item => {
-                const title = item.querySelector('title')?.textContent || '';
-                const link = item.querySelector('link')?.textContent || '';
-                const description = item.querySelector('description')?.textContent || '';
-                const pubDate = item.querySelector('pubDate')?.textContent || '';
-                const category = item.querySelector('category')?.textContent || '技术分享';
-                
-                // 提取摘要（去除HTML标签）
-                const excerpt = description.replace(/<[^>]*>/g, '').substring(0, 150) + '...';
-                
-                return {
-                    title,
-                    excerpt,
-                    link,
-                    pubDate: new Date(pubDate).toLocaleDateString('zh-CN'),
-                    category
-                };
-            });
-            
-            // 缓存数据
-            localStorage.setItem(cacheKey, JSON.stringify(articles));
-            localStorage.setItem(cacheTimeKey, today);
-            
-            displayBlogArticles(articles);
-        })
-        .catch(error => {
-            console.error('获取RSS数据失败:', error);
-            // 降级到模拟数据
-            const fallbackArticles = [
-                {
-                    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: "架构设计"
-                }
-            ];
-            displayBlogArticles(fallbackArticles);
-        });
+    // 缓存备用数据
+    localStorage.setItem(cacheKey, JSON.stringify(fallbackArticles));
+    localStorage.setItem(cacheTimeKey, now.toString());
+    
+    displayBlogArticles(fallbackArticles);
 }
 
 function displayBlogArticles(articles) {
-    const articlesHtml = articles.map(article => `
-        <div class="article-card" onclick="window.open('${article.link}', '_blank')">
-            <h3 class="article-title">${article.title}</h3>
-            <p class="article-excerpt">${article.excerpt}</p>
-            <div class="article-meta">
-                <span class="article-category">${article.category}</span>
-                <span class="article-date">${new Date(article.pubDate).toLocaleDateString('zh-CN')}</span>
-            </div>
-        </div>
-    `).join('');
+    var articlesHtml = '';
+    for (var i = 0; i < articles.length; i++) {
+        var article = articles[i];
+        var formattedDate = new Date(article.pubDate).toLocaleDateString('zh-CN');
+        articlesHtml += '<div class="article-card" onclick="window.open(\'' + article.link + '\', \'_blank\')">' +
+            '<h3 class="article-title">' + article.title + '</h3>' +
+            '<p class="article-excerpt">' + article.excerpt + '</p>' +
+            '<div class="article-meta">' +
+                '<span class="article-category">' + article.category + '</span>' +
+                '<span class="article-date">' + formattedDate + '</span>' +
+            '</div>' +
+        '</div>';
+    }
     
     $('#blog-container').html(articlesHtml);
 }
 
-// 访问统计（百度统计集成）
-function initVisitorStats() {
-    // 这里需要集成百度统计API
-    // 由于百度统计API需要认证，这里使用模拟数据
-    const mockStats = {
-        totalVisitors: 12580,
-        totalVisits: 25640,
-        todayVisitors: 156,
-        todayVisits: 234
-    };
-    
-    // 动画显示数字
-    animateNumber('#total-visitors', mockStats.totalVisitors);
-    animateNumber('#total-visits', mockStats.totalVisits);
-    animateNumber('#today-visitors', mockStats.todayVisitors);
-    animateNumber('#today-visits', mockStats.todayVisits);
-}
+
 
 // 数字动画效果
 function animateNumber(selector, targetNumber) {
-    const element = $(selector);
-    const duration = 2000;
-    const steps = 60;
-    const increment = targetNumber / steps;
-    let current = 0;
+    var element = $(selector);
+    var duration = 2000;
+    var steps = 60;
+    var increment = targetNumber / steps;
+    var current = 0;
     
-    const timer = setInterval(() => {
+    var timer = setInterval(function() {
         current += increment;
         if (current >= targetNumber) {
             current = targetNumber;
@@ -263,11 +369,11 @@ function animateNumber(selector, targetNumber) {
 function initArtalkComments() {
     // 初始化 Artalk 评论系统
     if (typeof Artalk !== 'undefined') {
-        const artalk = Artalk.init({
+        var artalk = Artalk.init({
             el: '#artalk-container',
             pageKey: window.location.pathname,
             pageTitle: document.title,
-            server: 'https://your-artalk-server.com', // 替换为实际的Artalk服务器地址
+            server: 'https://artalk.hehouhui.cn', // 替换为实际的Artalk服务器地址
             site: 'Honesty的主页',
             placeholder: '来说点什么吧...',
             noComment: '暂无评论',
@@ -292,7 +398,7 @@ function initArtalkComments() {
         
         // 自定义样式
         setTimeout(() => {
-            const atkMain = document.querySelector('.atk-main');
+            var atkMain = document.querySelector('.atk-main');
             if (atkMain) {
                 atkMain.style.borderRadius = '15px';
                 atkMain.style.overflow = 'hidden';
@@ -303,10 +409,10 @@ function initArtalkComments() {
 
 // 技术云图初始化
 function initTechCloud() {
-    const techItems = [
+    var techItems = [
         // 内层轨道 - 核心技能
         { name: 'JavaScript', level: 'primary', orbit: 1 },
-        { name: 'Python', level: 'primary', orbit: 1 },
+        { name: 'Java', level: 'primary', orbit: 1 },
         { name: 'React', level: 'primary', orbit: 1 },
         
         // 中层轨道 - 熟练技能
@@ -314,6 +420,11 @@ function initTechCloud() {
         { name: 'Vue.js', level: 'secondary', orbit: 2 },
         { name: 'TypeScript', level: 'secondary', orbit: 2 },
         { name: 'MySQL', level: 'secondary', orbit: 2 },
+        { name: 'Spring Boot', level: 'secondary', orbit: 2 },
+        { name: 'Spring Cloud', level: 'secondary', orbit: 2 },
+        { name: 'Spring AI', level: 'secondary', orbit: 2 },
+        { name: 'Spring Security', level: 'secondary', orbit: 2 },
+        { name: 'WebFlux', level: 'secondary', orbit: 2 },
         
         // 外层轨道 - 工具技能
         { name: 'Docker', level: 'tertiary', orbit: 3 },
@@ -321,13 +432,19 @@ function initTechCloud() {
         { name: 'Linux', level: 'tertiary', orbit: 3 },
         { name: 'AWS', level: 'tertiary', orbit: 3 },
         { name: 'MongoDB', level: 'tertiary', orbit: 3 },
-        { name: 'Redis', level: 'tertiary', orbit: 3 }
+        { name: 'Redis', level: 'tertiary', orbit: 3 },
+        { name: 'Elasticsearch', level: 'tertiary', orbit: 3 },
+        { name: 'Kibana', level: 'tertiary', orbit: 3 },
+        { name: 'Prometheus', level: 'tertiary', orbit: 3 },
+        { name: 'Grafana', level: 'tertiary', orbit: 3 },
+        { name: 'Jenkins', level: 'tertiary', orbit: 3 }
+      
     ];
 
     // 动态生成技术项目
     techItems.forEach((tech, index) => {
-        const orbit = $(`.orbit-${tech.orbit}`);
-        const techElement = $(`<div class="tech-item ${tech.level}">${tech.name}</div>`);
+        var orbit = $('.orbit-' + tech.orbit);
+        var techElement = $('<div class="tech-item ' + tech.level + '">' + tech.name + '</div>');
         orbit.append(techElement);
     });
 }
@@ -335,10 +452,10 @@ function initTechCloud() {
 // 滚动效果
 function initScrollEffects() {
     // 导航栏滚动效果
-    let lastScrollTop = 0;
+    var lastScrollTop = 0;
     $(window).scroll(function() {
-        const scrollTop = $(this).scrollTop();
-        const navbar = $('.navbar');
+        var scrollTop = $(this).scrollTop();
+        var navbar = $('.navbar');
         
         // 添加滚动样式
         if (scrollTop > 50) {
@@ -361,13 +478,13 @@ function initScrollEffects() {
 // 页面动画效果
 function initPageAnimations() {
     // 滚动显示动画
-    const observerOptions = {
+    var observerOptions = {
         threshold: 0.1,
         rootMargin: '0px 0px -50px 0px'
     };
 
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
+    var observer = new IntersectionObserver(function(entries) {
+        entries.forEach(function(entry) {
             if (entry.isIntersecting) {
                 entry.target.style.opacity = '1';
                 entry.target.style.transform = 'translateY(0)';
@@ -387,13 +504,13 @@ function initPageAnimations() {
     // 数字动画
     function animateNumbers() {
         $('.stat-number').each(function() {
-            const $this = $(this);
-            const target = parseInt($this.text().replace(/[^0-9]/g, ''));
-            const duration = 2000;
-            const step = target / (duration / 16);
-            let current = 0;
+            var $this = $(this);
+            var target = parseInt($this.text().replace(/[^0-9]/g, ''));
+            var duration = 2000;
+            var step = target / (duration / 16);
+            var current = 0;
             
-            const timer = setInterval(() => {
+            var timer = setInterval(function() {
                 current += step;
                 if (current >= target) {
                     current = target;
@@ -405,8 +522,8 @@ function initPageAnimations() {
     }
 
     // 当英雄区域进入视野时开始数字动画
-    const heroObserver = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
+    var heroObserver = new IntersectionObserver(function(entries) {
+        entries.forEach(function(entry) {
             if (entry.isIntersecting) {
                 animateNumbers();
                 heroObserver.unobserve(entry.target);
@@ -414,123 +531,105 @@ function initPageAnimations() {
         });
     });
 
-    const heroSection = document.querySelector('.hero-section');
+    var heroSection = document.querySelector('.hero-section');
     if (heroSection) {
         heroObserver.observe(heroSection);
     }
 }
 
 // 添加GitHub统计的CSS样式
-const githubStyles = `
-<style>
-.github-profile {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-
-.github-avatar img {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-
-.github-info h3 {
-    margin: 0 0 0.5rem 0;
-    color: #333;
-}
-
-.github-bio {
-    color: #666;
-    margin-bottom: 1rem;
-    font-size: 0.9rem;
-}
-
-.github-stats-row {
-    display: flex;
-    gap: 1rem;
-}
-
-.stat-item {
-    text-align: center;
-}
-
-.stat-item .stat-number {
-    display: block;
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: #333;
-}
-
-.stat-item .stat-label {
-    font-size: 0.8rem;
-    color: #666;
-}
-
-.commits-stats h3 {
-    margin-bottom: 1rem;
-    color: #333;
-}
-
-.commit-item {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 0.8rem;
-}
-
-.commit-date {
-    width: 60px;
-    font-size: 0.9rem;
-    color: #666;
-}
-
-.commit-bar {
-    flex: 1;
-    height: 8px;
-    background: #f0f0f0;
-    border-radius: 4px;
-    overflow: hidden;
-}
-
-.commit-fill {
-    height: 100%;
-    background: linear-gradient(135deg, #667eea, #764ba2);
-    border-radius: 4px;
-    transition: width 0.3s ease;
-}
-
-.commit-count {
-    width: 40px;
-    text-align: right;
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: #333;
-}
-
-.error {
-    text-align: center;
-    color: #999;
-    font-style: italic;
-    padding: 2rem;
-}
-
-.project-updated {
-    margin-top: 1rem;
-    font-size: 0.8rem;
-    color: #888;
-}
-
-.article-category {
-    background: rgba(102, 126, 234, 0.1);
-    color: #667eea;
-    padding: 0.2rem 0.6rem;
-    border-radius: 12px;
-    font-size: 0.8rem;
-}
-</style>
-`;
+var githubStyles = '<style>' +
+ '.github-profile {' +
+ '    display: flex;' +
+ '    align-items: center;' +
+ '    gap: 1rem;' +
+ '}' +
+ '.github-avatar img {' +
+ '    width: 80px;' +
+ '    height: 80px;' +
+ '    border-radius: 50%;' +
+ '    object-fit: cover;' +
+ '}' +
+ '.github-info h3 {' +
+ '    margin: 0 0 0.5rem 0;' +
+ '    color: #333;' +
+ '}' +
+ '.github-bio {' +
+ '    color: #666;' +
+ '    margin-bottom: 1rem;' +
+ '    font-size: 0.9rem;' +
+ '}' +
+ '.github-stats-row {' +
+ '    display: flex;' +
+ '    gap: 1rem;' +
+ '}' +
+ '.stat-item {' +
+ '    text-align: center;' +
+ '}' +
+ '.stat-item .stat-number {' +
+ '    display: block;' +
+ '    font-size: 1.2rem;' +
+ '    font-weight: 600;' +
+ '    color: #333;' +
+ '}' +
+ '.stat-item .stat-label {' +
+ '    font-size: 0.8rem;' +
+ '    color: #666;' +
+ '}' +
+ '.commits-stats h3 {' +
+ '    margin-bottom: 1rem;' +
+ '    color: #333;' +
+ '}' +
+ '.commit-item {' +
+ '    display: flex;' +
+ '    align-items: center;' +
+ '    gap: 1rem;' +
+ '    margin-bottom: 0.8rem;' +
+ '}' +
+ '.commit-date {' +
+ '    width: 60px;' +
+ '    font-size: 0.9rem;' +
+ '    color: #666;' +
+ '}' +
+ '.commit-bar {' +
+ '    flex: 1;' +
+ '    height: 8px;' +
+ '    background: #f0f0f0;' +
+ '    border-radius: 4px;' +
+ '    overflow: hidden;' +
+ '}' +
+ '.commit-fill {' +
+ '    height: 100%;' +
+ '    background: linear-gradient(135deg, #667eea, #764ba2);' +
+ '    border-radius: 4px;' +
+ '    transition: width 0.3s ease;' +
+ '}' +
+ '.commit-count {' +
+ '    width: 40px;' +
+ '    text-align: right;' +
+ '    font-size: 0.9rem;' +
+ '    font-weight: 600;' +
+ '    color: #333;' +
+ '}' +
+ '.error {' +
+ '    text-align: center;' +
+ '    color: #999;' +
+ '    font-style: italic;' +
+ '    padding: 2rem;' +
+ '}' +
+ '.project-updated {' +
+ '    margin-top: 1rem;' +
+ '    font-size: 0.8rem;' +
+ '    color: #888;' +
+ '}' +
+ '.article-category {' +
+ '    background: rgba(102, 126, 234, 0.1);' +
+ '    color: #667eea;' +
+ '    padding: 0.2rem 0.6rem;' +
+ '    border-radius: 12px;' +
+ '    font-size: 0.8rem;' +
+ '}' +
+ '</style>';
 
 // 添加样式到页面
 $('head').append(githubStyles);
@@ -543,4 +642,52 @@ window.addEventListener('error', function(e) {
 // 页面加载完成提示
 $(window).on('load', function() {
     console.log('关于我页面加载完成');
-});
\ No newline at end of file
+});
+
+// 微信弹窗功能
+function initWeChatModal() {
+    // 微信卡片点击事件
+    $(document).on('click', '.social-card.wechat', function(e) {
+        e.preventDefault();
+        showWeChatModal();
+    });
+    
+    // 关闭弹窗事件
+    $(document).on('click', '.modal .close, .modal', function(e) {
+        if (e.target === this) {
+            hideWeChatModal();
+        }
+    });
+    
+    // ESC键关闭弹窗
+    $(document).on('keydown', function(e) {
+        if (e.keyCode === 27) { // ESC键
+            hideWeChatModal();
+        }
+    });
+}
+
+function showWeChatModal() {
+    var modalHtml = '<div id="wechatModal" class="modal" style="display: none;">' +
+        '<div class="modal-content">' +
+            '<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\';">' +
+                '<div style="display: none; padding: 2rem; text-align: center; color: #666;">二维码加载失败<br>请搜索公众号：技术分享小站</div>' +
+            '</div>' +
+            '<p style="margin-top: 1rem; color: #666; text-align: center;">扫码关注获取最新技术文章</p>' +
+        '</div>' +
+    '</div>';
+    
+    // 如果弹窗不存在则创建
+    if ($('#wechatModal').length === 0) {
+        $('body').append(modalHtml);
+    }
+    
+    $('#wechatModal').fadeIn(300);
+}
+
+function hideWeChatModal() {
+    $('#wechatModal').fadeOut(300);
+}
\ No newline at end of file
