26b74372e0
- 新增 `.glass-card` 类，包含背景、边框、阴影和悬停效果 - 在 `about.html` 中为多个卡片元素应用 `.glass-card` 样式 - 提升页面视觉层次和交互体验
304 lines
16 KiB
HTML
304 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">
|
||
<title>关于我 - Honesty</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Playfair+Display:ital,wght@0,400;0,700;1,600&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
|
||
<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">
|
||
<link rel="apple-touch-icon" href="./images/logo.png">
|
||
<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">
|
||
|
||
<div class="hero-container">
|
||
<div class="hero-left">
|
||
<div class="profile-card glass-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 hero-right-grid">
|
||
<div class="intro-content">
|
||
<div class="intro-text">
|
||
<div class="quote-section">
|
||
<div class="quote-line"></div>
|
||
<div class="quote-content">
|
||
<h2><span class="gradient-text">关于我</span></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 glass-card">
|
||
<div class="mbti-header">
|
||
<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 class="mbti-tag">INFJ</span>
|
||
<span class="mbti-name"><span class="gradient-text">提倡者人格</span></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 style="margin-top: 1.5rem; color: #2a2d34; font-style: italic">"提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。"</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-number glow-text" id="github-repos">--</span>
|
||
<span class="stat-label">开源项目</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number glow-text" id="github-followers">--</span>
|
||
<span class="stat-label">GitHub关注</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number glow-text" 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" id="tech-cloud-wrapper">
|
||
<!-- 技术标签将通过JavaScript动态生成 -->
|
||
</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 glass-card">
|
||
<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 id="github-profile"></div>
|
||
<div id="github-commits"></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="https://blog.hehouhui.cn" 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>
|
||
<script src="js/config.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> |