-
Tech Universe
+Tech Universe
@@ -250,7 +251,7 @@
-
diff --git a/css/about.css b/css/about.css
index e0fdb64..ab8edd6 100644
--- a/css/about.css
+++ b/css/about.css
@@ -191,8 +191,8 @@ body {
display: flex;
align-items: center;
gap: 8px;
- color: var(--text-primary);
- text-shadow: 0 0 10px rgba(108, 92, 231, 0.3);
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
}
/* =========================================
@@ -409,8 +409,23 @@ body {
margin-bottom: 10px;
}
-.animated-gradient { background-image: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientShift 6s linear infinite; text-shadow: 0 0 8px rgba(108,92,231,0.2); }
-@keyframes gradientShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
+.animated-gradient {
+ background-image: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ animation: gradientShift 6s linear infinite;
+ text-shadow: 0 0 8px rgba(108, 92, 231, 0.2);
+}
+
+@keyframes gradientShift {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 100% {
+ background-position: 200% 50%;
+ }
+}
.location-tag {
font-size: 0.85rem;
@@ -469,14 +484,20 @@ body {
margin-bottom: 20px;
text-align: justify;
}
+
.bio-text.collapsed {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
+
.link-btn {
- background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.85rem;
+ background: none;
+ border: none;
+ color: var(--accent);
+ cursor: pointer;
+ font-size: 0.85rem;
}
.quote-box {
@@ -519,7 +540,7 @@ body {
/* --- MBTI --- */
.area-mbti {
- padding: 30px;
+ padding: 3px;
display: flex;
align-items: center;
}
@@ -529,6 +550,7 @@ body {
}
.mbti-head {
+ margin-left: 20px;
display: flex;
align-items: baseline;
gap: 10px;
@@ -551,6 +573,7 @@ body {
}
.mbti-desc {
+ margin-left: 15px;
font-size: 0.7rem;
color: var(--text-secondary);
margin-bottom: 15px;
@@ -559,19 +582,62 @@ body {
}
.mbti-tags {
- display: flex;
- gap: 3px;
+ display: grid;
+ gap: 1px;
+ grid-template-columns: 1fr 1fr;
flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: flex-start;
+
}
.tag {
font-size: 0.75rem;
- background: rgba(128, 128, 128, 0.1);
padding: 4px 10px;
border-radius: 6px;
color: var(--text-secondary);
}
+.mbti-tags .tag {
+ background: none;
+ border: none;
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
+}
+
+.mbti-tags .tag.tag-color-1 {
+ background: var(--gradient-1);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.mbti-tags .tag.tag-color-2 {
+ background: var(--gradient-2);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.mbti-tags .tag.tag-color-3 {
+ background: var(--gradient-3);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.mbti-tags .tag.tag-color-4 {
+ background: var(--gradient-4);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
/* --- Tech Stack (PC) --- */
.area-tech {
display: flex;
@@ -1045,7 +1111,10 @@ body {
background-clip: text;
color: transparent;
}
- .comment-box { padding: 24px; }
+
+ .comment-box {
+ padding: 24px;
+ }
}
/* =========================================
@@ -1056,6 +1125,9 @@ body {
margin: 20px auto 100px;
padding: 0 16px;
}
+ .mbti-tags {
+ margin-left: 20px;
+ }
/* Bottom Dock */
.glass-nav {
@@ -1218,25 +1290,35 @@ body {
scroll-snap-type: x mandatory;
/* 添加淡入淡出效果 */
mask-image: linear-gradient(
- to right,
- transparent 0%,
- black 10%,
- black 90%,
- transparent 100%
+ to right,
+ transparent 0%,
+ black 10%,
+ black 90%,
+ transparent 100%
);
-webkit-mask-image: linear-gradient(
- to right,
- transparent 0%,
- black 10%,
- black 90%,
- transparent 100%
+ to right,
+ transparent 0%,
+ black 10%,
+ black 90%,
+ transparent 100%
);
- animation: techMarquee 18s linear infinite;
+ /* 行内滚动动画由 .tech-row 控制 */
}
-
- @keyframes techMarquee {
+ .tech-row {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ white-space: nowrap;
+ will-change: transform;
+ animation: rowMarquee var(--row-speed) linear infinite;
+ }
+ .row-1 { --row-speed: 24s; }
+ .row-2 { --row-speed: 28s; }
+ .row-3 { --row-speed: 32s; }
+ @keyframes rowMarquee {
0% { transform: translateX(0); }
- 100% { transform: translateX(-33.333%); }
+ 100% { transform: translateX(-50%); }
}
.tech-tag-mobile {
@@ -1339,7 +1421,10 @@ body {
background-clip: text;
color: transparent;
}
- .comment-box { padding: 16px; }
+
+ .comment-box {
+ padding: 16px;
+ }
}
/* =========================================
@@ -1393,6 +1478,9 @@ body {
font-size: 0.75rem;
padding-bottom: 100px;
}
+.site-footer a {
+ color: var(--text-tertiary);
+}
.b-title {
background: var(--gradient-3);
@@ -1417,4 +1505,29 @@ body {
[data-theme="night"] .b-title, [data-theme="night"] .b-cat, [data-theme="night"] .b-date {
text-shadow: 0 0 8px var(--accent-glow);
+}
+
+/* 阅读友好：blog-container 内文本使用常规颜色覆盖渐变 */
+#blog-container .b-title {
+ background: none !important;
+ -webkit-background-clip: initial;
+ background-clip: initial;
+ color: var(--text-primary) !important;
+ -webkit-text-fill-color: initial;
+}
+
+#blog-container .b-cat {
+ background: none !important;
+ -webkit-background-clip: initial;
+ background-clip: initial;
+ color: var(--text-secondary) !important;
+ -webkit-text-fill-color: initial;
+}
+
+#blog-container .b-date {
+ background: none !important;
+ -webkit-background-clip: initial;
+ background-clip: initial;
+ color: var(--text-tertiary) !important;
+ -webkit-text-fill-color: initial;
}
\ No newline at end of file
diff --git a/js/about.js b/js/about.js
index 6cf90d6..f149612 100644
--- a/js/about.js
+++ b/js/about.js
@@ -29,7 +29,7 @@ class I18nManager {
"bio.quote": "我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。",
"stats.exp": "编程年限", "stats.repos": "开源项目", "stats.followers": "关注者",
"mbti.name": "提倡者", "mbti.desc": "提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。",
- "mbti.tag1": "理想主义", "mbti.tag2": "深度洞察", "mbti.tag3": "同理心",
+ "mbti.tag1": "理想主义与道德感", "mbti.tag2": "果断决绝的行动力", "mbti.tag3": "深度洞察与创意", "mbti.tag4": "关怀与同理心",
"tech.title": "技术栈宇宙", "interest.title": "个人兴趣",
"interest.cycling": "骑行", "interest.cycling_desc": "享受在路上的自由感，用车轮丈量世界，在风景中寻找灵感",
"interest.reading": "阅读", "interest.reading_desc": "通过文字记录思考轨迹，分享技术见解，用代码诠释创意",
@@ -46,7 +46,7 @@ class I18nManager {
"bio.quote": "I pursue a deep understanding of technology rather than a broad accumulation, and the learning of every technology stems from the intrinsic drive to solve practical problems. As an INFJ personality type, I am good at deep thinking, pay attention to details, and enjoy creating meaningful products through code. I believe in the power of technology to change the world, and I am passionate about sharing knowledge and experience in the open source community.",
"stats.exp": "Years Exp", "stats.repos": "Projects", "stats.followers": "Followers",
"mbti.name": "Advocate", "mbti.desc": "Advocates of this personality type are very rare, with less than 1% of the population belonging to this type, but their contributions to the world cannot be ignored.",
- "mbti.tag1": "Idealism", "mbti.tag2": "Insight", "mbti.tag3": "Empathy",
+ "mbti.tag1": "Idealism & Morality", "mbti.tag2": "Decisive Action", "mbti.tag3": "Deep Insight & Creativity", "mbti.tag4": "Care & Empathy",
"tech.title": "Tech Universe", "interest.title": "Interests",
"interest.cycling": "Cycling", "interest.cycling_desc": "Enjoy the freedom on the road, measure the world with wheels, and find inspiration in the scenery",
"interest.reading": "Reading", "interest.reading_desc": "Record thinking trajectories through text, share technical insights, and interpret creativity with code",
@@ -92,7 +92,16 @@ class ThemeManager {
this.init();
}
init() {
- const saved = localStorage.getItem('theme') || 'day';
+ const cacheKey = window.SiteConfig?.cacheKeys?.theme?.key || 'theme-v2';
+ const timeout = window.SiteConfig?.cacheKeys?.theme?.ttlMs || 360000;
+ let saved = localStorage.getItem(cacheKey);
+ if (saved == null || new Date().getTime() - timeout > saved.time) {
+ var hour = new Date().getHours();
+ var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+ var night = hour >= 18 || prefersDark;
+ saved = night ? 'night' : 'day';
+ localStorage.setItem(cacheKey, { time: new Date().getTime(), value: saved });
+ }
if(saved === 'night') this.root.setAttribute('data-theme', 'night');
$('#theme-btn').toggleClass('is-active', saved === 'night');
@@ -101,7 +110,7 @@ class ThemeManager {
const next = curr === 'night' ? 'day' : 'night';
if(next === 'night') this.root.setAttribute('data-theme', 'night');
else this.root.removeAttribute('data-theme');
- localStorage.setItem('theme', next);
+ localStorage.setItem(cacheKey, { time: new Date().getTime(), value: next });
$('#theme-btn').toggleClass('is-active', next === 'night');
// 更新Artalk主题
@@ -131,9 +140,10 @@ class DataManager {
const cacheKey = (window.SiteConfig?.cacheKeys?.github?.key) || 'gh_data_v2';
const cached = JSON.parse(localStorage.getItem(cacheKey));
const now = Date.now();
+ const timeout = (window.SiteConfig?.cacheKeys?.github?.ttlMs) || 3600000;
// Check Cache (1 hour)
- if(cached && (now - cached.time < 3600000)) {
+ if(cached && (now - cached.time < timeout)) {
this.renderUser(cached.user);
this.renderRepos(cached.repos);
return;
@@ -254,7 +264,7 @@ class DataManager {
title,
link,
date: pubDate,
- cats: categories.length ? categories : ["Tech"]
+ cats: categories.length ? categories : [""]
});
}
@@ -410,18 +420,29 @@ class UIManager {
container.innerHTML = '';
if(isMobile) {
- // Mobile: Horizontal Scroll Snap (Compact 3 rows)
+ // Mobile: 3-row seamless marquee
container.classList.add('mobile-scroll');
- // 创建多个标签副本以实现无缝滚动效果
- const extendedTechStack = [...techStack, ...techStack, ...techStack];
- extendedTechStack.forEach((item, index) => {
+ const rows = 3;
+ const buckets = Array.from({ length: rows }, () => []);
+ techStack.forEach((item, i) => { buckets[i % rows].push(item); });
+
+ const appendItem = (rowEl, item, idx) => {
const el = document.createElement('span');
el.className = 'tech-tag-mobile';
- const colorClass = `tag-color-${item.gradientId || ((index % 10) + 1)}`;
+ const colorClass = `tag-color-${item.gradientId || ((idx % 10) + 1)}`;
el.classList.add(colorClass);
el.innerText = item.name;
el.style.border = 'none';
- container.appendChild(el);
+ rowEl.appendChild(el);
+ };
+
+ buckets.forEach((items, rIdx) => {
+ const rowEl = document.createElement('div');
+ rowEl.className = `tech-row row-${rIdx+1}`;
+ rowEl.style.gridRow = `${rIdx+1}`;
+ items.forEach((item, idx) => appendItem(rowEl, item, idx));
+ items.forEach((item, idx) => appendItem(rowEl, item, idx + items.length));
+ container.appendChild(rowEl);
});
} else {
// PC: 3D Sphere
@@ -488,7 +509,7 @@ class UIManager {
scale = Math.min(Math.max(scale, 0.7), 1.15);
let opacity = (tag.z + radius)/(2*radius) + 0.2;
- tag.el.style.opacity = Math.min(Math.max(opacity, 0.1), 1);
+ tag.el.style.opacity = Math.min(Math.max(opacity, 0.1), 0.85);
tag.el.style.zIndex = parseInt(scale*100);
let left = tag.x + container.offsetWidth/2 - tag.el.offsetWidth/2;
let top = tag.y + container.offsetHeight/2 - tag.el.offsetHeight/2;
diff --git a/js/config.js b/js/config.js
index 5d25bb5..614a3c3 100644
--- a/js/config.js
+++ b/js/config.js
@@ -43,8 +43,9 @@ const SiteConfig = {
// 通用缓存键与TTL（毫秒）
cacheKeys: {
- github: { key: 'gh_data_v2', ttlMs: 3600000 },
- blog: { key: 'blog_data_v2', ttlMs: 3600000 }
+ github: { key: 'gh_data_v2', ttlMs: 36000000 },
+ blog: { key: 'blog_data_v2', ttlMs: 3600000 },
+ theme: { key: 'theme_v2', ttlMs: 3600000 }
},
techStack: [
Official Account
- QR Load Failed
+
Scan to follow Tech Share