From 629eb55a41aaf7ea9db9eeb4d22f0bbadeb4d361 Mon Sep 17 00:00:00 2001 From: hehh Date: Thu, 20 Nov 2025 19:25:10 +0800 Subject: [PATCH] =?UTF-8?q?style(css):=20=E4=BC=98=E5=8C=96=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E9=A2=9C=E8=89=B2=E5=92=8C=E6=A0=87=E7=AD=BE=E4=BA=91?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 调整日夜模式下的背景色和文字颜色，提升可读性 - 增强毛玻璃效果和边框透明度 - 重构标签云布局，支持响应式设计 - 优化标签悬停效果和动画性能 - 统一使用CSS变量管理主题颜色 - 改进技术标签的视觉层次和交互反馈 - 增加移动端适配和滚动动画 - 修复时间线在小屏幕上的显示问题 --- about.html | 43 +-- css/about.css | 1022 +++++++++++++++++++++++++++++++++++-------------- js/about.js | 449 +++++++++++++++++----- 3 files changed, 1086 insertions(+), 428 deletions(-) diff --git a/about.html b/about.html index d08a635..0fd85df 100644 --- a/about.html +++ b/about.html @@ -105,49 +105,12 @@
-

技术栈云图

+

技术栈

技术探索之旅 - 追求深度与完美的技术实践

