ebe681d17b
- 采用响应式设计优化移动端显示效果 - 引入玻璃拟态UI组件提升视觉体验 - 添加多语言切换功能(中/英) - 集成主题切换(明/暗模式) - 重新组织个人信息展示结构 - 使用bento网格布局替代传统分段 - 更新社交链接图标与交互方式 - 优化技术栈可视化呈现 - 增强MBTI性格特征展示模块 - 改进GitHub项目与博客文章加载体验 - 重写微信公众号弹窗样式 - 替换外部资源CDN链接以提高加载速度 - 移除旧版导航栏与页脚组件 - 调整元数据viewport配置增强兼容性
230 lines
11 KiB
HTML
230 lines
11 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>
|
||
<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://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.css">
|
||
<link rel="icon" href="favicon.ico">
|
||
</head>
|
||
<body>
|
||
<div class="ambient-canvas">
|
||
<div class="light-orb orb-1"></div>
|
||
<div class="light-orb orb-2"></div>
|
||
<div class="light-orb orb-3"></div>
|
||
<div class="noise-overlay"></div>
|
||
</div>
|
||
|
||
<div class="app-wrapper">
|
||
<nav class="glass-nav">
|
||
<div class="nav-content">
|
||
<a href="index.html" class="brand">
|
||
<span class="brand-text">Honesty</span>
|
||
<span class="brand-dot"></span>
|
||
</a>
|
||
<div class="nav-actions">
|
||
<a href="index.html" class="nav-btn" title="Home">
|
||
<i class="ri-home-4-line"></i>
|
||
<span data-i18n="nav.home">首页</span>
|
||
</a>
|
||
<a href="javascript:void(0);" class="nav-btn active" title="About">
|
||
<i class="ri-user-smile-line"></i>
|
||
<span data-i18n="nav.about">关于</span>
|
||
</a>
|
||
<a href="https://blog.hehouhui.cn" class="nav-btn" title="Blog">
|
||
<i class="ri-article-line"></i>
|
||
<span data-i18n="nav.blog">博客</span>
|
||
</a>
|
||
<div class="divider"></div>
|
||
<button id="lang-toggle" class="icon-btn" title="Switch Language">
|
||
<span class="lang-text">EN/中</span>
|
||
</button>
|
||
<button id="theme-toggle" class="icon-btn" title="Toggle Theme">
|
||
<i class="ri-sun-line show-light"></i>
|
||
<i class="ri-moon-line show-dark"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="main-stage">
|
||
|
||
<div class="bento-layout">
|
||
|
||
<div class="bento-box area-profile">
|
||
<div class="profile-inner">
|
||
<div class="avatar-wrapper">
|
||
<img src="https://blog-file.hehouhui.cn/202507171929231.jpeg" alt="Avatar" class="avatar-img">
|
||
<div class="status-badge" data-i18n="profile.status">Available</div>
|
||
</div>
|
||
<div class="profile-meta">
|
||
<h1 class="gradient-name" data-i18n="profile.name">Honesty</h1>
|
||
<p class="role-text" data-i18n="profile.role">Java Backend + AI Developer</p>
|
||
<div class="meta-tags">
|
||
<span class="glass-pill"><i class="ri-map-pin-user-line"></i> <span data-i18n="profile.location">Shanghai</span></span>
|
||
<span class="glass-pill"><i class="ri-time-line"></i> 7+ Years</span>
|
||
</div>
|
||
</div>
|
||
<div class="social-dock desktop-only">
|
||
<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="javascript:void(0);" onclick="toggleWechat()" class="s-icon"><i class="ri-wechat-fill"></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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bento-box area-bio">
|
||
<div class="bio-content">
|
||
<h2 class="section-label" data-i18n="bio.title">About Me</h2>
|
||
<p class="bio-text" data-i18n="bio.desc">
|
||
"我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用..."
|
||
</p>
|
||
<div class="quote-block">
|
||
<i class="ri-double-quotes-l"></i>
|
||
<p data-i18n="bio.quote">"我追求技术的深度理解而非广度堆砌..."</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bento-box area-stats">
|
||
<div class="stat-grid">
|
||
<div class="stat-cell">
|
||
<span class="stat-num neon-text" id="coding-years">7+</span>
|
||
<span class="stat-label" data-i18n="stats.exp">Years Exp</span>
|
||
</div>
|
||
<div class="stat-cell">
|
||
<span class="stat-num neon-text" id="github-repos">--</span>
|
||
<span class="stat-label" data-i18n="stats.repos">Repositories</span>
|
||
</div>
|
||
<div class="stat-cell">
|
||
<span class="stat-num neon-text" id="github-followers">--</span>
|
||
<span class="stat-label" data-i18n="stats.followers">Followers</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bento-box area-mbti">
|
||
<div class="mbti-card">
|
||
<div class="mbti-visual">
|
||
<span class="mbti-big">INFJ</span>
|
||
<span class="mbti-sub" data-i18n="mbti.type">Advocate</span>
|
||
</div>
|
||
<div class="mbti-traits">
|
||
<p data-i18n="mbti.desc">"善于深度思考，注重细节，通过代码创造有意义的产品..."</p>
|
||
<div class="trait-tags">
|
||
<span class="trait" data-i18n="mbti.tag1">Idealism</span>
|
||
<span class="trait" data-i18n="mbti.tag2">Insight</span>
|
||
<span class="trait" data-i18n="mbti.tag3">Altruism</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bento-box area-tech">
|
||
<div class="box-header">
|
||
<h3 data-i18n="tech.title">Tech Stack</h3>
|
||
<div class="header-line"></div>
|
||
</div>
|
||
<div id="tech-cloud-container" class="tech-viewport"></div>
|
||
</div>
|
||
|
||
<div class="bento-box area-interests">
|
||
<div class="box-header">
|
||
<h3 data-i18n="interest.title">Interests</h3>
|
||
</div>
|
||
<div class="timeline-list">
|
||
<div class="tl-item">
|
||
<div class="tl-icon">🚴♂️</div>
|
||
<div class="tl-info">
|
||
<h4 data-i18n="interest.cycling">Cycling</h4>
|
||
<span data-i18n="interest.cycling_desc">Exploring the world on wheels</span>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-icon">📚</div>
|
||
<div class="tl-info">
|
||
<h4 data-i18n="interest.reading">Reading</h4>
|
||
<span data-i18n="interest.reading_desc">Recording thoughts via text</span>
|
||
</div>
|
||
</div>
|
||
<div class="tl-item">
|
||
<div class="tl-icon">💡</div>
|
||
<div class="tl-info">
|
||
<h4 data-i18n="interest.opensource">Open Source</h4>
|
||
<span data-i18n="interest.opensource_desc">Connecting the world with code</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bento-box area-social mobile-only-box">
|
||
<a href="https://github.com/listener-He" target="_blank" class="s-btn"><i class="ri-github-fill"></i></a>
|
||
<a href="mailto:hehouhui@foxmail.com" class="s-btn"><i class="ri-mail-send-fill"></i></a>
|
||
<a href="javascript:void(0);" onclick="toggleWechat()" class="s-btn"><i class="ri-wechat-fill"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-columns">
|
||
<section class="col-section">
|
||
<div class="col-head">
|
||
<h3 class="glow-title"><i class="ri-github-line"></i> <span data-i18n="github.title">Open Source</span></h3>
|
||
</div>
|
||
<div class="glass-panel">
|
||
<div id="github-commits" class="commits-chart"></div>
|
||
<div class="projects-list" id="projects-container">
|
||
<div class="skeleton-loader"></div>
|
||
<div class="skeleton-loader"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="col-section">
|
||
<div class="col-head">
|
||
<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 class="glass-list" id="blog-container">
|
||
<div class="skeleton-loader"></div>
|
||
<div class="skeleton-loader"></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<section class="comments-area">
|
||
<div class="col-head">
|
||
<h3 class="glow-title"><i class="ri-message-3-line"></i> <span data-i18n="comment.title">Message Board</span></h3>
|
||
</div>
|
||
<div class="glass-panel comment-box">
|
||
<div id="artalk-container"></div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<p>© 2024 Honesty. All rights reserved. <a href="https://beian.miit.gov.cn/">湘ICP备20014902号</a></p>
|
||
</footer>
|
||
</div>
|
||
|
||
<div id="wechat-modal" class="modal-backdrop">
|
||
<div class="modal-card">
|
||
<button class="close-modal" onclick="toggleWechat()"><i class="ri-close-line"></i></button>
|
||
<h3 data-i18n="modal.wechat_title">Official Account</h3>
|
||
<div class="qr-wrapper">
|
||
<img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg" alt="WeChat QR">
|
||
</div>
|
||
<p data-i18n="modal.wechat_desc">Scan to follow for tech insights</p>
|
||
</div>
|
||
</div>
|
||
|
||
<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> |