Li Junzhe (TPMAM) — Personal Portfolio Website
这是一个极具个人风格与设计美学的个人学术与项目展示主页。网站完全摒弃了传统的“冷硬科技风”和套路的“学术简历风”，旨在打造一个 温润、清透、充满呼吸感 的数字空间，将计算思维（Computational Thinking）与生命科学（Living World）的融合感在视觉上具象化。
主页链接： KingofLaniakea.github.io
🎨 设计思路与美学偏好 (Design Philosophy & Aesthetics)
本网站的设计高度定制化，深刻反映了博主的设计鉴赏力与审美偏好：
1. 核心视觉理念：”Warm Ethereal”（温暖空灵）
- 拒接平庸：没有使用大众化的纯白背景或深色冷酷风。整个网站建立在“温润”的基础上，呈现出一种高级的、类似于高级艺术画廊或顶尖期刊年鉴的质感。
- 空间与呼吸感：在全屏（如 1920x1080）下，极其注重留白（Whitespace）。通过精准控制 Section Padding 和容器的最大宽度（1240px~1320px），让每块内容都有足够的呼吸空间，绝不显得拥挤。
2. 精妙的色彩美学 (Harmonious Palette)
- 背景底色：使用了极度柔和的暖调米白/亚麻白（Off-white / Warm Sand），不刺眼，如同质感极佳的纸张。
- 点缀与文字：标题摒弃了死板的纯黑，选择了低饱和度的 优雅铜色（Muted Copper / 泥土暖棕） 和沉稳的深灰。这种配色在视觉上具有温度。
- 功能色：对于标签和一些关键信息，使用了低饱和度且柔和的 莫斯绿（Moss Green） 和 泥岩灰 等来自大自然的色调，呼应了博主 BioAI（生物人工智能）的学术背景。
3. 高级排版艺术 (Typography)
- 衬线与无衬线的交响曲：标题采用极其优雅的衬线字体（Serif，如 Playfair Display 风格），突显学术的厚重、高级感与古典美；正文则采用现代、干净的无衬线字体（如 Inter 或 Roboto），保证在长篇幅阅读时的极佳识别度。
- 斜体（Italics）的巧思：在主标题中大量使用优雅的斜体穿插（如 “Featured Projects”, “Get in Touch“），打破常规排版的沉闷，赋予页面诗意与动感。
4. 动态与微交互 (Micro-animations & Elements)
- 漂浮光斑（Float Orbs）：背景中使用了 CSS 高斯模糊绘制的暖色调漂浮光晕，随屏幕缓缓移动，营造出微观世界或星系般的深邃感。
- 粒子连线动画：Canvas 绘制的极其轻量的点线连接动画，象征着计算、网络与分子的结合。
- 柔软的阴影与悬浮：卡片（Cards）取消了生硬的边框，使用了极其微弱的
box-shadow。在鼠标悬停时，带有优美的阻尼上浮动画，交互反馈丝滑。
🛠 技术栈 (Technology Stack)
贯彻了 “大道至简” 与 “极致性能” 的开发理念，没有使用任何臃肿的现代前端框架（如 React/Vue 或 TailwindCSS），纯手写雕琢每一个像素。
- 核心语言：
HTML5, CSS3, Vanilla JavaScript (ES6+)
- 样式管理：纯 CSS (Vanilla CSS)
- 动画实现：CSS Transitions / Keyframes + JavaScript IntersectionObserver API + Canvas API
- 部署方案：GitHub Pages (静态托管)
⚙️ 核心技术细节 (Technical Implementation)
- 响应式架构设计 (Responsive Fluid Design)
- 使用 CSS Grid 和 Flexbox 构建底层布局结构。
- 极其细致的断点设计（Breakpoints）：从
1400px+ 的宽屏全屏适配，到 1024px 的平板过渡（例如 3 列网格平滑降级为 2 列），再到 768px/480px 的移动端单列堆叠，并搭配了移动端专用的汉堡菜单（Hamburger Menu）。
- 现代 CSS 变量驱动架构 (CSS Variables Theme System)
- 在
:root 下注册了全局的设计令牌（Design Tokens），包括 --bg-primary, --text-main, --accent-color, --font-display, --ease 等。这使得全局颜色与风格的修改达到了 O(1) 的复杂度。
- 高性能滚动视差与元素显现 (Scroll-Reveal Animations)
- 拒绝引入厚重的第三方动画库（如 AOS, GSAP）。
- 手动封装原生的
IntersectionObserver，为带有 data-reveal 和 data-stagger 属性的 DOM 元素实现精准的“进入视口即触发”的淡入上浮动画。性能开销极小，保证了页面的 60fps 丝滑渲染。
- Canvas 星云粒子引擎 (Nebula Particle Engine)
script.js 中包含一个深度定制的轻量级物理模拟引擎。摒弃了生硬的静态连线，粒子被赋予了香槟金、玫瑰金、暖白等星云色调，并采用 radialGradient 渲染出清透的柔光晕（Glow）。- 丝滑交互 (Silky Smooth Interaction)：鼠标位置采用高帧率 Lerp 缓动插值，粒子受到带阻尼的“柔和吸引力”与“弹性恢复力”作用，呈现出如流体般高级的跟随感。
- 交互式隐藏彩蛋 (Hidden Supernova Easter Egg)
- 在极致的美学之下隐藏着趣味交互：当用户缓慢移动鼠标，运用引力将全屏的大部分粒子（~70%）聚拢在光标周围并保持 1 秒后，会触发“超新星爆发（Supernova Burst）”彩蛋。
- 粒子瞬间炸裂、提亮，爆发金色涟漪，并浮现出高斯模糊质感的隐藏诗意信息卡片（“You gathered the stars / 你聚拢了星辰”）。既展现了技术深度，又极其契合 BioAI 探索未知、连接微观与宏观（Where curiosity meets the cosmos）的主题。
- 大屏体验优化 (1080p / High-Res Optimization)
- 针对 1920x1080 的全屏状态，对所有
.page-header、.home-section 的内边距（Padding）进行了像素级调优，防止大屏下垂直空间浪费导致的重要内容被推到“Fold”（首屏折叠线）以下。