feat(css): 优化英文 bio 文本样式及技术标签颜色配置

- 为英文 bio 文本添加专门的排版样式，包括字体、行高和斜体设置
- 在白天模式下为 .tech-tag 类增加基于 data-theme 的颜色定义
- 将原有的渐变样式限制在夜间模式下应用
- 技术标签颜色方案扩展至 10 种，并区分日夜主题显示效果

fix(js): 设置页面语言属性并调整技术栈索引逻辑

- 页面加载时动态设置 html 根元素的 data-lang 属性值
- 修改技术栈项的 gradientId 计算方式，由名称哈希改为索引取模
- 注释掉旧的哈希计算相关代码以避免干扰

css/about.css

@@ -528,6 +528,15 @@ body {
     overflow: hidden;
 }
 
+[data-lang="en"] .bio-text.collapsed {
+    /* 英文渲染友好的格式，字间距行间距 样式*/
+    font-size: 1rem;
+    line-height: 1.5;
+    font-family: 'Noto Serif', serif;
+    font-style: oblique;
+}
+
+
 .link-btn {
     background: none;
     border: none;
@@ -1946,36 +1955,127 @@ body {
     z-index: 10;
 }
 
+/* 白天模式下为 tag-color 类增强可读性 */
+[data-theme="day"] .tech-tag-3d.tag-color-1,
+[data-theme="day"] .tech-tag-mobile.tag-color-1 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #0ea5e9 !important; /* 蓝色 */
+    -webkit-text-fill-color: #0ea5e9 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-2,
+[data-theme="day"] .tech-tag-mobile.tag-color-2 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #ef4444 !important; /* 红色 */
+    -webkit-text-fill-color: #ef4444 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-3,
+[data-theme="day"] .tech-tag-mobile.tag-color-3 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #10b981 !important; /* 绿色 */
+    -webkit-text-fill-color: #10b981 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-4,
+[data-theme="day"] .tech-tag-mobile.tag-color-4 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #f59e0b !important; /* 黄色 */
+    -webkit-text-fill-color: #f59e0b !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-5,
+[data-theme="day"] .tech-tag-mobile.tag-color-5 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #8b5cf6 !important; /* 紫色 */
+    -webkit-text-fill-color: #8b5cf6 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-6,
+[data-theme="day"] .tech-tag-mobile.tag-color-6 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #ec4899 !important; /* 粉色 */
+    -webkit-text-fill-color: #ec4899 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-7,
+[data-theme="day"] .tech-tag-mobile.tag-color-7 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #06b6d4 !important; /* 青色 */
+    -webkit-text-fill-color: #06b6d4 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-8,
+[data-theme="day"] .tech-tag-mobile.tag-color-8 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #f97316 !important; /* 橙色 */
+    -webkit-text-fill-color: #f97316 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-9,
+[data-theme="day"] .tech-tag-mobile.tag-color-9 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #6b7280 !important; /* 灰色 */
+    -webkit-text-fill-color: #6b7280 !important;
+}
+
+[data-theme="day"] .tech-tag-3d.tag-color-10,
+[data-theme="day"] .tech-tag-mobile.tag-color-10 {
+    background: none !important;
+    -webkit-background-clip: initial !important;
+    background-clip: initial !important;
+    color: #1f2937 !important; /* 深灰 */
+    -webkit-text-fill-color: #1f2937 !important;
+}
+
 /* 不同颜色的标签 */
-.tech-tag-3d.tag-color-1, .tech-tag-mobile.tag-color-1 {
+[data-theme="night"] .tech-tag-3d.tag-color-1, .tech-tag-mobile.tag-color-1 {
     background: var(--gradient-1);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-2, .tech-tag-mobile.tag-color-2 {
+[data-theme="night"] .tech-tag-3d.tag-color-2, .tech-tag-mobile.tag-color-2 {
     background: var(--gradient-2);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-3, .tech-tag-mobile.tag-color-3 {
+[data-theme="night"] .tech-tag-3d.tag-color-3, .tech-tag-mobile.tag-color-3 {
     background: var(--gradient-3);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-4, .tech-tag-mobile.tag-color-4 {
+[data-theme="night"] .tech-tag-3d.tag-color-4, .tech-tag-mobile.tag-color-4 {
     background: var(--gradient-4);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-5, .tech-tag-mobile.tag-color-5 {
+[data-theme="night"] .tech-tag-3d.tag-color-5, .tech-tag-mobile.tag-color-5 {
     background: var(--gradient-5);
     -webkit-background-clip: text;
     background-clip: text;
@@ -1983,35 +2083,35 @@ body {
 }
 
 /* 扩展更多渐变方案 */
-.tech-tag-3d.tag-color-6, .tech-tag-mobile.tag-color-6 {
+[data-theme="night"] .tech-tag-3d.tag-color-6, .tech-tag-mobile.tag-color-6 {
     background: var(--gradient-6);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-7, .tech-tag-mobile.tag-color-7 {
+[data-theme="night"] .tech-tag-3d.tag-color-7, .tech-tag-mobile.tag-color-7 {
     background: var(--gradient-7);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-8, .tech-tag-mobile.tag-color-8 {
+[data-theme="night"] .tech-tag-3d.tag-color-8, .tech-tag-mobile.tag-color-8 {
     background: var(--gradient-8);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-9, .tech-tag-mobile.tag-color-9 {
+[data-theme="night"] .tech-tag-3d.tag-color-9, .tech-tag-mobile.tag-color-9 {
     background: var(--gradient-9);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }
 
-.tech-tag-3d.tag-color-10, .tech-tag-mobile.tag-color-10 {
+[data-theme="night"] .tech-tag-3d.tag-color-10, .tech-tag-mobile.tag-color-10 {
     background: var(--gradient-10);
     -webkit-background-clip: text;
     background-clip: text;

js/about.js

@@ -161,6 +161,7 @@ class I18nManager {
 
     apply() {
         const t = this.dict[this.lang];
+        document.documentElement.setAttribute('data-lang', this.lang)
         $('[data-i18n]').each(function () {
             const k = $(this).data('i18n');
             if (t[k]) $(this).text(t[k]);
@@ -661,11 +662,11 @@ class UIManager {
 
         const techStackRaw = window.SiteConfig?.techStack || [];
         const techStack = techStackRaw.map((item, idx) => {
-            const name = item.name || '';
+            //const name = item.name || '';
-            const hash = Array.from(name).reduce((a, c) => a + c.charCodeAt(0), 0);
+            //const hash = Array.from(name).reduce((a, c) => a + c.charCodeAt(0), 0);
             const gid = Number(item.gradientId) && Number.isFinite(Number(item.gradientId))
                 ? Math.max(1, Math.min(10, Number(item.gradientId)))
-                : (hash % 10) + 1;
+                : (idx % 10) + 1;
             return {...item, gradientId: gid};
         });