开发者有个坏习惯，总是在只需要一把锋利刀片时，却非要造一把瑞士军刀。在写下第一行 HTML 之前，我们就急于套用沉重的前端框架。我们强行塞入动画库、状态管理工具和足以支撑一家小公司的构建流水线。然后我们又纳闷，为什么我们的作品集网站需要三秒钟才能完成渲染，为什么移动端的导航会崩溃，以及为什么招聘经理在看到我们耗时数月构建的项目之前就直接离开了。
在我最新的作品集中，我尝试了一条不同的路径。我远离了那套无尽依赖的生态系统，完全使用语义化 HTML 和简洁的 CSS 构建了整个网站。没有 JavaScript 框架。没有构建步骤。没有第三方动画引擎。只有平台本身，布局由 CSS Grid 和 Flexbox 处理，设计理念将速度和清晰度视为核心功能，而非事后才考虑的补丁。
结果是轻量、快速且专业的。以下是我具体的方法。
从基础开始
大多数过度工程都始于基础。作品集并不需要是一个单页应用。它只需要展示你的作品，告诉人们如何联系你，然后不碍事。我使用了语义化 HTML，因为浏览器已经知道如何渲染 nav、article 和 footer。当你为特定的任务使用正确的元素时，你几乎可以免费获得无障碍性、搜索引擎可见性和响应式行为。你写的代码也会更少。一个带有五个 ARIA 属性的 div 只是对 button 的冗长模仿。我完全避免了这种情况。
对于布局，CSS Grid 和 Flexbox 完全足够。Grid 处理宏观结构：整体页面分块、项目画廊、主要区块的对齐。Flexbox 管理微交互：胶囊内的导航链接、卡片内的文本居中、将页脚推至视口底部。它们共同取代了你在 2018 年可能需要导入的任何十二列网格框架。代码保持了可读性，CSS 文件也保持了精简。
色彩、字体与克制
我希望作品集在加载的一瞬间就能给人一种宁静感。背景使用浅色基调，并带有微妙的径向渐变。没有任何攻击性的设计。渐变以低不透明度呈现，营造出一种柔和的深度感，让页面看起来不那么扁平，又不会喧宾夺主。因为它纯粹是 CSS，所以加载速度极快。不需要压缩 Hero 图片，不需要管理 WebP 回退方案，也不需要配置 JavaScript 懒加载库。
字体承载着个性。我将 Outfit 与 Ovo 进行了搭配。Outfit 是一款几何无衬线字体，负责所有的 UI 文本：导航标签、按钮文本、正文内容、元数据详情。它在屏幕上非常清晰，即使在小尺寸下也保持着易读性。Ovo 是一款中对比度的衬线字体，用于标题和主要大标题。这种搭配赋予了页面一种宁静的杂志感。它看起来是有设计的，而不是套用模板。最重要的是，两种字体都通过单次字体服务调用或自托管文件加载。没有布局偏移，没有无样式文本闪烁，也没有在初始渲染后通过脚本切换字重的情况。
悬浮胶囊菜单
导航往往是作品集因自身负担过重而崩溃的地方。全屏覆盖菜单、交错的动画脚本，以及需要四十行 JavaScript 来切换类名的汉堡图标。我统统都不想要。
我构建了一个悬浮的玻璃拟态（glassmorphic）胶囊菜单。它是一个单一的水平容器，边缘圆润，固定在视口顶部附近。玻璃拟态效果来自于半透明的背景颜色和 backdrop-filter: blur() 属性。它悬浮在内容之上而不遮挡内容，可以立即访问每个章节，并在较小的视口中优雅地折叠，无需重新设计。这种效果看起来很现代，是因为由浏览器处理合成，而不是靠 Canvas 库。