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

feat(about): 实现动态 GitHub 提交统计与页面样式优化

Browse Source 
- 移除冗余的夜间主题 CSS 变量定义
- 新增 softPulse 动画用于按钮微光效果
- 优化主页标题动画与样式，调整颜色与阴影
- 删除重复的 hero-title 和 profile-avatar 样式定义
- 更新时间轴移动端布局逻辑并增强响应式表现
- 为社交卡片、博客、联系人等区块添加注释分隔
- 引入 Commit 统计功能，通过 GitHub API 获取真实数据
- 添加本地缓存机制以提升性能和减少请求频率
- 创建 fetchCommitCounts 函数计算周/月/年提交次数
- 构建 renderCommitStats 函数动态渲染提交统计数据
- 修复 CSS 文件末尾多余空行与格式问题
This commit is contained in:
hehh
2025-11-20 20:23:37 +08:00
parent 629eb55a41
commit e0396f952e
2 changed files with 144 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
css/about.css
View File

@@ -41,14 +41,6 @@
--glass-border: rgba(255, 255, 255, 0.12);
}
:root.theme-night {
--grad-a: #101216;
--grad-b: #171a1f;
--text-strong: #F2F3F5;
--text-soft: rgba(255, 255, 255, 0.9);
--glass-alpha: 0.14;
--glass-border: rgba(255, 255, 255, 0.16);
}
.theme-day .nav-logo {
color: var(--text-strong);
@@ -701,6 +693,11 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
}
@keyframes softPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.profile-info h1 {
margin: 0 0 0.5rem 0;
font-size: 2rem;
@@ -798,31 +795,19 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
color: var(--text-strong); /* 使用主题文字颜色 */
}
.profile-avatar {
position: relative;
display: inline-block;
margin-bottom: 2rem;
}
.hero-title {
font-size: 4rem;
font-weight: 800;
color: #2c3e50;
margin-bottom: 1rem;
background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titleGlow 3s ease-in-out infinite;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
animation: titleGlow 3s ease-in-out infinite alternate;
}
.hero-subtitle {
font-size: 1.4rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 1.5rem;
font-weight: 500;
opacity: 0.9;
}
.hero-description {
margin-bottom: 2rem;
@@ -840,10 +825,6 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
display: inline-block;
}
.avatar-image:hover {
transform: scale(1.05);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}
.avatar-ring {
position: absolute;
@@ -866,18 +847,6 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
}
.hero-title {
font-size: 4rem;
font-weight: 800;
color: #2c3e50;
margin-bottom: 1rem;
background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titleGlow 3s ease-in-out infinite alternate;
}
@keyframes titleGlow {
from {
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
@@ -911,7 +880,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
font-size: 1rem;
font-weight: 700;
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
animation: pulse 2s infinite;
animation: softPulse 2s infinite;
border: 1px solid rgba(255, 255, 255, 0.18);
}
@@ -972,44 +941,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
opacity: 0.8;
}
/* 技术栈云图 - INFJ风格设计 */
.tech-cloud-section {
padding: 8rem 2rem;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 50px;
margin: 2rem;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
position: relative;
overflow: hidden;
}
.tech-cloud-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
pointer-events: none;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 标签浮动动画 - 仅在非球体模式下使用 */
@keyframes cloudFloat {
@@ -1137,11 +1069,6 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
}
.cloud-tag {
flex-shrink: 0;
margin: 0 5px;
}
/* 标签云标签 */
.cloud-tag {
@@ -1382,39 +1309,10 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.timeline-item {
display: flex;
align-items: center;
margin-bottom: 4rem;
margin-bottom: 3rem;
position: relative;
}
/* 在移动端保持单列布局 */
@media (max-width: 768px) {
.personality-timeline::before {
left: 30px;
}
.timeline-item {
flex-direction: row !important;
padding-left: 80px;
}
.timeline-icon {
position: absolute;
left: 0;
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.timeline-content {
margin: 0;
margin-left: 1rem;
}
}
.timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.timeline-icon {
width: 90px;
height: 90px;
@@ -1477,7 +1375,40 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
font-weight: 500;
}
/* PC端保持左右交错布局 */
@media (min-width: 769px) {
.timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
}
/* 在移动端保持单列布局 */
@media (max-width: 768px) {
.personality-timeline::before {
left: 30px;
}
.timeline-item {
flex-direction: row !important;
padding-left: 80px;
}
.timeline-icon {
position: absolute;
left: 0;
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.timeline-content {
margin: 0;
margin-left: 1rem;
}
}
/* GitHub项目展示 */
.github-showcase-section {
padding: 8rem 2rem;
background: rgba(255, 255, 255, 0.05);
@@ -1581,6 +1512,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
/* 博客瀑布流 */
.blog-waterfall-section {
padding: 8rem 2rem;
background: rgba(255, 255, 255, 0.05);
@@ -1680,6 +1612,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
/* 联系方式轨道 - 循环随机围绕动画 */
.contact-floating-section {
padding: 8rem 2rem;
position: relative;
@@ -1702,8 +1635,8 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(155, 89, 182, 0.1) 0%, transparent 50%);
radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(155, 89, 182, 0.1) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
border-radius: 50px;
@@ -1746,6 +1679,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
/* 社交卡片 */
.social-card {
background: rgba(255, 255, 255, var(--glass-alpha));
backdrop-filter: blur(var(--glass-blur));
@@ -1835,6 +1769,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
/* 轨道围绕动画 - 每个卡片不同的轨道路径，优化避免碰撞 */
.social-card:nth-child(1) {
animation: orbit1 20s linear infinite;
}
@@ -1945,6 +1880,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
/* 微信弹窗样式 */
.modal {
position: fixed;
z-index: 1000;
@@ -2000,6 +1936,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
/* 评论系统 */
.comments-section {
padding: 8rem 2rem;
background: rgba(255, 255, 255, 0.05);
@@ -2037,6 +1974,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
/* 加载动画 */
.loading-placeholder {
text-align: center;
padding: 4rem 2rem;
@@ -2223,7 +2161,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
@keyframes orbit6 {
}
/* 移动端英雄区域重构 */
.hero-container {
grid-template-columns: 1fr;
text-align: center;
@@ -2439,6 +2377,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
/* 页脚样式 - 首页风格 */
.footer {
background: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.8);
@@ -2593,4 +2532,6 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
}
/* 文件末尾 */