-
"我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。"
+
"我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。 "
diff --git a/css/about.css b/css/about.css
index d6412e5..e1a0c59 100644
--- a/css/about.css
+++ b/css/about.css
@@ -35,6 +35,11 @@
--gradient-3: linear-gradient(135deg, #ff9a9e, #f093fb);
--gradient-4: linear-gradient(135deg, #a8edea, #4facfe);
--gradient-5: linear-gradient(135deg, #d299c2, #fef9d7);
+ --gradient-6: linear-gradient(135deg, #f6d365, #fda085);
+ --gradient-7: linear-gradient(135deg, #84fab0, #8fd3f4);
+ --gradient-8: linear-gradient(135deg, #fccb90, #d57eeb);
+ --gradient-9: linear-gradient(135deg, #ffecd2, #fcb69f);
+ --gradient-10: linear-gradient(135deg, #cfd9df, #e2ebf0);
}
[data-theme="night"] {
@@ -252,7 +257,7 @@ body {
.mbti-name { font-weight: 600; color: var(--text-secondary); }
.mbti-icon { font-size: 1.5rem; }
.mbti-desc { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 15px; line-height: 1.5; }
-.mbti-tags { display: flex; gap: 8px; flex-wrap: wrap; }
+.mbti-tags { display: flex; gap: 3px; flex-wrap: wrap; }
.tag { font-size: 0.75rem; background: rgba(128,128,128,0.1); padding: 4px 10px; border-radius: 6px; color: var(--text-secondary); }
/* --- Tech Stack (PC) --- */
@@ -275,51 +280,60 @@ body {
/* 移除背景色和边框，只保留文字渐变效果 */
background: none;
border: none;
- /* 添加文字渐变 */
- background: var(--gradient-1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
+ -webkit-text-fill-color: transparent;
pointer-events: none; /* 禁用鼠标事件避免干扰 */
}
-[data-theme="night"] .tech-tag-3d {
- color: #00cec9;
-}
/* 不同颜色的标签 */
.tech-tag-3d.tag-color-1, .tech-tag-mobile.tag-color-1 {
background: var(--gradient-1);
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
}
.tech-tag-3d.tag-color-2, .tech-tag-mobile.tag-color-2 {
background: var(--gradient-2);
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
}
.tech-tag-3d.tag-color-3, .tech-tag-mobile.tag-color-3 {
background: var(--gradient-3);
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
}
.tech-tag-3d.tag-color-4, .tech-tag-mobile.tag-color-4 {
background: var(--gradient-4);
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
}
.tech-tag-3d.tag-color-5, .tech-tag-mobile.tag-color-5 {
background: var(--gradient-5);
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
+}
+/* 扩展更多渐变方案 */
+.tech-tag-3d.tag-color-6, .tech-tag-mobile.tag-color-6 { background: var(--gradient-6); }
+.tech-tag-3d.tag-color-7, .tech-tag-mobile.tag-color-7 { background: var(--gradient-7); }
+.tech-tag-3d.tag-color-8, .tech-tag-mobile.tag-color-8 { background: var(--gradient-8); }
+.tech-tag-3d.tag-color-9, .tech-tag-mobile.tag-color-9 { background: var(--gradient-9); }
+.tech-tag-3d.tag-color-10, .tech-tag-mobile.tag-color-10 { background: var(--gradient-10); }
+
+/* 渐变文字兼容处理：支持时启用文字渐变，不支持时使用纯色 */
+@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
+ .tech-tag-3d,
+ .tech-tag-mobile {
+ background: none !important;
+ color: var(--text-primary) !important;
+ }
+ .tech-tag-3d.tag-color-1,
+ .tech-tag-3d.tag-color-2,
+ .tech-tag-3d.tag-color-3,
+ .tech-tag-3d.tag-color-4,
+ .tech-tag-3d.tag-color-5,
+ .tech-tag-mobile.tag-color-1,
+ .tech-tag-mobile.tag-color-2,
+ .tech-tag-mobile.tag-color-3,
+ .tech-tag-mobile.tag-color-4,
+ .tech-tag-mobile.tag-color-5 {
+ background: none !important;
+ color: var(--text-primary) !important;
+ }
}
/* --- Interests --- */
@@ -328,20 +342,21 @@ body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
- height: 100%;
+ /*height: 100%; */
+ margin-top: 1rem;
align-content: center;
}
.interest-item {
background: rgba(128,128,128,0.05);
- padding: 15px;
- border-radius: 12px;
+ padding: 5px;
+ border-radius: 2px;
display: flex;
align-items: center;
- gap: 12px;
+ gap: 2px;
transition: background 0.3s;
}
.interest-item:hover { background: rgba(128,128,128,0.1); }
-.i-emoji { font-size: 1.5rem; }
+.i-emoji { font-size: 1.2rem; }
.i-text { display: flex; flex-direction: column; min-width: 0; } /* 添加 min-width: 0 防止溢出 */
.i-text strong {
font-size: 0.9rem;
@@ -724,22 +739,23 @@ body {
100% { transform: translateX(-50%); }
}
- .tech-tag-mobile {
- scroll-snap-align: start;
- padding: 6px 12px;
- border-radius: 20px;
- font-size: 0.8rem;
- font-family: var(--font-mono);
- white-space: nowrap;
- border: none;
- font-weight: bold;
- /* 添加文字渐变效果 */
- background: var(--gradient-1);
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
- pointer-events: none;
- }
+.tech-tag-mobile {
+ scroll-snap-align: start;
+ padding: 6px 12px;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-family: var(--font-mono);
+ white-space: nowrap;
+ border: none;
+ font-weight: bold;
+ /* 添加文字渐变效果 */
+ background: var(--gradient-1);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ -webkit-text-fill-color: transparent;
+ pointer-events: none;
+}
/* Mobile Social */
.mobile-social {
diff --git a/js/about.js b/js/about.js
index 67f3a35..9700c80 100644
--- a/js/about.js
+++ b/js/about.js
@@ -26,15 +26,15 @@ class I18nManager {
"status.online": "在线", "profile.name": "Honesty", "profile.role": "Java后端 & AI探索者", "profile.location": "上海, 中国",
"bio.label": "关于我",
"bio.text": "我是一名充满热情的Java后端开发工程师，专注于AI技术的探索与应用。来自湖南，现在上海工作，享受在这座充满活力的城市中追求技术梦想。",
- "bio.quote": "我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。",
+ "bio.quote": "我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。",
"stats.exp": "编程年限", "stats.repos": "开源项目", "stats.followers": "关注者",
- "mbti.name": "提倡者", "mbti.desc": "理想主义与道德感，果断决绝的行动力。深度洞察与创意，关怀与同理心。",
+ "mbti.name": "提倡者", "mbti.desc": "提倡者人格类型的人非常稀少，只有不到1%的人口属于这种类型，但他们对世界的贡献不容忽视。",
"mbti.tag1": "理想主义", "mbti.tag2": "深度洞察", "mbti.tag3": "同理心",
"tech.title": "技术栈宇宙", "interest.title": "个人兴趣",
- "interest.cycling": "骑行", "interest.cycling_desc": "用车轮丈量世界",
- "interest.reading": "阅读", "interest.reading_desc": "记录思考的轨迹",
- "interest.opensource": "开源", "interest.opensource_desc": "分享代码与力量",
- "interest.learning": "持续学习", "interest.learning_desc": "保持好奇心",
+ "interest.cycling": "骑行", "interest.cycling_desc": "享受在路上的自由感，用车轮丈量世界，在风景中寻找灵感",
+ "interest.reading": "阅读", "interest.reading_desc": "通过文字记录思考轨迹，分享技术见解，用代码诠释创意",
+ "interest.opensource": "开源", "interest.opensource_desc": "热衷于开源项目，相信分享的力量，用代码连接世界",
+ "interest.learning": "持续学习", "interest.learning_desc": "保持对新技术的好奇心，在变化中成长，在挑战中进步",
"github.title": "开源贡献", "blog.title": "最新文章", "blog.more": "查看更多",
"comment.title": "留言板", "modal.wechat": "微信公众号", "modal.desc": "扫码关注获取干货"
},
@@ -43,15 +43,15 @@ class I18nManager {
"status.online": "Available", "profile.name": "Honesty", "profile.role": "Java Backend & AI Dev", "profile.location": "Shanghai, China",
"bio.label": "About Me",
"bio.text": "I am a passionate Java Backend Engineer focused on AI exploration. Based in Shanghai, originally from Hunan, I enjoy pursuing my technical dreams in this vibrant city.",
- "bio.quote": "I seek deep understanding over broad stacking. Every skill I learn is driven by the need to solve real problems.",
+ "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": "Idealism and morality, decisive action. Deep insight and creativity, care and empathy.",
+ "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",
"tech.title": "Tech Universe", "interest.title": "Interests",
- "interest.cycling": "Cycling", "interest.cycling_desc": "Measuring the world",
- "interest.reading": "Reading", "interest.reading_desc": "Tracks of thought",
- "interest.opensource": "Open Source", "interest.opensource_desc": "Sharing power",
- "interest.learning": "Learning", "interest.learning_desc": "Stay curious",
+ "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",
+ "interest.opensource": "Open Source", "interest.opensource_desc": "Passionate about open source projects, believing in the power of sharing, connecting the world with code",
+ "interest.learning": "Learning", "interest.learning_desc": "Maintain curiosity about new technologies, grow through change, and progress through challenges",
"github.title": "Open Source", "blog.title": "Latest Posts", "blog.more": "View All",
"comment.title": "Message Board", "modal.wechat": "WeChat Account", "modal.desc": "Scan for tech insights"
}
@@ -371,12 +371,20 @@ class UIManager {
const container = document.getElementById('tech-container');
if(!container) return;
- const techStack = window.SiteConfig?.techStack || [
+ const techStackRaw = window.SiteConfig?.techStack || [
{name:'Java'},{name:'Spring'},{name:'Docker'},{name:'K8s'},{name:'Python'},{name:'Redis'},
{name:'React'},{name:'Vue'},{name:'MySQL'},{name:'MongoDB'},{name:'Linux'},{name:'Git'}
];
+ const techStack = techStackRaw.map((item, idx) => {
+ const name = item.name || '';
+ const hash = Array.from(name).reduce((a,c)=>a+c.charCodeAt(0),0);
+ const gid = Number(item.gradientId) && Number.isFinite(Number(item.gradientId))
+ ? Math.max(1, Math.min(10, Number(item.gradientId)))
+ : (hash % 10) + 1;
+ return { ...item, gradientId: gid };
+ });
- const isMobile = window.innerWidth < 768;
+ const isMobile = window.matchMedia('(max-width: 768px)').matches;
container.innerHTML = '';
if(isMobile) {
@@ -388,7 +396,7 @@ class UIManager {
const el = document.createElement('span');
el.className = 'tech-tag-mobile';
// 添加不同颜色的渐变类
- const colorClass = `tag-color-${(index % 5) + 1}`;
+ const colorClass = `tag-color-${item.gradientId}`;
el.classList.add(colorClass);
el.innerText = item.name;
el.style.gridRow = `${(index % 3) + 1}`;
@@ -405,11 +413,9 @@ class UIManager {
const el = document.createElement('a');
el.className = 'tech-tag-3d';
// 添加不同颜色的渐变类
- const colorClass = `tag-color-${(index % 5) + 1}`;
+ const colorClass = `tag-color-${item.gradientId}`;
el.classList.add(colorClass);
el.innerText = item.name;
- // 移除背景和边框样式
- el.style.background = 'none';
el.style.border = 'none';
container.appendChild(el);
tags.push({ el, x:0, y:0, z:0 });
diff --git a/js/config.js b/js/config.js
index e3b15ed..98c0418 100644
--- a/js/config.js
+++ b/js/config.js
@@ -135,6 +135,17 @@ const SiteConfig = {
}
};
+if (Array.isArray(SiteConfig.techStack)) {
+ SiteConfig.techStack = SiteConfig.techStack.map((item, idx) => {
+ const name = item.name || '';
+ const hash = Array.from(name).reduce((a, c) => a + c.charCodeAt(0), 0);
+ const gid = (item.gradientId && Number.isFinite(Number(item.gradientId)))
+ ? Math.max(1, Math.min(10, Number(item.gradientId)))
+ : (hash % 10) + 1;
+ return { ...item, gradientId: gid };
+ });
+}
+
// 导出配置
if (typeof module !== 'undefined' && module.exports) {
module.exports = SiteConfig;