- 
-
+
-
@@ -71,6 +68,7 @@
+
INFJ
提倡者人格
diff --git a/css/about.css b/css/about.css
index b019ead..971b397 100644
--- a/css/about.css
+++ b/css/about.css
@@ -23,6 +23,58 @@
--accent-lavender: #7B7AE6;
}
+: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);
+}
+
+:root.theme-night {
+ --grad-a: #101216;
+ --grad-b: #171a1f;
+ --text-strong: #F2F3F5;
+ --text-soft: rgba(255, 255, 255, 0.9);
+ --glass-alpha: 0.14;
+ --glass-border: rgba(255, 255, 255, 0.16);
+}
+
+.theme-day .nav-logo {
+ background: linear-gradient(45deg, #121417, #2a2d34);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.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;
+}
+
+.theme-day .hero-subtitle,
+.theme-day .intro-text p,
+.theme-day .project-description,
+.theme-day .article-excerpt,
+.theme-day .timeline-content p,
+.theme-day .section-subtitle,
+.theme-day .location-info,
+.theme-day .stat-label { color: var(--text-soft); }
+
+.theme-day .cloud-tag {
+ color: var(--text-soft);
+ border-color: rgba(0, 0, 0, 0.1);
+ background: rgba(255, 255, 255, 0.08);
+}
+
body {
font-family: 'Inter', 'SF Pro Text', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
@@ -795,6 +847,19 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
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;
+}
+
/* 连接线动画 */
.cloud-wrapper::before {
content: '';
@@ -1379,11 +1444,12 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
top: 50%;
left: 50%;
overflow: hidden;
- width: 120px;
- height: 120px;
+ width: 110px;
+ height: 110px;
justify-content: center;
text-align: center;
transform-origin: center;
+ z-index: 1;
}
@keyframes orbit {
@@ -1401,6 +1467,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
background: var(--social-color, #667eea);
transform: scaleX(0);
transition: transform 0.3s ease;
+ z-index: -1;
}
.social-card:hover {
@@ -1820,7 +1887,7 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
@media (max-width: 480px) {
.hero-title {
- font-size: 2rem;
+ font-size: 1.8rem;
}
.hero-stats {
@@ -1926,9 +1993,9 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.blog-waterfall-section,
.contact-floating-section,
.comments-section {
- padding: 4rem 1rem;
- margin: 1rem;
- border-radius: 25px;
+ padding: 3rem 0.8rem;
+ margin: 0.8rem;
+ border-radius: 20px;
}
.cloud-tag {
@@ -2061,4 +2128,39 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
.avatar-ring {
animation: none !important;
}
+}
+.theme-day .profile-info h1,
+.theme-day .github-info h3,
+.theme-day .social-info h3 { color: var(--text-strong); }
+
+.theme-day .intro-quote p,
+.theme-day .intro-text 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 .github-bio { color: var(--text-soft); }
+
+.theme-day .stat-number {
+ background: linear-gradient(45deg, #121417, #2a2d34);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+.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 .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;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
}
\ No newline at end of file
diff --git a/js/about.js b/js/about.js
index 1751f2d..2b2ad84 100644
--- a/js/about.js
+++ b/js/about.js
@@ -1,6 +1,7 @@
// 关于页面JavaScript功能 - 现代动态版本
$(document).ready(function() {
+ initThemeByTime();
initMotionController();
initGitHubStats();
initProjects();
@@ -238,8 +239,8 @@ function displayProjects(repos) {
(updateDate.getMonth() + 1) + '/' +
updateDate.getDate();
- var starSvg = '';
- var forkSvg = '';
+ var starSvg = '';
+ var forkSvg = '';
projectsHtml += '
INFJ
提倡者人格
' +
'
' +
'
' +
@@ -412,14 +413,81 @@ function initTechCloud() {
];
- // 动态生成技术项目
- techItems.forEach((tech, index) => {
- var orbit = $('.orbit-' + tech.orbit);
- var techElement = $('
' + tech.name + '
');
- orbit.append(techElement);
+ var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+ var isMobile = window.matchMedia('(pointer: coarse)').matches || window.innerWidth <= 768;
+ if (!reduced && !isMobile) {
+ initTechSphere(techItems);
+ return;
+ }
+ var container = $('.cloud-wrapper');
+ techItems.forEach(function(tech) {
+ var el = $('' + tech.name + '');
+ container.append(el);
});
}
+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');
+ if (!container) return;
+ container.classList.add('sphere');
+ var N = items.length;
+ var tags = [];
+ for (var i = 0; i < N; i++) {
+ var item = items[i];
+ 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%';
+ 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);
+ }
+ container.style.transformStyle = 'preserve-3d';
+ requestAnimationFrame(animate);
+}
+
// 滚动效果
function initScrollEffects() {
// 导航栏滚动效果
@@ -703,4 +771,12 @@ function hideWechatQR() {
if (modal) {
modal.style.display = "none";
}
+}
+function initThemeByTime() {
+ var hour = new Date().getHours();
+ var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+ var night = hour >= 18 || prefersDark;
+ var root = document.documentElement;
+ root.classList.toggle('theme-night', night);
+ root.classList.toggle('theme-day', !night);
}
\ No newline at end of file