feat(about): 优化关于页面样式与交互功能
- 调整 MBTI 标签展示方式，增加多彩渐变效果 - 重构技术栈展示逻辑，移动端采用多行无缝滚动动画 - 优化夜间模式切换逻辑，支持系统主题检测与缓存管理 - 改进博客文章分类显示，移除默认填充内容 - 更新二维码加载失败提示为注释形式 - 增强文本可读性，修复部分元素在特定容器内的颜色异常 - 统一标签与按钮样式，提升视觉一致性与用户体验 - 调整 3D 技术球体透明度上限，增强视觉层次感
This commit is contained in:
hehh
11
about.html
11
about.html
@@ -132,9 +132,10 @@
|
||||
</div>
|
||||
<p class="mbti-desc" data-i18n="mbti.desc">"理想主义与道德感，果断决绝的行动力。深度洞察与创意，关怀与同理心。"</p>
|
||||
<div class="mbti-tags">
|
||||
<span class="tag" data-i18n="mbti.tag1">Idealism</span>
|
||||
<span class="tag" data-i18n="mbti.tag2">Insight</span>
|
||||
<span class="tag" data-i18n="mbti.tag3">Empathy</span>
|
||||
<span class="tag tag-color-1" data-i18n="mbti.tag1">Idealism & Morality</span>
|
||||
<span class="tag tag-color-2" data-i18n="mbti.tag2">Decisive Action</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>
|
||||
@@ -142,7 +143,7 @@
|
||||
<!-- [5] 技术栈宇宙 (Tech Stack) -->
|
||||
<div class="bento-card area-tech">
|
||||
<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>
|
||||
<!-- 容器：PC端3D球，移动端横向滚动条 -->
|
||||
<div id="tech-container" class="tech-wrapper">
|
||||
@@ -250,7 +251,7 @@
|
||||
<h3 data-i18n="modal.wechat">Official Account</h3>
|
||||
<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'">
|
||||
<div class="qr-fallback">QR Load Failed</div>
|
||||
<!-- <div class="qr-fallback">QR Load Failed</div>-->
|
||||
</div>
|
||||
<p data-i18n="modal.desc">Scan to follow Tech Share</p>
|
||||
</div>
|
||||
|
||||
163
css/about.css
163
css/about.css
@@ -191,8 +191,8 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-primary);
|
||||
text-shadow: 0 0 10px rgba(108, 92, 231, 0.3);
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
@@ -409,8 +409,23 @@ body {
|
||||
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); }
|
||||
@keyframes gradientShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
|
||||
.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);
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.location-tag {
|
||||
font-size: 0.85rem;
|
||||
@@ -469,14 +484,20 @@ body {
|
||||
margin-bottom: 20px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.bio-text.collapsed {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -519,7 +540,7 @@ body {
|
||||
|
||||
/* --- MBTI --- */
|
||||
.area-mbti {
|
||||
padding: 30px;
|
||||
padding: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -529,6 +550,7 @@ body {
|
||||
}
|
||||
|
||||
.mbti-head {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
@@ -551,6 +573,7 @@ body {
|
||||
}
|
||||
|
||||
.mbti-desc {
|
||||
margin-left: 15px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 15px;
|
||||
@@ -559,19 +582,62 @@ body {
|
||||
}
|
||||
|
||||
.mbti-tags {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.75rem;
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
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) --- */
|
||||
.area-tech {
|
||||
display: flex;
|
||||
@@ -1045,7 +1111,10 @@ body {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.comment-box { padding: 24px; }
|
||||
|
||||
.comment-box {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
@@ -1056,6 +1125,9 @@ body {
|
||||
margin: 20px auto 100px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.mbti-tags {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/* Bottom Dock */
|
||||
.glass-nav {
|
||||
@@ -1218,25 +1290,35 @@ body {
|
||||
scroll-snap-type: x mandatory;
|
||||
/* 添加淡入淡出效果 */
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
black 10%,
|
||||
black 90%,
|
||||
transparent 100%
|
||||
to right,
|
||||
transparent 0%,
|
||||
black 10%,
|
||||
black 90%,
|
||||
transparent 100%
|
||||
);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
black 10%,
|
||||
black 90%,
|
||||
transparent 100%
|
||||
to right,
|
||||
transparent 0%,
|
||||
black 10%,
|
||||
black 90%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: techMarquee 18s linear infinite;
|
||||
/* 行内滚动动画由 .tech-row 控制 */
|
||||
}
|
||||
|
||||
@keyframes techMarquee {
|
||||
.tech-row {
|
||||
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); }
|
||||
100% { transform: translateX(-33.333%); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
.tech-tag-mobile {
|
||||
@@ -1339,7 +1421,10 @@ body {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.comment-box { padding: 16px; }
|
||||
|
||||
.comment-box {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
@@ -1393,6 +1478,9 @@ body {
|
||||
font-size: 0.75rem;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.site-footer a {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.b-title {
|
||||
background: var(--gradient-3);
|
||||
@@ -1418,3 +1506,28 @@ body {
|
||||
[data-theme="night"] .b-title, [data-theme="night"] .b-cat, [data-theme="night"] .b-date {
|
||||
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
47
js/about.js
@@ -29,7 +29,7 @@ class I18nManager {
|
||||
"bio.quote": "我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。",
|
||||
"stats.exp": "编程年限", "stats.repos": "开源项目", "stats.followers": "关注者",
|
||||
"mbti.name": "提倡者", "mbti.desc": "提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。",
|
||||
"mbti.tag1": "理想主义", "mbti.tag2": "深度洞察", "mbti.tag3": "同理心",
|
||||
"mbti.tag1": "理想主义与道德感", "mbti.tag2": "果断决绝的行动力", "mbti.tag3": "深度洞察与创意", "mbti.tag4": "关怀与同理心",
|
||||
"tech.title": "技术栈宇宙", "interest.title": "个人兴趣",
|
||||
"interest.cycling": "骑行", "interest.cycling_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.",
|
||||
"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.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",
|
||||
"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",
|
||||
@@ -92,7 +92,16 @@ class ThemeManager {
|
||||
this.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');
|
||||
$('#theme-btn').toggleClass('is-active', saved === 'night');
|
||||
|
||||
@@ -101,7 +110,7 @@ class ThemeManager {
|
||||
const next = curr === 'night' ? 'day' : 'night';
|
||||
if(next === 'night') this.root.setAttribute('data-theme', 'night');
|
||||
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');
|
||||
|
||||
// 更新Artalk主题
|
||||
@@ -131,9 +140,10 @@ class DataManager {
|
||||
const cacheKey = (window.SiteConfig?.cacheKeys?.github?.key) || 'gh_data_v2';
|
||||
const cached = JSON.parse(localStorage.getItem(cacheKey));
|
||||
const now = Date.now();
|
||||
const timeout = (window.SiteConfig?.cacheKeys?.github?.ttlMs) || 3600000;
|
||||
|
||||
// Check Cache (1 hour)
|
||||
if(cached && (now - cached.time < 3600000)) {
|
||||
if(cached && (now - cached.time < timeout)) {
|
||||
this.renderUser(cached.user);
|
||||
this.renderRepos(cached.repos);
|
||||
return;
|
||||
@@ -254,7 +264,7 @@ class DataManager {
|
||||
title,
|
||||
link,
|
||||
date: pubDate,
|
||||
cats: categories.length ? categories : ["Tech"]
|
||||
cats: categories.length ? categories : [""]
|
||||
});
|
||||
}
|
||||
|
||||
@@ -410,18 +420,29 @@ class UIManager {
|
||||
container.innerHTML = '';
|
||||
|
||||
if(isMobile) {
|
||||
// Mobile: Horizontal Scroll Snap (Compact 3 rows)
|
||||
// Mobile: 3-row seamless marquee
|
||||
container.classList.add('mobile-scroll');
|
||||
// 创建多个标签副本以实现无缝滚动效果
|
||||
const extendedTechStack = [...techStack, ...techStack, ...techStack];
|
||||
extendedTechStack.forEach((item, index) => {
|
||||
const rows = 3;
|
||||
const buckets = Array.from({ length: rows }, () => []);
|
||||
techStack.forEach((item, i) => { buckets[i % rows].push(item); });
|
||||
|
||||
const appendItem = (rowEl, item, idx) => {
|
||||
const el = document.createElement('span');
|
||||
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.innerText = item.name;
|
||||
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 {
|
||||
// PC: 3D Sphere
|
||||
@@ -488,7 +509,7 @@ class UIManager {
|
||||
scale = Math.min(Math.max(scale, 0.7), 1.15);
|
||||
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);
|
||||
let left = tag.x + container.offsetWidth/2 - tag.el.offsetWidth/2;
|
||||
let top = tag.y + container.offsetHeight/2 - tag.el.offsetHeight/2;
|
||||
|
||||
@@ -43,8 +43,9 @@ const SiteConfig = {
|
||||
|
||||
// 通用缓存键与TTL（毫秒）
|
||||
cacheKeys: {
|
||||
github: { key: 'gh_data_v2', ttlMs: 3600000 },
|
||||
blog: { key: 'blog_data_v2', ttlMs: 3600000 }
|
||||
github: { key: 'gh_data_v2', ttlMs: 36000000 },
|
||||
blog: { key: 'blog_data_v2', ttlMs: 3600000 },
|
||||
theme: { key: 'theme_v2', ttlMs: 3600000 }
|
||||
},
|
||||
|
||||
techStack: [
|
||||
|
||||
Reference in New Issue
Block a user