Honesty/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(about): 扩展渐变色板并优化技术标签样式

Browse Source 
- 新增 15 种 CSS 渐变色变量（从 --gradient-11 到 --gradient-25）
- 为白天和夜间主题添加对应的新技术标签颜色类（.tag-color-11 到 .tag-color-25）
- 更新 JavaScript 中 gradientId 的取值范围从 10 扩展到 25
- 移除旧的控制台日志输出
- 调整配置文件中的空行格式，提升可读性
This commit is contained in:
hehh
2025-11-30 16:02:49 +08:00
parent bff0b529d2
commit 41184ad1d8
3 changed files with 241 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
css/about.css
View File

@@ -37,10 +37,22 @@
--gradient-8: linear-gradient(135deg, #fccb90, #d57eeb);
--gradient-9: linear-gradient(135deg, #ffecd2, #fcb69f);
--gradient-10: linear-gradient(135deg, #cfd9df, #e2ebf0);
--day-tag-1: #0ea5e9;
--day-tag-2: #ef4444;
--day-tag-3: #10b981;
--day-tag-4: #f59e0b;
--gradient-11: linear-gradient(135deg, #74ebd5, #ACB6E5); /* 薄荷绿+浅紫蓝 */
--gradient-12: linear-gradient(135deg, #ff7e5f, #feb47b); /* 珊瑚橙+浅橙 */
--gradient-13: linear-gradient(135deg, #667eea, #764ba2); /* 深紫蓝+紫罗兰 */
--gradient-14: linear-gradient(135deg, #ff8080, #92fe9d); /* 柔粉+嫩绿 */
--gradient-15: linear-gradient(135deg, #a18cd1, #fbc2eb); /* 淡紫+粉紫 */
--gradient-16: linear-gradient(135deg, #2af598, #009efd); /* 荧光绿+天蓝 */
--gradient-17: linear-gradient(135deg, #ffd1ff, #fa8bff); /* 浅粉紫+亮粉 */
--gradient-18: linear-gradient(135deg, #89f7fe, #66a6ff); /* 冰蓝+浅蓝 */
--gradient-19: linear-gradient(135deg, #ff9a9e, #fad0c4); /* 蜜桃粉+浅桃色 */
--gradient-20: linear-gradient(135deg, #642b73, #c6426e); /* 深紫+玫红 */
--gradient-21: linear-gradient(135deg, #43e97b, #38f9d7); /* 青柠绿+青蓝 */
--gradient-22: linear-gradient(135deg, #f12711, #f5af19); /* 猩红+金黄 */
--gradient-23: linear-gradient(135deg, #4158d0, #c850c0); /* 蓝紫+玫紫 */
--gradient-24: linear-gradient(135deg, #ffffff, #ddd6fe); /* 纯白+淡紫 */
--gradient-25: linear-gradient(135deg, #00dbde, #fc00ff); /* 青蓝+霓虹粉 */
}
[data-theme="night"] {
@@ -1321,6 +1333,81 @@ body {
[data-theme="day"] .tech-tag-mobile.tag-color-9 { 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 { color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important; }
[data-theme="day"] .tech-tag-3d.tag-color-11,
[data-theme="day"] .tech-tag-mobile.tag-color-11 {
color: #ACB6E5 !important;
-webkit-text-fill-color: #ACB6E5 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-12,
[data-theme="day"] .tech-tag-mobile.tag-color-12 {
color: #ff7e5f !important;
-webkit-text-fill-color: #ff7e5f !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-13,
[data-theme="day"] .tech-tag-mobile.tag-color-13 {
color: #764ba2 !important;
-webkit-text-fill-color: #764ba2 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-14,
[data-theme="day"] .tech-tag-mobile.tag-color-14 {
color: #ff8080 !important;
-webkit-text-fill-color: #ff8080 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-15,
[data-theme="day"] .tech-tag-mobile.tag-color-15 {
color: #2af598 !important;
-webkit-text-fill-color: #2af598 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-16,
[data-theme="day"] .tech-tag-mobile.tag-color-16 {
color: #ffd1ff !important;
-webkit-text-fill-color: #ffd1ff !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-17,
[data-theme="day"] .tech-tag-mobile.tag-color-17 {
color: #89f7fe !important;
-webkit-text-fill-color: #89f7fe !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-18,
[data-theme="night"] .tech-tag-mobile.tag-color-18 {
color: #ff9a9e !important;
-webkit-text-fill-color: #ff9a9e !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-19,
[data-theme="day"] .tech-tag-mobile.tag-color-19 {
color: #642b73 !important;
-webkit-text-fill-color: #642b73 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-20,
[data-theme="day"] .tech-tag-mobile.tag-color-20 {
color: #38f9d7 !important;
-webkit-text-fill-color: #38f9d7 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-21,
[data-theme="day"] .tech-tag-mobile.tag-color-21 {
color: #f5af19 !important;
-webkit-text-fill-color: #f5af19 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-22,
[data-theme="day"] .tech-tag-mobile.tag-color-22 {
color: #c850c0 !important;
-webkit-text-fill-color: #c850c0 !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-23,
[data-theme="day"] .tech-tag-mobile.tag-color-23 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-24,
[data-theme="day"] .tech-tag-mobile.tag-color-24 {
color: #fc00ff !important;
-webkit-text-fill-color: #fc00ff !important;
}
[data-theme="day"] .tech-tag-3d.tag-color-25,
[data-theme="day"] .tech-tag-mobile.tag-color-25 {
color: #fad0c4 !important;
-webkit-text-fill-color: #fad0c4 !important;
}
/* Night Theme */
[data-theme="night"] .tech-tag-3d.tag-color-1,
@@ -1413,6 +1500,142 @@ body {
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-11,
[data-theme="night"] .tech-tag-mobile.tag-color-11 {
background: var(--gradient-11) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-12,
[data-theme="night"] .tech-tag-mobile.tag-color-12 {
background: var(--gradient-12) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-13,
[data-theme="night"] .tech-tag-mobile.tag-color-13 {
background: var(--gradient-13) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-14,
[data-theme="night"] .tech-tag-mobile.tag-color-14 {
background: var(--gradient-14) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-15,
[data-theme="night"] .tech-tag-mobile.tag-color-15 {
background: var(--gradient-15) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-16,
[data-theme="night"] .tech-tag-mobile.tag-color-16 {
background: var(--gradient-16) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-17,
[data-theme="night"] .tech-tag-mobile.tag-color-17 {
background: var(--gradient-17) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-18,
[data-theme="night"] .tech-tag-mobile.tag-color-18 {
background: var(--gradient-18) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-19,
[data-theme="night"] .tech-tag-mobile.tag-color-19 {
background: var(--gradient-19) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-20,
[data-theme="night"] .tech-tag-mobile.tag-color-20 {
background: var(--gradient-20) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-21,
[data-theme="night"] .tech-tag-mobile.tag-color-21 {
background: var(--gradient-21) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-22,
[data-theme="night"] .tech-tag-mobile.tag-color-22 {
background: var(--gradient-22) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-23,
[data-theme="night"] .tech-tag-mobile.tag-color-23 {
background: var(--gradient-23) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-24,
[data-theme="night"] .tech-tag-mobile.tag-color-24 {
background: var(--gradient-24) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
[data-theme="night"] .tech-tag-3d.tag-color-25,
[data-theme="night"] .tech-tag-mobile.tag-color-25 {
background: var(--gradient-25) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
/* Gradient Fallback for Unsupported Browsers */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.tech-tag-3d, .tech-tag-mobile {

9
js/about.js
View File

@@ -834,8 +834,8 @@ class UIManager {
//const name = item.name || '';
//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)))
: (idx % 10) + 1;
? Math.max(1, Math.min(25, Number(item.gradientId)))
: (idx % 25) + 1;
return {...item, gradientId: gid};
});
@@ -894,7 +894,7 @@ class UIManager {
const appendItem = (rowEl, item, idx) => {
const el = document.createElement('span');
el.className = 'tech-tag-mobile';
const colorClass = `tag-color-${item.gradientId || ((idx % 10) + 1)}`;
const colorClass = `tag-color-${item.gradientId || ((idx % 25) + 1)}`;
el.classList.add(colorClass);
el.innerText = item.name;
el.style.border = 'none';
@@ -934,7 +934,7 @@ class UIManager {
techStack.forEach((item, index) => {
const el = document.createElement('a');
el.className = 'tech-tag-3d';
const colorClass = `tag-color-${item.gradientId || ((index % 10) + 1)}`;
const colorClass = `tag-color-${item.gradientId || ((index % 25) + 1)}`;
el.classList.add(colorClass);
el.innerText = item.name;
el.style.border = 'none';
@@ -1035,7 +1035,6 @@ class UIManager {
const isMobile = window.matchMedia('(max-width: 768px)').matches;
const currentState = isMobile ? 'mobile' : 'desktop';
if (windowRef === currentState) {
console.log('Tech Cloud: Skipping resize, same state:', windowRef, currentState);
return
}
windowRef = currentState;

43
js/config.js
View File

@@ -15,7 +15,7 @@ const SiteConfig = {
increment: 150
}
},
background: {
imagePaths: [
"/images/bj/1.webp",
@@ -27,7 +27,7 @@ const SiteConfig = {
"/images/bj/7.webp"
]
},
hitokoto: {
apiUrl: 'https://v1.hitokoto.cn?c=c&c=d&c=i&c=k'
},
@@ -36,7 +36,7 @@ const SiteConfig = {
github: {
username: 'listener-He'
},
blog: {
rssUrl: 'https://blog.hehouhui.cn/api/rss'
},
@@ -47,7 +47,7 @@ const SiteConfig = {
blog: { key: 'blog_data_v2', ttlMs: 3600000 },
theme: { key: 'theme_v2', ttlMs: 3600000 }
},
techStack: [
{ name: 'Java', category: 'core', weight: 5 },
{ name: 'Spring Boot', category: 'backend', weight: 5 },
@@ -115,13 +115,13 @@ const SiteConfig = {
],
user: { repos: 165, followers: 6, created: "2018-05-14" }
},
socialCards: {
rings: [130, 180, 230],
goldenAngle: 137.5,
baseSpeed: 16
},
artalk: {
server: 'https://artalk.hehouhui.cn',
site: 'Honesty的主页',
@@ -129,7 +129,7 @@ const SiteConfig = {
noComment: '暂无评论',
sendBtn: '发送'
},
// 站点统计配置
analytics: {
busuanzi: {
@@ -152,7 +152,7 @@ const SiteConfig = {
ck: '3OBGjwDdEIRS7XZ1'
}
},
animationSettings: {
observerOptions: {
threshold: 0.1,
@@ -163,40 +163,17 @@ const SiteConfig = {
rootMargin: '0px 0px -20px 0px'
}
},
// 开发环境配置
dev: {
isLocal: (typeof location !== 'undefined') ? (location.hostname.indexOf('localhost') > -1 || location.hostname.indexOf('127.0.0.1') > -1) : false
}
};
if (Array.isArray(SiteConfig.techStack)) {
const categoryGradientMap = {
core: 7,
backend: 4,
data: 9,
ops: 10,
ai: 3
};
const vividSet = [1, 4, 7, 8];
SiteConfig.techStack = SiteConfig.techStack.map((item) => {
const name = item.name || '';
const hash = Array.from(name).reduce((a, c) => a + c.charCodeAt(0), 0);
if (item.gradientId && Number.isFinite(Number(item.gradientId))) {
return { ...item, gradientId: Math.max(1, Math.min(10, Number(item.gradientId))) };
}
let base = categoryGradientMap[item.category] || ((hash % 10) + 1);
if (Number(item.weight) >= 5) {
base = vividSet[hash % vividSet.length];
}
return { ...item, gradientId: base };
});
}
// 导出配置
if (typeof module !== 'undefined' && module.exports) {
module.exports = SiteConfig;
} else if (typeof window !== 'undefined') {
window.SiteConfig = SiteConfig;
}
}