6a84d81fee
- 在 about.html 中引入 APlayer 样式与脚本依赖 - 新增音乐模块区域 `.area-music` 并实现黑胶唱片动画效果 - 添加移动端悬浮功能按钮（语言切换、主题切换、音乐控制） - 扩展 CSS 样式支持音乐模块布局及交互反馈 - 在 JavaScript 中初始化音乐播放器并集成 APlayer - 实现移动端功能菜单逻辑及其国际化支持 - 更新配置文件添加网易云歌单ID及相关默认设置 - 优化部分原有代码结构与可读性
299 lines
16 KiB
HTML
299 lines
16 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">
|
||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css">
|
||
<!-- Artalk 评论样式 -->
|
||
<link rel="stylesheet" href="https://cdn.bootcdn.net/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 collapsed" 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>
|
||
<button id="bio-toggle" class="link-btn" aria-label="Toggle Bio">展开/收起</button>
|
||
</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>
|
||
<span class="mbti-icon">
|
||
<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>
|
||
</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>
|
||
</div>
|
||
<div class="interest-list">
|
||
<div class="interest-item">
|
||
<div class="i-text">
|
||
<span class="i-emoji">🚴♂️</span>
|
||
<!-- <strong data-i18n="interest.cycling">Cycling</strong>-->
|
||
<span data-i18n="interest.cycling_desc">Measuring the world</span>
|
||
</div>
|
||
</div>
|
||
<div class="interest-item">
|
||
<div class="i-text">
|
||
<span class="i-emoji">📚</span>
|
||
<!-- <strong data-i18n="interest.reading">Reading</strong>-->
|
||
<span data-i18n="interest.reading_desc">Thinking tracks</span>
|
||
</div>
|
||
</div>
|
||
<div class="interest-item">
|
||
<div class="i-text">
|
||
<span class="i-emoji">🔍</span>
|
||
<!-- <strong data-i18n="interest.opensource">Open Source</strong>-->
|
||
<span data-i18n="interest.opensource_desc">Sharing power</span>
|
||
</div>
|
||
</div>
|
||
<div class="interest-item">
|
||
<div class="i-text">
|
||
<span class="i-emoji">💡</span>
|
||
<!-- <strong data-i18n="interest.learning">Learning</strong>-->
|
||
<span data-i18n="interest.learning_desc">Always curious</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- [7] 音乐模块 (Music) -->
|
||
<div class="bento-card area-music">
|
||
<div class="card-header">
|
||
<h3 class="glow-title"><i class="ri-music-2-line"></i> <span data-i18n="music.title">Music</span></h3>
|
||
</div>
|
||
<div class="vinyl-player">
|
||
<div class="vinyl-disc" id="vinyl-disc"></div>
|
||
<div class="vinyl-arm"></div>
|
||
<div class="vinyl-info">
|
||
<span class="vinyl-title" data-i18n="music.playlist">My Playlist</span>
|
||
<button id="music-toggle" class="link-btn" aria-label="Toggle Music">Play</button>
|
||
<span id="music-status" class="vinyl-status" style="display:none;" data-i18n="music.unavailable">Player under maintenance</span>
|
||
</div>
|
||
<div id="aplayer" class="aplayer" style="flex:1;"></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">
|
||
<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"><i class="ri-magic-line"></i><span class="fab-label">More</span></button>
|
||
<div class="fab-menu" id="fab-menu">
|
||
<button id="fab-lang" class="fab-item"><i class="ri-translate-2"></i><span class="fab-text">Lang</span></button>
|
||
<button id="fab-theme" class="fab-item"><i class="ri-moon-line"></i><span class="fab-text">Theme</span></button>
|
||
<button id="fab-music" class="fab-item"><i class="ri-music-2-line"></i><span class="fab-text">Music</span></button>
|
||
</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 / Artalk / APlayer -->
|
||
<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://cdn.bootcdn.net/ajax/libs/artalk/2.9.1/Artalk.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
|
||
<script src="js/about.js"></script>
|
||
</body>
|
||
</html> |