532cbafd8e
- 将音频播放器移至独立的iframe中以提升性能和隔离性 - 实现主页面与iframe之间的postMessage通信机制 - 添加音频播放状态同步和UI更新逻辑 - 支持自动播放控制和用户交互检测 - 实现播放状态持久化存储和恢复功能 - 优化移动端音频控制体验 - 添加版权信息更新和国际化支持
406 lines
21 KiB
HTML
406 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-lang="zh">
|
||
<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>
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
|
||
|
||
<!--SEO信息 -->
|
||
<meta name="description" content="关于Honesty,关于HeHouHui,关于HeHui,关于明厚, About Me Honesty, About Me HeHouHui, About Me HeHui">
|
||
<meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚">
|
||
<link rel="canonical" href="https://www.hehouhui.cn/about.html">
|
||
<meta name="author" content="Honesty">
|
||
|
||
<!-- 社交平台分享优化 -->
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://www.hehouhui.cn/about.html">
|
||
<meta property="og:title" content="关于我 - Honesty的个人主页">
|
||
<meta property="og:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
|
||
<meta property="og:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
||
<meta property="og:site_name" content="Honesty的个人主页">
|
||
<meta property="og:locale" content="zh_CN">
|
||
|
||
<!-- Twitter -->
|
||
<meta property="twitter:card" content="summary_large_image">
|
||
<meta property="twitter:url" content="https://www.hehouhui.cn/about.html">
|
||
<meta property="twitter:title" content="关于我 - Honesty的个人主页">
|
||
<meta property="twitter:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。">
|
||
<meta property="twitter:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
||
<meta property="twitter:site" content="@Honesty861024">
|
||
<link rel="alternate" hreflang="zh-cn" href="https://www.hehouhui.cn/about.html">
|
||
<link rel="alternate" hreflang="en" href="https://www.hehouhui.cn/about.html?lang=en">
|
||
<link rel="alternate" hreflang="x-default" href="https://www.hehouhui.cn/about.html">
|
||
|
||
<!-- 微信小程序/朋友圈分享 -->
|
||
<meta property="wechat:image" content="https://www.hehouhui.cn/images/avatar.jpeg">
|
||
<meta property="wechat:title" content="关于我 - Honesty的个人主页">
|
||
<meta property="wechat:description" content="我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。">
|
||
|
||
<!-- 核心资源：使用 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/about.css?version=20251125">
|
||
<!-- Artalk 评论样式 -->
|
||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/artalk/2.9.1/Artalk.css">
|
||
<link rel="stylesheet" href="css/artalk.css?version=20251125">
|
||
<link rel="icon" href="favicon.ico">
|
||
<link rel="apple-touch-icon" href="./images/logo.png">
|
||
|
||
<!--IE淘汰计划-->
|
||
<script>
|
||
if (/*@cc_on!@*/false || (!!window.MSInputMethodContext && !!document.documentMode)) window.location.href = "https://imsyy.top/upgrade-your-browser/index.html?referrer=" + encodeURIComponent(window.location.href);
|
||
</script>
|
||
</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" tabindex="0">
|
||
<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" tabindex="0">
|
||
<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="images/avatar.jpeg" alt="Honesty" class="avatar-img" loading="lazy">
|
||
<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" aria-label="GitHub profile" tabindex="0"><i class="ri-github-fill"></i></a>
|
||
<a href="mailto:hehouhui@foxmail.com" class="s-icon" aria-label="Email contact" tabindex="0"><i class="ri-mail-send-fill"></i></a>
|
||
<a href="https://twitter.com/Honesty861024" target="_blank" class="s-icon" aria-label="Twitter profile" tabindex="0"><i class="ri-twitter-line"></i></a>
|
||
<a href="https://www.zhihu.com/people/wen-xin-92-2-57" target="_blank" class="s-icon" aria-label="Zhihu profile" tabindex="0"><i class="ri-zhihu-line"></i></a>
|
||
<a href="javascript:void(0);" onclick="toggleWechat()" class="s-icon" aria-label="WeChat QR code" tabindex="0"><i class="ri-wechat-fill"></i></a>
|
||
<a href="https://juejin.cn/user/3659591622878503" target="_blank" class="s-icon" aria-label="Juejin profile" tabindex="0"><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">"我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。 "</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 class="stat-item">
|
||
<span class="stat-val neon-font" id="busuanzi_site_pv">0</span>
|
||
<span class="stat-key" data-i18n="stats.visitNum">Visit num</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-val neon-font" id="busuanzi_site_uv">0</span>
|
||
<span class="stat-key" data-i18n="stats.visitors">Visitors</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>
|
||
<span class="mbti-icon">
|
||
<img src="images/INFJ.webp" alt="INFJ" style="width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,0.4)" loading="lazy"/>
|
||
</span>
|
||
</div>
|
||
<p class="mbti-desc" data-i18n="mbti.desc">"理想主义与道德感，果断决绝的行动力。深度洞察与创意，关怀与同理心。"</p>
|
||
<div class="mbti-tags">
|
||
<span class="tag tag-color-1" data-i18n="mbti.tag1">Idealism & Morality</span>
|
||
<span class="tag tag-color-2" data-i18n="mbti.tag2">Decisive Action</span>
|
||
<span class="tag tag-color-3" data-i18n="mbti.tag3">Deep Insight & Creativity</span>
|
||
<span class="tag tag-color-4" data-i18n="mbti.tag4">Care & Empathy</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- [5] 技术栈宇宙 (Tech Stack) -->
|
||
<div class="bento-card area-tech">
|
||
<div class="card-header">
|
||
<h3 class="glow-title"><i class="ri-stack-line"></i> <span data-i18n="tech.title">Tech Universe</span></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>
|
||
<span class="card-subtitle" data-i18n="interest.subtitle">Some of my interests</span>
|
||
</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" aria-label="GitHub profile" tabindex="0"><i class="ri-github-fill"></i></a>
|
||
<a href="mailto:hehouhui@foxmail.com" class="ms-btn" aria-label="Email contact" tabindex="0"><i class="ri-mail-send-fill"></i></a>
|
||
<a href="https://twitter.com/Honesty861024" class="ms-btn" aria-label="Twitter profile" tabindex="0"><i class="ri-twitter-line"></i></a>
|
||
<a href="https://www.zhihu.com/people/wen-xin-92-2-57" class="ms-btn" aria-label="Zhihu profile" tabindex="0"><i class="ri-zhihu-line"></i></a>
|
||
<a href="javascript:void(0);" onclick="toggleWechat()" class="ms-btn" aria-label="WeChat QR code" tabindex="0"><i class="ri-wechat-fill"></i></a>
|
||
<a href="https://juejin.cn/user/3659591622878503" class="ms-btn" aria-label="Juejin profile" tabindex="0"><i class="ri-code-box-line"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二部分：开源项目 -->
|
||
<div class="content-section">
|
||
<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>
|
||
</div>
|
||
|
||
<!-- 第三部分：最新文章 -->
|
||
<div class="content-section">
|
||
<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>
|
||
|
||
<!-- 移动端悬浮功能按钮 -->
|
||
<div class="mobile-fab">
|
||
<button id="fab-main" class="fab-main" aria-label="Actions" tabindex="0"><i class="ri-magic-line"></i><span class="fab-label">Tools</span></button>
|
||
<div class="fab-menu" id="fab-menu">
|
||
<button id="fab-lang" class="fab-item" tabindex="0"><i class="ri-translate-2"></i><span class="fab-text">Lang</span></button>
|
||
<button id="fab-theme" class="fab-item" tabindex="0"><i class="ri-moon-line"></i><span class="fab-text">Theme</span></button>
|
||
<button id="fab-music" class="fab-item" tabindex="0"><i class="ri-music-2-line"></i><span class="fab-text">Play</span></button>
|
||
</div>
|
||
</div>
|
||
<!-- 隐藏的音频播放iframe -->
|
||
<iframe id="audio-player-iframe" src="audio-player.html" style="display: none;"></iframe>
|
||
</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="./images/mp-honesy.jpg" alt="WeChat QR" onerror="this.style.display='none';this.nextElementSibling.style.display='block'" loading="lazy">
|
||
<!-- <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>Copyright © 2018 <span id="currentYear"></span> Honesty. All rights reserved. <a class="icp" href="https://beian.miit.gov.cn/" target="_blank">湘ICP备20014902号</a> Powered By <a href="https://pages.edgeone.ai/" target="_blank"> Tencent EdgeOne </a></p>
|
||
<script>
|
||
document.getElementById("currentYear").textContent = ' - ' + new Date().getFullYear();
|
||
</script>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- 脚本：BootCDN jQuery / Artalk -->
|
||
<script src="js/jquery.min.js"></script>
|
||
<script src="js/config.js?version=20251125"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/artalk/2.9.1/Artalk.js"></script>
|
||
<script src="js/about.js?version=20251125"></script>
|
||
|
||
<!-- 不蒜子统计 -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
// 动态加载不蒜子统计脚本
|
||
const script = document.createElement('script');
|
||
script.src = SiteConfig.analytics.busuanzi.src;
|
||
script.async = true;
|
||
document.head.appendChild(script);
|
||
});
|
||
</script>
|
||
<script>
|
||
try {
|
||
!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id: SiteConfig.analytics.tencent.id, ck: SiteConfig.analytics.tencent.ck});
|
||
} catch (e) {
|
||
console.log("51.la统计错误", e);
|
||
}
|
||
|
||
</script>
|
||
<script>
|
||
// 百度站点统计
|
||
var _hmt = _hmt || [];
|
||
(function () {
|
||
try {
|
||
var hm = document.createElement("script");
|
||
hm.src = SiteConfig.analytics.baidu.src;
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
} catch (e) {
|
||
console.log("百度统计错误", e);
|
||
}
|
||
|
||
})();
|
||
</script>
|
||
|
||
<!-- 自动格式化脚本 -->
|
||
<script>
|
||
// 监听不蒜子数据的错误兜底
|
||
function initFormatter() {
|
||
const pvEl = document.getElementById(SiteConfig.analytics.busuanzi.site_pv_id);
|
||
const uvEl = document.getElementById(SiteConfig.analytics.busuanzi.site_uv_id);
|
||
|
||
if (!pvEl && !uvEl) return;
|
||
console.log('[Busuanzi]', 'Formatting... Listener observer');
|
||
const observer = new MutationObserver(() => {
|
||
if (pvEl?.textContent) {
|
||
if (pvEl.textContent.includes('禁用')) {
|
||
pvEl.textContent = '-';
|
||
return;
|
||
}
|
||
}
|
||
if (uvEl?.textContent) {
|
||
if (uvEl.textContent.includes('禁用')) {
|
||
uvEl.textContent = '-';
|
||
return;
|
||
}
|
||
}
|
||
});
|
||
|
||
if (pvEl) observer.observe(pvEl, { childList: true, subtree: true });
|
||
if (uvEl) observer.observe(uvEl, { childList: true, subtree: true });
|
||
}
|
||
|
||
// 启动
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', initFormatter);
|
||
} else {
|
||
initFormatter();
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|