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

feat(about): 优化关于页面样式与交互体验

Browse Source 
- 新增渐变文字与发光文字样式类
- 引入 Google Fonts 字体资源提升视觉效果
- 重构英雄区域布局结构，支持响应式网格排列
- 更新 GitHub 统计模块 UI，采用卡片式设计展示数据
- 调整配色方案，新增主题相关变量定义
- 优化移动端显示效果，改进原有媒体查询逻辑
- 完善夜间模式下的文字与背景适配
- 移除旧版提交统计图表，替换为简洁数字展示形式
This commit is contained in:
hehh
2025-11-21 11:45:20 +08:00
parent 0c0b2f820e
commit a7b7166fef
3 changed files with 299 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
about.html
View File

@@ -4,6 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关于我 - Honesty</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Playfair+Display:ital,wght@0,400;0,700;1,600&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/about.css">
<link rel="stylesheet" href="css/iconfont.css">
@@ -50,13 +53,13 @@
</div>
</div>
</div>
<div class="hero-right">
<div class="hero-right hero-right-grid">
<div class="intro-content">
<div class="intro-text">
<div class="quote-section">
<div class="quote-line"></div>
<div class="quote-content">
<h2>关于我</h2>
<h2><span class="gradient-text">关于我</span></h2>
<blockquote class="intro-quote">
<p>"我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。"</p>
</blockquote>
@@ -71,7 +74,7 @@
<div class="mbti-header">
<img src="https://blog-file.hehouhui.cn/INFJ.png" alt="INFJ" style="width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,0.4)">
<span class="mbti-tag">INFJ</span>
<span class="mbti-name">提倡者人格</span>
<span class="mbti-name"><span class="gradient-text">提倡者人格</span></span>
</div>
<div class="mbti-traits">
<span class="trait">理想主义与道德感</span>
@@ -80,21 +83,21 @@
<span class="trait">关怀与同理心</span>
</div>
<div class="infj-quote">
<p>"提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。"</p>
<p style="margin-top: 1.5rem; color: #2a2d34; font-style: italic">"提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。"</p>
</div>
</div>
</div>
<div class="hero-stats">
<div class="stat-item">
<span class="stat-number" id="github-repos">--</span>
<span class="stat-number glow-text" id="github-repos">--</span>
<span class="stat-label">开源项目</span>
</div>
<div class="stat-item">
<span class="stat-number" id="github-followers">--</span>
<span class="stat-number glow-text" id="github-followers">--</span>
<span class="stat-label">GitHub关注</span>
</div>
<div class="stat-item">
<span class="stat-number" id="coding-years">7+</span>
<span class="stat-number glow-text" id="coding-years">7+</span>
<span class="stat-label">编程年限</span>
</div>
</div>

89
css/about.css
View File

