My Portal · 个人门户

为什么做它

我想有一个地方：把做过的东西摆出来，把想法写下来，而且它本身的气质就应该代表我的审美——克制、精准、有一点不会过时的科技感。

参照系很快锁定为 Apple 发布会页：纯黑背景、一个被打光到极致的”物体”、大字排版、滚动驱动叙事。

三次推倒

这个网站最诚实的故事是它的迭代史（v1 到 v19）：

1. 先做加法：Lusion 式粒子场、辉光后期、星系形态、流星、冲击波……特效堆到 17 版，视觉冲击力上去了，但整体气质开始向”夜店”漂移。
2. 再学减法：用”如果是 Apple 会怎么做”当标尺重做——粒子从彩色噪声变成银白磨砂星球，全页只保留一种颜色（Apple 蓝的轨道环），删掉流星和冲击波，页面立刻安静下来。
3. 最后定骨架：作品区从”卡片翻页”改成连续编辑排版；数据源从 GitHub API 切换为本地维护——构建时零外部请求，网站不再依赖任何 third-party 的存活。

技术要点

• Astro 静态站：内容全部 Markdown 化（Content Collections + schema 校验），加一篇作品或文章就是提交一个 .md 文件
• Three.js 粒子场：自定义着色器（每粒子独立大小与相位）、滚动驱动的三形态形变（星球 ⇄ 星系 ⇄ 波浪网格）、指针犁开的弹簧质点物理
• GSAP + Lenis：滚动劫持的惯性平滑，所有入场动画对 prefers-reduced-motion 降级
• 零外部请求：构建时不打任何 API，统计与文案本地维护

一条设计军规

整个项目沉淀下来最有价值的一条规则：页面上只允许有一个视觉主角。英雄区的主角是星球，作品区的主角是文字。当一个元素想抢戏时，先问它是不是这一屏的主角——不是，就调暗、缩小、退后。