From 40cc7723169a3138c3cd937afa0d0264fab6d1fe Mon Sep 17 00:00:00 2001 From: hehh Date: Sun, 23 Nov 2025 19:55:49 +0800 Subject: [PATCH] =?UTF-8?q?feat(about):=20=E5=A2=9E=E5=BC=BA=E4=B8=AA?= =?UTF-8?q?=E4=BA=BA=E4=B8=BB=E9=A1=B5=E6=A0=B7=E5=BC=8F=E4=B8=8E=E4=BA=A4?= =?UTF-8?q?=E4=BA=92=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增多种文字渐变与发光动画类 - 调整社交图标尺寸及悬停效果 - 优化兴趣列表布局与响应式显示 - 扩大GitHub仓库数据抓取上限至1000条 - 增加博客RSS缓存时间配置选项 - 完善简介文本折叠逻辑与屏幕适配 - 统一页面元素渐变样式应用方式 - 提升标签云中标签的可见性表现 --- about.html | 16 +++++++------- css/about.css | 59 +++++++++++++++++++++++++++++++++++++++++++++------ js/about.js | 31 +++++++++++++++++++++------ 3 files changed, 85 insertions(+), 21 deletions(-) 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;