@@ -291,7 +298,7 @@
×
diff --git a/css/about.css b/css/about.css
index b3baeb6..b019ead 100644
--- a/css/about.css
+++ b/css/about.css
@@ -5,13 +5,34 @@
box-sizing: border-box;
}
+:root {
+ --ink: #0D0F12;
+ --slate: #121417;
+ --pearl: #F2F3F5;
+ --glass-blur: 20px;
+ --glass-alpha: 0.12;
+ --glass-alpha-strong: 0.16;
+ --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;
+ --accent-a: #3AA0FF;
+ --accent-b: #4ECDC4;
+ --accent-coral: #FF6B6B;
+ --accent-lavender: #7B7AE6;
+}
+
body {
- font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-family: 'Inter', 'SF Pro Text', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
- color: #2c3e50;
- background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
+ 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%);
min-height: 100vh;
overflow-x: hidden;
+ background-attachment: fixed;
}
/* 动态背景 */
@@ -23,10 +44,10 @@ body::before {
width: 100%;
height: 100%;
background:
- radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
- radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.08) 0%, transparent 50%),
- radial-gradient(circle at 40% 40%, rgba(52, 152, 219, 0.06) 0%, transparent 50%),
- radial-gradient(circle at 60% 60%, rgba(155, 89, 182, 0.06) 0%, transparent 50%);
+ 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;
}
@@ -73,18 +94,21 @@ a:hover {
.intro-quote {
margin: 1.5rem 0;
padding: 1.5rem;
- background: rgba(255, 255, 255, 0.9);
+ background: rgba(255, 255, 255, var(--glass-alpha));
border-radius: 15px;
border-left: 4px solid #667eea;
- box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(10px);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
position: relative;
transition: all 0.3s ease;
+ border: 1px solid var(--glass-border);
}
.intro-quote:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
+ background: rgba(255, 255, 255, 0.15);
}
.intro-quote::before {
@@ -101,7 +125,7 @@ a:hover {
.intro-quote p {
margin: 0;
font-style: italic;
- color: #2c3e50;
+ color: #fff;
line-height: 1.7;
font-size: 1.1rem;
}
@@ -188,18 +212,19 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
top: 0;
left: 0;
right: 0;
- background: rgba(255, 255, 255, 0.98);
- backdrop-filter: blur(20px);
+ background: rgba(255, 255, 255, var(--glass-alpha));
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
z-index: 1000;
padding: 1rem 0;
transition: all 0.3s ease;
- border-bottom: 1px solid rgba(102, 126, 234, 0.1);
- box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
+ border-bottom: 1px solid var(--glass-border);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.navbar.scrolled {
- background: rgba(255, 255, 255, 0.98);
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+ background: rgba(255, 255, 255, 0.2);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.nav-container {
@@ -214,9 +239,9 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.nav-logo {
font-size: 1.8rem;
font-weight: 800;
- color: #2c3e50;
+ color: #fff;
text-decoration: none;
- background: linear-gradient(45deg, #667eea, #764ba2, #9b59b6);
+ background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -231,16 +256,17 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
display: flex;
list-style: none;
gap: 2.5rem;
- background: rgba(255, 255, 255, 0.1);
+ background: rgba(255, 255, 255, var(--glass-alpha));
padding: 0.8rem 1.5rem;
border-radius: 50px;
- backdrop-filter: blur(10px);
- border: 1px solid rgba(255, 255, 255, 0.2);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
}
.nav-links a {
text-decoration: none;
- color: #2c3e50;
+ color: #fff;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
@@ -263,7 +289,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.nav-links a:hover,
.nav-links a.active {
- color: #ff6b6b;
+ color: var(--accent-coral);
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
@@ -289,7 +315,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
/* 英雄区域 */
.hero-section {
padding: 4rem 2rem;
- background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 25%, #dee2e6 50%, #ced4da 75%, #adb5bd 100%);
+ background: rgba(255, 255, 255, 0.06);
background-size: 400% 400%;
animation: heroGradientShift 15s ease infinite;
min-height: 80vh;
@@ -299,6 +325,10 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
overflow: hidden;
border-radius: 0 0 50px 50px;
margin-bottom: 2rem;
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.hero-section::before {
@@ -308,9 +338,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% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
- radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
- radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
+ 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%);
pointer-events: none;
}
@@ -338,6 +368,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
transition: all 0.3s ease;
animation: gentleFloat 4s ease-in-out infinite;
filter: brightness(1.1) contrast(1.1);
+ backdrop-filter: blur(5px);
}
.infj-image:hover {
@@ -372,15 +403,16 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.profile-card {
- background: rgba(255, 255, 255, 0.95);
+ background: rgba(255, 255, 255, var(--glass-alpha));
border-radius: 20px;
padding: 2rem;
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
text-align: center;
position: relative;
overflow: hidden;
- border: 2px solid rgba(102, 126, 234, 0.2);
- backdrop-filter: blur(10px);
+ border: 1px solid var(--glass-border);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
}
.profile-card::before {
@@ -443,12 +475,12 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
margin: 0 0 0.5rem 0;
font-size: 2rem;
font-weight: 700;
- color: #333;
+ color: #fff;
}
.profile-info p {
margin: 0 0 1rem 0;
- color: #666;
+ color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
}
@@ -457,7 +489,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: #888;
+ color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
@@ -468,9 +500,9 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.intro-content h2 {
font-size: 2.5rem;
font-weight: 800;
- color: #333;
+ color: #fff;
margin-bottom: 1.5rem;
- background: linear-gradient(45deg, #667eea, #764ba2);
+ background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -479,7 +511,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.intro-text p {
font-size: 1.1rem;
line-height: 1.8;
- color: #555;
+ color: rgba(255, 255, 255, 0.9);
margin-bottom: 1.5rem;
}
@@ -488,11 +520,15 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.mbti-card {
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
border-radius: 15px;
padding: 1.5rem;
color: #fff;
margin-bottom: 2rem;
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.mbti-header {
@@ -539,17 +575,17 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
font-size: 4rem;
font-weight: 800;
margin-bottom: 1rem;
- background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24);
+ background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titleGlow 3s ease-in-out infinite;
- text-shadow: 0 0 30px rgba(255, 107, 107, 0.3);
+ text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}
.hero-subtitle {
font-size: 1.4rem;
- color: #333;
+ color: rgba(255, 255, 255, 0.9);
margin-bottom: 1.5rem;
font-weight: 500;
opacity: 0.9;
@@ -561,13 +597,13 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.hero-description p {
font-size: 1.2rem;
- color: #555;
+ color: rgba(255, 255, 255, 0.8);
font-weight: 400;
margin: 0;
padding: 1rem 2rem;
- background: rgba(255, 255, 255, 0.2);
+ background: rgba(255, 255, 255, 0.1);
border-radius: 25px;
- border: 1px solid rgba(255, 255, 255, 0.3);
+ border: 1px solid rgba(255, 255, 255, 0.18);
display: inline-block;
}
@@ -598,7 +634,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
font-weight: 800;
color: #2c3e50;
margin-bottom: 1rem;
- background: linear-gradient(45deg, #667eea, #764ba2, #9b59b6);
+ background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -606,13 +642,13 @@ 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(102, 126, 234, 0.5)); }
- to { filter: drop-shadow(0 0 30px rgba(118, 75, 162, 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 {
font-size: 1.5rem;
- color: #2c3e50;
+ color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
font-weight: 300;
opacity: 0.8;
@@ -627,7 +663,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.mbti-tag {
- background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+ background: linear-gradient(45deg, rgba(255, 107, 107, 0.3), rgba(78, 205, 196, 0.3));
color: #fff;
padding: 0.8rem 1.5rem;
border-radius: 30px;
@@ -635,11 +671,11 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
font-weight: 700;
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
animation: pulse 2s infinite;
- border: 2px solid rgba(255, 255, 255, 0.3);
+ border: 1px solid rgba(255, 255, 255, 0.18);
}
.badge-desc {
- color: #2c3e50;
+ color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
font-style: italic;
font-weight: 500;
@@ -659,7 +695,7 @@ 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, #ff6b6b, #4ecdc4);
+ background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -668,7 +704,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.hero-stats .stat-label {
- color: #2c3e50;
+ color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
@@ -685,7 +721,7 @@ 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, #667eea, #764ba2, #9b59b6);
+ background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -702,14 +738,14 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
transform: translateX(-50%);
width: 80px;
height: 4px;
- background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+ background: linear-gradient(45deg, var(--accent-coral), var(--accent-b));
border-radius: 2px;
- box-shadow: 0 2px 10px rgba(255, 107, 107, 0.3);
+ box-shadow: 0 2px 10px rgba(255, 107, 107, 0.25);
}
.section-subtitle {
font-size: 1.2rem;
- color: #2c3e50;
+ color: rgba(255, 255, 255, 0.9);
font-weight: 500;
opacity: 0.8;
}
@@ -717,12 +753,13 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
/* 技术栈云图 - INFJ风格设计 */
.tech-cloud-section {
padding: 8rem 2rem;
- background: rgba(255, 255, 255, 0.9);
+ background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
border-radius: 50px;
margin: 2rem;
- border: 2px solid rgba(102, 126, 234, 0.1);
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
position: relative;
overflow: hidden;
}
@@ -734,9 +771,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% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
- radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
- radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
+ 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%);
pointer-events: none;
}
@@ -791,10 +828,11 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
padding: 0.8rem 1.5rem;
margin: 0.5rem;
border-radius: 25px;
- background: rgba(255, 255, 255, 0.95);
+ background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
- border: 2px solid rgba(102, 126, 234, 0.2);
- color: #2c3e50;
+ -webkit-backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ color: #fff;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
@@ -802,7 +840,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
animation: cloudFloat 8s ease-in-out infinite;
position: relative;
overflow: hidden;
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
/* 标签浮动动画 */
@@ -839,7 +877,7 @@ 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, 1);
+ 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);
@@ -890,7 +928,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.cloud-tag[data-category="core"]:hover {
- background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(231, 76, 60, 0.05));
+ background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(231, 76, 60, 0.1));
}
.cloud-tag[data-category="backend"] {
@@ -899,7 +937,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.cloud-tag[data-category="backend"]:hover {
- background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.05));
+ background: linear-gradient(135deg, rgba(39, 174, 96, 0.2), rgba(39, 174, 96, 0.1));
}
.cloud-tag[data-category="data"] {
@@ -908,7 +946,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.cloud-tag[data-category="data"]:hover {
- background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0.05));
+ background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(52, 152, 219, 0.1));
}
.cloud-tag[data-category="ops"] {
@@ -917,7 +955,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.cloud-tag[data-category="ops"]:hover {
- background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(243, 156, 18, 0.05));
+ background: linear-gradient(135deg, rgba(243, 156, 18, 0.2), rgba(243, 156, 18, 0.1));
}
.cloud-tag[data-category="ai"] {
@@ -926,7 +964,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.cloud-tag[data-category="ai"]:hover {
- background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(155, 89, 182, 0.05));
+ background: linear-gradient(135deg, rgba(155, 89, 182, 0.2), rgba(155, 89, 182, 0.1));
}
/* 分类特定动画延迟 */
@@ -941,17 +979,16 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.cloud-tag[data-category="ops"]:nth-child(odd) { animation-delay: 3.5s; }
.cloud-tag[data-category="ops"]:nth-child(even) { animation-delay: 4.5s; }
-
-
/* 个性时间线 */
.personality-timeline-section {
padding: 8rem 2rem;
- background: rgba(255, 255, 255, 0.9);
+ background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
border-radius: 50px;
margin: 2rem;
- border: 2px solid rgba(102, 126, 234, 0.1);
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.personality-timeline {
@@ -1006,25 +1043,33 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.timeline-content {
flex: 1;
- background: rgba(255, 255, 255, 0.9);
- backdrop-filter: blur(10px);
+ background: rgba(255, 255, 255, var(--glass-alpha));
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
padding: 2rem;
border-radius: 25px;
margin: 0 2rem;
- border: 2px solid rgba(255, 255, 255, 0.5);
- transition: all 0.3s ease;
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+ border: 1px solid var(--glass-border);
+ transition: all 0.3s ease, opacity 0.6s ease, transform 0.6s ease;
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+ opacity: 0;
+ transform: translateY(30px);
+}
+
+.timeline-item.is-entered .timeline-content {
+ opacity: 1;
+ transform: none;
}
.timeline-content:hover {
- background: rgba(255, 255, 255, 1);
+ background: rgba(255, 255, 255, 0.2);
transform: translateY(-8px) scale(1.02);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border-color: #ff6b6b;
}
.timeline-content h3 {
- background: linear-gradient(45deg, #667eea, #764ba2);
+ background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -1034,7 +1079,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.timeline-content p {
- color: #2c3e50;
+ color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
font-weight: 500;
}
@@ -1042,12 +1087,13 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
/* GitHub项目展示 */
.github-showcase-section {
padding: 8rem 2rem;
- background: rgba(255, 255, 255, 0.9);
+ background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
border-radius: 50px;
margin: 2rem;
- border: 2px solid rgba(102, 126, 234, 0.1);
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.projects-masonry {
@@ -1060,15 +1106,16 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.project-card {
- background: rgba(255, 255, 255, 0.9);
- backdrop-filter: blur(10px);
+ background: rgba(255, 255, 255, var(--glass-alpha));
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: 25px;
padding: 2rem;
- border: 2px solid rgba(255, 255, 255, 0.5);
+ border: 1px solid var(--glass-border);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.project-card::before {
@@ -1090,11 +1137,11 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
transform: translateY(-15px) scale(1.02);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
border-color: #ff6b6b;
- background: rgba(255, 255, 255, 1);
+ background: rgba(255, 255, 255, 0.2);
}
.project-title {
- background: linear-gradient(45deg, #667eea, #764ba2);
+ background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -1104,7 +1151,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.project-description {
- color: #555;
+ color: rgba(255, 255, 255, 0.9);
margin-bottom: 1.5rem;
line-height: 1.6;
font-weight: 500;
@@ -1120,14 +1167,14 @@ 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: #666;
+ color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
font-weight: 600;
}
.project-link {
display: inline-block;
- background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+ background: linear-gradient(45deg, var(--accent-coral), var(--accent-b));
color: #fff;
padding: 0.8rem 1.8rem;
border-radius: 30px;
@@ -1135,6 +1182,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
+ border: 1px solid rgba(255, 255, 255, 0.18);
}
.project-link:hover {
@@ -1145,16 +1193,17 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
/* 博客瀑布流 */
.blog-waterfall-section {
padding: 8rem 2rem;
- background: rgba(255, 255, 255, 0.9);
+ background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
border-radius: 50px;
margin: 2rem;
- border: 2px solid rgba(102, 126, 234, 0.1);
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.view-all-link {
- background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+ background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -1186,26 +1235,27 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.article-card {
- background: rgba(255, 255, 255, 0.9);
- backdrop-filter: blur(10px);
+ background: rgba(255, 255, 255, var(--glass-alpha));
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: 20px;
padding: 1.8rem;
- border: 2px solid rgba(255, 255, 255, 0.5);
+ border: 1px solid var(--glass-border);
transition: all 0.3s ease;
text-decoration: none;
display: block;
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.article-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
- background: rgba(255, 255, 255, 1);
+ background: rgba(255, 255, 255, 0.2);
border-color: #ff6b6b;
}
.article-title {
- background: linear-gradient(45deg, #667eea, #764ba2);
+ background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -1216,7 +1266,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.article-excerpt {
- color: #555;
+ color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1rem;
@@ -1228,7 +1278,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: #666;
+ color: rgba(255, 255, 255, 0.8);
font-weight: 600;
}
@@ -1248,12 +1298,13 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
position: relative;
min-height: 600px;
overflow: hidden;
- background: rgba(255, 255, 255, 0.9);
- backdrop-filter: blur(10px);
+ background: rgba(255, 255, 255, 0.06);
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: 50px;
margin: 2rem;
- border: 2px solid rgba(102, 126, 234, 0.1);
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
+ border: 1px solid var(--glass-border);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.contact-floating-section::before {
@@ -1264,9 +1315,9 @@ 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% 30%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
- radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.08) 0%, transparent 50%),
- radial-gradient(circle at 40% 80%, rgba(155, 89, 182, 0.06) 0%, transparent 50%);
+ 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;
@@ -1281,7 +1332,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, #667eea, #764ba2, #9b59b6);
+ background: linear-gradient(45deg, #fff, #e0e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -1292,7 +1343,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.contact-title p {
- color: #2c3e50;
+ color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
margin-bottom: 4rem;
font-weight: 500;
@@ -1310,15 +1361,16 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.social-card {
- background: rgba(255, 255, 255, 0.9);
- backdrop-filter: blur(15px);
- border: 2px solid rgba(102, 126, 234, 0.2);
+ background: rgba(255, 255, 255, var(--glass-alpha));
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
+ border: 1px solid var(--glass-border);
border-radius: 25px;
padding: 1rem;
text-decoration: none;
- color: #2c3e50;
+ color: #fff;
transition: all 0.3s ease;
- box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
display: flex;
flex-direction: column;
align-items: center;
@@ -1334,6 +1386,11 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
transform-origin: center;
}
+@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)); }
+}
+
.social-card::before {
content: '';
position: absolute;
@@ -1350,7 +1407,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
transform: scale(1.1);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 0 25px var(--social-color, #667eea);
border-color: var(--social-color, #667eea);
- background: rgba(255, 255, 255, 1);
+ background: rgba(255, 255, 255, 0.2);
animation-play-state: paused;
}
@@ -1376,13 +1433,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: #2c3e50;
+ color: #fff;
}
.social-info p {
margin: 0;
font-size: 0.7rem;
- color: #666;
+ color: rgba(255, 255, 255, 0.8);
}
/* 轨道围绕动画 - 每个卡片不同的轨道路径，优化避免碰撞 */
@@ -1465,8 +1522,6 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
}
-
-
.social-card.github {
--social-color: #333;
--social-color-end: #555;
@@ -1506,11 +1561,14 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
- backdrop-filter: blur(5px);
+ backdrop-filter: blur(calc(var(--glass-blur) * 0.5));
+ -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.5));
}
.modal-content {
- background-color: #fff;
+ background-color: rgba(255, 255, 255, var(--glass-alpha));
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
margin: 10% auto;
padding: 2rem;
border-radius: 15px;
@@ -1519,6 +1577,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
text-align: center;
position: relative;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+ border: 1px solid var(--glass-border);
}
.close {
@@ -1533,7 +1592,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
.close:hover {
- color: #333;
+ color: #fff;
}
.qr-code {
@@ -1545,17 +1604,19 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
height: 200px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.18);
}
/* 评论系统 */
.comments-section {
padding: 8rem 2rem;
- background: rgba(255, 255, 255, 0.9);
+ background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
border-radius: 50px;
margin: 2rem;
- border: 2px solid rgba(102, 126, 234, 0.1);
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.comments-container {
@@ -1573,20 +1634,21 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
}
#artalk-container {
- background: rgba(255, 255, 255, 0.9);
- backdrop-filter: blur(10px);
+ background: rgba(255, 255, 255, var(--glass-alpha));
+ backdrop-filter: blur(var(--glass-blur));
+ -webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: 25px;
padding: 2.5rem;
- border: 2px solid rgba(255, 255, 255, 0.5);
+ border: 1px solid var(--glass-border);
text-align: left;
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
/* 加载动画 */
.loading-placeholder {
text-align: center;
padding: 4rem 2rem;
- color: #333;
+ color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}
@@ -1617,7 +1679,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
- .hero-content {
+ .hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
@@ -1687,6 +1749,73 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.articles-waterfall {
grid-template-columns: 1fr;
}
+
+ .social-grid {
+ width: auto;
+ height: auto;
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 1rem;
+ }
+
+ .social-card {
+ position: static;
+ width: 100%;
+ height: auto;
+ padding: 0.8rem;
+ 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 { }
}
@media (max-width: 480px) {
@@ -1743,15 +1872,101 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.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;
+ }
+
+ .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,
+ .blog-waterfall-section,
+ .contact-floating-section,
+ .comments-section {
+ padding: 4rem 1rem;
+ margin: 1rem;
+ border-radius: 25px;
+ }
+
+ .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;
+ }
}
/* 页脚样式 - 首页风格 */
.footer {
- background: #2c3e50;
+ background: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.8);
padding: 30px 0;
margin-top: 80px;
text-align: center;
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-container {
@@ -1796,4 +2011,54 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.tech-philosophy {
text-align: center;
+ margin-top: 2rem;
+}
+
+.philosophy-text {
+ color: rgba(255, 255, 255, 0.9);
+ font-style: italic;
+ font-size: 1.1rem;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 1.5rem;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 15px;
+ backdrop-filter: blur(5px);
+ -webkit-backdrop-filter: blur(5px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.motion-reduced * {
+ animation: none !important;
+ transition: none !important;
+}
+
+.motion-mobile .hero-section {
+ animation-duration: 10s;
+}
+
+.motion-mobile .social-card {
+ width: 90px;
+ height: 90px;
+}
+
+.motion-mobile .hero-title {
+ text-shadow: none;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --glass-alpha: 0.18;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .hero-section,
+ .cloud-wrapper::before,
+ .social-card,
+ .hero-title,
+ .mbti-tag,
+ .avatar-ring {
+ animation: none !important;
+ }
}
\ No newline at end of file
diff --git a/data/articles.json b/data/articles.json
new file mode 100644
index 0000000..9220e11
--- /dev/null
+++ b/data/articles.json
@@ -0,0 +1,44 @@
+[
+ {
+ "title": "向量数据库全攻略：从算法公式到选型指南，一篇吃透高维数据存储术",
+ "excerpt": "深入探讨向量数据库的核心算法、应用场景和选型策略，帮助开发者掌握高维数据存储的关键技术...",
+ "link": "https://blog.hehouhui.cn/posts/vector-database-guide",
+ "pubDate": "2025-01-02",
+ "category": "技术分享"
+ },
+ {
+ "title": "CompletableFuture 从源码到实战：让异步编程像喝奶茶一样丝滑",
+ "excerpt": "全面解析CompletableFuture的源码实现和实战应用，让Java异步编程变得简单优雅...",
+ "link": "https://blog.hehouhui.cn/posts/completablefuture-guide",
+ "pubDate": "2025-01-02",
+ "category": "Java开发"
+ },
+ {
+ "title": "从规范到架构：一篇读懂 Java 工程建模、分层、命名与演进之路",
+ "excerpt": "深入讲解Java工程的规范化建设，包括项目结构、分层架构、命名规范等最佳实践...",
+ "link": "https://blog.hehouhui.cn/posts/java-project-architecture",
+ "pubDate": "2025-01-01",
+ "category": "架构设计"
+ },
+ {
+ "title": "Spring Boot 3.0 新特性详解与实战应用",
+ "excerpt": "全面介绍Spring Boot 3.0的新特性，包括原生镜像支持、可观测性增强等...",
+ "link": "https://blog.hehouhui.cn/posts/spring-boot-3-features",
+ "pubDate": "2024-12-30",
+ "category": "Spring框架"
+ },
+ {
+ "title": "微服务架构设计模式与最佳实践",
+ "excerpt": "深入分析微服务架构的设计模式，包括服务拆分、数据一致性、分布式事务等核心问题...",
+ "link": "https://blog.hehouhui.cn/posts/microservices-patterns",
+ "pubDate": "2024-12-28",
+ "category": "微服务"
+ },
+ {
+ "title": "Redis 高可用集群搭建与性能优化实战",
+ "excerpt": "详细介绍Redis集群的搭建过程、高可用配置以及性能调优技巧...",
+ "link": "https://blog.hehouhui.cn/posts/redis-cluster-optimization",
+ "pubDate": "2024-12-25",
+ "category": "数据库"
+ }
+]
\ No newline at end of file
diff --git a/data/github_repos.json b/data/github_repos.json
new file mode 100644
index 0000000..c18e976
--- /dev/null
+++ b/data/github_repos.json
@@ -0,0 +1,32 @@
+[
+ {
+ "id": 1011713435,
+ "name": "yunxiao-LLM-reviewer",
+ "html_url": "https://github.com/listener-He/yunxiao-LLM-reviewer",
+ "description": "一款专为阿里云云效 Flow 平台设计的自动化代码审查工具。通过集成 Qwen、DeepSeek 等先进大模型，该工具能够实时分析 Git 合并请求（MR）中的代码变更，智能识别潜在问题并自动生成结构化评审意见。",
+ "stargazers_count": 9,
+ "forks_count": 3,
+ "language": "TypeScript",
+ "updated_at": "2025-10-10T11:06:34Z"
+ },
+ {
+ "id": 1064414600,
+ "name": "hexo-theme-stellar",
+ "html_url": "https://github.com/listener-He/hexo-theme-stellar",
+ "description": "综合型hexo主题：博客+知识库+专栏+笔记，内置海量的标签组件和动态数据组件。",
+ "stargazers_count": 0,
+ "forks_count": 0,
+ "language": null,
+ "updated_at": "2025-09-26T02:12:18Z"
+ },
+ {
+ "id": 1060085476,
+ "name": "Universal-IoT-Java",
+ "html_url": "https://github.com/listener-He/Universal-IoT-Java",
+ "description": "通用 IoT Java 平台（示例）",
+ "stargazers_count": 0,
+ "forks_count": 0,
+ "language": null,
+ "updated_at": "2025-10-13T02:30:28Z"
+ }
+]
\ No newline at end of file
diff --git a/data/github_user.json b/data/github_user.json
new file mode 100644
index 0000000..0c8ccda
--- /dev/null
+++ b/data/github_user.json
@@ -0,0 +1,19 @@
+{
+ "login": "listener-He",
+ "id": 39252579,
+ "node_id": "MDQ6VXNlcjM5MjUyNTc5",
+ "avatar_url": "https://avatars.githubusercontent.com/u/39252579?v=4",
+ "url": "https://api.github.com/users/listener-He",
+ "html_url": "https://github.com/listener-He",
+ "type": "User",
+ "name": "Honesty",
+ "blog": "https://www.hehouhui.cn",
+ "hireable": true,
+ "bio": "Honesty Shanghai Student",
+ "public_repos": 165,
+ "public_gists": 0,
+ "followers": 6,
+ "following": 12,
+ "created_at": "2018-05-14T02:57:55Z",
+ "updated_at": "2025-11-09T05:45:15Z"
+}
\ No newline at end of file
diff --git a/js/about.js b/js/about.js
index 7df2bd2..1751f2d 100644
--- a/js/about.js
+++ b/js/about.js
@@ -1,7 +1,7 @@
// 关于页面JavaScript功能 - 现代动态版本
$(document).ready(function() {
- // 初始化所有功能
+ initMotionController();
initGitHubStats();
initProjects();
initBlogArticles();
@@ -15,15 +15,21 @@ $(document).ready(function() {
// 初始化随机位置
function initRandomPositions() {
- // 为联系方式卡片设置随机初始位置
- $('.social-card').each(function(index) {
- var randomDelay = Math.random() * 5; // 0-5秒随机延迟
- var randomRotation = Math.random() * 360; // 0-360度随机旋转
-
+ var cards = $('.social-card');
+ var rings = [130, 180, 230];
+ var golden = 137.5;
+ var speedBase = 16;
+ cards.each(function(idx) {
+ var ring = rings[idx % rings.length];
+ var angle = (idx * golden) % 360;
+ var speed = speedBase + (idx % rings.length) * 4;
$(this).css({
- 'animation-delay': randomDelay + 's',
- 'transform': 'translate(-50%, -50%) rotate(' + randomRotation + 'deg)'
+ '--radius': ring + 'px',
+ '--phase': angle + 'deg',
+ '--speed': speed + 's'
});
+ this.style.setProperty('animation', 'orbit var(--speed) linear infinite');
+ this.style.setProperty('transform', 'translate(-50%, -50%) rotate(var(--phase)) translateX(var(--radius)) rotate(calc(-1 * var(--phase)))');
});
// 为技术标签设置随机动画延迟
@@ -32,19 +38,32 @@ function initRandomPositions() {
$(this).css('animation-delay', randomDelay + 's');
});
- // 为时间线项目设置随机出现延迟
$('.timeline-item').each(function(index) {
var randomDelay = index * 0.2 + Math.random() * 0.5;
- $(this).css({
- 'animation-delay': randomDelay + 's',
- 'opacity': '0'
- }).animate({opacity: 1}, 800);
+ $(this).css('transition-delay', randomDelay + 's');
});
}
+function initMotionController() {
+ var isMobile = window.matchMedia('(pointer: coarse)').matches || window.innerWidth <= 768;
+ var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+ var supportsBackdrop = (window.CSS && (CSS.supports('backdrop-filter: blur(1px)') || CSS.supports('-webkit-backdrop-filter: blur(1px)')));
+
+ var root = document.documentElement;
+ root.setAttribute('data-motion', reduced ? 'reduced' : (isMobile ? 'mobile' : 'desktop'));
+ root.classList.toggle('motion-mobile', isMobile && !reduced);
+ root.classList.toggle('motion-desktop', !isMobile && !reduced);
+ root.classList.toggle('motion-reduced', reduced);
+
+ if (!supportsBackdrop) {
+ root.style.setProperty('--glass-blur', '0px');
+ root.style.setProperty('--glass-alpha', '0.18');
+ }
+}
+
// GitHub 统计信息
function initGitHubStats() {
- var username = 'listener-He'; // 替换为实际的GitHub用户名
+ var username = 'listener-He';
var cacheKey = 'github_stats_cache';
var cacheTimeKey = 'github_stats_cache_time';
@@ -76,19 +95,22 @@ function initGitHubStats() {
localStorage.setItem(cacheTimeKey, now.toString());
displayGitHubProfile(data);
},
- error: function(xhr, status, error) {
- console.error('获取GitHub用户信息失败:', error);
- // 使用备用数据
- var fallbackData = {
- name: 'listener-He',
- login: 'listener-He',
- bio: '全栈开发工程师，专注于Java后端和前端技术',
- avatar_url: 'https://avatars.githubusercontent.com/u/listener-He',
- public_repos: 25,
- followers: 48,
- following: 32
- };
- displayGitHubProfile(fallbackData);
+ error: function() {
+ fetch('data/github_user.json')
+ .then(function(res) { return res.json(); })
+ .then(function(json) { displayGitHubProfile(json); })
+ .catch(function() {
+ var fallbackData = {
+ name: 'Honesty',
+ login: 'listener-He',
+ bio: '开发者',
+ avatar_url: 'https://avatars.githubusercontent.com/u/39252579?v=4',
+ public_repos: 0,
+ followers: 0,
+ following: 0
+ };
+ displayGitHubProfile(fallbackData);
+ });
}
});
}
@@ -118,6 +140,8 @@ function displayGitHubProfile(data) {
'微信公众号
- 
+ 
+
扫码关注获取最新技术文章