-
-
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';
+ }
+ });
+}