From 56bd98a1b91db6c4bfae441bc0b2909f86dd0676 Mon Sep 17 00:00:00 2001 From: hehh Date: Tue, 5 Aug 2025 12:16:35 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E7=BD=91?= =?UTF-8?q?=E7=AB=99=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=8A=9F=E8=83=BD=EF=BC=8C?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 删除冗余CSS文件(bj.css, font.css, sey.css, stars-style.css) - 重构导航栏样式，添加现代化交互效果 - 优化社交图标，使用SVG替代字体图标并添加渐变效果 - 新增关于页面(about.html)及相关资源 - 更新首页(index.html)布局和样式 - 重构星空背景JavaScript(bj.js)，添加错误处理 - 新增关于页面JavaScript功能(about.js) --- about.html | 246 +++++++++++ css/about.css | 992 ++++++++++++++++++++++++++++++++++++++++++++ css/bj.css | 7 - css/font.css | 7 - css/sey.css | 123 ------ css/stars-style.css | 317 -------------- css/style.css | 289 +++++++++---- index.html | 104 ++++- js/about.js | 546 ++++++++++++++++++++++++ js/bj.js | 26 +- rss.xml | 66 +++ 11 files changed, 2162 insertions(+), 561 deletions(-) create mode 100644 about.html create mode 100644 css/about.css delete mode 100644 css/bj.css delete mode 100644 css/font.css delete mode 100644 css/sey.css delete mode 100644 css/stars-style.css create mode 100644 js/about.js create mode 100644 rss.xml diff --git a/about.html b/about.html new file mode 100644 index 0000000..5447a90 --- /dev/null +++ b/about.html @@ -0,0 +1,246 @@ + + + + + + 关于我 - Honesty + + + + + + + +
+ + + + +
+ +
+
+
+
+
+
+
+
+
+
+ Honesty +
+
+

Honesty

+

全栈开发工程师 · 开源爱好者

+
+ INFJ + 提倡者人格 +
+
+
+ -- + 开源项目 +
+
+ -- + GitHub关注 +
+
+ -- + 访问量 +
+
+
+
+ + +
+
+

技术栈

+

我的技术工具箱

+
+
+
+ JavaScript + Java + Python +
+
+ Vue.js + React + Spring Boot + Node.js +
+
+ TypeScript + MySQL + Docker + Git + Linux + AWS +
+
+
+ + +
+
+

关于我

+

INFJ · 创造者 · 探索者

+
+
+
+
🚴‍♂️
+
+

骑行爱好者

+

享受在路上的自由感，用车轮丈量世界，在风景中寻找灵感

+
+
+
+
📚
+
+

阅读与写作

+

通过文字记录思考轨迹，分享技术见解，用代码诠释创意

+
+
+
+
🔍
+
+

开源探索

+

热衷于开源项目，相信分享的力量，用代码连接世界

+
+
+
+
💡
+
+

持续学习

+

保持对新技术的好奇心，在变化中成长，在挑战中进步

+
+
+
+
+ + +
+
+

开源项目

+

用代码改变世界

+
+
+
+ +

正在加载项目...

+
+
+
+ + +
+
+

最新文章

+

思考的足迹

+ + 查看全部 + +
+
+
+ +

正在加载文章...

+
+
+
+ + +
+
+

访问统计

+

数据驱动的成长

+
+
+
+
👥
+
-
+
总访问人数
+
+
+
📊
+
-
+
总访问次数
+
+
+
🌟
+
-
+
今日访问人数
+
+
+
🔥
+
-
+
今日访问次数
+
+
+
+ + +
+
+
+

让我们连接

+

欢迎交流技术、分享想法

+
+ +
+
+ + +
+
+

留言板

+

分享你的想法

+
+
+
+
+ + +
+

© 2024 Honesty. All rights reserved.

