From 083bf81d10faca7a1b46d313fa751b9f882aad2b Mon Sep 17 00:00:00 2001 From: hehh Date: Sun, 23 Nov 2025 17:24:55 +0800 Subject: [PATCH] =?UTF-8?q?feat(about):=20=E4=BC=98=E5=8C=96=E4=B8=AA?= =?UTF-8?q?=E4=BA=BA=E9=A1=B5=E9=9D=A2=E5=B1=95=E7=A4=BA=E4=B8=8E=E4=BA=A4?= =?UTF-8?q?=E4=BA=92=E4=BD=93=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增5种渐变色彩变量，扩展技术标签视觉表现 - 调整MBTI标签间距并增加更多人格描述细节 - 优化技术标签渲染逻辑，支持自定义渐变ID分配 - 改进兴趣模块布局及响应式样式适配 - 更新多语言文本内容，丰富自我介绍信息 - 修复技术标签在不支持背景裁剪时的降级显示问题 - 完善移动端媒体查询匹配方式提升兼容性 --- about.html | 2 +- css/about.css | 100 +++++++++++++++++++++++++++++--------------------- js/about.js | 42 ++++++++++++--------- js/config.js | 11 ++++++ 4 files changed, 94 insertions(+), 61 deletions(-) diff --git a/about.html b/about.html index 0f13ef1..afe7099 100644 --- a/about.html +++ b/about.html @@ -99,7 +99,7 @@

-

"我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。"

+

"我追求技术的深度理解而非广度堆砌，每一项技术的学习都源于解决实际问题的内在驱动。作为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;