feat(about): 优化关于页面样式与交互体验
- 新增渐变文字与发光文字样式类 - 引入 Google Fonts 字体资源提升视觉效果 - 重构英雄区域布局结构,支持响应式网格排列 - 更新 GitHub 统计模块 UI,采用卡片式设计展示数据 - 调整配色方案,新增主题相关变量定义 - 优化移动端显示效果,改进原有媒体查询逻辑 - 完善夜间模式下的文字与背景适配 - 移除旧版提交统计图表,替换为简洁数字展示形式
This commit is contained in:
17
about.html
17
about.html
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user