feat(about): 优化个人页面展示与交互体验
- 新增5种渐变色彩变量，扩展技术标签视觉表现 - 调整MBTI标签间距并增加更多人格描述细节 - 优化技术标签渲染逻辑，支持自定义渐变ID分配 - 改进兴趣模块布局及响应式样式适配 - 更新多语言文本内容，丰富自我介绍信息 - 修复技术标签在不支持背景裁剪时的降级显示问题 - 完善移动端媒体查询匹配方式提升兼容性
This commit is contained in:
hehh
@@ -99,7 +99,7 @@
|
||||
</p>
|
||||
<div class="quote-box">
|
||||
<i class="ri-double-quotes-l"></i>
|
||||
<p data-i18n="bio.quote">"我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。"</p>
|
||||
<p data-i18n="bio.quote">"我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。作为INFJ人格类型，我善于深度思考，注重细节，喜欢通过代码创造有意义的产品。我相信技术的力量能够改变世界，也热衷于在开源社区中分享知识与经验。 "</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
100
css/about.css
100
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 {
|
||||
|
||||
42
js/about.js
42
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 });
|
||||
|
||||
11
js/config.js
11
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;
|
||||
|
||||
Reference in New Issue
Block a user