25c2321669
- 统一变量命名，优化主题颜色与字体配置 - 精简选择器层级，提高样式性能与可维护性 - 改进玻璃拟态组件样式与交互反馈 - 优化移动端底部停靠导航与社交图标布局 - 调整技术标签云在不同设备上的展示方式 - 更新加载骨架屏动画与内容区域间距 - 引入更灵活的网格系统适配多屏幕尺寸 - 增强夜间模式下视觉效果与对比度可读性
265 lines
13 KiB
HTML
265 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||
<title>关于我 - Honesty</title>
|
||
<!-- 核心资源：使用 BootCDN 加速 -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/remixicon/3.5.0/remixicon.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="css/about.css">
|
||
<!-- Artalk 评论样式 -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.css">
|
||
<link rel="icon" href="favicon.ico">
|
||
</head>
|
||
<body>
|
||
<!-- 动态背景层 -->
|
||
<div class="aurora-canvas">
|
||
<div class="glow-spot spot-1"></div>
|
||
<div class="glow-spot spot-2"></div>
|
||
<div class="glow-spot spot-3"></div>
|
||
<div class="noise-layer"></div>
|
||
</div>
|
||
|
||
<div class="app-root">
|
||
<!-- 导航栏：PC顶栏 / 移动端底栏 -->
|
||
<nav class="glass-nav">
|
||
<div class="nav-inner">
|
||
<a href="index.html" class="logo-brand">
|
||
<span class="logo-text">Honesty</span>
|
||
<span class="logo-accent">.</span>
|
||
</a>
|
||
|
||
<div class="nav-menu">
|
||
<a href="index.html" class="nav-item">
|
||
<i class="ri-home-smile-2-line"></i>
|
||
<span class="nav-label" data-i18n="nav.home">首页</span>
|
||
</a>
|
||
<a href="javascript:void(0);" class="nav-item active">
|
||
<i class="ri-user-3-line"></i>
|
||
<span class="nav-label" data-i18n="nav.about">关于</span>
|
||
</a>
|
||
<a href="https://blog.hehouhui.cn" class="nav-item">
|
||
<i class="ri-quill-pen-line"></i>
|
||
<span class="nav-label" data-i18n="nav.blog">博客</span>
|
||
</a>
|
||
|
||
<div class="nav-divider"></div>
|
||
|
||
<!-- 功能按钮 -->
|
||
<button id="lang-btn" class="action-btn" aria-label="Switch Language">
|
||
<i class="ri-translate-2"></i>
|
||
<span class="btn-text">CN/EN</span>
|
||
</button>
|
||
<button id="theme-btn" class="action-btn" aria-label="Toggle Theme">
|
||
<i class="ri-sun-line icon-sun"></i>
|
||
<i class="ri-moon-line icon-moon"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="main-container">
|
||
|
||
<!-- 第一部分：Bento Grid 核心展示 -->
|
||
<div class="bento-grid">
|
||
|
||
<!-- [1] 个人卡片 (Profile) -->
|
||
<div class="bento-card area-profile">
|
||
<div class="profile-content">
|
||
<div class="avatar-ring">
|
||
<img src="https://blog-file.hehouhui.cn/202507171929231.jpeg" alt="Honesty" class="avatar-img">
|
||
<div class="status-dot" data-i18n="status.online">Online</div>
|
||
</div>
|
||
<div class="profile-info">
|
||
<h1 class="hero-name" data-i18n="profile.name">Honesty</h1>
|
||
<p class="hero-role" data-i18n="profile.role">Java Backend & AI Engineer</p>
|
||
<div class="location-tag">
|
||
<i class="ri-map-pin-user-fill"></i> <span data-i18n="profile.location">Shanghai, China</span>
|
||
</div>
|
||
</div>
|
||
<!-- 6个社交链接 (PC端显示) -->
|
||
<div class="social-dock desktop-social">
|
||
<a href="https://github.com/listener-He" target="_blank" class="s-icon"><i class="ri-github-fill"></i></a>
|
||
<a href="mailto:hehouhui@foxmail.com" class="s-icon"><i class="ri-mail-send-fill"></i></a>
|
||
<a href="https://blog.hehouhui.cn" target="_blank" class="s-icon"><i class="ri-pages-line"></i></a>
|
||
<a href="https://www.zhihu.com/people/wen-xin-92-2-57" target="_blank" class="s-icon"><i class="ri-zhihu-line"></i></a>
|
||
<a href="javascript:void(0);" onclick="toggleWechat()" class="s-icon"><i class="ri-wechat-fill"></i></a>
|
||
<a href="https://juejin.cn/user/3659591622878503" target="_blank" class="s-icon"><i class="ri-code-box-line"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- [2] 简介与格言 (Bio) -->
|
||
<div class="bento-card area-bio">
|
||
<div class="card-label" data-i18n="bio.label">About Me</div>
|
||
<p class="bio-text" data-i18n="bio.text">
|
||
"我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。"
|
||
</p>
|
||
<div class="quote-box">
|
||
<i class="ri-double-quotes-l"></i>
|
||
<p data-i18n="bio.quote">"我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。"</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- [3] 数据统计 (Stats) -->
|
||
<div class="bento-card area-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-val neon-font" id="coding-years">7+</span>
|
||
<span class="stat-key" data-i18n="stats.exp">Years</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-val neon-font" id="github-repos">--</span>
|
||
<span class="stat-key" data-i18n="stats.repos">Projects</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-val neon-font" id="github-followers">--</span>
|
||
<span class="stat-key" data-i18n="stats.followers">Followers</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- [4] MBTI 人格 (Personality) -->
|
||
<div class="bento-card area-mbti">
|
||
<div class="mbti-inner">
|
||
<div class="mbti-head">
|
||
<span class="mbti-code gradient-text">INFJ</span>
|
||
<span class="mbti-name" data-i18n="mbti.name">Advocate</span>
|
||
</div>
|
||
<p class="mbti-desc" data-i18n="mbti.desc">"理想主义与道德感，果断决绝的行动力。深度洞察与创意，关怀与同理心。"</p>
|
||
<div class="mbti-tags">
|
||
<span class="tag" data-i18n="mbti.tag1">Idealism</span>
|
||
<span class="tag" data-i18n="mbti.tag2">Insight</span>
|
||
<span class="tag" data-i18n="mbti.tag3">Empathy</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- [5] 技术栈宇宙 (Tech Stack) -->
|
||
<div class="bento-card area-tech">
|
||
<div class="card-header">
|
||
<h3 data-i18n="tech.title">Tech Universe</h3>
|
||
</div>
|
||
<!-- 容器：PC端3D球，移动端横向滚动条 -->
|
||
<div id="tech-container" class="tech-wrapper">
|
||
<!-- JS 动态注入 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- [6] 兴趣爱好 (Interests) -->
|
||
<div class="bento-card area-interests">
|
||
<div class="card-header">
|
||
<h3 data-i18n="interest.title">Interests</h3>
|
||
</div>
|
||
<div class="interest-list">
|
||
<div class="interest-item">
|
||
<span class="i-emoji">🚴♂️</span>
|
||
<div class="i-text">
|
||
<strong data-i18n="interest.cycling">Cycling</strong>
|
||
<span data-i18n="interest.cycling_desc">Measuring the world</span>
|
||
</div>
|
||
</div>
|
||
<div class="interest-item">
|
||
<span class="i-emoji">📚</span>
|
||
<div class="i-text">
|
||
<strong data-i18n="interest.reading">Reading</strong>
|
||
<span data-i18n="interest.reading_desc">Thinking tracks</span>
|
||
</div>
|
||
</div>
|
||
<div class="interest-item">
|
||
<span class="i-emoji">🔍</span>
|
||
<div class="i-text">
|
||
<strong data-i18n="interest.opensource">Open Source</strong>
|
||
<span data-i18n="interest.opensource_desc">Sharing power</span>
|
||
</div>
|
||
</div>
|
||
<div class="interest-item">
|
||
<span class="i-emoji">💡</span>
|
||
<div class="i-text">
|
||
<strong data-i18n="interest.learning">Learning</strong>
|
||
<span data-i18n="interest.learning_desc">Always curious</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 移动端显示的社交栏 (6个链接) -->
|
||
<div class="bento-card area-social-mobile mobile-social">
|
||
<a href="https://github.com/listener-He" class="ms-btn"><i class="ri-github-fill"></i></a>
|
||
<a href="mailto:hehouhui@foxmail.com" class="ms-btn"><i class="ri-mail-send-fill"></i></a>
|
||
<a href="https://blog.hehouhui.cn" class="ms-btn"><i class="ri-pages-line"></i></a>
|
||
<a href="https://www.zhihu.com/people/wen-xin-92-2-57" class="ms-btn"><i class="ri-zhihu-line"></i></a>
|
||
<a href="javascript:void(0);" onclick="toggleWechat()" class="ms-btn"><i class="ri-wechat-fill"></i></a>
|
||
<a href="https://juejin.cn/user/3659591622878503" class="ms-btn"><i class="ri-code-box-line"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二部分：开源与博客 (瀑布流/列表) -->
|
||
<div class="content-section">
|
||
<!-- 左侧：GitHub -->
|
||
<div class="content-col">
|
||
<div class="col-header">
|
||
<h3 class="glow-title"><i class="ri-github-line"></i> <span data-i18n="github.title">Open Source</span></h3>
|
||
</div>
|
||
<div class="glass-panel">
|
||
<!-- 贡献图 placeholder -->
|
||
<div id="github-commits" class="commits-chart"></div>
|
||
<div id="projects-container" class="projects-list">
|
||
<!-- Loading State -->
|
||
<div class="skeleton-card"></div>
|
||
<div class="skeleton-card"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：Blog -->
|
||
<div class="content-col">
|
||
<div class="col-header">
|
||
<h3 class="glow-title"><i class="ri-article-line"></i> <span data-i18n="blog.title">Latest Posts</span></h3>
|
||
<a href="https://blog.hehouhui.cn" class="more-link" data-i18n="blog.more">View All →</a>
|
||
</div>
|
||
<div id="blog-container" class="blog-list glass-panel">
|
||
<!-- Loading State -->
|
||
<div class="skeleton-card"></div>
|
||
<div class="skeleton-card"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第三部分：评论 -->
|
||
<div class="comments-wrapper">
|
||
<div class="col-header">
|
||
<h3 class="glow-title"><i class="ri-discuss-line"></i> <span data-i18n="comment.title">Message Board</span></h3>
|
||
</div>
|
||
<div class="glass-panel comment-box">
|
||
<div id="artalk-container"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<!-- 微信弹窗 -->
|
||
<div id="wechat-modal" class="modal-overlay">
|
||
<div class="modal-glass">
|
||
<button class="modal-close" onclick="toggleWechat()"><i class="ri-close-line"></i></button>
|
||
<h3 data-i18n="modal.wechat">Official Account</h3>
|
||
<div class="qr-box">
|
||
<img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg" alt="WeChat QR" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
|
||
<div class="qr-fallback">QR Load Failed</div>
|
||
</div>
|
||
<p data-i18n="modal.desc">Scan to follow Tech Share</p>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="site-footer">
|
||
<p>© 2024 Honesty. All rights reserved. <a href="https://beian.miit.gov.cn/" target="_blank">湘ICP备20014902号</a></p>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- 脚本：BootCDN jQuery -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||
<script src="js/config.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.js"></script>
|
||
<script src="js/about.js"></script>
|
||
</body>
|
||
</html> |