-
- Java - Python - JavaScript - Spring Boot - WebFlux - Reactor - TypeScript - Spring Cloud - Go - MySQL - Redis - MongoDB - Docker - Kubernetes - OpenAI API - LangChain - TensorFlow - PyTorch - Elasticsearch - RabbitMQ - Kafka - Jenkins - Git - Linux - AWS - Nginx - Spring Security - MyBatis - JPA - Dubbo - Netty - Transformers - Scikit-learn - Ollama - Dify - Spring AI - ClickHouse - Postgresql +
+
diff --git a/css/about.css b/css/about.css index 971b397..3403fcc 100644 --- a/css/about.css +++ b/css/about.css @@ -15,8 +15,8 @@ --glass-border: rgba(255, 255, 255, 0.16); --text-strong: #ffffff; --text-soft: rgba(255, 255, 255, 0.9); - --grad-a: #101216; - --grad-b: #171a1f; + --grad-a: #1D1F26; /* 更淡雅的背景色 */ + --grad-b: #252830; /* 更淡雅的背景色 */ --accent-a: #3AA0FF; --accent-b: #4ECDC4; --accent-coral: #FF6B6B; @@ -24,12 +24,21 @@ } :root.theme-day { - --grad-a: #F6F7F9; - --grad-b: #EDEFF3; - --text-strong: #121417; - --text-soft: #2a2d34; - --glass-alpha: 0.10; - --glass-border: rgba(0, 0, 0, 0.12); + --grad-a: #F8F9FA; /* 更淡雅的白天模式背景色 */ + --grad-b: #E9ECEF; /* 更淡雅的白天模式背景色 */ + --text-strong: #212529; + --text-soft: #495057; + --glass-alpha: 0.25; /* 增加毛玻璃效果 */ + --glass-border: rgba(0, 0, 0, 0.08); +} + +:root.theme-night { + --grad-a: #1D1F26; /* 更淡雅的夜间模式背景色 */ + --grad-b: #252830; /* 更淡雅的夜间模式背景色 */ + --text-strong: #F8F9FA; + --text-soft: rgba(248, 249, 250, 0.85); + --glass-alpha: 0.18; + --glass-border: rgba(255, 255, 255, 0.12); } :root.theme-night { @@ -42,22 +51,18 @@ } .theme-day .nav-logo { - background: linear-gradient(45deg, #121417, #2a2d34); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--text-strong); } -.theme-day .nav-links a { color: var(--text-soft); } +.theme-day .nav-links a { + color: var(--text-soft); +} .theme-day .hero-title, .theme-day .section-title, .theme-day .project-title, .theme-day .article-title { - background: linear-gradient(45deg, #121417, #2a2d34); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--text-strong); } .theme-day .hero-subtitle, @@ -67,12 +72,135 @@ .theme-day .timeline-content p, .theme-day .section-subtitle, .theme-day .location-info, -.theme-day .stat-label { color: var(--text-soft); } +.theme-day .stat-label { + color: var(--text-soft); +} .theme-day .cloud-tag { - color: var(--text-soft); + color: var(--text-strong); border-color: rgba(0, 0, 0, 0.1); - background: rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.4); +} + +.theme-day .cloud-tag:hover { + color: var(--accent-coral); + background: rgba(255, 255, 255, 0.6); +} + +.theme-day .mbti-tag, +.theme-day .mbti-name, +.theme-day .trait, +.theme-day .profile-info h1, +.theme-day .social-info h3 { + color: var(--text-strong); +} + +.theme-day .intro-quote p, +.theme-day .mbti-traits, +.theme-day .profile-info p, +.theme-day .timeline-content p, +.theme-day .project-description, +.theme-day .article-excerpt, +.theme-day .article-meta, +.theme-day .social-info p, +.theme-day .contact-title p, +.theme-day .philosophy-text, +.theme-day .footer-info { + color: var(--text-soft); +} + +.theme-day .stat-number { + color: var(--text-strong); +} + +.theme-day .project-stat, +.theme-day .project-stats span { + color: var(--text-soft); +} + +.theme-day .article-meta { + color: var(--text-soft); +} + +.theme-day .timeline-content h3 { + color: var(--text-strong); +} + +.theme-day .view-all-link { + color: var(--text-strong); +} + +.theme-night .nav-logo { + color: var(--text-strong); +} + +.theme-night .nav-links a { + color: var(--text-soft); +} + +.theme-night .hero-title, +.theme-night .section-title, +.theme-night .project-title, +.theme-night .article-title { + color: var(--text-strong); +} + +.theme-night .hero-subtitle, +.theme-night .intro-text p, +.theme-night .project-description, +.theme-night .article-excerpt, +.theme-night .timeline-content p, +.theme-night .section-subtitle, +.theme-night .location-info, +.theme-night .stat-label { + color: var(--text-soft); +} + +.theme-night .cloud-tag { + color: var(--text-strong); +} + +.theme-night .mbti-tag, +.theme-night .mbti-name, +.theme-night .trait, +.theme-night .profile-info h1, +.theme-night .social-info h3 { + color: var(--text-strong); +} + +.theme-night .intro-quote p, +.theme-night .mbti-traits, +.theme-night .profile-info p, +.theme-night .timeline-content p, +.theme-night .project-description, +.theme-night .article-excerpt, +.theme-night .article-meta, +.theme-night .social-info p, +.theme-night .contact-title p, +.theme-night .philosophy-text, +.theme-night .footer-info { + color: var(--text-soft); +} + +.theme-night .stat-number { + color: var(--text-strong); +} + +.theme-night .project-stat, +.theme-night .project-stats span { + color: var(--text-soft); +} + +.theme-night .article-meta { + color: var(--text-soft); +} + +.theme-night .timeline-content h3 { + color: var(--text-strong); +} + +.theme-night .view-all-link { + color: var(--text-strong); } body { @@ -80,8 +208,8 @@ body { line-height: 1.6; color: var(--text-soft); background: radial-gradient(1200px 600px at 20% 20%, rgba(60, 60, 80, 0.35), transparent 60%), - radial-gradient(800px 800px at 80% 0%, rgba(90, 70, 120, 0.18), transparent 70%), - linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%); + radial-gradient(800px 800px at 80% 0%, rgba(90, 70, 120, 0.18), transparent 70%), + linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%); min-height: 100vh; overflow-x: hidden; background-attachment: fixed; @@ -95,18 +223,21 @@ body::before { left: 0; width: 100%; height: 100%; - background: - radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), - radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), - radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 50%); + background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), + radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), + radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 50%); z-index: -1; animation: backgroundShift 25s ease-in-out infinite; } @keyframes backgroundShift { - 0%, 100% { transform: scale(1) rotate(0deg); } - 50% { transform: scale(1.1) rotate(5deg); } + 0%, 100% { + transform: scale(1) rotate(0deg); + } + 50% { + transform: scale(1.1) rotate(5deg); + } } /* 链接样式 - 添加动画效果 */ @@ -177,7 +308,7 @@ a:hover { .intro-quote p { margin: 0; font-style: italic; - color: #fff; + color: var(--text-strong); /* 使用主题文字颜色 */ line-height: 1.7; font-size: 1.1rem; } @@ -225,9 +356,15 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } @keyframes socialPulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.1); } - 100% { transform: scale(1); } + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } } /* 按钮悬浮效果 */ @@ -391,17 +528,48 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%), - radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%); + radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%), + radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%); pointer-events: none; } @keyframes heroGradientShift { - 0% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } } +/* 技术栈云图 - INFJ风格设计 */ +.tech-cloud-section { + padding: 8rem 2rem; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(15px); /* 增强毛玻璃效果 */ + -webkit-backdrop-filter: blur(15px); + border-radius: 50px; + margin: 2rem; + border: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); /* 增强阴影效果 */ + position: relative; + overflow: hidden; +} + +.tech-cloud-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.08) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.08) 0%, transparent 50%), + radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.08) 0%, transparent 50%); + pointer-events: none; +} + + /* INFJ装饰图片 - 重新设计布局 */ .infj-decoration { position: absolute; @@ -480,8 +648,12 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } @keyframes gradientShift { - 0%, 100% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } + 0%, 100% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } } .profile-avatar { @@ -518,21 +690,27 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } @keyframes pulse { - 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); } - 70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); } - 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); } + 0% { + box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); + } + 70% { + box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); + } } .profile-info h1 { margin: 0 0 0.5rem 0; font-size: 2rem; font-weight: 700; - color: #fff; + color: var(--text-strong); /* 使用主题文字颜色 */ } .profile-info p { margin: 0 0 1rem 0; - color: rgba(255, 255, 255, 0.9); + color: var(--text-soft); /* 使用主题文字颜色 */ font-size: 1.1rem; } @@ -541,7 +719,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info justify-content: center; align-items: center; gap: 0.5rem; - color: rgba(255, 255, 255, 0.8); + color: var(--text-soft); /* 使用主题文字颜色 */ font-size: 0.9rem; } @@ -596,11 +774,13 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info border-radius: 25px; font-weight: 700; font-size: 1.1rem; + color: var(--text-strong); /* 使用主题文字颜色 */ } .mbti-name { font-size: 1.2rem; font-weight: 600; + color: var(--text-strong); /* 使用主题文字颜色 */ } .mbti-traits { @@ -615,6 +795,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info border-radius: 20px; font-size: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.2); + color: var(--text-strong); /* 使用主题文字颜色 */ } .profile-avatar { @@ -677,8 +858,12 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } @keyframes rotate { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } .hero-title { @@ -694,8 +879,12 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } @keyframes titleGlow { - from { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)); } - to { filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8)); } + from { + filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)); + } + to { + filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8)); + } } .hero-subtitle { @@ -747,16 +936,13 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info .hero-stats .stat-number { font-size: 2.5rem; font-weight: 800; - background: linear-gradient(45deg, #fff, #e0e0e0); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--text-strong); /* 使用主题文字颜色 */ display: block; margin-bottom: 0.5rem; } .hero-stats .stat-label { - color: rgba(255, 255, 255, 0.9); + color: var(--text-soft); /* 使用主题文字颜色 */ font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; @@ -773,31 +959,15 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info .section-title { font-size: 3rem; font-weight: 800; - background: linear-gradient(45deg, #fff, #e0e0e0); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--text-strong); /* 使用主题文字颜色 */ margin-bottom: 1rem; position: relative; display: inline-block; } -.section-title::after { - content: ''; - position: absolute; - bottom: -10px; - left: 50%; - transform: translateX(-50%); - width: 80px; - height: 4px; - background: linear-gradient(45deg, var(--accent-coral), var(--accent-b)); - border-radius: 2px; - box-shadow: 0 2px 10px rgba(255, 107, 107, 0.25); -} - .section-subtitle { font-size: 1.2rem; - color: rgba(255, 255, 255, 0.9); + color: var(--text-soft); /* 使用主题文字颜色 */ font-weight: 500; opacity: 0.8; } @@ -824,15 +994,37 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%), - radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%); + radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%), + radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%); pointer-events: none; } @keyframes gradientShift { - 0% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +/* 标签浮动动画 - 仅在非球体模式下使用 */ +@keyframes cloudFloat { + 0%, 100% { + transform: translateY(0px) rotate(0deg) scale(1); + } + 25% { + transform: translateY(-8px) rotate(1deg) scale(1.02); + } + 50% { + transform: translateY(-4px) rotate(0deg) scale(1); + } + 75% { + transform: translateY(-10px) rotate(-1deg) scale(0.98); + } } /* 标签云容器 */ @@ -841,87 +1033,143 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info flex-wrap: wrap; justify-content: center; align-items: center; - gap: 15px; + gap: 25px; min-height: 400px; position: relative; perspective: 1000px; -} - -.cloud-wrapper.sphere { - height: 420px; width: 100%; - max-width: 600px; margin: 0 auto; - perspective: 800px; - transform-style: preserve-3d; } -.cloud-wrapper.sphere .cloud-tag { - position: absolute; +/* PC端球状旋转效果 */ +@media (min-width: 769px) { + .cloud-wrapper.sphere { + height: 650px; /* 根据规范设置为650px */ + width: 100%; + max-width: 700px; + margin: 0 auto; + perspective: 1000px; + transform-style: preserve-3d; + position: relative; + gap: 0; + overflow: visible; /* 修改为visible确保标签不会被容器遮挡 */ + } + + .cloud-wrapper.sphere .cloud-tag { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + white-space: nowrap; + box-sizing: border-box; + transform-style: preserve-3d; + transition: opacity 0.3s ease, transform 0.3s ease; + user-select: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + } } -/* 连接线动画 */ -.cloud-wrapper::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-image: - radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 1px, transparent 1px), - radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 1px, transparent 1px), - radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px), - radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px); - background-size: 100px 100px, 150px 150px, 120px 120px, 80px 80px; - animation: connectionLines 15s linear infinite; - pointer-events: none; - opacity: 0.3; +/* 移动端和平板横向滚动效果 */ +@media (max-width: 768px) { + .cloud-wrapper { + flex-direction: column; + flex-wrap: nowrap; + overflow: hidden; + justify-content: center; + align-items: center; + padding: 20px 0; + gap: 15px; + min-height: 150px; + } + + .cloud-wrapper.sphere { + height: auto; + perspective: none; + transform-style: flat; + } + + /* 三行滚动容器 */ + .tech-row { + display: flex; + width: 100%; + animation: scroll linear infinite; + animation-play-state: paused; + gap: 15px; + padding: 10px 0; + } + + .tech-row.scrolling { + animation-play-state: running; + } + + /* 第一行滚动速度 - 增快10倍 */ + .tech-row:nth-child(1) { + animation-duration: 3s; + } + + /* 第二行滚动速度 - 增快10倍 */ + .tech-row:nth-child(2) { + animation-duration: 3.5s; + } + + /* 第三行滚动速度 - 增快10倍 */ + .tech-row:nth-child(3) { + animation-duration: 4s; + } + + /* 滚动动画 */ + @keyframes scroll { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } + } + + .cloud-tag { + flex-shrink: 0; + margin: 0 5px; + } } -@keyframes connectionLines { - 0% { transform: translate(0, 0) rotate(0deg); } - 25% { transform: translate(-10px, -10px) rotate(90deg); } - 50% { transform: translate(10px, -5px) rotate(180deg); } - 75% { transform: translate(-5px, 10px) rotate(270deg); } - 100% { transform: translate(0, 0) rotate(360deg); } +.cloud-tag { + flex-shrink: 0; + margin: 0 5px; } + /* 标签云标签 */ .cloud-tag { - display: inline-block; - padding: 0.8rem 1.5rem; + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 1rem 1.5rem; margin: 0.5rem; - border-radius: 25px; - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.18); - color: #fff; + border-radius: 50px; /* 增大圆角值确保圆角效果明显 */ + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.2); + color: var(--text-strong); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - animation: cloudFloat 8s ease-in-out infinite; position: relative; overflow: hidden; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); -} - -/* 标签浮动动画 */ -@keyframes cloudFloat { - 0%, 100% { - transform: translateY(0px) rotate(0deg) scale(1); - } - 25% { - transform: translateY(-15px) rotate(2deg) scale(1.02); - } - 50% { - transform: translateY(-8px) rotate(0deg) scale(1); - } - 75% { - transform: translateY(-20px) rotate(-2deg) scale(0.98); - } + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + min-width: 85px; + min-height: 38px; + white-space: nowrap; + box-sizing: border-box; + will-change: transform, opacity; + line-height: 1.2; } /* 标签悬浮效果 */ @@ -932,7 +1180,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s; } @@ -941,108 +1189,164 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } .cloud-tag:hover { - transform: translateY(-8px) scale(1.1) rotate(5deg); - background: rgba(255, 255, 255, 0.2); - box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 0 25px var(--tag-color, #667eea); - border-color: var(--tag-color, #667eea); - color: var(--tag-color, #667eea); - z-index: 10; + transform: translateY(-5px) scale(1.05); + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); + z-index: 1000 !important; } -/* 根据权重设置不同大小和颜色 */ +/* 根据权重设置不同大小和最小宽度 */ .cloud-tag[data-weight="5"] { - font-size: 20px; - padding: 12px 24px; - font-weight: 700; - animation-duration: 6s; + font-size: 16px; + padding: 12px 22px; + min-width: 120px; + min-height: 55px; } .cloud-tag[data-weight="4"] { - font-size: 18px; - padding: 10px 20px; - font-weight: 600; - animation-duration: 7s; + font-size: 15px; + padding: 11px 20px; + min-width: 110px; + min-height: 50px; } .cloud-tag[data-weight="3"] { - font-size: 16px; - padding: 9px 18px; - font-weight: 500; - animation-duration: 8s; + font-size: 14px; + padding: 10px 18px; + min-width: 100px; + min-height: 45px; } .cloud-tag[data-weight="2"] { - font-size: 14px; - padding: 8px 16px; - font-weight: 400; - animation-duration: 9s; + font-size: 13px; + padding: 9px 16px; + min-width: 90px; + min-height: 40px; } .cloud-tag[data-weight="1"] { font-size: 12px; - padding: 6px 14px; - font-weight: 300; - opacity: 0.8; - animation-duration: 10s; + padding: 8px 15px; + opacity: 0.9; + min-width: 85px; + min-height: 38px; } /* 不同类别的技术标签颜色 */ .cloud-tag[data-category="core"] { --tag-color: #e74c3c; - border-color: rgba(231, 76, 60, 0.3); } + .cloud-tag[data-category="core"]:hover { - background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(231, 76, 60, 0.1)); + background: linear-gradient(135deg, rgba(231, 76, 60, 0.3), rgba(231, 76, 60, 0.2)); + border-color: rgba(231, 76, 60, 0.6); } .cloud-tag[data-category="backend"] { --tag-color: #27ae60; - border-color: rgba(39, 174, 96, 0.3); + border-color: rgba(39, 174, 96, 0.4); + background: linear-gradient(135deg, rgba(39, 174, 96, 0.2), rgba(39, 174, 96, 0.1)); + color: #fff; } .cloud-tag[data-category="backend"]:hover { - background: linear-gradient(135deg, rgba(39, 174, 96, 0.2), rgba(39, 174, 96, 0.1)); + background: linear-gradient(135deg, rgba(39, 174, 96, 0.3), rgba(39, 174, 96, 0.2)); + border-color: rgba(39, 174, 96, 0.6); } .cloud-tag[data-category="data"] { --tag-color: #3498db; - border-color: rgba(52, 152, 219, 0.3); + border-color: rgba(52, 152, 219, 0.4); + background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(52, 152, 219, 0.1)); + color: #fff; } .cloud-tag[data-category="data"]:hover { - background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(52, 152, 219, 0.1)); + background: linear-gradient(135deg, rgba(52, 152, 219, 0.3), rgba(52, 152, 219, 0.2)); + border-color: rgba(52, 152, 219, 0.6); } .cloud-tag[data-category="ops"] { --tag-color: #f39c12; - border-color: rgba(243, 156, 18, 0.3); + border-color: rgba(243, 156, 18, 0.4); + background: linear-gradient(135deg, rgba(243, 156, 18, 0.2), rgba(243, 156, 18, 0.1)); + color: #fff; } .cloud-tag[data-category="ops"]:hover { - background: linear-gradient(135deg, rgba(243, 156, 18, 0.2), rgba(243, 156, 18, 0.1)); + background: linear-gradient(135deg, rgba(243, 156, 18, 0.3), rgba(243, 156, 18, 0.2)); + border-color: rgba(243, 156, 18, 0.6); } .cloud-tag[data-category="ai"] { --tag-color: #9b59b6; - border-color: rgba(155, 89, 182, 0.3); + border-color: rgba(155, 89, 182, 0.4); + background: linear-gradient(135deg, rgba(155, 89, 182, 0.2), rgba(155, 89, 182, 0.1)); + color: #fff; } .cloud-tag[data-category="ai"]:hover { - background: linear-gradient(135deg, rgba(155, 89, 182, 0.2), rgba(155, 89, 182, 0.1)); + background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(155, 89, 182, 0.2)); + border-color: rgba(155, 89, 182, 0.6); } -/* 分类特定动画延迟 */ -.cloud-tag[data-category="core"]:nth-child(odd) { animation-delay: 0s; } -.cloud-tag[data-category="core"]:nth-child(even) { animation-delay: 1s; } -.cloud-tag[data-category="backend"]:nth-child(odd) { animation-delay: 2s; } -.cloud-tag[data-category="backend"]:nth-child(even) { animation-delay: 3s; } -.cloud-tag[data-category="ai"]:nth-child(odd) { animation-delay: 4s; } -.cloud-tag[data-category="ai"]:nth-child(even) { animation-delay: 5s; } -.cloud-tag[data-category="data"]:nth-child(odd) { animation-delay: 1.5s; } -.cloud-tag[data-category="data"]:nth-child(even) { animation-delay: 2.5s; } -.cloud-tag[data-category="ops"]:nth-child(odd) { animation-delay: 3.5s; } -.cloud-tag[data-category="ops"]:nth-child(even) { animation-delay: 4.5s; } +/* 白天模式下的标签样式 */ +.theme-day .cloud-tag { + color: var(--text-strong); + background: rgba(255, 255, 255, 0.4); + border-color: rgba(0, 0, 0, 0.15); +} + +.theme-day .cloud-tag:hover { + background: rgba(255, 255, 255, 0.6); + border-color: rgba(0, 0, 0, 0.25); +} + +.theme-day .cloud-tag[data-category="core"] { + background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(231, 76, 60, 0.08)); + color: #e74c3c; +} + +.theme-day .cloud-tag[data-category="core"]:hover { + background: linear-gradient(135deg, rgba(231, 76, 60, 0.25), rgba(231, 76, 60, 0.15)); +} + +.theme-day .cloud-tag[data-category="backend"] { + background: linear-gradient(135deg, rgba(39, 174, 96, 0.15), rgba(39, 174, 96, 0.08)); + color: #27ae60; +} + +.theme-day .cloud-tag[data-category="backend"]:hover { + background: linear-gradient(135deg, rgba(39, 174, 96, 0.25), rgba(39, 174, 96, 0.15)); +} + +.theme-day .cloud-tag[data-category="data"] { + background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(52, 152, 219, 0.08)); + color: #3498db; +} + +.theme-day .cloud-tag[data-category="data"]:hover { + background: linear-gradient(135deg, rgba(52, 152, 219, 0.25), rgba(52, 152, 219, 0.15)); +} + +.theme-day .cloud-tag[data-category="ops"] { + background: linear-gradient(135deg, rgba(243, 156, 18, 0.15), rgba(243, 156, 18, 0.08)); + color: #f39c12; +} + +.theme-day .cloud-tag[data-category="ops"]:hover { + background: linear-gradient(135deg, rgba(243, 156, 18, 0.25), rgba(243, 156, 18, 0.15)); +} + +.theme-day .cloud-tag[data-category="ai"] { + background: linear-gradient(135deg, rgba(155, 89, 182, 0.15), rgba(155, 89, 182, 0.08)); + color: #9b59b6; +} + +.theme-day .cloud-tag[data-category="ai"]:hover { + background: linear-gradient(135deg, rgba(155, 89, 182, 0.25), rgba(155, 89, 182, 0.15)); +} /* 个性时间线 */ .personality-timeline-section { @@ -1082,6 +1386,31 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info position: relative; } +/* 在移动端保持单列布局 */ +@media (max-width: 768px) { + .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; + } +} + .timeline-item:nth-child(even) { flex-direction: row-reverse; } @@ -1099,6 +1428,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4); border: 3px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; + flex-shrink: 0; /* 防止图标被压缩 */ } .timeline-icon:hover { @@ -1119,6 +1449,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); opacity: 0; transform: translateY(30px); + min-width: 0; /* 允许内容区域收缩 */ } .timeline-item.is-entered .timeline-content { @@ -1134,17 +1465,14 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } .timeline-content h3 { - background: linear-gradient(45deg, #fff, #e0e0e0); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--text-strong); /* 使用主题文字颜色 */ font-size: 1.5rem; margin-bottom: 1rem; font-weight: 700; } .timeline-content p { - color: rgba(255, 255, 255, 0.9); + color: var(--text-soft); /* 使用主题文字颜色 */ line-height: 1.6; font-weight: 500; } @@ -1206,17 +1534,14 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } .project-title { - background: linear-gradient(45deg, #fff, #e0e0e0); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--text-strong); /* 使用主题文字颜色 */ font-size: 1.4rem; margin-bottom: 1rem; font-weight: 700; } .project-description { - color: rgba(255, 255, 255, 0.9); + color: var(--text-soft); /* 使用主题文字颜色 */ margin-bottom: 1.5rem; line-height: 1.6; font-weight: 500; @@ -1232,7 +1557,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info display: flex; align-items: center; gap: 0.3rem; - color: rgba(255, 255, 255, 0.8); + color: var(--text-soft); /* 使用主题文字颜色 */ font-size: 0.9rem; font-weight: 600; } @@ -1320,10 +1645,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } .article-title { - background: linear-gradient(45deg, #fff, #e0e0e0); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--text-strong); /* 使用主题文字颜色 */ font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; @@ -1331,7 +1653,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } .article-excerpt { - color: rgba(255, 255, 255, 0.9); + color: var(--text-soft); /* 使用主题文字颜色 */ font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; @@ -1343,7 +1665,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info justify-content: space-between; align-items: center; font-size: 0.85rem; - color: rgba(255, 255, 255, 0.8); + color: var(--text-soft); /* 使用主题文字文字颜色 */ font-weight: 600; } @@ -1379,10 +1701,9 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info left: 0; right: 0; bottom: 0; - background: - radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.1) 0%, transparent 50%), - radial-gradient(circle at 40% 80%, rgba(155, 89, 182, 0.1) 0%, transparent 50%); + background: radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.1) 0%, transparent 50%), + radial-gradient(circle at 40% 80%, rgba(155, 89, 182, 0.1) 0%, transparent 50%); pointer-events: none; z-index: 1; border-radius: 50px; @@ -1397,10 +1718,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info .contact-title h2 { font-size: 2.8rem; - background: linear-gradient(45deg, #fff, #e0e0e0); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--text-strong); /* 使用主题文字颜色 */ margin-bottom: 1rem; font-weight: 800; position: relative; @@ -1408,7 +1726,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } .contact-title p { - color: rgba(255, 255, 255, 0.9); + color: var(--text-soft); /* 使用主题文字颜色 */ font-size: 1.2rem; margin-bottom: 4rem; font-weight: 500; @@ -1417,14 +1735,17 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info z-index: 10; } + .social-grid { position: relative; width: 500px; height: 500px; margin: 0 auto; border-radius: 50%; + overflow: visible; /* 修改为visible确保图标不会被遮挡 */ } +/* 社交卡片 */ .social-card { background: rgba(255, 255, 255, var(--glass-alpha)); backdrop-filter: blur(var(--glass-blur)); @@ -1433,7 +1754,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info border-radius: 25px; padding: 1rem; text-decoration: none; - color: #fff; + color: var(--text-strong); /* 使用主题文字颜色 */ transition: all 0.3s ease; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); display: flex; @@ -1443,7 +1764,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info position: absolute; top: 50%; left: 50%; - overflow: hidden; + overflow: visible; /* 修改为visible确保图标不会被遮挡 */ width: 110px; height: 110px; justify-content: center; @@ -1453,8 +1774,12 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } @keyframes orbit { - 0% { transform: translate(-50%, -50%) rotate(var(--phase)) translateX(var(--radius)) rotate(calc(-1 * var(--phase))); } - 100% { transform: translate(-50%, -50%) rotate(calc(var(--phase) + 360deg)) translateX(var(--radius)) rotate(calc(-1 * var(--phase) - 360deg)); } + 0% { + transform: translate(-50%, -50%) rotate(var(--phase)) translateX(var(--radius)) rotate(calc(-1 * var(--phase))); + } + 100% { + transform: translate(-50%, -50%) rotate(calc(var(--phase) + 360deg)) translateX(var(--radius)) rotate(calc(-1 * var(--phase) - 360deg)); + } } .social-card::before { @@ -1500,13 +1825,13 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info margin: 0; font-size: 0.9rem; font-weight: 600; - color: #fff; + color: var(--text-strong); /* 使用主题文字颜色 */ } .social-info p { margin: 0; font-size: 0.7rem; - color: rgba(255, 255, 255, 0.8); + color: var(--text-soft); /* 使用主题文字颜色 */ } /* 轨道围绕动画 - 每个卡片不同的轨道路径，优化避免碰撞 */ @@ -1731,13 +2056,21 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } @keyframes pulse { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.05); } + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } } /* 响应式设计 */ @@ -1745,13 +2078,13 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info .tech-categories { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } - + .hero-container { grid-template-columns: 1fr; text-align: center; gap: 2rem; } - + .social-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } @@ -1761,40 +2094,40 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info .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-categories { grid-template-columns: 1fr; } - + .personality-timeline::before { left: 30px; } - + .timeline-item { flex-direction: row !important; padding-left: 80px; } - + .timeline-icon { position: absolute; left: 0; @@ -1802,21 +2135,21 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info height: 60px; font-size: 1.5rem; } - + .timeline-content { margin: 0; margin-left: 1rem; } - + .social-grid { grid-template-columns: 1fr; } - + .projects-masonry, .articles-waterfall { grid-template-columns: 1fr; } - + .social-grid { width: auto; height: auto; @@ -1824,7 +2157,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } - + .social-card { position: static; width: 100%; @@ -1833,160 +2166,224 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info transform: none !important; animation: none !important; } - + .social-icon { width: 30px; height: 30px; font-size: 1rem; } - + .social-info h3 { font-size: 0.7rem; } - + .social-info p { font-size: 0.5rem; } - + .social-card:nth-child(1) { animation: none; } - + .social-card:nth-child(2) { animation: none; } - + .social-card:nth-child(3) { animation: none; } - + .social-card:nth-child(4) { animation: none; } - + .social-card:nth-child(5) { animation: none; } - + .social-card:nth-child(6) { animation: none; } - - @keyframes orbit1 { } - - @keyframes orbit2 { } - - @keyframes orbit3 { } - - @keyframes orbit4 { } - - @keyframes orbit5 { } - - @keyframes orbit6 { } + + @keyframes orbit1 { + } + + @keyframes orbit2 { + } + + @keyframes orbit3 { + } + + @keyframes orbit4 { + } + + @keyframes orbit5 { + } + + @keyframes orbit6 { + } + + /* 移动端英雄区域重构 */ + .hero-container { + grid-template-columns: 1fr; + text-align: center; + gap: 2rem; + } + + .hero-left { + display: flex; + justify-content: center; + } + + .hero-right { + padding-left: 0; + } + + .profile-card { + width: 100%; + max-width: 300px; + margin: 0 auto; + } + + .mbti-card { + text-align: center; + } + + .mbti-header { + justify-content: center; + flex-direction: column; + } + + .mbti-traits { + justify-content: center; + } + + .infj-decoration { + position: relative; + top: auto; + right: auto; + margin: 1rem auto; + width: 80px; + height: 80px; + } + + .infj-image { + width: 80px; + height: 80px; + } + + .quote-section { + padding-left: 0; + } + + .quote-line { + display: none; + } } @media (max-width: 480px) { .hero-title { font-size: 1.8rem; } - + .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; } - + .social-grid { grid-template-columns: 1fr; gap: 1rem; } - + .footer-content { grid-template-columns: 1fr !important; text-align: center; gap: 2rem; } - + .footer-section { text-align: center; } - + .nav-links { padding: 0.5rem 1rem; } - + .nav-links a { padding: 0.3rem 0.6rem; font-size: 0.9rem; } - + .hero-section { padding: 2rem 1rem; } - + .profile-card { padding: 1rem; + max-width: 100%; } - + .avatar-image { width: 80px; height: 80px; } - + .hero-title { font-size: 2rem; } - + .hero-subtitle { font-size: 1rem; } - + .mbti-card { padding: 1rem; } - + .mbti-tag { padding: 0.4rem 0.8rem; font-size: 0.9rem; } - + .section-title { font-size: 1.8rem; } - + .section-subtitle { font-size: 1rem; } - + .tech-cloud-section, .personality-timeline-section, .github-showcase-section, @@ -1997,31 +2394,48 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info margin: 0.8rem; border-radius: 20px; } - + .cloud-tag { padding: 0.5rem 1rem; margin: 0.3rem; font-size: 0.8rem; } - + .timeline-content { padding: 1rem; } - + .project-card, .article-card { padding: 1rem; } - + .modal-content { padding: 1rem; margin: 20% auto; } - + .qr-code img { width: 150px; height: 150px; } + + /* 小屏幕下的INFJ模块优化 */ + .infj-decoration { + width: 60px; + height: 60px; + margin: 0.5rem auto; + } + + .infj-image { + width: 60px; + height: 60px; + } + + .mbti-header img { + width: 24px; + height: 24px; + } } /* 页脚样式 - 首页风格 */ @@ -2047,7 +2461,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } .footer-info { - color: rgba(255, 255, 255, 0.7); + color: var(--text-soft); /* 使用主题文字颜色 */ font-size: 0.9rem; } @@ -2057,20 +2471,20 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } .footer-info a { - color: rgba(255, 255, 255, 0.8); + color: var(--text-soft); /* 使用主题文字颜色 */ text-decoration: none; transition: color 0.3s ease; } .footer-info a:hover { - color: #fff; + color: var(--text-strong); /* 使用主题文字颜色 */ } @media (max-width: 768px) { .footer { padding: 20px 0; } - + .footer-info { font-size: 0.8rem; } @@ -2082,7 +2496,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info } .philosophy-text { - color: rgba(255, 255, 255, 0.9); + color: var(--text-soft); /* 使用主题文字颜色 */ font-style: italic; font-size: 1.1rem; max-width: 800px; @@ -2129,9 +2543,12 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info animation: none !important; } } + .theme-day .profile-info h1, .theme-day .github-info h3, -.theme-day .social-info h3 { color: var(--text-strong); } +.theme-day .social-info h3 { + color: var(--text-strong); +} .theme-day .intro-quote p, .theme-day .intro-text p, @@ -2140,7 +2557,9 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info .theme-day .article-excerpt, .theme-day .article-meta, .theme-day .social-info p, -.theme-day .github-bio { color: var(--text-soft); } +.theme-day .github-bio { + color: var(--text-soft); +} .theme-day .stat-number { background: linear-gradient(45deg, #121417, #2a2d34); @@ -2148,16 +2567,27 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info -webkit-text-fill-color: transparent; background-clip: text; } -.theme-day .hero-description p { color: var(--text-soft); } + +.theme-day .hero-description p { + color: var(--text-soft); +} + .theme-day .project-stat, -.theme-day .project-stats span { color: var(--text-soft); } -.theme-day .article-meta { color: var(--text-soft); } +.theme-day .project-stats span { + color: var(--text-soft); +} + +.theme-day .article-meta { + color: var(--text-soft); +} + .theme-day .view-all-link { background: linear-gradient(45deg, #121417, #2a2d34); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } + .theme-day .timeline-content h3 { background: linear-gradient(45deg, #121417, #2a2d34); -webkit-background-clip: text; diff --git a/js/about.js b/js/about.js index 2b2ad84..773398d 100644 --- a/js/about.js +++ b/js/about.js @@ -9,7 +9,7 @@ $(document).ready(function() { initWeChatModal(); initArtalkComments(); initPageAnimations(); - initTechCloud(); + initTechCloud(); // 初始化技术云图 initScrollEffects(); initRandomPositions(); }); @@ -60,6 +60,18 @@ function initMotionController() { root.style.setProperty('--glass-blur', '0px'); root.style.setProperty('--glass-alpha', '0.18'); } + + // 监听屏幕尺寸变化，重新初始化技术云 + window.addEventListener('resize', function() { + clearTimeout(window.resizeTimer); + window.resizeTimer = setTimeout(function() { + var newIsMobile = window.matchMedia('(pointer: coarse)').matches || window.innerWidth <= 768; + if (newIsMobile !== isMobile) { + isMobile = newIsMobile; + initTechCloud(); + } + }, 250); + }); } // GitHub 统计信息 @@ -208,7 +220,7 @@ function initProjects() { return !repo.fork; // 过滤掉fork的项目 }).sort(function(a, b) { return b.stargazers_count - a.stargazers_count; // 按星数降序排序 - }).slice(0, 6); // 只取前6个 + }).slice(0, 12); // 只取前12个 // 缓存数据 localStorage.setItem(cacheKey, JSON.stringify(filteredRepos)); @@ -381,111 +393,345 @@ function renderCommentsFallback(msg) { // 技术云图初始化 function initTechCloud() { - var techItems = [ - // 内层轨道 - 核心技能 - { name: 'JavaScript', level: 'primary', orbit: 1 }, - { name: 'Java', 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: 'Spring Boot', level: 'secondary', orbit: 2 }, - { name: 'Spring Cloud', level: 'secondary', orbit: 2 }, - { name: 'Spring AI', level: 'secondary', orbit: 2 }, - { name: 'Spring Security', level: 'secondary', orbit: 2 }, - { name: 'WebFlux', 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 }, - { name: 'Elasticsearch', level: 'tertiary', orbit: 3 }, - { name: 'Kibana', level: 'tertiary', orbit: 3 }, - { name: 'Prometheus', level: 'tertiary', orbit: 3 }, - { name: 'Grafana', level: 'tertiary', orbit: 3 }, - { name: 'Jenkins', level: 'tertiary', orbit: 3 } - + // 技术栈数据 + var techStack = [ + { name: 'Java', category: 'core', weight: 5 }, + { name: 'Spring Boot', category: 'backend', weight: 5 }, + { name: 'JavaScript', category: 'core', weight: 5 }, + { name: 'Python', category: 'core', weight: 4 }, + { name: 'WebFlux', category: 'backend', weight: 5 }, + { name: 'Reactor', category: 'backend', weight: 5 }, + { name: 'TypeScript', category: 'core', weight: 4 }, + { name: 'Spring Cloud', category: 'backend', weight: 4 }, + { name: 'Go', category: 'core', weight: 3 }, + { name: 'MySQL', category: 'data', weight: 4 }, + { name: 'Redis', category: 'data', weight: 4 }, + { name: 'MongoDB', category: 'data', weight: 3 }, + { name: 'Docker', category: 'ops', weight: 4 }, + { name: 'Kubernetes', category: 'ops', weight: 3 }, + { name: 'OpenAI API', category: 'ai', weight: 3 }, + { name: 'LangChain', category: 'ai', weight: 3 }, + { name: 'TensorFlow', category: 'ai', weight: 2 }, + { name: 'PyTorch', category: 'ai', weight: 2 }, + { name: 'Elasticsearch', category: 'data', weight: 3 }, + { name: 'RabbitMQ', category: 'data', weight: 2 }, + { name: 'Kafka', category: 'data', weight: 2 }, + { name: 'Jenkins', category: 'ops', weight: 3 }, + { name: 'Git', category: 'ops', weight: 4 }, + { name: 'Linux', category: 'ops', weight: 3 }, + { name: 'AWS', category: 'ops', weight: 2 }, + { name: 'Nginx', category: 'ops', weight: 2 }, + { name: 'Spring Security', category: 'backend', weight: 3 }, + { name: 'MyBatis', category: 'backend', weight: 3 }, + { name: 'JPA', category: 'backend', weight: 2 }, + { name: 'Dubbo', category: 'backend', weight: 2 }, + { name: 'Netty', category: 'backend', weight: 2 }, + { name: 'Transformers', category: 'ai', weight: 2 }, + { name: 'Scikit-learn', category: 'ai', weight: 2 }, + { name: 'Ollama', category: 'ai', weight: 1 }, + { name: 'Dify', category: 'ai', weight: 1 }, + { name: 'Spring AI', category: 'ai', weight: 1 }, + { name: 'ClickHouse', category: 'data', weight: 1 }, + { name: 'Postgresql', category: 'data', weight: 1 } ]; var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; var isMobile = window.matchMedia('(pointer: coarse)').matches || window.innerWidth <= 768; - if (!reduced && !isMobile) { - initTechSphere(techItems); + + // 对于移动端或减少动画的情况，使用横向滚动 + if (isMobile || reduced) { + initHorizontalTechCloud(techStack); return; } - var container = $('.cloud-wrapper'); - techItems.forEach(function(tech) { - var el = $('' + tech.name + ''); - container.append(el); - }); + + // PC端使用球状旋转效果 + initTechSphere(techStack); } -function categoryOf(level) { - if (level === 'primary') return 'core'; - if (level === 'secondary') return 'backend'; - return 'ops'; -} - -function weightOf(level) { - if (level === 'primary') return 5; - if (level === 'secondary') return 3; - return 2; -} - -function initTechSphere(items) { - var container = document.querySelector('.cloud-wrapper'); +// 移动端和平板的横向滚动技术云 +function initHorizontalTechCloud(items) { + var container = document.getElementById('tech-cloud-wrapper'); if (!container) return; - container.classList.add('sphere'); - var N = items.length; - var tags = []; - for (var i = 0; i < N; i++) { - var item = items[i]; + + // 清空容器 + container.innerHTML = ''; + container.classList.remove('sphere'); + + // 按权重排序，确保重要的标签优先显示 + var sortedItems = items.slice().sort(function(a, b) { + return b.weight - a.weight; + }); + + // 创建三行容器 + var row1 = document.createElement('div'); + var row2 = document.createElement('div'); + var row3 = document.createElement('div'); + + row1.className = 'tech-row'; + row2.className = 'tech-row'; + row3.className = 'tech-row'; + + // 将标签分配到三行中 + sortedItems.forEach(function(item, index) { var el = document.createElement('span'); el.className = 'cloud-tag'; el.textContent = item.name; - el.setAttribute('data-category', categoryOf(item.level)); - el.setAttribute('data-weight', weightOf(item.level)); - el.style.left = '50%'; - el.style.top = '50%'; + el.setAttribute('data-category', item.category); + el.setAttribute('data-weight', item.weight); + + // 根据索引分配到不同行 + if (index % 3 === 0) { + row1.appendChild(el); + } else if (index % 3 === 1) { + row2.appendChild(el); + } else { + row3.appendChild(el); + } + + // 为每个标签复制一个副本，实现无缝滚动效果 + var elClone = el.cloneNode(true); + if (index % 3 === 0) { + row1.appendChild(elClone); + } else if (index % 3 === 1) { + row2.appendChild(elClone); + } else { + row3.appendChild(elClone); + } + }); + + container.appendChild(row1); + container.appendChild(row2); + container.appendChild(row3); + + // 设置不同的初始延迟时间 + setTimeout(function() { + row1.classList.add('scrolling'); + }, 0); + + setTimeout(function() { + row2.classList.add('scrolling'); + }, 500); + + setTimeout(function() { + row3.classList.add('scrolling'); + }, 1000); +} + +// PC端3D球状技术云 +function initTechSphere(items) { + var container = document.getElementById('tech-cloud-wrapper'); + if (!container) return; + + // 清空容器并添加球体类 + container.innerHTML = ''; + container.classList.add('sphere'); + + // 创建标签元素 + var tags = []; + items.forEach(function(item, index) { + var el = document.createElement('div'); + el.className = 'cloud-tag'; + el.textContent = item.name; + el.setAttribute('data-category', item.category); + el.setAttribute('data-weight', item.weight); + el.setAttribute('data-index', index); container.appendChild(el); tags.push(el); - } - var radius = 220; - var phiStep = Math.PI * (3 - Math.sqrt(5)); // golden angle - tags.forEach(function(el, idx) { - var y = 1 - (idx / (N - 1)) * 2; - var r = Math.sqrt(1 - y * y); - var theta = idx * phiStep; - var x = Math.cos(theta) * r; - var z = Math.sin(theta) * r; - var tx = x * radius; - var ty = y * radius; - var tz = z * radius; - el.style.position = 'absolute'; - el.style.transform = 'translate3d(' + tx + 'px,' + ty + 'px,' + tz + 'px) translate(-50%, -50%)'; - el.style.willChange = 'transform'; - var depth = (z + 1) / 2; // 0..1 - var scale = 0.85 + depth * 0.3; - var opacity = 0.7 + depth * 0.3; - el.style.opacity = String(opacity); - el.style.transform += ' scale(' + scale + ')'; - el.style.zIndex = String(Math.floor(100 + depth * 100)); }); - var rotY = 0; - var rotX = 8; - function animate() { - rotY += 0.3; - container.style.transform = 'perspective(800px) rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)'; - requestAnimationFrame(animate); + + // 球体参数 + var radius = 250; // 减小球体半径以适应容器并避免标签被遮挡 + var dtr = Math.PI / 180; + var d = 300; + var mcList = []; + var active = false; + var lasta = 0; // 初始值设为0 + var lastb = 0; // 初始值设为0 + var distr = true; + var tspeed = 0.05; // 降低旋转速度，使动画更平滑 + var size = 250; + var mouseX = 0; + var mouseY = 0; + var mouseDown = false; + + // 初始化标签位置 + tags.forEach(function(tag, i) { + var phi = Math.acos(-1 + (2 * i) / tags.length); + var theta = Math.sqrt(tags.length * Math.PI) * phi; + + var x = radius * Math.cos(theta) * Math.sin(phi); + var y = radius * Math.sin(theta) * Math.sin(phi); + var z = radius * Math.cos(phi); + + tag.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)'; + tag.style.opacity = '0.9'; + + // 根据权重设置标签大小和最小宽度 + var weight = parseInt(tag.getAttribute('data-weight')); + var scale = 0.6 + (weight * 0.12); + // 按照规范设置标签尺寸 + var minWidth, minHeight, fontSize, padding; + + switch(weight) { + case 5: + minWidth = 120; + minHeight = 55; + fontSize = 16; + padding = '12px 22px'; + break; + case 4: + minWidth = 110; + minHeight = 50; + fontSize = 15; + padding = '11px 20px'; + break; + case 3: + minWidth = 100; + minHeight = 45; + fontSize = 14; + padding = '10px 18px'; + break; + case 2: + minWidth = 90; + minHeight = 40; + fontSize = 13; + padding = '9px 16px'; + break; + case 1: + default: + minWidth = 85; + minHeight = 38; + fontSize = 12; + padding = '8px 15px'; + } + + tag.style.transform += ' scale(' + scale + ')'; + tag.style.minWidth = minWidth + 'px'; + tag.style.minHeight = minHeight + 'px'; + tag.style.fontSize = fontSize + 'px'; + tag.style.padding = padding; + + // 设置z-index确保正确的层级显示 + tag.style.zIndex = Math.floor(z + radius); + + // 存储位置信息 + mcList.push({ + obj: tag, + x: x, + y: y, + z: z + }); + }); + + // 鼠标交互 + container.addEventListener('mousedown', function(e) { + mouseDown = true; + mouseX = e.clientX; + mouseY = e.clientY; + e.preventDefault(); + }); + + container.addEventListener('mousemove', function(e) { + if (mouseDown) { + lasta = (e.clientX - mouseX) * 0.0005; // 降低鼠标影响系数 + lastb = (e.clientY - mouseY) * 0.0005; + mouseX = e.clientX; + mouseY = e.clientY; + e.preventDefault(); + } + }); + + container.addEventListener('mouseup', function(e) { + mouseDown = false; + e.preventDefault(); + }); + + container.addEventListener('mouseleave', function() { + mouseDown = false; + }); + + // 触摸交互 + container.addEventListener('touchstart', function(e) { + if (e.touches.length > 0) { + mouseDown = true; + mouseX = e.touches[0].clientX; + mouseY = e.touches[0].clientY; + e.preventDefault(); + } + }); + + container.addEventListener('touchmove', function(e) { + if (mouseDown && e.touches.length > 0) { + lasta = (e.touches[0].clientX - mouseX) * 0.0005; // 降低触摸影响系数 + lastb = (e.touches[0].clientY - mouseY) * 0.0005; + mouseX = e.touches[0].clientX; + mouseY = e.touches[0].clientY; + e.preventDefault(); + } + }); + + container.addEventListener('touchend', function(e) { + mouseDown = false; + e.preventDefault(); + }); + + // 自动旋转动画 + function update() { + // 添加轻微的自动旋转，即使没有用户交互 + if (!mouseDown) { + lasta = lasta * 0.98 + 0.0001; // 更轻微的自动旋转，逐渐减速 + lastb = lastb * 0.98; + } + + // 限制旋转速度，防止过快 + lasta = Math.max(Math.min(lasta, 0.01), -0.01); // 限制在更小的范围内 + lastb = Math.max(Math.min(lastb, 0.01), -0.01); + + var a = lasta; + var b = lastb; + + var c = 0; + var sa = Math.sin(a); + var ca = Math.cos(a); + var sb = Math.sin(b); + var cb = Math.cos(b); + var sc = Math.sin(c); + var cc = Math.cos(c); + + // 更新标签位置 + mcList.forEach(function(mc) { + var rx = mc.x; + var ry = mc.y * ca + mc.z * sa; + var rz = mc.y * -sa + mc.z * ca; + + var nx = rx * cb + rz * sb; + var ny = ry; + var nz = rx * -sb + rz * cb; + + mc.x = nx; + mc.y = ny; + mc.z = nz; + + // 应用变换 + mc.obj.style.transform = 'translate3d(' + nx + 'px, ' + ny + 'px, ' + nz + 'px)'; + + // 根据z轴位置设置缩放和透明度 + var scale = (nz + radius) / (2 * radius) * 0.6 + 0.7; + var weight = parseInt(mc.obj.getAttribute('data-weight')); + scale = scale * (0.6 + (weight * 0.12)); + + mc.obj.style.transform += ' scale(' + scale + ')'; + mc.obj.style.opacity = 0.7 + (nz + radius) / (2 * radius) * 0.3; + + // 设置z-index确保正确的层级显示 + mc.obj.style.zIndex = Math.floor(nz + radius); + }); + + requestAnimationFrame(update); } - container.style.transformStyle = 'preserve-3d'; - requestAnimationFrame(animate); + + // 启动动画 + requestAnimationFrame(update); } // 滚动效果 @@ -772,6 +1018,7 @@ function hideWechatQR() { modal.style.display = "none"; } } + function initThemeByTime() { var hour = new Date().getHours(); var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; @@ -779,4 +1026,22 @@ function initThemeByTime() { var root = document.documentElement; root.classList.toggle('theme-night', night); root.classList.toggle('theme-day', !night); -} \ No newline at end of file + + // 确保在主题切换时技术标签颜色正确更新 + updateTechTagColors(); +} + +// 更新技术标签颜色以适配当前主题 +function updateTechTagColors() { + var root = document.documentElement; + var isDayTheme = root.classList.contains('theme-day'); + + var tags = document.querySelectorAll('.cloud-tag'); + tags.forEach(function(tag) { + if (isDayTheme) { + tag.style.color = 'var(--text-strong)'; + } else { + tag.style.color = '#fff'; + } + }); +}