fix(ui): 全面 UI/UX 优化 - 头像彩色化 + 文字对比度增强

关键修复:
1. 头像优化:
   - 移除所有 grayscale filter，确保头像彩色显示
   - 添加紫色渐变边框环效果
   - 悬停时发光动画增强
   - 暗色模式下保持原色

2. Hero 文字对比度:
   - 增强背景遮罩渐变 (0.85-0.6-0.75)
   - 三层 text-shadow 确保可读性
   - 加粗字体 (800) + 增大字号
   - 字母间距优化

3. 配置更新:
   - 排除 seo_*.md 和 *optimization*.md 文件
   - 删除误入博客的 SEO 报告文件

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: calderbuild

_config.yml

@@ -52,6 +52,9 @@ exclude:
     "PERFORMANCE-OPTIMIZATION.md",
     "*-REPORT*.md",
     "*报告*.md",
+    "seo_*.md",
+    "*optimization*.md",
+    "*SEO*.md",
   ]
 anchorjs: true # if you want to customize anchor. check out line:181 of `post.html`
 # If you have timezone issue (e.g. #68) in China, uncomment to use this:

less/dark-mode.less

@@ -489,14 +489,22 @@
 }
 
 // Dark mode image adjustments
-.dark-mode img {
-  filter: brightness(0.9) contrast(1.1);
-  
+// NOTE: Avatar images should NOT be filtered - keep them colorful!
+.dark-mode img:not(.short-about img):not([alt*="Avatar"]) {
+  filter: brightness(0.92) contrast(1.05);
+
   &:hover {
-    filter: brightness(1) contrast(1.2);
+    filter: brightness(1) contrast(1.1);
   }
 }
 
+// Ensure avatar is ALWAYS colorful and vibrant
+.dark-mode .short-about img,
+.short-about img {
+  filter: none !important;
+  -webkit-filter: none !important;
+}
+
 // Print styles - ensure dark mode doesn't affect printing
 @media print {
   .dark-mode * {

less/jason-blog.less

@@ -688,22 +688,22 @@ samp {
   overflow: hidden; // 防止内容溢出导致的移动
   contain: layout style; // CSS Containment提升性能
 
-  // Enhanced background overlay for better text readability
+  // Enhanced background overlay for MAXIMUM text readability
   &::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
+    // Stronger gradient for better text contrast
     background: linear-gradient(
-      135deg, 
-      rgba(0,0,0,0.75) 0%, 
-      rgba(0,0,0,0.45) 50%, 
-      rgba(0,0,0,0.65) 100%
+      180deg,
+      rgba(15, 23, 42, 0.85) 0%,
+      rgba(15, 23, 42, 0.6) 40%,
+      rgba(15, 23, 42, 0.75) 100%
     );
     z-index: 1;
-    // 防止overlay移动
     transform: translateZ(0);
     will-change: auto;
   }
@@ -774,17 +774,21 @@ samp {
     text-align: center;
     h1 {
       margin-top: 0;
-      font-size: 20px; // Further reduced for ultra-elegant look
-      color: white;
-      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
-      line-height: 1.45; // More relaxed line height
+      font-size: 24px; // Slightly larger for better presence
+      color: #ffffff;
+      // ENHANCED text shadow for maximum readability
+      text-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.9),
+        0 4px 12px rgba(0, 0, 0, 0.6),
+        0 0 40px rgba(0, 0, 0, 0.4);
+      line-height: 1.4;
       word-wrap: break-word;
       hyphens: auto;
       max-width: 100%;
-      margin-bottom: 10px; // Tighter spacing
-      font-weight: 700; // Bolder for better impact at smaller size
-      letter-spacing: 0.5px; // Slight expansion for readability
-      text-transform: none; // Remove any text transformation
+      margin-bottom: 12px;
+      font-weight: 800; // Extra bold for impact
+      letter-spacing: 1px; // More letter spacing for clarity
+      text-transform: none;
 
       // Smooth progressive sizing - much more conservative
       @media only screen and (min-width: 480px) {
@@ -820,10 +824,15 @@ samp {
     }
     .subheading {
       .sans-serif;
-      font-size: 12px; // Ultra-compact elegant subtitle
-      line-height: 1.6; // More breathing room
+      font-size: 14px; // Slightly larger for readability
+      line-height: 1.6;
       display: block;
-      font-weight: 400; 
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.95);
+      // Enhanced text shadow for subtitle
+      text-shadow:
+        0 1px 3px rgba(0, 0, 0, 0.8),
+        0 2px 8px rgba(0, 0, 0, 0.5); 
       margin: 10px auto 0; // Tighter top margin
       color: rgba(255, 255, 255, 0.95); // Higher contrast
       text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);

less/sidebar.less

@@ -62,16 +62,28 @@
   }
   .short-about {
     img {
-      width: 80%;
+      width: 128px;
+      height: 128px;
       display: block;
-      border-radius: @border-radius-lg;
-      margin-bottom: @spacing-lg;
-      box-shadow: var(--shadow-md);
+      border-radius: 50%;
+      margin: 0 auto @spacing-lg;
+      box-shadow:
+        0 0 0 4px var(--brand-primary),
+        0 0 0 8px rgba(79, 70, 229, 0.2),
+        var(--shadow-lg);
       transition: all @duration-base @ease-in-out;
-      
+      // IMPORTANT: Remove any grayscale filter - show vibrant colors!
+      filter: none !important;
+      -webkit-filter: none !important;
+      object-fit: cover;
+
       &:hover {
-        transform: scale(1.02);
-        box-shadow: var(--shadow-lg);
+        transform: scale(1.08) rotate(3deg);
+        box-shadow:
+          0 0 0 4px var(--brand-secondary),
+          0 0 0 8px rgba(124, 58, 237, 0.3),
+          0 0 30px rgba(79, 70, 229, 0.4),
+          var(--shadow-xl);
       }
     }