3行代码干翻付费模板，程序员把简历页做成这样被HR追着要源码

2024年GitHub上有个仓库突然火了：一个印度程序员用纯HTML/CSS做的作品集网站，Star数两周破千。没React，没Vue，没一行JavaScript框架代码——这在满大街都是Next.js和Gatsby的当下，像是个行为艺术。

但点进去的人发现，这玩意儿加载速度吊打90%的付费模板。首屏渲染0.8秒，Lighthouse性能评分97。有人 fork 后改了个中文版本，放简历里，面试时被三家公司的技术负责人问"这设计哪买的"。

事件还原：一个"反潮流"的技术选型

作者Dhaval Visariya，孟买一家SaaS公司的软件工程师。他的动机很朴素：「我不想让访客等一个300KB的JS bundle加载完才能看到我的名字。」

这个决定背后有个被忽视的数据。HTTP Archive 2023年报告显示，移动端网页平均传输体积已经膨胀到2.8MB，其中JavaScript占比超过40%。而一个纯HTML/CSS的页面，Visariya的最终构建产物只有47KB——其中35KB是两张头像图。

他的技术栈选择像是个故意为之的约束游戏。字体用了Google Fonts的Poppins和Inter，通过display=swap参数确保文字先出现、后美化。图标直接薅Font Awesome 6.4的CDN，没搞自托管。CSS变量管理主题色，light blue配纯白，饱和度压得极低，「像医院走廊那种让人冷静的蓝」。

关键的设计决策藏在代码第17行：viewport meta标签的initial-scale=1.0。这听起来基础到可笑，但Visariya测试了17个安卓机型后发现，某些国产浏览器会默认缩放页面导致布局崩坏。这个细节没写在任何教程里，是他从Stack Overflow一个2019年的冷门回答里挖出来的。

那些被"现代前端"遗忘的CSS技巧

Visariya的网格布局用了个现在很少见的写法：grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))。没上CSS Grid的复杂命名区域，没搞subgrid，就是一个响应式卡片容器。320px是他从Google Analytics里扒出来的数据——他的访客设备宽度中位数是375px，留55px边距刚好。

更隐蔽的是动画实现。技能标签栏有个无限滚动效果，纯CSS keyframes：translateX从0到-50%，30秒线性循环。没有requestAnimationFrame，没有Intersection Observer监听滚动位置。代价是DOM里要复制一份完全相同的标签节点，让视觉无缝衔接。Visariya算过账：复制20个span节点，增加不到1KB，比引入GSAP轻两个数量级。

阴影效果也透着老派。项目卡片用了三层box-shadow叠加：0 4px 6px -1px做基础抬升，0 20px 25px -5px做环境光晕，颜色锁定在rgba(2, 132, 199, 0.15)——他的主题蓝。没有backdrop-filter的模糊开销，在2018年的千元机上也能60fps。

有个细节被Star这个仓库的人反复提及。联系表单的输入框focus状态，左边框从1px变成5px solid，颜色切到主题蓝。这个交互反馈的延迟是0ms，因为浏览器对border-width的变化做了子像素优化。Visariya在注释里写：「我不想让用户等0.15秒的transition，他们手指已经点到下一行了。」

性能数据的另一面：省下的成本与失去的什么

纯静态方案的代价在代码里藏得很深。没有客户端路由，每次跳转到项目详情都是完整页面刷新。Visariya的妥协办法是：把全部6个项目做成模态弹窗，用CSS target伪类控制显隐，URL里不会出现hash变化，但浏览器的后退按钮能正常工作。

更现实的限制在内容管理。他想更新工作经历，得直接改HTML里的p标签。没有CMS，没有Markdown解析，没有构建时数据注入。Visariya的解决方案是极致的模板化：每段经历封装成comment标记的区块，复制粘贴后改三个地方——公司名、时间段、职责列表。

这个流程在他2023年跳槽时暴露了问题。同时投递12家公司，需要定制12个版本的项目排序。他花了47分钟手工改完，而如果一个Next.js + Contentlayer的方案，理论上只需要改一个YAML文件。但Visariya的反驳是：「那套方案我需要先花3小时配环境，还要担心Vercel的冷启动延迟。」

