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

- 新增渐变文字与发光文字样式类
- 引入 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

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>