设计概述
Personal Portal 是我的数字身份主页。v3.0 是一次彻底的风格转向：从活泼的 Sunny Y2K 升级为精致、科技、专业的视觉语言，同时保留轻快的生命力。整个网站不使用任何前端框架，仅以原生 HTML/CSS/JS 构建，部署在 Cloudflare Pages 上。
设计风格：精致科技
作为医学博士与效率专家，我需要主页传递的是专业可信、清晰高效的气质。v3.0 围绕这一核心重新设计了视觉系统：
- 青蓝基调：背景从暖白渐变转向清爽的天蓝→淡青→冷白，彻底去除了粉紫色调
- 青绿主品牌色：#2dd4bf 作为统一的主色调，贯穿标题、按钮、链接、进度条、图标
- Mobile-first：所有内容区块采用垂直单列布局，按钮最小 44×44px，充足的留白提升高端感
- 精简信息架构：Hero 首屏直接传递定位，关于我控制在 150 字以内，用卡片展示关键信息
- 洞见 Insight：将文章与经验心得合并为一个区块，核心理念 + 核心赋能卡片 + 精选文章列表
颜色系统
以青绿色为锚点，辅以青、紫、少量粉黄点缀：
背景色使用 linear-gradient(135deg, #e0f2fe, #ecfeff, #f8fafc) 的青蓝渐变，叠加一层极低透明度的噪点纹理（opacity: 0.025），保持画面的细腻质感。
布局思路
采用 Mobile-first 垂直流布局，桌面端在此基础上横向扩展：
- Hero 首屏：头像 + 大标题「医学博士 · AI驱动的学术效率专家」+ 3 个 CTA 按钮，第一时间传递定位
- 关于我：精简至 150 字以内的 Bio + 经历/语言/方向三张卡片 + 核心能力标签
- 最新动态：时间线形式，从 CSV 读取，保持网站的活跃度
- 精选项目：4 张卡片展示，每张增加效率价值标签
- 洞见 Insight：核心理念 + 核心赋能两张卡片，下方直接接入精选文章列表
- 联系与兴趣：邮箱复制 + 兴趣标签云
技术栈
- 原生 HTML5 / CSS3 / JavaScript（零框架、零构建步骤）
- WebP 图片格式支持，
<picture> 标签自动降级 PNG
- 数据驱动：兴趣标签和最新动态从 CSV 文件读取
- Cloudflare Pages 静态托管，GitHub 推送自动部署
- Google Fonts：Outfit、Noto Sans SC、JetBrains Mono（SIL OFL 协议）