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

feat(about): 优化关于页面样式与交互功能

Browse Source 
- 调整 MBTI 标签展示方式，增加多彩渐变效果
- 重构技术栈展示逻辑，移动端采用多行无缝滚动动画
- 优化夜间模式切换逻辑，支持系统主题检测与缓存管理
- 改进博客文章分类显示，移除默认填充内容
- 更新二维码加载失败提示为注释形式
- 增强文本可读性，修复部分元素在特定容器内的颜色异常
- 统一标签与按钮样式，提升视觉一致性与用户体验
- 调整 3D 技术球体透明度上限，增强视觉层次感
This commit is contained in:
hehh
2025-11-23 19:07:16 +08:00
parent cd91405733
commit bbfde56d5d
4 changed files with 181 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
about.html
View File

@@ -132,9 +132,10 @@
</div> </div>
<p class="mbti-desc" data-i18n="mbti.desc">"理想主义与道德感，果断决绝的行动力。深度洞察与创意，关怀与同理心。"</p> <p class="mbti-desc" data-i18n="mbti.desc">"理想主义与道德感，果断决绝的行动力。深度洞察与创意，关怀与同理心。"</p>
<div class="mbti-tags"> <div class="mbti-tags">
<span class="tag" data-i18n="mbti.tag1">Idealism</span> <span class="tag tag-color-1" data-i18n="mbti.tag1">Idealism & Morality</span>
<span class="tag" data-i18n="mbti.tag2">Insight</span> <span class="tag tag-color-2" data-i18n="mbti.tag2">Decisive Action</span>
<span class="tag" data-i18n="mbti.tag3">Empathy</span> <span class="tag tag-color-3" data-i18n="mbti.tag3">Deep Insight & Creativity</span>
<span class="tag tag-color-4" data-i18n="mbti.tag4">Care & Empathy</span>
</div> </div>
</div> </div>
</div> </div>
@@ -142,7 +143,7 @@
<!-- [5] 技术栈宇宙 (Tech Stack) --> <!-- [5] 技术栈宇宙 (Tech Stack) -->
<div class="bento-card area-tech"> <div class="bento-card area-tech">
<div class="card-header"> <div class="card-header">
<h3 data-i18n="tech.title">Tech Universe</h3> <h3 class="glow-title"><i class="ri-stack-line"></i> <span data-i18n="tech.title">Tech Universe</span></h3>
</div> </div>
<!-- 容器：PC端3D球，移动端横向滚动条 --> <!-- 容器：PC端3D球，移动端横向滚动条 -->
<div id="tech-container" class="tech-wrapper"> <div id="tech-container" class="tech-wrapper">
@@ -250,7 +251,7 @@
<h3 data-i18n="modal.wechat">Official Account</h3> <h3 data-i18n="modal.wechat">Official Account</h3>
<div class="qr-box"> <div class="qr-box">
<img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg" alt="WeChat QR" onerror="this.style.display='none';this.nextElementSibling.style.display='block'"> <img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg" alt="WeChat QR" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
<div class="qr-fallback">QR Load Failed</div> <!-- <div class="qr-fallback">QR Load Failed</div>-->
</div> </div>
<p data-i18n="modal.desc">Scan to follow Tech Share</p> <p data-i18n="modal.desc">Scan to follow Tech Share</p>
</div> </div>

163
css/about.css
View File