+
+
+ + + + + + + + + \ No newline at end of file diff --git a/css/about.css b/css/about.css new file mode 100644 index 0000000..d19a039 --- /dev/null +++ b/css/about.css @@ -0,0 +1,992 @@ +/* 关于页面样式 - 现代动态设计 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: #333; + background: #0a0a0a; + min-height: 100vh; + overflow-x: hidden; +} + +/* 动态背景 */ +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%), + radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%); + z-index: -1; + animation: backgroundShift 20s ease-in-out infinite; +} + +@keyframes backgroundShift { + 0%, 100% { transform: scale(1) rotate(0deg); } + 50% { transform: scale(1.1) rotate(5deg); } +} + +/* 导航栏 */ +.navbar { + position: fixed; + top: 0; + left: 0; + right: 0; + background: rgba(10, 10, 10, 0.8); + backdrop-filter: blur(20px); + z-index: 1000; + padding: 1rem 0; + transition: all 0.3s ease; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.navbar.scrolled { + background: rgba(10, 10, 10, 0.95); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +.nav-container { + max-width: 1400px; + margin: 0 auto; + padding: 0 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav-logo { + font-size: 1.5rem; + font-weight: 700; + color: #fff; + text-decoration: none; + background: linear-gradient(45deg, #667eea, #764ba2); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.nav-links { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-links a { + text-decoration: none; + color: rgba(255, 255, 255, 0.8); + font-weight: 500; + transition: all 0.3s ease; + position: relative; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: linear-gradient(45deg, #667eea, #764ba2); + transition: width 0.3s ease; +} + +.nav-links a:hover, +.nav-links a.active { + color: #fff; +} + +.nav-links a:hover::after, +.nav-links a.active::after { + width: 100%; +} + +/* 主要内容 */ +.main-content { + margin-top: 80px; + max-width: 1400px; + margin-left: auto; + margin-right: auto; +} + +/* 英雄区域 */ +.hero-section { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.hero-background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +.floating-shapes { + position: absolute; + width: 100%; + height: 100%; +} + +.shape { + position: absolute; + border-radius: 50%; + background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); + animation: float 6s ease-in-out infinite; +} + +.shape-1 { + width: 300px; + height: 300px; + top: 10%; + left: 10%; + animation-delay: 0s; +} + +.shape-2 { + width: 200px; + height: 200px; + top: 60%; + right: 10%; + animation-delay: 2s; +} + +.shape-3 { + width: 150px; + height: 150px; + bottom: 20%; + left: 60%; + animation-delay: 4s; +} + +@keyframes float { + 0%, 100% { transform: translateY(0px) rotate(0deg); } + 50% { transform: translateY(-20px) rotate(180deg); } +} + +.hero-content { + text-align: center; + z-index: 1; + padding: 2rem; +} + +.profile-avatar { + position: relative; + display: inline-block; + margin-bottom: 2rem; +} + +.avatar-image { + width: 150px; + height: 150px; + border-radius: 50%; + object-fit: cover; + border: 4px solid rgba(255, 255, 255, 0.2); + transition: all 0.3s ease; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); +} + +.avatar-image:hover { + transform: scale(1.05); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4); +} + +.avatar-ring { + position: absolute; + top: -15px; + left: -15px; + right: -15px; + bottom: -15px; + border: 2px solid; + border-image: linear-gradient(45deg, #667eea, #764ba2, #667eea) 1; + border-radius: 50%; + animation: rotate 10s linear infinite; +} + +@keyframes rotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.hero-title { + font-size: 4rem; + font-weight: 800; + color: #fff; + margin-bottom: 1rem; + background: linear-gradient(45deg, #667eea, #764ba2); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: titleGlow 3s ease-in-out infinite alternate; +} + +@keyframes titleGlow { + from { filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.5)); } + to { filter: drop-shadow(0 0 30px rgba(118, 75, 162, 0.8)); } +} + +.hero-subtitle { + font-size: 1.5rem; + color: rgba(255, 255, 255, 0.8); + margin-bottom: 2rem; + font-weight: 300; +} + +.personality-badge { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + margin-bottom: 3rem; +} + +.mbti-tag { + background: linear-gradient(45deg, #667eea, #764ba2); + color: #fff; + padding: 0.8rem 1.5rem; + border-radius: 30px; + font-size: 1rem; + font-weight: 700; + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); + animation: pulse 2s infinite; +} + +.badge-desc { + color: rgba(255, 255, 255, 0.7); + font-size: 0.9rem; + font-style: italic; +} + +.hero-stats { + display: flex; + justify-content: center; + gap: 3rem; + flex-wrap: wrap; +} + +.hero-stats .stat-item { + text-align: center; +} + +.hero-stats .stat-number { + font-size: 2.5rem; + font-weight: 800; + color: #fff; + display: block; + margin-bottom: 0.5rem; +} + +.hero-stats .stat-label { + color: rgba(255, 255, 255, 0.6); + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 1px; +} + +/* 通用区域样式 */ +.section-header { + text-align: center; + margin-bottom: 4rem; + padding: 0 2rem; +} + +.section-title { + font-size: 3rem; + font-weight: 800; + color: #fff; + margin-bottom: 1rem; + position: relative; + display: inline-block; +} + +.section-title::after { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 4px; + background: linear-gradient(45deg, #667eea, #764ba2); + border-radius: 2px; +} + +.section-subtitle { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 300; +} + +/* 技术栈云图 */ +.tech-cloud-section { + padding: 8rem 2rem; + position: relative; +} + +.tech-cloud { + position: relative; + width: 600px; + height: 600px; + margin: 0 auto; +} + +.tech-orbit { + position: absolute; + border-radius: 50%; + border: 1px solid rgba(255, 255, 255, 0.1); + animation: orbitRotate 30s linear infinite; +} + +.orbit-1 { + width: 200px; + height: 200px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation-duration: 20s; +} + +.orbit-2 { + width: 350px; + height: 350px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation-duration: 30s; + animation-direction: reverse; +} + +.orbit-3 { + width: 500px; + height: 500px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation-duration: 40s; +} + +@keyframes orbitRotate { + from { transform: translate(-50%, -50%) rotate(0deg); } + to { transform: translate(-50%, -50%) rotate(360deg); } +} + +.tech-item { + position: absolute; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + color: #fff; + padding: 0.8rem 1.5rem; + border-radius: 25px; + font-size: 0.9rem; + font-weight: 600; + border: 1px solid rgba(255, 255, 255, 0.2); + transition: all 0.3s ease; + cursor: pointer; + white-space: nowrap; +} + +.tech-item:hover { + background: rgba(255, 255, 255, 0.2); + transform: scale(1.1); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} + +.tech-item.primary { + background: linear-gradient(45deg, #667eea, #764ba2); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); +} + +.tech-item.secondary { + background: rgba(102, 126, 234, 0.2); + border-color: rgba(102, 126, 234, 0.4); +} + +.tech-item.tertiary { + background: rgba(255, 255, 255, 0.05); +} + +/* 技术项目位置 */ +.orbit-1 .tech-item:nth-child(1) { top: -15px; left: 50%; transform: translateX(-50%); } +.orbit-1 .tech-item:nth-child(2) { bottom: -15px; left: 50%; transform: translateX(-50%); } +.orbit-1 .tech-item:nth-child(3) { top: 50%; right: -15px; transform: translateY(-50%); } + +.orbit-2 .tech-item:nth-child(1) { top: -15px; left: 50%; transform: translateX(-50%); } +.orbit-2 .tech-item:nth-child(2) { top: 50%; right: -15px; transform: translateY(-50%); } +.orbit-2 .tech-item:nth-child(3) { bottom: -15px; left: 50%; transform: translateX(-50%); } +.orbit-2 .tech-item:nth-child(4) { top: 50%; left: -15px; transform: translateY(-50%); } + +.orbit-3 .tech-item:nth-child(1) { top: -15px; left: 30%; } +.orbit-3 .tech-item:nth-child(2) { top: -15px; right: 30%; } +.orbit-3 .tech-item:nth-child(3) { top: 30%; right: -15px; } +.orbit-3 .tech-item:nth-child(4) { bottom: 30%; right: -15px; } +.orbit-3 .tech-item:nth-child(5) { bottom: -15px; left: 30%; } +.orbit-3 .tech-item:nth-child(6) { top: 30%; left: -15px; } + +/* 个性时间线 */ +.personality-timeline-section { + padding: 8rem 2rem; + background: rgba(255, 255, 255, 0.02); +} + +.personality-timeline { + max-width: 800px; + margin: 0 auto; + position: relative; +} + +.personality-timeline::before { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 2px; + background: linear-gradient(to bottom, #667eea, #764ba2); + transform: translateX(-50%); +} + +.timeline-item { + display: flex; + align-items: center; + margin-bottom: 4rem; + position: relative; +} + +.timeline-item:nth-child(even) { + flex-direction: row-reverse; +} + +.timeline-icon { + width: 80px; + height: 80px; + border-radius: 50%; + background: linear-gradient(45deg, #667eea, #764ba2); + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + z-index: 2; + box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3); +} + +.timeline-content { + flex: 1; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + padding: 2rem; + border-radius: 20px; + margin: 0 2rem; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; +} + +.timeline-content:hover { + background: rgba(255, 255, 255, 0.08); + transform: translateY(-5px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); +} + +.timeline-content h3 { + color: #fff; + font-size: 1.5rem; + margin-bottom: 1rem; + font-weight: 600; +} + +.timeline-content p { + color: rgba(255, 255, 255, 0.8); + line-height: 1.6; +} + +/* GitHub项目展示 */ +.github-showcase-section { + padding: 8rem 2rem; +} + +.projects-masonry { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; + align-items: start; +} + +.project-card { + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + border-radius: 20px; + padding: 2rem; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.project-card::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + transition: left 0.5s ease; +} + +.project-card:hover::before { + left: 100%; +} + +.project-card:hover { + transform: translateY(-10px); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); + border-color: rgba(102, 126, 234, 0.3); +} + +.project-title { + color: #fff; + font-size: 1.3rem; + margin-bottom: 1rem; + font-weight: 600; +} + +.project-description { + color: rgba(255, 255, 255, 0.8); + margin-bottom: 1.5rem; + line-height: 1.6; +} + +.project-stats { + display: flex; + gap: 1rem; + margin-bottom: 1rem; +} + +.project-stat { + display: flex; + align-items: center; + gap: 0.3rem; + color: rgba(255, 255, 255, 0.7); + font-size: 0.9rem; +} + +.project-link { + display: inline-block; + background: linear-gradient(45deg, #667eea, #764ba2); + color: #fff; + padding: 0.7rem 1.5rem; + border-radius: 25px; + text-decoration: none; + font-weight: 600; + transition: all 0.3s ease; +} + +.project-link:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); +} + +/* 博客瀑布流 */ +.blog-waterfall-section { + padding: 8rem 2rem; + background: rgba(255, 255, 255, 0.02); +} + +.view-all-link { + color: #667eea; + text-decoration: none; + font-weight: 600; + display: inline-flex; + align-items: center; + gap: 0.5rem; + transition: all 0.3s ease; +} + +.view-all-link:hover { + color: #764ba2; + transform: translateX(5px); +} + +.articles-waterfall { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + align-items: start; +} + +.article-card { + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + border-radius: 15px; + padding: 1.5rem; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; + text-decoration: none; + display: block; +} + +.article-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); + background: rgba(255, 255, 255, 0.08); +} + +.article-title { + color: #fff; + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 1rem; + line-height: 1.4; +} + +.article-excerpt { + color: rgba(255, 255, 255, 0.7); + font-size: 0.9rem; + line-height: 1.5; + margin-bottom: 1rem; +} + +.article-meta { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.8rem; + color: rgba(255, 255, 255, 0.5); +} + +.article-category { + background: rgba(102, 126, 234, 0.2); + color: #667eea; + padding: 0.3rem 0.8rem; + border-radius: 12px; + font-size: 0.7rem; + font-weight: 600; +} + +/* 联系方式轨道 */ +.contact-floating-section { + padding: 8rem 2rem; + position: relative; +} + +.contact-container { + max-width: 800px; + margin: 0 auto; + text-align: center; +} + +.contact-title h2 { + font-size: 2.5rem; + color: #fff; + margin-bottom: 1rem; + font-weight: 700; +} + +.contact-title p { + color: rgba(255, 255, 255, 0.6); + font-size: 1.1rem; + margin-bottom: 4rem; +} + +.social-orbit { + position: relative; + width: 400px; + height: 400px; + margin: 0 auto; +} + +.social-center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80px; + height: 80px; + background: linear-gradient(45deg, #667eea, #764ba2); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + color: #fff; + box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4); + animation: pulse 2s infinite; +} + +.social-planet { + position: absolute; + width: 100px; + height: 100px; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border-radius: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-decoration: none; + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.2); + transition: all 0.3s ease; + animation: planetOrbit 15s linear infinite; +} + +.social-planet:hover { + background: rgba(255, 255, 255, 0.2); + transform: scale(1.1); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); +} + +.social-planet i { + font-size: 1.5rem; + margin-bottom: 0.3rem; +} + +.social-planet span { + font-size: 0.8rem; + font-weight: 600; +} + +.planet-1 { + top: 0; + left: 50%; + transform: translateX(-50%); + animation-delay: 0s; +} + +.planet-2 { + top: 50%; + right: 0; + transform: translateY(-50%); + animation-delay: 5s; +} + +.planet-3 { + bottom: 0; + left: 50%; + transform: translateX(-50%); + animation-delay: 10s; +} + +@keyframes planetOrbit { + from { transform: rotate(0deg) translateX(150px) rotate(0deg); } + to { transform: rotate(360deg) translateX(150px) rotate(-360deg); } +} + +/* 评论系统 */ +.comments-section { + padding: 8rem 2rem; + background: rgba(255, 255, 255, 0.02); +} + +.comments-container { + max-width: 1000px; + margin: 0 auto; + text-align: center; +} + +.comments-container .section-title { + margin-bottom: 0.5rem; +} + +.comments-container .section-subtitle { + margin-bottom: 3rem; +} + +#artalk-container { + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + border-radius: 20px; + padding: 2rem; + border: 1px solid rgba(255, 255, 255, 0.1); + text-align: left; +} + +/* 加载动画 */ +.loading-placeholder { + text-align: center; + padding: 4rem 2rem; + color: rgba(255, 255, 255, 0.6); +} + +.loading-spinner { + width: 40px; + height: 40px; + border: 3px solid rgba(255, 255, 255, 0.1); + border-top: 3px solid #667eea; + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 1rem; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.05); } +} + +/* 响应式设计 */ +@media (max-width: 1024px) { + .tech-cloud { + width: 500px; + height: 500px; + } + + .orbit-3 { + width: 400px; + height: 400px; + } + + .social-orbit { + width: 300px; + height: 300px; + } +} + +@media (max-width: 768px) { + .nav-container { + padding: 0 1rem; + } + + .nav-links { + gap: 1rem; + } + + .hero-title { + font-size: 2.5rem; + } + + .hero-subtitle { + font-size: 1.2rem; + } + + .hero-stats { + gap: 2rem; + } + + .section-title { + font-size: 2rem; + } + + .tech-cloud { + width: 350px; + height: 350px; + } + + .orbit-2 { + width: 250px; + height: 250px; + } + + .orbit-3 { + width: 300px; + height: 300px; + } + + .personality-timeline::before { + left: 30px; + } + + .timeline-item { + flex-direction: row !important; + padding-left: 80px; + } + + .timeline-icon { + position: absolute; + left: 0; + width: 60px; + height: 60px; + font-size: 1.5rem; + } + + .timeline-content { + margin: 0; + margin-left: 1rem; + } + + .social-orbit { + width: 250px; + height: 250px; + } + + .social-planet { + width: 80px; + height: 80px; + } + + .social-planet i { + font-size: 1.2rem; + } + + .social-planet span { + font-size: 0.7rem; + } + + .projects-masonry, + .articles-waterfall { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .hero-title { + font-size: 2rem; + } + + .hero-stats { + flex-direction: column; + gap: 1rem; + } + + .personality-badge { + flex-direction: column; + gap: 0.5rem; + } + + .tech-cloud { + width: 280px; + height: 280px; + } + + .orbit-1 { + width: 120px; + height: 120px; + } + + .orbit-2 { + width: 180px; + height: 180px; + } + + .orbit-3 { + width: 240px; + height: 240px; + } + + .tech-item { + padding: 0.5rem 1rem; + font-size: 0.8rem; + } +} \ No newline at end of file diff --git a/css/bj.css b/css/bj.css deleted file mode 100644 index 468e82f..0000000 --- a/css/bj.css +++ /dev/null @@ -1,7 +0,0 @@ -canvas{ - position:fixed;/*öλ*/ - top:0; - left:0; - z-index:-1;/*ʹͲ*/ - background:#0e1729;/*ɫ*/ -} \ No newline at end of file diff --git a/css/font.css b/css/font.css deleted file mode 100644 index 79cfbde..0000000 --- a/css/font.css +++ /dev/null @@ -1,7 +0,0 @@ -@font-face { - font-family:'EngraversOldEnglishBT-Bold'; - src: url('//cdn.webfont.youziku.com/webfonts/nomal/123918/33195/5d21f88af629d8080c5960eb.gif?r=110901002758'); - src: url('//cdn.webfont.youziku.com/webfonts/nomal/123918/33195/5d21f88af629d8080c5960eb.gif?r=110901002758?#iefix') format('embedded-opentype'), url('//cdn.webfont.youziku.com/webfonts/nomal/123918/33195/5d21f88af629d8080c5960eb.png?r=110901002758') format('woff2'), url('//cdn.webfont.youziku.com/webfonts/nomal/123918/33195/5d21f88af629d8080c5960eb.bmp?r=110901002758') format('woff'); - font-weight: normal; - font-style: normal; -} \ No newline at end of file diff --git a/css/sey.css b/css/sey.css deleted file mode 100644 index 9a805af..0000000 --- a/css/sey.css +++ /dev/null @@ -1,123 +0,0 @@ -* -{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Poppins', sans-serif; -} - - -/* 移除全局a:hover样式，避免影响社交元素 */ -/* -a:hover -{ - border-radius: 25px; - background: var(--clr); - color: var(--clr); - letter-spacing: 0.25em; - box-shadow: 0 0 35px var(--clr); -} -*/ - -/* 为非社交元素的链接保留hover效果 */ -:not(.social-icons-row) a:hover { - border-radius: 25px; - background: var(--clr); - color: var(--clr); - letter-spacing: 0.25em; - box-shadow: 0 0 35px var(--clr); -} - -span -{ - position: relative; - z-index: 1; -} -i -{ - position: absolute; - inset: 0; - display: block; -} -/* 移除伪元素动画效果，避免影响社交元素 */ -/* -i::before -{ - content: ''; - position: absolute; - top: -3.5px; - left: 80%; - width: 10px; - height: 5px; - background: #27282c; - transform: translateX(-50%); - border: 2px solid var(--clr); - transition: 0.5s; -} -a:hover i::before -{ - width: 20px; - left: 20%; -} -*/ - -/* 为非社交元素的伪元素保留效果 */ -:not(.social-icons-row) i::before -{ - content: ''; - position: absolute; - top: -3.5px; - left: 80%; - width: 10px; - height: 5px; - background: #27282c; - transform: translateX(-50%); - border: 2px solid var(--clr); - transition: 0.5s; -} -:not(.social-icons-row) a:hover i::before -{ - width: 20px; - left: 20%; -} -/* 移除伪元素动画效果，避免影响社交元素 */ -/* -i::after -{ - content: ''; - position: absolute; - bottom: -3.5px; - left: 20%; - width: 10px; - height: 5px; - background: #27282c; - transform: translateX(-50%); - border: 2px solid var(--clr); - transition: 0.5s; -} -a:hover i::after -{ - width: 20px; - left: 80%; -} -*/ - -/* 为非社交元素的伪元素保留效果 */ -:not(.social-icons-row) i::after -{ - content: ''; - position: absolute; - bottom: -3.5px; - left: 20%; - width: 10px; - height: 5px; - background: #27282c; - transform: translateX(-50%); - border: 2px solid var(--clr); - transition: 0.5s; -} -:not(.social-icons-row) a:hover i::after -{ - width: 20px; - left: 80%; -} \ No newline at end of file diff --git a/css/stars-style.css b/css/stars-style.css deleted file mode 100644 index e6ba0cb..0000000 --- a/css/stars-style.css +++ /dev/null @@ -1,317 +0,0 @@ -* { - margin: 0; - padding: 0; - font-size: 14px; - box-sizing: content-box; -} - -html, -body { - width: 100%; - height: 100%; - user-select: none; -} - -#bg { - width: 100%; - min-width: 250px; - height: 100%; - position: fixed; - z-index: 1; -} - -.container { - width: 100%; - min-width: 250px; - min-height: 100%; - position: relative; - z-index: 10; - color: #fff; - display: flex; - flex-direction: column; - align-items: center; -} - -.container .avatar { - width: 80px; - height: 80px; - margin-top: 30%; - border-radius: 50%; - box-shadow: 0 0 90px 2px #fff; - opacity: 0.8; - cursor: pointer; -} - -.container .nickname { - font-size: 18px; - margin-top: 20px; - letter-spacing: 2px; - animation: nickname-shadow 2s ease-in-out infinite alternate; -} - -@keyframes nickname-shadow { - from { - text-shadow: 0 0 2px #f6f7fb; - } - - to { - text-shadow: 1px 1px 20px #f6f7fb; - } -} - - -.container .introduce { - font-size: 14px; - margin-top: 20px; - padding: 0 28px; - letter-spacing: 1px; - text-align: center; - line-height: 28px; -} - -.container .quote { - font-size: 14px; - margin-top: 20px; - padding: 0 28px; - letter-spacing: 1px; - text-align: center; - font-family: cursive; - line-height: 28px; -} - -.container .quote::after { - content: ''; - display: inline-block; - width: 2px; - height: 18px; - border-radius: 2px; - background-color: #fff; - vertical-align: middle; - animation: blink 0.8s linear infinite; -} - -@keyframes blink { - 0% { - opacity: 1; - } - - 50% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - -nav { - width: 80%; - min-height: 40px; - margin-top: 80px; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: center; -} - -nav .item { - width: 28px; - height: 28px; - margin: 8px 12px; - position: relative; - display: flex; - border-radius: 50%; - background-color: rgba(255, 255, 255, 0.9); - justify-content: center; - align-items: center; -} - -nav .item a { - color: #fff; - text-decoration: none; - display: block; - width: 20px; - height: 20px; -} - -nav .item a:focus, -nav .item a:visited, -nav .item a:active { - color: #fff; -} - -nav .item a img { - width: 100%; - height: 100%; -} - -nav .item .tooltip { - position: absolute; - width: 80px; - max-height: 80px; - background-color: rgb(255, 255, 255); - bottom: 40px; - padding: 4px; - border-radius: 4px; - z-index: 10; - color: #333; - letter-spacing: 2px; - text-align: center; - opacity: 0; - z-index: -1; - transform: translateY(-40px); - transition: all 0.1s ease-in-out; -} - -nav .item .tooltip img { - width: 100%; - height: 100%; - position: relative; - z-index: 10; -} - -nav .item .tooltip::after { - content: ''; - display: block; - width: 8px; - height: 8px; - border-radius: 2px; - background-color: rgb(255, 255, 255); - position: absolute; - bottom: -4px; - left: 40px; - transform: rotate(45deg); - z-index: 9; -} - - -nav .item a:focus+.tooltip, -nav .item a:hover+.tooltip { - transform: translateY(0); - z-index: 10; - opacity: 1; -} - -footer { - width: 80%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 20px 0; - margin-top: 40px; -} - -footer .icp { - color: #f6f7fb; - text-decoration: none; - letter-spacing: 2px; - font-size: 10px; -} - - -footer .copyright { - color: #999; - font-size: 10px; - margin-top: 8px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -@media screen and (min-width:768px) { - .container .avatar { - width: 88px; - height: 88px; - margin-top: 20%; - } - - .container .nickname { - font-size: 20px; - margin-top: 28px; - } - - .container .introduce { - font-size: 16px; - margin-top: 28px; - padding: 0 40px; - } - - .container .quote { - font-size: 16px; - margin-top: 28px; - padding: 0 40px; - } - - .container .quote::after { - height: 20px; - } - - nav { - margin-top: 90px; - } - - nav .item { - width: 32px; - height: 32px; - } - - nav .item .tooltip { - bottom: 48px; - } - - nav .item a { - width: 22px; - height: 22px; - } -} - -@media screen and (min-width:992px) { - .container .avatar { - width: 96px; - height: 96px; - margin-top: 10%; - } - - .container .nickname { - font-size: 22px; - margin-top: 32px; - } - - .container .introduce { - font-size: 18px; - margin-top: 36px; - padding: 0 80px; - } - - .container .quote { - font-size: 18px; - margin-top: 36px; - padding: 0 80px; - } - - - .container .quote::after { - height: 22px; - } - - nav { - margin-top: 100px; - } - - nav .item { - width: 36px; - height: 36px; - margin: 12px; - } - - nav .item .tooltip { - bottom: 56px; - } - - nav .item a { - width: 24px; - height: 24px; - } -} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 56a55c9..64d1050 100644 --- a/css/style.css +++ b/css/style.css @@ -88,25 +88,6 @@ pre { pre code { padding: 0; background: none; border: none; word-wrap: normal; } /* 主要布局样式 */ -.container { position: relative; z-index: 500; width: 940px; margin: 0 auto; } - -.content-wrapper { - z-index: 800; - width: 70%; - margin-left: 30%; -} - -.content-wrapper__inner { margin: 0 10%; padding: 50px 0; } - -.footer { - display: block; - padding: 1.5em 0; - text-align: center; - font-size: 0.85em; - color: rgba(255, 255, 255, 0.7); - background-color: rgba(0, 0, 0, 0.3); - margin-top: 2em; -} /* 圆形元素样式 */ .avatar, .logo, .profilepic { @@ -201,9 +182,6 @@ pre code { padding: 0; background: none; border: none; word-wrap: normal; } } /* 响应式适配 */ -@media all and (max-width: 1100px) {} - -@media all and (max-width: 960px) {} @media all and (max-width: 510px) { .navigation { line-height: 50px; } @@ -261,8 +239,6 @@ pre code { padding: 0; background: none; border: none; word-wrap: normal; } } /* 设备适配 */ -@media screen and (max-width: 768px) { .iphone-simulator { display: none; } } -@media screen and (min-width: 769px) { .iphone-simulator { display: block; } } /* 重要布局组件样式 */ .panel { @@ -271,7 +247,7 @@ pre code { padding: 0; background: none; border: none; word-wrap: normal; } height: 100%; } -.panel__vertical { display: table-cell; vertical-align: middle; } + .panel-title { font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; @@ -294,15 +270,14 @@ pre code { padding: 0; background: none; border: none; word-wrap: normal; } /* 一言元素样式 - 细腻优雅字体 */ .panel-cover__description { font-family: 'Source Han Serif SC', 'Noto Serif SC', 'PingFang SC', 'Hiragino Sans GB W3', 'Apple LiGothic Medium', 'Microsoft YaHei UI Light', serif; - font-size: 0.95em; + font-size: 0.9em; font-weight: 200; - line-height: 1.9; - letter-spacing: 3px; + line-height: 2; + letter-spacing: 2px; color: #ffffff; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); + text-shadow: 0 1px 2px rgba(141, 114, 114, 0.2) !important; position: relative; z-index: 1; - opacity: 0.92; font-feature-settings: 'kern' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -381,64 +356,165 @@ pre code { padding: 0; background: none; border: none; word-wrap: normal; } .panel-inverted a { color: #fff; } -/* 按钮样式 */ +/* 现代化按钮样式 */ .btn, .navigation__item a { - padding: 10px 20px; - border: 1px solid #4e97d8; - border-radius: 20px; - font-size: 0.9em; - font-weight: bold; - letter-spacing: 1px; + padding: 8px 16px; + border: 2px solid transparent; + border-radius: 25px; + font-size: 0.95em; + font-weight: 450; + letter-spacing: 1.2px; text-shadow: none; - color: #4e97d8; + color: #fff; + background: linear-gradient(135deg, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.005) 100%); + backdrop-filter: blur(2px); + -webkit-backdrop-filter: blur(2px); + box-shadow: 0 2px 8px rgba(0,0,0,0.03); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; -webkit-font-smoothing: antialiased; } -.btn:hover, .navigation__item a:hover { color: #4e97d8; border-color: #4e97d8; } -/* 导航样式 */ -nav { display: inline-block; position: relative; } + +.btn:hover, .navigation__item a:hover { + color: #fff; + background: linear-gradient(135deg, rgba(102, 126, 234, 0.25), rgba(118, 75, 162, 0.22), rgba(240, 147, 251, 0.18)); + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15); + border-color: transparent; + opacity: 1; +} + + + + + + + +/* 现代化导航样式 */ +nav { + display: inline-block; + position: relative; + margin: 0 0; + animation: navFadeIn 0.8s ease-out; +} + +@keyframes navFadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} .navigation { - display: inline-block; - position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 15px; margin: 0; + padding: 12px; list-style-type: none; + background: rgba(255, 255, 255, 0.008); + border-radius: 30px; + backdrop-filter: blur(1px); + -webkit-backdrop-filter: blur(5px); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); + position: relative; + overflow: hidden; +} + +.navigation::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.01) 50%, transparent 70%); + animation: shimmer 3s ease-in-out infinite; +} + +@keyframes shimmer { + 0%, 100% { + transform: translateX(-100%); + } + 50% { + transform: translateX(100%); + } } .navigation__item { - display: inline-block; - margin: 5px 1px 0 0; - line-height: 1em; + margin: 0; + line-height: 0.5em; + position: relative; + z-index: 2; } .navigation__item a { - display: block; + display: inline-block; + padding: 10px 16px; + color: #ffffff; + text-decoration: none; + border-radius: 20px; + font-weight: 450; + font-size: 0.7em; + letter-spacing: 0.5px; position: relative; - border-color: rgba(255, 255, 255, 0.6); - color: #fff; opacity: 0.9; transition: all 0.3s ease; + z-index: 1; + background: rgba(255, 255, 255, 0.008); + border: 0.5px solid rgba(255, 255, 255, 0.06); + backdrop-filter: blur(2px); + -webkit-backdrop-filter: blur(3px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + + + +.navigation__item a::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.008); + border-radius: 20px; + z-index: -1; + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(3px); + margin: 0.5px; } /* FAB图标样式 */ .fab { - font-family: 'Font Awesome 6 Brands'; - font-weight: 400; + font-family: "Font Awesome 6 Brands" !important; + font-style: normal !important; + font-variant: normal !important; + text-rendering: auto !important; + -webkit-font-smoothing: antialiased !important; } -/* 社交图标样式 */ -.navigation--social .navigation__item a:before { - font-family: 'Font Awesome 6 Brands'; - font-weight: 400; - font-size: 1.2em; -} + /* 主导航样式 */ .cover-navigation--primary .navigation__item a { - margin: 0 5px; - padding: 10px 15px; - border-width: 1px; + margin: 0; + position: relative; + z-index: 1; +} + +.cover-navigation--primary .navigation__item a:active { + transform: translateY(0); + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2); } /* 社交图标导航样式 - 完全重写版本 */ @@ -463,10 +539,20 @@ nav { display: inline-block; position: relative; } position: relative; } -/* 响应式社交图标间距和大小 */ -@media screen and (min-width: 1200px) { +/* 导航响应式设计 */ + + +@media screen and (max-width: 1024px) { + .navigation { + padding: 15px; + gap: 12px; + } + .btn, .navigation__item a { + padding: 10px 20px; + font-size: 0.9em; + } .social-icons-row .social-icon { - margin: 0 3%; + margin: 0 2%; } .social-icons-row .social-icon a { font-size: 1.2em; @@ -474,6 +560,16 @@ nav { display: inline-block; position: relative; } } @media screen and (max-width: 768px) { + .navigation { + padding: 12px; + gap: 10px; + border-radius: 20px; + } + .btn, .navigation__item a { + padding: 8px 16px; + font-size: 0.85em; + letter-spacing: 1px; + } .social-icons-row .social-icon { margin: 0 1.5%; } @@ -483,6 +579,17 @@ nav { display: inline-block; position: relative; } } @media screen and (max-width: 480px) { + .navigation { + padding: 10px; + gap: 8px; + flex-direction: column; + } + .btn, .navigation__item a { + padding: 8px 14px; + font-size: 0.8em; + width: 100%; + text-align: center; + } .social-icons-row .social-icon { margin: 0 1%; } @@ -497,14 +604,39 @@ nav { display: inline-block; position: relative; } font-size: 1.2em; display: inline-block; background-color: transparent !important; - color: #fff !important; width: auto; - opacity: 0.9; - transition: opacity 0.3s ease; + opacity: 0.85; + transition: all 0.3s ease; + transform: scale(1); } .social-icons-row .social-icon a:hover { opacity: 1; + transform: scale(1.1); +} + +.social-icons-row .social-icon a svg path { + transition: fill 0.3s ease; +} + +.social-icons-row .social-icon a[href*="github"]:hover svg path { + fill: url(#github-gradient-hover) !important; +} + +.social-icons-row .social-icon a[href*="linkedin"]:hover svg path { + fill: url(#linkedin-gradient-hover) !important; +} + +.social-icons-row .social-icon a[href*="twitter"]:hover svg path { + fill: url(#twitter-gradient-hover) !important; +} + +.social-icons-row .social-icon a.weixin-link:hover svg path { + fill: url(#wechat-gradient-hover) !important; +} + +.social-icons-row .social-icon a[href*="mailto"]:hover svg path { + fill: url(#email-gradient-hover) !important; } /* 覆盖社交图标i元素的样式，移除小横杠黑点 */ @@ -535,7 +667,8 @@ nav { display: inline-block; position: relative; } left: auto !important; } -.social-icons-row .social-icon i { +.social-icons-row .social-icon i, +.social-icons-row .social-icon svg { position: static; display: inline-block; transform: none !important; @@ -543,6 +676,8 @@ nav { display: inline-block; position: relative; } height: auto; background: transparent !important; border: none !important; + fill: currentColor; + transition: all 0.3s ease; } .social-icons-row .social-icon .label { @@ -555,11 +690,14 @@ nav { display: inline-block; position: relative; } .social-icons-row .social-icon a:hover { opacity: 1; - transform: none !important; /* 确保悬停时不移动 */ - background-color: transparent !important; - color: #fff !important; + transform: scale(1.1) !important; + background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%) !important; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; + background-clip: text !important; letter-spacing: normal !important; - box-shadow: none !important; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important; + border-radius: 50% !important; } /* 隐藏社交导航文本名称 */ @@ -694,7 +832,8 @@ nav { display: inline-block; position: relative; } } .power a { - color: rgba(255, 255, 255, 0.9); + color: rgba(255, 255, 255, 0.8); + font-size: 0.5em; text-decoration: none; transition: color 0.3s ease; } @@ -711,11 +850,7 @@ nav { display: inline-block; position: relative; } color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5); } -/* 微信图标样式 */ -.wechat-icon { - position: relative; - cursor: pointer; -} + /* navigation-wrapper 间距调整 */ .navigation-wrapper { diff --git a/index.html b/index.html index ad8db90..043c716 100644 --- a/index.html +++ b/index.html @@ -13,25 +13,24 @@ Honesty的主页 - - + + - + - + + src="https://cdn.jsdmirror.com/npm/izitoast@1.4.0/dist/js/iziToast.min.js"> - - - - + + - + diff --git a/js/about.js b/js/about.js new file mode 100644 index 0000000..7c854c9 --- /dev/null +++ b/js/about.js @@ -0,0 +1,546 @@ +// 关于页面JavaScript功能 - 现代动态版本 + +$(document).ready(function() { + // 初始化所有功能 + initGitHubStats(); + initBlogArticles(); + initVisitorStats(); + initArtalkComments(); + initPageAnimations(); + initTechCloud(); + initScrollEffects(); +}); + +// GitHub 统计信息 +function initGitHubStats() { + const username = 'listener-He'; // 替换为实际的GitHub用户名 + + // 获取用户基本信息 + fetch(`https://api.github.com/users/${username}`) + .then(response => response.json()) + .then(data => { + const profileHtml = ` +
+
+ ${data.name} +
+
+

${data.name || data.login}

+

${data.bio || '暂无简介'}

+
+
+ ${data.public_repos} + 仓库 +
+
+ ${data.followers} + 关注者 +
+
+ ${data.following} + 关注 +
+
+
+
+ `; + $('#github-profile').html(profileHtml); + }) + .catch(error => { + console.error('获取GitHub用户信息失败:', error); + $('#github-profile').html('
加载GitHub信息失败
'); + }); + + // 获取提交统计（使用GitHub API的限制，这里模拟数据） + const commitsHtml = ` +
+

提交统计

+
+
+ 本周 +
+
+
+ 24 +
+
+ 本月 +
+
+
+ 156 +
+
+ 今年 +
+
+
+ 1,247 +
+
+
+ `; + $('#github-commits').html(commitsHtml); +} + +// 优质项目展示 +function initProjects() { + const username = 'listener-He'; + + fetch(`https://api.github.com/users/${username}/repos?sort=stars&per_page=6`) + .then(response => response.json()) + .then(repos => { + const projectsHtml = repos.map(repo => { + const languages = repo.language ? [repo.language] : []; + return ` +
+
+
+

${repo.name}

+

${repo.description || '暂无描述'}

+
+
+ ${repo.stargazers_count} + ${repo.forks_count} +
+
+
+ ${languages.map(lang => `${lang}`).join('')} +
+
+ 更新于 ${new Date(repo.updated_at).toLocaleDateString('zh-CN')} +
+
+ `; + }).join(''); + + $('#projects-container').html(projectsHtml); + }) + .catch(error => { + console.error('获取GitHub项目失败:', error); + $('#projects-container').html('
加载项目信息失败
'); + }); +} + +// 博客文章RSS解析 +function initBlogArticles() { + const rssUrl = 'https://blog.hehouhui.cn/rss/feed.xml'; + const cacheKey = 'blog_articles_cache'; + const cacheTimeKey = 'blog_articles_cache_time'; + + // 检查缓存 + const cachedData = localStorage.getItem(cacheKey); + const cacheTime = localStorage.getItem(cacheTimeKey); + const today = new Date().toDateString(); + + if (cachedData && cacheTime === today) { + // 使用缓存数据 + displayBlogArticles(JSON.parse(cachedData)); + return; + } + + // 清除过期缓存并重新获取 + localStorage.removeItem(cacheKey); + localStorage.removeItem(cacheTimeKey); + + // 使用代理服务获取RSS数据 + const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(rssUrl)}`; + + fetch(proxyUrl) + .then(response => response.json()) + .then(data => { + const parser = new DOMParser(); + const xmlDoc = parser.parseFromString(data.contents, 'text/xml'); + const items = xmlDoc.querySelectorAll('item'); + + const articles = Array.from(items).slice(0, 6).map(item => { + const title = item.querySelector('title')?.textContent || ''; + const link = item.querySelector('link')?.textContent || ''; + const description = item.querySelector('description')?.textContent || ''; + const pubDate = item.querySelector('pubDate')?.textContent || ''; + const category = item.querySelector('category')?.textContent || '技术分享'; + + // 提取摘要（去除HTML标签） + const excerpt = description.replace(/<[^>]*>/g, '').substring(0, 150) + '...'; + + return { + title, + excerpt, + link, + pubDate: new Date(pubDate).toLocaleDateString('zh-CN'), + category + }; + }); + + // 缓存数据 + localStorage.setItem(cacheKey, JSON.stringify(articles)); + localStorage.setItem(cacheTimeKey, today); + + displayBlogArticles(articles); + }) + .catch(error => { + console.error('获取RSS数据失败:', error); + // 降级到模拟数据 + const fallbackArticles = [ + { + title: "向量数据库全攻略：从算法公式到选型指南，一篇吃透高维数据存储术", + excerpt: "深入探讨向量数据库的核心算法、应用场景和选型策略，帮助开发者掌握高维数据存储的关键技术...", + link: "https://blog.hehouhui.cn/posts/vector-database-guide", + pubDate: "2025-01-02", + category: "技术分享" + }, + { + title: "CompletableFuture 从源码到实战：让异步编程像喝奶茶一样丝滑", + excerpt: "全面解析CompletableFuture的源码实现和实战应用，让Java异步编程变得简单优雅...", + link: "https://blog.hehouhui.cn/posts/completablefuture-guide", + pubDate: "2025-01-02", + category: "Java开发" + }, + { + title: "从规范到架构：一篇读懂 Java 工程建模、分层、命名与演进之路", + excerpt: "深入讲解Java工程的规范化建设，包括项目结构、分层架构、命名规范等最佳实践...", + link: "https://blog.hehouhui.cn/posts/java-project-architecture", + pubDate: "2025-01-01", + category: "架构设计" + } + ]; + displayBlogArticles(fallbackArticles); + }); +} + +function displayBlogArticles(articles) { + const articlesHtml = articles.map(article => ` +
+

${article.title}

+

${article.excerpt}

+
+ ${article.category} + ${new Date(article.pubDate).toLocaleDateString('zh-CN')} +
+
+ `).join(''); + + $('#blog-container').html(articlesHtml); +} + +// 访问统计（百度统计集成） +function initVisitorStats() { + // 这里需要集成百度统计API + // 由于百度统计API需要认证，这里使用模拟数据 + const mockStats = { + totalVisitors: 12580, + totalVisits: 25640, + todayVisitors: 156, + todayVisits: 234 + }; + + // 动画显示数字 + animateNumber('#total-visitors', mockStats.totalVisitors); + animateNumber('#total-visits', mockStats.totalVisits); + animateNumber('#today-visitors', mockStats.todayVisitors); + animateNumber('#today-visits', mockStats.todayVisits); +} + +// 数字动画效果 +function animateNumber(selector, targetNumber) { + const element = $(selector); + const duration = 2000; + const steps = 60; + const increment = targetNumber / steps; + let current = 0; + + const timer = setInterval(() => { + current += increment; + if (current >= targetNumber) { + current = targetNumber; + clearInterval(timer); + } + element.text(Math.floor(current).toLocaleString()); + }, duration / steps); +} + +// 评论系统初始化 +function initArtalkComments() { + // 初始化 Artalk 评论系统 + if (typeof Artalk !== 'undefined') { + const artalk = Artalk.init({ + el: '#artalk-container', + pageKey: window.location.pathname, + pageTitle: document.title, + server: 'https://your-artalk-server.com', // 替换为实际的Artalk服务器地址 + site: 'Honesty的主页', + placeholder: '来说点什么吧...', + noComment: '暂无评论', + sendBtn: '发送', + darkMode: false, + gravatar: { + mirror: 'https://cravatar.cn/avatar/' + }, + pagination: { + pageSize: 20, + readMore: true, + autoLoad: true + }, + heightLimit: { + content: 300, + children: 400 + }, + imgUpload: false, + preview: true, + versionCheck: true + }); + + // 自定义样式 + setTimeout(() => { + const atkMain = document.querySelector('.atk-main'); + if (atkMain) { + atkMain.style.borderRadius = '15px'; + atkMain.style.overflow = 'hidden'; + } + }, 1000); + } +} + +// 技术云图初始化 +function initTechCloud() { + const techItems = [ + // 内层轨道 - 核心技能 + { name: 'JavaScript', level: 'primary', orbit: 1 }, + { name: 'Python', level: 'primary', orbit: 1 }, + { name: 'React', level: 'primary', orbit: 1 }, + + // 中层轨道 - 熟练技能 + { name: 'Node.js', level: 'secondary', orbit: 2 }, + { name: 'Vue.js', level: 'secondary', orbit: 2 }, + { name: 'TypeScript', level: 'secondary', orbit: 2 }, + { name: 'MySQL', level: 'secondary', orbit: 2 }, + + // 外层轨道 - 工具技能 + { name: 'Docker', level: 'tertiary', orbit: 3 }, + { name: 'Git', level: 'tertiary', orbit: 3 }, + { name: 'Linux', level: 'tertiary', orbit: 3 }, + { name: 'AWS', level: 'tertiary', orbit: 3 }, + { name: 'MongoDB', level: 'tertiary', orbit: 3 }, + { name: 'Redis', level: 'tertiary', orbit: 3 } + ]; + + // 动态生成技术项目 + techItems.forEach((tech, index) => { + const orbit = $(`.orbit-${tech.orbit}`); + const techElement = $(`
${tech.name}
`); + orbit.append(techElement); + }); +} + +// 滚动效果 +function initScrollEffects() { + // 导航栏滚动效果 + let lastScrollTop = 0; + $(window).scroll(function() { + const scrollTop = $(this).scrollTop(); + const navbar = $('.navbar'); + + // 添加滚动样式 + if (scrollTop > 50) { + navbar.addClass('scrolled'); + } else { + navbar.removeClass('scrolled'); + } + + // 隐藏/显示导航栏 + if (scrollTop > lastScrollTop && scrollTop > 100) { + navbar.css('transform', 'translateY(-100%)'); + } else { + navbar.css('transform', 'translateY(0)'); + } + + lastScrollTop = scrollTop; + }); +} + +// 页面动画效果 +function initPageAnimations() { + // 滚动显示动画 + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + entry.target.classList.add('animate-in'); + } + }); + }, observerOptions); + + // 观察所有区域 + document.querySelectorAll('.hero-section, .tech-cloud-section, .personality-timeline-section, .github-showcase-section, .blog-waterfall-section, .contact-floating-section, .comments-section').forEach(section => { + section.style.opacity = '0'; + section.style.transform = 'translateY(50px)'; + section.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; + observer.observe(section); + }); + + // 数字动画 + function animateNumbers() { + $('.stat-number').each(function() { + const $this = $(this); + const target = parseInt($this.text().replace(/[^0-9]/g, '')); + const duration = 2000; + const step = target / (duration / 16); + let current = 0; + + const timer = setInterval(() => { + current += step; + if (current >= target) { + current = target; + clearInterval(timer); + } + $this.text(Math.floor(current).toLocaleString()); + }, 16); + }); + } + + // 当英雄区域进入视野时开始数字动画 + const heroObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + animateNumbers(); + heroObserver.unobserve(entry.target); + } + }); + }); + + const heroSection = document.querySelector('.hero-section'); + if (heroSection) { + heroObserver.observe(heroSection); + } +} + +// 添加GitHub统计的CSS样式 +const githubStyles = ` + +`; + +// 添加样式到页面 +$('head').append(githubStyles); + +// 错误处理 +window.addEventListener('error', function(e) { + console.error('页面错误:', e.error); +}); + +// 页面加载完成提示 +$(window).on('load', function() { + console.log('关于我页面加载完成'); +}); \ No newline at end of file diff --git a/js/bj.js b/js/bj.js index f956838..9ad16b8 100644 --- a/js/bj.js +++ b/js/bj.js @@ -3,19 +3,24 @@ var stars_count; var stars; ini(); makeStars(); -var interval=setInterval(function(){drawStars();},50);//ʱˢ +var interval=setInterval(function(){drawStars();},50);//��ʱˢ���������� -function ini(){//ʼ - canvas = document.getElementById("starfield"); +function ini(){//初始化 + canvas = document.getElementById("bg"); + if (!canvas) { + console.warn('Canvas element with id "bg" not found'); + return; + } canvas.width = window.innerWidth; canvas.height = window.innerHeight; context = canvas.getContext("2d"); - stars = Array();//ɵݣx,y,Сɫٶȣ - stars_count = 300;// + stars = Array();//������������ɵ��������ݣ�x,y,��С����ɫ���ٶȣ� + stars_count = 300;//�������� clearInterval(interval); } -function makeStars(){// +function makeStars(){//��������������� + if (!canvas) return; for(var i=0;i + + + Honesty的博客 + https://blog.hehouhui.cn + 分享技术心得与生活感悟 + zh-CN + Mon, 15 Jan 2024 10:00:00 +0800 + + + + 现代Web开发最佳实践 + https://blog.hehouhui.cn/posts/modern-web-development + 探讨现代Web开发中的最佳实践，包括性能优化、安全性考虑和用户体验设计。从前端框架选择到后端架构设计，全面分析如何构建高质量的Web应用程序。 + Mon, 15 Jan 2024 09:00:00 +0800 + https://blog.hehouhui.cn/posts/modern-web-development + 技术分享 + + + + JavaScript异步编程深度解析 + https://blog.hehouhui.cn/posts/javascript-async-programming + 深入理解JavaScript中的异步编程模式，从回调函数到Promise再到async/await。通过实际案例分析异步编程的最佳实践和常见陷阱。 + Wed, 10 Jan 2024 14:30:00 +0800 + https://blog.hehouhui.cn/posts/javascript-async-programming + 前端开发 + + + + 开源项目贡献指南 + https://blog.hehouhui.cn/posts/open-source-contribution-guide + 如何有效地为开源项目做贡献，包括代码规范、提交流程和社区交流技巧。分享从新手到贡献者的成长路径和实用建议。 + Fri, 05 Jan 2024 16:45:00 +0800 + https://blog.hehouhui.cn/posts/open-source-contribution-guide + 开源 + + + + React性能优化实战技巧 + https://blog.hehouhui.cn/posts/react-performance-optimization + React应用性能优化的实战技巧，包括组件优化、状态管理、代码分割等方面。通过具体案例展示如何提升React应用的运行效率。 + Tue, 02 Jan 2024 11:20:00 +0800 + https://blog.hehouhui.cn/posts/react-performance-optimization + 前端开发 + + + + Node.js微服务架构设计 + https://blog.hehouhui.cn/posts/nodejs-microservices-architecture + 基于Node.js的微服务架构设计原则和实践经验。涵盖服务拆分、通信机制、数据一致性和监控等关键技术点。 + Sun, 28 Dec 2023 13:15:00 +0800 + https://blog.hehouhui.cn/posts/nodejs-microservices-architecture + 后端开发 + + + + CSS Grid布局完全指南 + https://blog.hehouhui.cn/posts/css-grid-complete-guide + CSS Grid布局的完整学习指南，从基础概念到高级应用。通过丰富的示例展示Grid布局在现代Web设计中的强大功能。 + Thu, 21 Dec 2023 15:30:00 +0800 + https://blog.hehouhui.cn/posts/css-grid-complete-guide + 前端开发 + + + + \ No newline at end of file