@@ -34,6 +34,8 @@
--text-soft: var(--day-text-secondary);
--glass-alpha: 0.25; /* 增加毛玻璃效果 */
--glass-border: rgba(0, 0, 0, 0.08);
--accent-b: #8adbd0;
--accent-coral: #ff887a;
}
:root.theme-night {
@@ -43,6 +45,8 @@
--text-soft: rgba(248, 249, 250, 0.85);
--glass-alpha: 0.18;
--glass-border: rgba(255, 255, 255, 0.12);
--accent-b: #36e4cf;
--accent-coral: #ff6b6b;
}
@@ -290,6 +294,46 @@ body {
background-attachment: fixed;
}
.gradient-text {
color: var(--text-strong);
background: none;
-webkit-text-fill-color: initial;
filter: none;
display: inline;
}
.glow-text {
background: linear-gradient(45deg, var(--accent-coral), var(--accent-b));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 12px rgba(78, 205, 196, 0.35);
}
.theme-day .gradient-text {
color: var(--day-text-primary);
background: none;
-webkit-text-fill-color: initial;
}
@supports (-webkit-background-clip: text) {
.theme-night .gradient-text {
background: linear-gradient(90deg, #a5b4fc, #67e8f9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.theme-day .glow-text {
background: linear-gradient(45deg, #2a2d34, #3b3f46);
-webkit-text-fill-color: transparent;
text-shadow: none;
}
.theme-night .glow-text {
background: linear-gradient(45deg, var(--accent-coral), var(--accent-b));
}
/* 动态背景 */
body::before {
content: '';
@@ -386,6 +430,7 @@ a:hover {
/*color: var(--text-strong); !* 使用主题文字颜色 *!*/
line-height: 1.7;
font-size: 1.1rem;
font-family: 'Playfair Display', 'Noto Serif SC', serif;
}
/* 链接下划线动画 */
@@ -687,7 +732,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-columns: 0.9fr 2.1fr;
gap: 4rem;
align-items: center;
}
@@ -803,12 +848,14 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
font-size: 0.9rem;
}
.hero-right {
padding-left: 2rem;
}
.hero-right { padding-left: 2rem; }
.hero-right-grid { display: grid; grid-template-columns: 1.5fr 1fr; grid-auto-rows: min-content; gap: 2rem; }
.hero-right-grid .intro-content { grid-column: 1 / 2; }
.hero-right-grid .personality-section { grid-column: 2 / 3; }
.hero-right-grid .hero-stats { grid-column: 2 / 3; }
.intro-content h2 {
font-size: 2.5rem;
font-size: 2.6rem;
font-weight: 800;
color: #fff;
margin-bottom: 1.5rem;
@@ -816,6 +863,7 @@ 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;
font-family: 'Playfair Display', 'Inter', 'PingFang SC', 'Microsoft YaHei', serif;
}
.intro-text p {
@@ -889,6 +937,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titleGlow 3s ease-in-out infinite alternate;
font-family: 'Playfair Display', 'Inter', 'PingFang SC', 'Microsoft YaHei', serif;
}
@@ -945,6 +994,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
margin-bottom: 2rem;
font-weight: 300;
opacity: 0.8;
font-family: 'Inter', 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.personality-badge {
@@ -1015,6 +1065,8 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
margin-bottom: 1rem;
position: relative;
display: inline-block;
font-family: 'Playfair Display', 'Inter', 'PingFang SC', 'Microsoft YaHei', serif;
text-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
}
.section-subtitle {
@@ -2168,11 +2220,12 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-container { grid-template-columns: 1.2fr 0.8fr; gap: 2.5rem; }
.hero-right { padding-left: 0; }
.hero-right-grid { grid-template-columns: 1fr; grid-auto-rows: min-content; }
.hero-right-grid .intro-content { grid-column: 1 / -1; }
.hero-right-grid .personality-section { grid-column: 1 / -1; }
.hero-right-grid .hero-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.social-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -2686,3 +2739,19 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
/* 文件末尾 */
.hero-container { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
.hero-right { padding-left: 0; }
.hero-right-grid { display: block; }
.theme-day .nav-logo {
color: var(--day-text-primary);
background: none;
-webkit-text-fill-color: initial;
}
.theme-day .section-title,
.theme-day .hero-title,
.theme-day .view-all-link {
color: var(--day-text-primary);
background: none;
-webkit-text-fill-color: initial;
}

203
js/about.js
View File

@@ -1,5 +1,3 @@
// 关于页面JavaScript功能 - 现代动态版本
$(document).ready(function() {
initThemeByTime();
@@ -887,10 +885,10 @@ var githubStyles = '<style>' +
'}' +
'.github-info h3 {' +
' margin: 0 0 0.5rem 0;' +
' color: #fff;' +
' color: var(--text-strong);' +
'}' +
'.github-bio {' +
' color: rgba(255, 255, 255, 0.8);' +
' color: var(--text-soft);' +
' margin-bottom: 1rem;' +
' font-size: 0.9rem;' +
'}' +
@@ -905,15 +903,15 @@ var githubStyles = '<style>' +
' display: block;' +
' font-size: 1.2rem;' +
' font-weight: 600;' +
' color: #fff;' +
' color: var(--text-strong);' +
'}' +
'.stat-item .stat-label {' +
' font-size: 0.8rem;' +
' color: rgba(255, 255, 255, 0.8);' +
' color: var(--text-soft);' +
'}' +
'.commits-stats h3 {' +
' margin-bottom: 1rem;' +
' color: #fff;' +
' color: var(--text-strong);' +
'}' +
'.commit-item {' +
' display: flex;' +
@@ -924,12 +922,12 @@ var githubStyles = '<style>' +
'.commit-date {' +
' width: 60px;' +
' font-size: 0.9rem;' +
' color: rgba(255, 255, 255, 0.8);' +
' color: var(--text-soft);' +
'}' +
'.commit-bar {' +
' flex: 1;' +
' height: 8px;' +
' background: rgba(255, 255, 255, 0.1);' +
' background: rgba(0, 0, 0, 0.1);' +
' border-radius: 4px;' +
' overflow: hidden;' +
'}' +
@@ -944,18 +942,18 @@ var githubStyles = '<style>' +
' text-align: right;' +
' font-size: 0.9rem;' +
' font-weight: 600;' +
' color: #fff;' +
' color: var(--text-strong);' +
'}' +
'.error {' +
' text-align: center;' +
' color: rgba(255, 255, 255, 0.5);' +
' color: var(--text-soft);' +
' font-style: italic;' +
' padding: 2rem;' +
'}' +
'.project-updated {' +
' margin-top: 1rem;' +
' font-size: 0.8rem;' +
' color: rgba(255, 255, 255, 0.8);' +
' color: var(--text-soft);' +
'}' +
'.article-category {' +
' background: rgba(102, 126, 234, 0.2);' +
@@ -964,6 +962,147 @@ var githubStyles = '<style>' +
' border-radius: 12px;' +
' font-size: 0.8rem;' +
'}' +
/* 提交统计两行横排：标题与矩阵 */ +
'.commit-inline-title {' +
' margin-left: 12px;' +
' font-weight: 600;' +
' color: var(--text-strong);' +
' font-size: 0.9rem;' +
' opacity: 0.9;' +
'}' +
'.commit-inline-matrix {' +
' display: grid;' +
' grid-template-columns: repeat(3, max-content);' +
' grid-template-rows: auto auto;' +
' column-gap: 24px;' +
' row-gap: 2px;' +
' margin-top: 4px;' +
'}' +
'.commit-inline-matrix .commit-num {' +
' font-size: 1.1rem;' +
' font-weight: 700;' +
' color: var(--text-strong);' +
' text-align: left;' +
'}' +
'.commit-inline-matrix .commit-lab {' +
' font-size: 0.8rem;' +
' color: var(--text-soft);' +
' text-align: left;' +
'}' +
'.commit-inline {' +
' margin-top: 4px;' +
'}' +
'.commit-inline-nums,' +
'.commit-inline-labs {' +
' display: flex;' +
' gap: 24px;' +
' align-items: baseline;' +
'}' +
'.commit-inline-nums .commit-num {' +
' font-size: 1.1rem;' +
' font-weight: 700;' +
' color: var(--text-strong);' +
'}' +
'.commit-inline-labs .commit-lab {' +
' font-size: 0.8rem;' +
' color: var(--text-soft);' +
'}' +
/* 作者行内提交统计分组 */ +
'.commit-inline-group {' +
' display: inline-block;' +
' margin-left: 24px;' +
' vertical-align: middle;' +
'}' +
'.commit-inline-row {' +
' display: flex;' +
' align-items: flex-end;' +
' gap: 18px;' +
'}' +
'.commit-inline-group .commit-title {' +
' font-weight: 600;' +
' color: var(--text-strong);'
+ ' font-size: 0.9rem;' +
' opacity: 0.9;' +
' margin: 0 0 6px 0;' +
'}' +
'.commit-inline-group .stat-item {' +
' display: flex;' +
' flex-direction: column;' +
' align-items: center;' +
' gap: 4px;' +
'}' +
'.commit-inline-group .stat-item .stat-number {' +
' font-size: 1rem;' +
' font-weight: 700;' +
'}' +
'.commit-inline-group .stat-item .stat-label {' +
' font-size: 0.75rem;' +
' color: var(--text-soft);' +
'}' +
/* 提交统计数字化样式 */ +
'.commits-stats {' +
' margin-top: 1rem;' +
'}' +
'.commits-stats .commit-cards {' +
' display: grid;' +
' grid-template-columns: repeat(3, minmax(0,1fr));' +
' gap: 12px;' +
'}' +
'.commits-stats .commit-card {' +
' background: rgba(255, 255, 255, var(--glass-alpha));' +
' backdrop-filter: blur(var(--glass-blur));' +
' -webkit-backdrop-filter: blur(var(--glass-blur));' +
' border: 1px solid var(--glass-border);' +
' border-radius: 14px;' +
' padding: 10px;' +
' text-align: center;' +
' box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);' +
'}' +
'.commits-stats .commit-label {' +
' display: block;' +
' font-size: 0.85rem;' +
' color: var(--text-soft);' +
' margin-bottom: 6px;' +
'}' +
'.commits-stats .commit-value {' +
' display: block;' +
' font-size: 1.4rem;' +
' font-weight: 700;' +
' color: var(--text-strong);' +
'}' +
'.commit-module {' +
' max-width: 1000px;' +
' margin: 8px auto 24px;' +
'}' +
'.commit-module-title {' +
' font-size: 1rem;' +
' font-weight: 700;' +
' color: var(--text-strong);' +
' opacity: 0.9;' +
' margin-bottom: 8px;' +
'}' +
'.commit-module-nums {' +
' display: grid;' +
' grid-template-columns: repeat(3, minmax(0,1fr));' +
' gap: 16px;' +
' align-items: end;' +
'}' +
'.commit-module-nums .commit-num {' +
' display: flex;' +
' flex-direction: column;' +
' align-items: flex-start;' +
'}' +
'.commit-module-nums .commit-num .num {' +
' font-size: 1.6rem;' +
' font-weight: 800;' +
' color: var(--text-strong);' +
' line-height: 1;' +
'}' +
'.commit-module-nums .commit-num .lab {' +
' margin-top: 4px;' +
' font-size: 0.8rem;' +
' color: var(--text-soft);' +
'}' +
'</style>';
// 添加样式到页面
@@ -1123,36 +1262,16 @@ function renderCommitStats(stats) {
var w = parseInt(stats.week||0,10);
var m = parseInt(stats.month||0,10);
var y = parseInt(stats.year||0,10);
function pct(v){
var p = 0;
if (y>0) p = Math.min(100, Math.max(5, Math.round(v*100/Math.max(y,1))));
return p;
}
var commitsHtml = '<div class="commits-stats">'+
'<h3>提交统计</h3>'+
'<div class="commits-chart">'+
'<div class="commit-item">'+
'<span class="commit-date">本周</span>'+
'<div class="commit-bar">'+
'<div class="commit-fill" style="width: '+pct(w)+'%"></div>'+
'</div>'+
'<span class="commit-count">'+w+'</span>'+
'</div>'+
'<div class="commit-item">'+
'<span class="commit-date">本月</span>'+
'<div class="commit-bar">'+
'<div class="commit-fill" style="width: '+pct(m)+'%"></div>'+
'</div>'+
'<span class="commit-count">'+m+'</span>'+
'</div>'+
'<div class="commit-item">'+
'<span class="commit-date">今年</span>'+
'<div class="commit-bar">'+
'<div class="commit-fill" style="width: 100%"></div>'+
'</div>'+
'<span class="commit-count">'+y+'</span>'+
'</div>'+
Array.from(document.querySelectorAll('.commit-inline-title, .commit-inline, .commit-inline-matrix, .commit-inline-group')).forEach(function(el){ el.remove(); });
var html = '<div class="commit-module">'+
'<div class="commit-module-title">提交统计</div>'+
'<div class="commit-module-nums">'+
'<div class="commit-num"><span class="num">'+w+'</span><span class="lab">本周</span></div>'+
'<div class="commit-num"><span class="num">'+m+'</span><span class="lab">本月</span></div>'+
'<div class="commit-num"><span class="num">'+y+'</span><span class="lab">今年</span></div>'+
'</div>'+
'</div>';
$('#github-commits').html(commitsHtml);
$('#github-commits').html(html);
}