b74c86ea61
- 重新设计关于页面的整体布局，采用更现代化的卡片式设计 - 新增技术栈云图展示，按类别和熟练度分组 - 优化移动端响应式布局，特别是超小屏幕(320px-375px)的显示效果 - 改进社交链接展示方式，使用网格布局替代原有轨道设计 - 添加微信二维码弹窗功能，支持移动端优化显示 - 更新个人信息展示，增加MBTI特质详细描述 - 移除旧的访问统计模块，整合GitHub统计信息 - 优化页面加载性能，添加本地缓存策略减少API请求
332 lines
19 KiB
HTML
332 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>关于我 - Honesty</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="css/about.css">
|
||
<link rel="stylesheet" href="css/iconfont.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.css">
|
||
<link rel="icon" href="favicon.ico">
|
||
<meta name="description" content="了解更多关于Honesty的信息 - 技术栈、项目经验、个人兴趣">
|
||
</head>
|
||
<body>
|
||
<div class="about-container">
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="nav-container">
|
||
<a href="index.html" class="nav-logo">Honesty</a>
|
||
<div class="nav-links">
|
||
<a href="index.html">首页</a>
|
||
<a href="javascript:void(0);" class="active">关于我</a>
|
||
<a href="https://blog.hehouhui.cn">博客</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主要内容 -->
|
||
<main class="about-main">
|
||
<!-- 英雄区域 -->
|
||
<section class="hero-section">
|
||
<!-- INFJ装饰图片 -->
|
||
<div class="infj-decoration">
|
||
<img src="https://blog-file.hehouhui.cn/INFJ.png" alt="INFJ" class="infj-image">
|
||
</div>
|
||
<div class="hero-container">
|
||
<div class="hero-left">
|
||
<div class="profile-card">
|
||
<div class="profile-avatar">
|
||
<img src="https://cdn.jsdmirror.com/gh/listener-He/images@default/202309111525908.jpeg" alt="Honesty" class="avatar-image">
|
||
<div class="status-indicator"></div>
|
||
</div>
|
||
<div class="profile-info">
|
||
<h1 class="hero-title">Honesty</h1>
|
||
<p class="hero-subtitle">Java后端 + AI开发工程师</p>
|
||
<div class="location-info">
|
||
<span class="location-item">
|
||
<i class="iconfont icon-location"></i>
|
||
现居上海
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-right">
|
||
<div class="intro-content">
|
||
<div class="intro-text">
|
||
<div class="quote-section">
|
||
<div class="quote-line"></div>
|
||
<div class="quote-content">
|
||
<h2>关于我</h2>
|
||
<blockquote class="intro-quote">
|
||
<p>"我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。"</p>
|
||
</blockquote>
|
||
<blockquote class="intro-quote">
|
||
<p>"作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。"</p>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="personality-section">
|
||
<div class="mbti-card">
|
||
<div class="mbti-header">
|
||
<span class="mbti-tag">INFJ</span>
|
||
<span class="mbti-name">提倡者人格</span>
|
||
</div>
|
||
<div class="mbti-traits">
|
||
<span class="trait">理想主义与道德感</span>
|
||
<span class="trait">果断决绝的行动力</span>
|
||
<span class="trait">深度洞察与创意</span>
|
||
<span class="trait">关怀与同理心</span>
|
||
</div>
|
||
<div class="infj-quote">
|
||
<p>"提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。"</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-number" 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-label">GitHub关注</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number" id="coding-years">7+</span>
|
||
<span class="stat-label">编程年限</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 技术栈云图 -->
|
||
<section class="tech-cloud-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">技术栈云图</h2>
|
||
<p class="section-subtitle">技术探索之旅 - 追求深度与完美的技术实践</p>
|
||
</div>
|
||
<div class="tech-cloud-container">
|
||
<div class="cloud-wrapper">
|
||
<span class="cloud-tag" data-weight="5" data-category="core">Java</span>
|
||
<span class="cloud-tag" data-weight="4" data-category="core">Python</span>
|
||
<span class="cloud-tag" data-weight="4" data-category="core">JavaScript</span>
|
||
<span class="cloud-tag" data-weight="5" data-category="backend">Spring Boot</span>
|
||
<span class="cloud-tag" data-weight="3" data-category="core">TypeScript</span>
|
||
<span class="cloud-tag" data-weight="4" data-category="backend">Spring Cloud</span>
|
||
<span class="cloud-tag" data-weight="3" data-category="core">Go</span>
|
||
<span class="cloud-tag" data-weight="4" data-category="data">MySQL</span>
|
||
<span class="cloud-tag" data-weight="4" data-category="data">Redis</span>
|
||
<span class="cloud-tag" data-weight="3" data-category="data">MongoDB</span>
|
||
<span class="cloud-tag" data-weight="4" data-category="ops">Docker</span>
|
||
<span class="cloud-tag" data-weight="3" data-category="ops">Kubernetes</span>
|
||
<span class="cloud-tag" data-weight="3" data-category="ai">OpenAI API</span>
|
||
<span class="cloud-tag" data-weight="3" data-category="ai">LangChain</span>
|
||
<span class="cloud-tag" data-weight="2" data-category="ai">TensorFlow</span>
|
||
<span class="cloud-tag" data-weight="2" data-category="ai">PyTorch</span>
|
||
<span class="cloud-tag" data-weight="3" data-category="data">Elasticsearch</span>
|
||
<span class="cloud-tag" data-weight="2" data-category="data">RabbitMQ</span>
|
||
<span class="cloud-tag" data-weight="2" data-category="data">Kafka</span>
|
||
<span class="cloud-tag" data-weight="3" data-category="ops">Jenkins</span>
|
||
<span class="cloud-tag" data-weight="4" data-category="ops">Git</span>
|
||
<span class="cloud-tag" data-weight="3" data-category="ops">Linux</span>
|
||
<span class="cloud-tag" data-weight="2" data-category="ops">AWS</span>
|
||
<span class="cloud-tag" data-weight="2" data-category="ops">Nginx</span>
|
||
<span class="cloud-tag" data-weight="3" data-category="backend">Spring Security</span>
|
||
<span class="cloud-tag" data-weight="3" data-category="backend">MyBatis</span>
|
||
<span class="cloud-tag" data-weight="2" data-category="backend">JPA</span>
|
||
<span class="cloud-tag" data-weight="2" data-category="backend">Dubbo</span>
|
||
<span class="cloud-tag" data-weight="2" data-category="backend">Netty</span>
|
||
<span class="cloud-tag" data-weight="2" data-category="ai">Transformers</span>
|
||
<span class="cloud-tag" data-weight="2" data-category="ai">Scikit-learn</span>
|
||
<span class="cloud-tag" data-weight="1" data-category="ai">Ollama</span>
|
||
<span class="cloud-tag" data-weight="1" data-category="data">ClickHouse</span>
|
||
</div>
|
||
</div>
|
||
<div class="tech-philosophy">
|
||
<p class="philosophy-text">"我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。"</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 个性特质时间线 -->
|
||
<section class="personality-timeline-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">关于我</h2>
|
||
<p class="section-subtitle">INFJ · 创造者 · 探索者</p>
|
||
</div>
|
||
<div class="personality-timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-icon">🚴♂️</div>
|
||
<div class="timeline-content">
|
||
<h3>骑行爱好者</h3>
|
||
<p>享受在路上的自由感，用车轮丈量世界，在风景中寻找灵感</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-icon">📚</div>
|
||
<div class="timeline-content">
|
||
<h3>阅读与写作</h3>
|
||
<p>通过文字记录思考轨迹，分享技术见解，用代码诠释创意</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-icon">🔍</div>
|
||
<div class="timeline-content">
|
||
<h3>开源探索</h3>
|
||
<p>热衷于开源项目，相信分享的力量，用代码连接世界</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-icon">💡</div>
|
||
<div class="timeline-content">
|
||
<h3>持续学习</h3>
|
||
<p>保持对新技术的好奇心，在变化中成长，在挑战中进步</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- GitHub项目展示 -->
|
||
<section class="github-showcase-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">开源项目</h2>
|
||
<p class="section-subtitle">用代码改变世界</p>
|
||
</div>
|
||
<div class="projects-masonry" id="projects-container">
|
||
<div class="loading-placeholder">
|
||
<div class="loading-spinner"></div>
|
||
<p>正在加载项目...</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 博客文章瀑布流 -->
|
||
<section class="blog-waterfall-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">最新文章</h2>
|
||
<p class="section-subtitle">思考的足迹</p>
|
||
<a href="#" class="view-all-link" target="_blank">
|
||
查看全部 <i class="iconfont icon-arrow-right"></i>
|
||
</a>
|
||
</div>
|
||
<div class="articles-waterfall" id="blog-container">
|
||
<div class="loading-placeholder">
|
||
<div class="loading-spinner"></div>
|
||
<p>正在加载文章...</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系方式浮动区域 -->
|
||
<section class="contact-floating-section">
|
||
<div class="contact-container">
|
||
<div class="contact-title">
|
||
<h2>让我们连接</h2>
|
||
<p>欢迎交流技术、分享想法</p>
|
||
</div>
|
||
<div class="social-grid">
|
||
<a href="https://github.com/listener-He" class="social-card github" target="_blank">
|
||
<div class="social-icon">
|
||
<i class="iconfont icon-github"></i>
|
||
</div>
|
||
<div class="social-info">
|
||
<h3>GitHub</h3>
|
||
<p>开源项目与代码</p>
|
||
</div>
|
||
</a>
|
||
<a href="mailto:hehouhui@foxmail.com" class="social-card email">
|
||
<div class="social-icon">
|
||
<i class="iconfont icon-email"></i>
|
||
</div>
|
||
<div class="social-info">
|
||
<h3>邮箱</h3>
|
||
<p>商务合作联系</p>
|
||
</div>
|
||
</a>
|
||
<a href="https://blog.hehouhui.cn" class="social-card blog" target="_blank">
|
||
<div class="social-icon">
|
||
<i class="iconfont icon-blog"></i>
|
||
</div>
|
||
<div class="social-info">
|
||
<h3>技术博客</h3>
|
||
<p>技术文章分享</p>
|
||
</div>
|
||
</a>
|
||
<a href="https://www.zhihu.com/people/wen-xin-92-2-57" class="social-card zhihu" target="_blank">
|
||
<div class="social-icon">
|
||
<i class="iconfont icon-zhihu"></i>
|
||
</div>
|
||
<div class="social-info">
|
||
<h3>知乎</h3>
|
||
<p>技术问答交流</p>
|
||
</div>
|
||
</a>
|
||
<a href="javascript:void(0);" class="social-card wechat" onclick="showWechatQR()">
|
||
<div class="social-icon">
|
||
<i class="iconfont icon-wechat"></i>
|
||
</div>
|
||
<div class="social-info">
|
||
<h3>微信公众号</h3>
|
||
<p>技术干货推送</p>
|
||
</div>
|
||
</a>
|
||
<a href="https://juejin.cn/user/3659591622878503" class="social-card juejin" target="_blank">
|
||
<div class="social-icon">
|
||
<i class="iconfont icon-juejin"></i>
|
||
</div>
|
||
<div class="social-info">
|
||
<h3>掘金</h3>
|
||
<p>前端技术社区</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- 微信二维码弹窗 -->
|
||
<div id="wechat-modal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="hideWechatQR()">×</span>
|
||
<h3>微信公众号</h3>
|
||
<div class="qr-code">
|
||
<img src="https://blog-file.hehouhui.cn/wechat/mp-honesy.jpg alt="微信公众号二维码" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjBmMGYwIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuW+ruS/oeS6jOe7tOeggeWNs+WwhuS4iue6vzwvdGV4dD48L3N2Zz4='">
|
||
</div>
|
||
<p>扫码关注获取最新技术文章</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 评论系统 -->
|
||
<section class="comments-section">
|
||
<div class="comments-container">
|
||
<h2 class="section-title">留言板</h2>
|
||
<p class="section-subtitle">分享你的想法</p>
|
||
<div id="artalk-container"></div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<div class="footer-container">
|
||
<div class="footer-bottom">
|
||
<div class="footer-info">
|
||
<p>© 2024 Honesty. All rights reserved.</p>
|
||
<p>ICP备案号：<a href="https://beian.miit.gov.cn/" target="_blank">湘ICP备20014902号</a></p>
|
||
<p>Powered by <a href="https://github.com/features/actions" target="_blank">GitHub Actions</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- 脚本文件 -->
|
||
<script src="js/jquery.min.js"></script>
|
||
<!-- Artalk 评论系统 -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.js"></script>
|
||
<script src="js/about.js"></script>
|
||
|
||
</body>
|
||
</html> |