diff --git a/about.html b/about.html
index b667cbb..f95c89a 100644
--- a/about.html
+++ b/about.html
@@ -158,30 +158,30 @@
-
🚴♂️
- Cycling
+ 🚴♂️
+
Measuring the world
-
📚
- Reading
+ 📚
+
Thinking tracks
-
🔍
- Open Source
+ 🔍
+
Sharing power
-
💡
- Learning
+ 💡
+
Always curious
diff --git a/css/about.css b/css/about.css
index ab8edd6..cb3db3f 100644
--- a/css/about.css
+++ b/css/about.css
@@ -409,6 +409,13 @@ body {
margin-bottom: 10px;
}
+.grad-text-1 { background: var(--gradient-1); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.grad-text-2 { background: var(--gradient-2); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.grad-text-3 { background: var(--gradient-3); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.night-glow { text-shadow: 0 0 10px var(--accent-glow); }
+.glow-cycle { animation: hueCycle 8s linear infinite; }
+@keyframes hueCycle { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
+
.animated-gradient {
background-image: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary));
-webkit-background-clip: text;
@@ -443,8 +450,8 @@ body {
}
.s-icon {
- width: 36px;
- height: 36px;
+ width: 46px;
+ height: 46px;
border-radius: 50%;
background: rgba(128, 128, 128, 0.1);
display: flex;
@@ -460,6 +467,17 @@ body {
color: #fff;
transform: translateY(-3px);
}
+.s-icon:hover i { color: transparent !important; -webkit-text-fill-color: transparent; }
+.s-icon i { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
+.s-icon[href*="github.com"] i { background: var(--gradient-7); }
+.s-icon[href^="mailto:"] i { background: var(--gradient-6); }
+.s-icon[href*="blog.hehouhui.cn"] i { background: var(--gradient-3); }
+.s-icon[href*="zhihu.com"] i { background: var(--gradient-4); }
+.s-icon[href*="juejin.cn"] i { background: var(--gradient-1); }
+.s-icon[onclick*="toggleWechat"] i { background: var(--gradient-5); }
+[data-theme="night"] .s-icon { box-shadow: 0 0 10px var(--accent-glow); }
+[data-theme="night"] .s-icon i { text-shadow: 0 0 25px var(--accent-glow); }
+[data-theme="night"] .social-dock .s-icon { filter: hue-rotate(0deg); animation: hueCycle 10s linear infinite; }
/* --- Bio Card --- */
.area-bio {
@@ -840,7 +858,9 @@ body {
}
.i-emoji {
- font-size: 1.2rem;
+ font-size: 1.6rem;
+ color: var(--text-primary);
+ -webkit-text-fill-color: initial;
}
.i-text {
@@ -861,7 +881,7 @@ body {
-webkit-text-fill-color: transparent;
}
-.i-text span {
+.i-text span:not(.i-emoji) {
font-size: 0.75rem;
color: var(--text-tertiary);
/* 为兴趣描述添加渐变色彩 */
@@ -1385,8 +1405,11 @@ body {
flex-direction: row;
align-items: center;
gap: 8px;
- flex-wrap: wrap;
overflow: hidden;
+ /** 超出宽度换行显示 */
+ word-break: break-all;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.i-text strong, .i-text span {
@@ -1419,14 +1442,34 @@ body {
background: var(--gradient-2);
-webkit-background-clip: text;
background-clip: text;
- color: transparent;
}
.comment-box {
padding: 16px;
}
+ .interest-item { padding: 12px; }
+ .i-text { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; }
+ .i-emoji { flex: 0 0 auto; margin-right: 6px; }
+ .i-text strong { flex: 0 1 auto; white-space: nowrap; }
+ .i-text span:not(.i-emoji) { flex: 1 1 100%; white-space: normal; }
}
+@media (min-width: 769px) {
+ .social-dock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; justify-items: center; }
+ .s-icon { width: 42px; height: 42px; }
+ .s-icon i { font-size: 1.6rem; }
+}
+
+@media (max-width: 768px) {
+ .quote-box p.quote-collapsed { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+}
+
+.interest-list { grid-auto-rows: minmax(80px, auto); }
+.interest-item { padding: 14px; border-radius: 12px; gap: 12px; }
+.i-emoji { font-size: 1.6rem; }
+.i-text strong { display: block; }
+.i-text span:not(.i-emoji) { display: block; }
+
/* =========================================
8. Modal & Footer
========================================= */
@@ -1530,4 +1573,6 @@ body {
background-clip: initial;
color: var(--text-tertiary) !important;
-webkit-text-fill-color: initial;
-}
\ No newline at end of file
+}
+.social-dock .s-icon { color: var(--text-primary); }
+.social-dock .s-icon i { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: currentColor !important; text-shadow: none !important; }
\ No newline at end of file
diff --git a/js/about.js b/js/about.js
index f149612..c28ff3c 100644
--- a/js/about.js
+++ b/js/about.js
@@ -156,13 +156,13 @@ class DataManager {
let allRepos = [];
let page = 1;
const perPage = 100;
- while (page <= 5) { // 最多抓取500条,直到满足条件或为空
+ while (page <= 10) { // 最多抓取1000条,直到满足条件或为空
const rRes = await fetch(`https://api.github.com/users/${user}/repos?sort=stars&per_page=${perPage}&page=${page}`);
if (!rRes.ok) break;
const repos = await rRes.json();
if (!Array.isArray(repos) || repos.length === 0) break;
allRepos = allRepos.concat(repos);
- if (allRepos.length >= 200) break; // 足量
+ if (repos.length < perPage || allRepos.length >= 1000) break; // 足量
page++;
}
let repoData = allRepos.length ? allRepos : (window.SiteConfig?.defaults?.repos);
@@ -226,11 +226,12 @@ class DataManager {
async fetchBlog() {
const rssUrl = window.SiteConfig?.blog?.rssUrl || 'https://blog.hehouhui.cn/api/rss';
const cacheKey = (window.SiteConfig?.cacheKeys?.blog?.key) || 'blog_data_v2';
+ const timeout = (window.SiteConfig?.cacheKeys?.blog?.ttlMs) || 3600000;
const cached = JSON.parse(localStorage.getItem(cacheKey));
const now = Date.now();
// Check Cache (1 hour)
- if(cached && (now - cached.time < 3600000)) {
+ if(cached && (now - cached.time < timeout)) {
this.renderBlog(cached.posts);
return;
}
@@ -378,9 +379,25 @@ class UIManager {
initBioToggle() {
const el = document.querySelector('.bio-text');
const btn = document.getElementById('bio-toggle');
+ const qEl = document.querySelector('.quote-box p');
if(!el || !btn) return;
+ const assess = () => {
+ el.classList.add('collapsed');
+ if(qEl) qEl.classList.add('quote-collapsed');
+ const needsToggle = (el.scrollHeight > el.clientHeight) || (qEl && qEl.scrollHeight > qEl.clientHeight) || (window.innerWidth < 480 && ((el.textContent || '').length + (qEl?.textContent?.length || 0)) > 120);
+ if(needsToggle) {
+ btn.style.display = 'inline-block';
+ } else {
+ btn.style.display = 'none';
+ el.classList.remove('collapsed');
+ if(qEl) qEl.classList.remove('quote-collapsed');
+ }
+ };
+ assess();
+ window.addEventListener('resize', () => assess(), { passive: true });
btn.addEventListener('click', () => {
el.classList.toggle('collapsed');
+ if(qEl) qEl.classList.toggle('quote-collapsed');
});
}
@@ -398,8 +415,10 @@ class UIManager {
initProfileGradient() {
const name = document.querySelector('.hero-name');
const role = document.querySelector('.hero-role');
- if(name) name.classList.add('animated-gradient');
- if(role) role.classList.add('animated-gradient');
+ const loc = document.querySelector('.location-tag');
+ if(name) name.classList.add('grad-text-1','night-glow','glow-cycle');
+ if(role) role.classList.add('grad-text-2','night-glow','glow-cycle');
+ if(loc) loc.classList.add('grad-text-3','night-glow','glow-cycle');
}
initTechCloud() {
@@ -509,7 +528,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), 0.85);
+ tag.el.style.opacity = 1;
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;