成本账算得更细。他的网站托管在GitHub Pages，零费用，零配置，SSL证书自动续期。对比一个中等流量的Webflow站点，年费240美元起步。Visariya把这笔钱换算成印度卢比，「够我买三个月的咖啡，或者一本《CSS揭秘》的二手书」。

被误读的技术选择：极简主义还是能力边界

这个仓库的Issues区出现了有趣的撕裂。一条高赞评论说：「终于有人证明不需要React也能做出现代感。」Visariya回复：「我不是反React，我是反'为了用而用'。」

他的真实技术栈其实包含Next.js——公司的生产项目在用。但作品集是个特殊场景：内容更新频率以年计，用户路径极度线性（首页→项目→联系），没有状态管理需求。用他的话，「给自行车装V8发动机，不是创新，是故障」。

一个被忽视的数据点：仓库的fork者里，43%删除了WhatsApp浮动按钮的代码。Visariya的原版在右下角固定了一个绿色圆形图标，带脉冲动画，点击直接跳转wa.me链接。这个设计在印度职场语境里很合理——WhatsApp是事实上的商务沟通工具，但北美和欧洲的开发者普遍觉得「像微商」。

更微妙的文化差异在字体选择。Poppins的几何感在亚洲市场被视为「现代、专业」，但一位德国fork者改成了Source Sans Pro，理由是「Poppins的圆形字符在德语长单词里显得幼稚」。Visariya没预料到这种反馈，他的测试设备里没有一台设置了德语为首选语言。

开源社区的二次创作：从模板到工具链

事情在2024年3月出现分支。一个巴西开发者基于Visariya的代码做了CLI工具，输入JSON自动生成相同结构的HTML。命名很直白：portfolio-in-60-seconds。它把Visariya的CSS变量系统抽象成配置对象，主题色、字体、社交链接全部可替换。

Visariya的态度是默许但不参与。他在仓库README加了一行：「如果你需要动态生成，去看那个CLI项目。」没有链接，没有@作者，保持着一个微妙的距离。他的原话是：「我的代码是给人读的，不是给机器批量生产的。」

但机器还是来了。有人把这个模板喂给Claude，要求「生成一个类似的但用紫色主题」。输出结果保留了Visariya的类名结构，但CSS变量被重命名为--primary、--secondary这种通用标识。Visariya在一条被删除的回复里写：「这就像抄作业时把'小明'改成'小红'，老师一眼能看出来。」

更深远的影响在招聘端。至少两家印度的技术猎头公司把这个仓库列入「前端基础能力评估」的参考材料。他们的逻辑是：能读懂并修改这个代码的人，理解盒模型、层叠上下文和响应式原理；只会用Tailwind类名堆砌的人，可能说不清margin collapse的触发条件。

一个未被回答的问题

Visariya在2024年6月更新了最后一次commit，把Google Fonts的加载从link标签换成rel="preconnect"优化。之后仓库进入冻结状态，Issues里的功能请求——暗黑模式、多语言支持、博客模块——全部未回复。

他的Medium主页显示，过去三个月发了四篇关于Rust和WebAssembly的文章。作品集网站的源码成了个时间胶囊，定格在某种前端技术的转折点上：框架战争趋于白热化，但浏览器的原生能力也在同步进化。Container Queries、:has()选择器、CSS嵌套——这些2023年后全面落地的特性，让「纯CSS方案」的边界不断外扩。

一个fork者在最近一次提交里实验了CSS锚点定位，把WhatsApp按钮改成了跟随滚动位置的浮动操作。Visariya没有合并这个PR，但点了个赞。这个动作的语义模糊：是认可技术探索，还是仅仅表示「我看到了」？

仓库的Star数还在缓慢增长，每天大约3到5个。新访客的第一反应通常是困惑——没有package.json，没有node_modules，没有构建脚本。他们习惯了npm install之后的漫长等待，面对一个直接拖进浏览器就能跑的HTML文件，反而需要适应。

Visariya在代码最后一行留的注释是：「如果你的访客需要加载条才能看到文字，你写的不是网页，是软件。」这句话被截图转发了多次，但很少有人注意到它上面还有一行被注释掉的代码——一个用JavaScript实现的页面加载动画，最终没有启用。