feat(about): 增强个人介绍页面功能与样式

- 添加简介文本折叠/展开功能
- 实现导航栏滚动时的视觉变化效果
- 为姓名和角色标题添加动画渐变效果
- 更新技能标签云的动画和布局
- 优化GitHub数据获取逻辑,支持分页加载更多仓库
- 移除旧的缓存配置,简化代码结构
- 调整响应式设计中的评论框内边距
- 统一文本对齐方式并增强可读性
- 修复技能展示区域的marquee动画实现
- 添加新的CSS工具类以支持动态交互效果
This commit is contained in:
hehh
2025-11-23 18:21:19 +08:00
parent c5ca56356d
commit cd91405733
4 changed files with 81 additions and 44 deletions

View File

@@ -141,13 +141,21 @@ class DataManager {
try {
// Parallel Fetch
const [uRes, rRes] = await Promise.allSettled([
fetch(`https://api.github.com/users/${user}`),
fetch(`https://api.github.com/users/${user}/repos?sort=stars&per_page=100`)
]);
const userData = uRes.status === 'fulfilled' ? await uRes.value.json() : (window.SiteConfig?.defaults?.user);
let repoData = rRes.status === 'fulfilled' ? await rRes.value.json() : (window.SiteConfig?.defaults?.repos);
const uRes = await fetch(`https://api.github.com/users/${user}`);
const userData = uRes.ok ? await uRes.json() : (window.SiteConfig?.defaults?.user);
let allRepos = [];
let page = 1;
const perPage = 100;
while (page <= 5) { // 最多抓取500条直到满足条件或为空
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; // 足量
page++;
}
let repoData = allRepos.length ? allRepos : (window.SiteConfig?.defaults?.repos);
// 过滤掉fork项目并按星数排序
if (Array.isArray(repoData)) {
@@ -319,6 +327,9 @@ class UIManager {
this.initTechCloud();
this.initModal();
this.initArtalk();
this.initBioToggle();
this.initNavInteraction();
this.initProfileGradient();
let resizeTimer = null;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
@@ -354,6 +365,33 @@ class UIManager {
}
}
initBioToggle() {
const el = document.querySelector('.bio-text');
const btn = document.getElementById('bio-toggle');
if(!el || !btn) return;
btn.addEventListener('click', () => {
el.classList.toggle('collapsed');
});
}
initNavInteraction() {
const nav = document.querySelector('.glass-nav');
if(!nav) return;
const onScroll = () => {
const y = window.scrollY || document.documentElement.scrollTop;
nav.classList.toggle('nav-scrolled', y > 30);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
}
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');
}
initTechCloud() {
const container = document.getElementById('tech-container');
if(!container) return;
@@ -388,8 +426,7 @@ class UIManager {
} else {
// PC: 3D Sphere
container.classList.remove('mobile-scroll');
const token = Date.now();
container.__animToken = token;
container.__animToken = Date.now();
const tags = [];
techStack.forEach((item, index) => {

View File

@@ -34,33 +34,11 @@ const SiteConfig = {
// about.js 配置
github: {
username: 'listener-He',
cache: {
cacheKey: "gh_data_v2",
stats: {
key: 'github_stats_cache',
timeKey: 'github_stats_cache_time',
expirationDays: 3
},
projects: {
key: 'github_projects_cache',
timeKey: 'github_projects_cache_time',
expirationDays: 3
},
commits: {
key: 'github_commits_cache',
timeKey: 'github_commits_cache_time',
expirationHours: 24
}
}
username: 'listener-He'
},
blog: {
rssUrl: 'https://blog.hehouhui.cn/api/rss',
cache: {
key: 'blog_articles_cache',
expirationDays: 1
}
rssUrl: 'https://blog.hehouhui.cn/api/rss'
},
// 通用缓存键与TTL毫秒