@@ -191,8 +191,8 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: var(--text-primary); font-style: normal;
text-shadow: 0 0 10px rgba(108, 92, 231, 0.3); -webkit-font-smoothing: antialiased;
} }
/* ========================================= /* =========================================
@@ -409,8 +409,23 @@ body {
margin-bottom: 10px; margin-bottom: 10px;
} }
.animated-gradient { background-image: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientShift 6s linear infinite; text-shadow: 0 0 8px rgba(108,92,231,0.2); } .animated-gradient {
@keyframes gradientShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } background-image: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradientShift 6s linear infinite;
text-shadow: 0 0 8px rgba(108, 92, 231, 0.2);
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
.location-tag { .location-tag {
font-size: 0.85rem; font-size: 0.85rem;
@@ -469,14 +484,20 @@ body {
margin-bottom: 20px; margin-bottom: 20px;
text-align: justify; text-align: justify;
} }
.bio-text.collapsed { .bio-text.collapsed {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
.link-btn { .link-btn {
background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.85rem; background: none;
border: none;
color: var(--accent);
cursor: pointer;
font-size: 0.85rem;
} }
.quote-box { .quote-box {
@@ -519,7 +540,7 @@ body {
/* --- MBTI --- */ /* --- MBTI --- */
.area-mbti { .area-mbti {
padding: 30px; padding: 3px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@@ -529,6 +550,7 @@ body {
} }
.mbti-head { .mbti-head {
margin-left: 20px;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 10px; gap: 10px;
@@ -551,6 +573,7 @@ body {
} }
.mbti-desc { .mbti-desc {
margin-left: 15px;
font-size: 0.7rem; font-size: 0.7rem;
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 15px; margin-bottom: 15px;
@@ -559,19 +582,62 @@ body {
} }
.mbti-tags { .mbti-tags {
display: flex; display: grid;
gap: 3px; gap: 1px;
grid-template-columns: 1fr 1fr;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
} }
.tag { .tag {
font-size: 0.75rem; font-size: 0.75rem;
background: rgba(128, 128, 128, 0.1);
padding: 4px 10px; padding: 4px 10px;
border-radius: 6px; border-radius: 6px;
color: var(--text-secondary); color: var(--text-secondary);
} }
.mbti-tags .tag {
background: none;
border: none;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.mbti-tags .tag.tag-color-1 {
background: var(--gradient-1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mbti-tags .tag.tag-color-2 {
background: var(--gradient-2);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mbti-tags .tag.tag-color-3 {
background: var(--gradient-3);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mbti-tags .tag.tag-color-4 {
background: var(--gradient-4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* --- Tech Stack (PC) --- */ /* --- Tech Stack (PC) --- */
.area-tech { .area-tech {
display: flex; display: flex;
@@ -1045,7 +1111,10 @@ body {
background-clip: text; background-clip: text;
color: transparent; color: transparent;
} }
.comment-box { padding: 24px; }
.comment-box {
padding: 24px;
}
} }
/* ========================================= /* =========================================
@@ -1056,6 +1125,9 @@ body {
margin: 20px auto 100px; margin: 20px auto 100px;
padding: 0 16px; padding: 0 16px;
} }
.mbti-tags {
margin-left: 20px;
}
/* Bottom Dock */ /* Bottom Dock */
.glass-nav { .glass-nav {
@@ -1218,25 +1290,35 @@ body {
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
/* 添加淡入淡出效果 */ /* 添加淡入淡出效果 */
mask-image: linear-gradient( mask-image: linear-gradient(
to right, to right,
transparent 0%, transparent 0%,
black 10%, black 10%,
black 90%, black 90%,
transparent 100% transparent 100%
); );
-webkit-mask-image: linear-gradient( -webkit-mask-image: linear-gradient(
to right, to right,
transparent 0%, transparent 0%,
black 10%, black 10%,
black 90%, black 90%,
transparent 100% transparent 100%
); );
animation: techMarquee 18s linear infinite; /* 行内滚动动画由 .tech-row 控制 */
} }
.tech-row {
@keyframes techMarquee { display: flex;
gap: 10px;
align-items: center;
white-space: nowrap;
will-change: transform;
animation: rowMarquee var(--row-speed) linear infinite;
}
.row-1 { --row-speed: 24s; }
.row-2 { --row-speed: 28s; }
.row-3 { --row-speed: 32s; }
@keyframes rowMarquee {
0% { transform: translateX(0); } 0% { transform: translateX(0); }
100% { transform: translateX(-33.333%); } 100% { transform: translateX(-50%); }
} }
.tech-tag-mobile { .tech-tag-mobile {
@@ -1339,7 +1421,10 @@ body {
background-clip: text; background-clip: text;
color: transparent; color: transparent;
} }
.comment-box { padding: 16px; }
.comment-box {
padding: 16px;
}
} }
/* ========================================= /* =========================================
@@ -1393,6 +1478,9 @@ body {
font-size: 0.75rem; font-size: 0.75rem;
padding-bottom: 100px; padding-bottom: 100px;
} }
.site-footer a {
color: var(--text-tertiary);
}
.b-title { .b-title {
background: var(--gradient-3); background: var(--gradient-3);
@@ -1418,3 +1506,28 @@ body {
[data-theme="night"] .b-title, [data-theme="night"] .b-cat, [data-theme="night"] .b-date { [data-theme="night"] .b-title, [data-theme="night"] .b-cat, [data-theme="night"] .b-date {
text-shadow: 0 0 8px var(--accent-glow); text-shadow: 0 0 8px var(--accent-glow);
} }
/* 阅读友好：blog-container 内文本使用常规颜色覆盖渐变 */
#blog-container .b-title {
background: none !important;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--text-primary) !important;
-webkit-text-fill-color: initial;
}
#blog-container .b-cat {
background: none !important;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--text-secondary) !important;
-webkit-text-fill-color: initial;
}
#blog-container .b-date {
background: none !important;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--text-tertiary) !important;
-webkit-text-fill-color: initial;
}

47
js/about.js
View File

@@ -29,7 +29,7 @@ class I18nManager {
"bio.quote": "我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。", "bio.quote": "我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。",
"stats.exp": "编程年限", "stats.repos": "开源项目", "stats.followers": "关注者", "stats.exp": "编程年限", "stats.repos": "开源项目", "stats.followers": "关注者",
"mbti.name": "提倡者", "mbti.desc": "提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。", "mbti.name": "提倡者", "mbti.desc": "提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。",
"mbti.tag1": "理想主义", "mbti.tag2": "深度洞察", "mbti.tag3": "同理心", "mbti.tag1": "理想主义与道德感", "mbti.tag2": "果断决绝的行动力", "mbti.tag3": "深度洞察与创意", "mbti.tag4": "关怀与同理心",
"tech.title": "技术栈宇宙", "interest.title": "个人兴趣", "tech.title": "技术栈宇宙", "interest.title": "个人兴趣",
"interest.cycling": "骑行", "interest.cycling_desc": "享受在路上的自由感，用车轮丈量世界，在风景中寻找灵感", "interest.cycling": "骑行", "interest.cycling_desc": "享受在路上的自由感，用车轮丈量世界，在风景中寻找灵感",
"interest.reading": "阅读", "interest.reading_desc": "通过文字记录思考轨迹，分享技术见解，用代码诠释创意", "interest.reading": "阅读", "interest.reading_desc": "通过文字记录思考轨迹，分享技术见解，用代码诠释创意",
@@ -46,7 +46,7 @@ class I18nManager {
"bio.quote": "I pursue a deep understanding of technology rather than a broad accumulation, and the learning of every technology stems from the intrinsic drive to solve practical problems. As an INFJ personality type, I am good at deep thinking, pay attention to details, and enjoy creating meaningful products through code. I believe in the power of technology to change the world, and I am passionate about sharing knowledge and experience in the open source community.", "bio.quote": "I pursue a deep understanding of technology rather than a broad accumulation, and the learning of every technology stems from the intrinsic drive to solve practical problems. As an INFJ personality type, I am good at deep thinking, pay attention to details, and enjoy creating meaningful products through code. I believe in the power of technology to change the world, and I am passionate about sharing knowledge and experience in the open source community.",
"stats.exp": "Years Exp", "stats.repos": "Projects", "stats.followers": "Followers", "stats.exp": "Years Exp", "stats.repos": "Projects", "stats.followers": "Followers",
"mbti.name": "Advocate", "mbti.desc": "Advocates of this personality type are very rare, with less than 1% of the population belonging to this type, but their contributions to the world cannot be ignored.", "mbti.name": "Advocate", "mbti.desc": "Advocates of this personality type are very rare, with less than 1% of the population belonging to this type, but their contributions to the world cannot be ignored.",
"mbti.tag1": "Idealism", "mbti.tag2": "Insight", "mbti.tag3": "Empathy", "mbti.tag1": "Idealism & Morality", "mbti.tag2": "Decisive Action", "mbti.tag3": "Deep Insight & Creativity", "mbti.tag4": "Care & Empathy",
"tech.title": "Tech Universe", "interest.title": "Interests", "tech.title": "Tech Universe", "interest.title": "Interests",
"interest.cycling": "Cycling", "interest.cycling_desc": "Enjoy the freedom on the road, measure the world with wheels, and find inspiration in the scenery", "interest.cycling": "Cycling", "interest.cycling_desc": "Enjoy the freedom on the road, measure the world with wheels, and find inspiration in the scenery",
"interest.reading": "Reading", "interest.reading_desc": "Record thinking trajectories through text, share technical insights, and interpret creativity with code", "interest.reading": "Reading", "interest.reading_desc": "Record thinking trajectories through text, share technical insights, and interpret creativity with code",
@@ -92,7 +92,16 @@ class ThemeManager {
this.init(); this.init();
} }
init() { init() {
const saved = localStorage.getItem('theme') || 'day'; const cacheKey = window.SiteConfig?.cacheKeys?.theme?.key || 'theme-v2';
const timeout = window.SiteConfig?.cacheKeys?.theme?.ttlMs || 360000;
let saved = localStorage.getItem(cacheKey);
if (saved == null || new Date().getTime() - timeout > saved.time) {
var hour = new Date().getHours();
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
var night = hour >= 18 || prefersDark;
saved = night ? 'night' : 'day';
localStorage.setItem(cacheKey, { time: new Date().getTime(), value: saved });
}
if(saved === 'night') this.root.setAttribute('data-theme', 'night'); if(saved === 'night') this.root.setAttribute('data-theme', 'night');
$('#theme-btn').toggleClass('is-active', saved === 'night'); $('#theme-btn').toggleClass('is-active', saved === 'night');
@@ -101,7 +110,7 @@ class ThemeManager {
const next = curr === 'night' ? 'day' : 'night'; const next = curr === 'night' ? 'day' : 'night';
if(next === 'night') this.root.setAttribute('data-theme', 'night'); if(next === 'night') this.root.setAttribute('data-theme', 'night');
else this.root.removeAttribute('data-theme'); else this.root.removeAttribute('data-theme');
localStorage.setItem('theme', next); localStorage.setItem(cacheKey, { time: new Date().getTime(), value: next });
$('#theme-btn').toggleClass('is-active', next === 'night'); $('#theme-btn').toggleClass('is-active', next === 'night');
// 更新Artalk主题 // 更新Artalk主题
@@ -131,9 +140,10 @@ class DataManager {
const cacheKey = (window.SiteConfig?.cacheKeys?.github?.key) || 'gh_data_v2'; const cacheKey = (window.SiteConfig?.cacheKeys?.github?.key) || 'gh_data_v2';
const cached = JSON.parse(localStorage.getItem(cacheKey)); const cached = JSON.parse(localStorage.getItem(cacheKey));
const now = Date.now(); const now = Date.now();
const timeout = (window.SiteConfig?.cacheKeys?.github?.ttlMs) || 3600000;
// Check Cache (1 hour) // Check Cache (1 hour)
if(cached && (now - cached.time < 3600000)) { if(cached && (now - cached.time < timeout)) {
this.renderUser(cached.user); this.renderUser(cached.user);
this.renderRepos(cached.repos); this.renderRepos(cached.repos);
return; return;
@@ -254,7 +264,7 @@ class DataManager {
title, title,
link, link,
date: pubDate, date: pubDate,
cats: categories.length ? categories : ["Tech"] cats: categories.length ? categories : [""]
}); });
} }
@@ -410,18 +420,29 @@ class UIManager {
container.innerHTML = ''; container.innerHTML = '';
if(isMobile) { if(isMobile) {
// Mobile: Horizontal Scroll Snap (Compact 3 rows) // Mobile: 3-row seamless marquee
container.classList.add('mobile-scroll'); container.classList.add('mobile-scroll');
// 创建多个标签副本以实现无缝滚动效果 const rows = 3;
const extendedTechStack = [...techStack, ...techStack, ...techStack]; const buckets = Array.from({ length: rows }, () => []);
extendedTechStack.forEach((item, index) => { techStack.forEach((item, i) => { buckets[i % rows].push(item); });
const appendItem = (rowEl, item, idx) => {
const el = document.createElement('span'); const el = document.createElement('span');
el.className = 'tech-tag-mobile'; el.className = 'tech-tag-mobile';
const colorClass = `tag-color-${item.gradientId || ((index % 10) + 1)}`; const colorClass = `tag-color-${item.gradientId || ((idx % 10) + 1)}`;
el.classList.add(colorClass); el.classList.add(colorClass);
el.innerText = item.name; el.innerText = item.name;
el.style.border = 'none'; el.style.border = 'none';
container.appendChild(el); rowEl.appendChild(el);
};
buckets.forEach((items, rIdx) => {
const rowEl = document.createElement('div');
rowEl.className = `tech-row row-${rIdx+1}`;
rowEl.style.gridRow = `${rIdx+1}`;
items.forEach((item, idx) => appendItem(rowEl, item, idx));
items.forEach((item, idx) => appendItem(rowEl, item, idx + items.length));
container.appendChild(rowEl);
}); });
} else { } else {
// PC: 3D Sphere // PC: 3D Sphere
@@ -488,7 +509,7 @@ class UIManager {
scale = Math.min(Math.max(scale, 0.7), 1.15); scale = Math.min(Math.max(scale, 0.7), 1.15);
let opacity = (tag.z + radius)/(2*radius) + 0.2; let opacity = (tag.z + radius)/(2*radius) + 0.2;
tag.el.style.opacity = Math.min(Math.max(opacity, 0.1), 1); tag.el.style.opacity = Math.min(Math.max(opacity, 0.1), 0.85);
tag.el.style.zIndex = parseInt(scale*100); tag.el.style.zIndex = parseInt(scale*100);
let left = tag.x + container.offsetWidth/2 - tag.el.offsetWidth/2; let left = tag.x + container.offsetWidth/2 - tag.el.offsetWidth/2;
let top = tag.y + container.offsetHeight/2 - tag.el.offsetHeight/2; let top = tag.y + container.offsetHeight/2 - tag.el.offsetHeight/2;

5
js/config.js
View File

@@ -43,8 +43,9 @@ const SiteConfig = {
// 通用缓存键与TTL（毫秒） // 通用缓存键与TTL（毫秒）
cacheKeys: { cacheKeys: {
github: { key: 'gh_data_v2', ttlMs: 3600000 }, github: { key: 'gh_data_v2', ttlMs: 36000000 },
blog: { key: 'blog_data_v2', ttlMs: 3600000 } blog: { key: 'blog_data_v2', ttlMs: 3600000 },
theme: { key: 'theme_v2', ttlMs: 3600000 }
}, },
techStack: [ techStack: [