个人站最常见的失败方式不是做得丑，是做错了给谁看。找工作的人做了一个满屏动效的艺术网站，HR 三十秒里找不到你会什么；接单的设计师做了一份规规矩矩的在线简历，客户看完不知道你的审美长什么样。这两件事需要的页面结构是相反的。
下面这 14 款是童哲网上架的个人简历与作品集类模板。我按访客是谁分了三组：第一组给 HR 和甲方对接人看，简历和履历是主角；第二组给潜在客户和同行看，作品是主角，页面本身就是能力证明；第三组是工作室和创意机构用的，要展示的不只是你一个人，还有团队、服务线和报价。
每款都标了框架版本、页面数量，也写清楚了它的限制。
第一组 · 求职与接单（01 - 04）—— 简历和履历是主角
01. 带独立简历页的个人品牌站 —— 「下载简历」和「雇佣我」并排放
Bootstrap 5.3.3 11 个页面 明暗双模式
首屏用打字机式的职业标签轮播做自我介绍，旁边并排放着「下载简历」和「雇佣我」两个按钮——这个安排很务实，因为来看你个人站的人本来就分两类，一类要把你的资料存下来带走，一类想直接联系你，两条路都给了出口，不用猜访客想干什么。
它最值钱的是独立的在线简历页。教育背景、工作经历、技能条完整铺开，比首页上一句自我介绍有说服力得多。栏目用罗马数字编号排列，动线清楚：首页、关于、简历、服务、项目、联系，另配报价页、FAQ、博客，一共 11 页。
独立简历页，履历、技能与教育背景可完整展开
「下载简历」+「雇佣我」双动作按钮，两类访客各有出口
报价页与 FAQ，接单方式和交付周期提前说清
11 页轻量精炼，改文案换图当天能上线
它整体是深色基调（支持明暗切换）。如果你的作品是浅色系的平面设计、白底产品图或者淡雅摄影，深色底会把作品衬得发闷，记得先切到亮色模式看一眼再定。
02. 电子名片式个人主页 —— Ajax 切换要留个心眼
HTML Ajax 无刷新 5500+ 图标
走「电子名片」路线：简历、作品和联系方式压缩在一条连贯的浏览动线里，页面干净留白合理。点导航时内容平滑过渡而不整页刷新，体验接近 App，配全屏背景和 Ajax 联系表单，留言直达邮箱。附带 Font Awesome 5 Pro，5500 多个图标随便挑。
页面数量不多，但每一页都用得上：独立简历页（履历时间线 + 技能进度）、作品集列表加两种作品详情排版、博客列表与详情、404。
Ajax 无刷新切换是它的卖点，也是唯一需要你上线前专门验一次的地方：这类做法如果没有为每个栏目生成独立 URL，搜索引擎抓到的可能只有首页那一屏，「作品」「简历」这些内容进不了索引。判断方法很简单——点进作品页，看浏览器地址栏变没变；再把那个地址单独复制到新标签页打开，看能不能直接落到作品内容上。两条都通过就没问题；不通过，要么让开发补上 History API 和对应的路由，要么就接受它当成一张纯名片用（作为名片，它的完成度是够的）。
03. 带简历时间线的作品集站 —— 结构偏紧凑
Bootstrap 5.3.8 简历时间线 悬停交互
面向开发者、设计师和自由职业者，版式简洁现代，细节处理得比较精致。内容区块该有的都有：Hero 首屏、作品展示、服务介绍、项目画廊、客户评价、简历时间线、行动召唤区。框架版本是本文最新的一档（5.3.8）。
选它之前注意一件事：官方描述通篇讲的是「版块」而不是「页面」——Hero 版块、作品版块、简历时间线版块、CTA 区，没有像第 01 款那样给出明确的页面清单和数量。这通常意味着结构偏紧凑，内容集中在少数几个页面里。对个人站来说这不见得是坏事，动线短、维护省心；但如果你打算给每个项目做独立详情页，或者想认真做博客，得预留自己扩栏目的工作量。
04. 八种配色预设的个人主页 —— 换个色就是另一个气质
Bootstrap 5.3.2 8+ 配色预设 GSAP + Odometer
多套首页布局配 8 种以上动态配色预设，一键切换。这一点对个人站比对企业站重要得多——企业有品牌色，个人多半没有，能在冷淡风和鲜明风之间来回试，比对着代码调 hex 值靠谱。动效用 GSAP，加 Swiper 轮播和 Odometer 数字滚动（用来展示「完成项目 120+」这类数据），内容区块关于我、技能、作品集、博客、联系一应俱全。
技术栈上要留意：它是基于 jQuery 构建的，加上 GSAP、Swiper、Odometer，依赖比同组其他几款多。纯静态个人站里这不算问题，加载几个库而已；但如果你想把这套页面搬进自己的 Vue / React 工程当作品集页，这几个 jQuery 时代的组件会比较麻烦。另外 Odometer 那种数字滚动，数据得真实——「服务客户 500+」写在一个刚入行两年的人主页上，反而露怯。
第二组 · 创作者作品集（05 - 08）—— 作品是主角，页面本身也是作品
05. 六页极简的品牌设计师站 —— 首屏就把背书摆出来
Bootstrap 5.3.8 6 个页面 获奖背书位
定位是品牌设计、动态图形与数字体验方向的创作者。首屏把专业定位、获奖背书（Awards、Behance、CSS Design Awards 一类）和作品卷轴入口放在一起，来访的客户或猎头几秒内就能判断你的层级——高端接单场景里，这个信息编排比多铺十个页面有用。
作品部分有列表页和单个作品详情页，每个项目能完整交代客户、年份、参与角色与创作方向。「参与角色」这一栏值得特意填：设计行业里同一个项目挂十个人名是常事，写清楚你负责的是哪一段，比含糊地把整个项目算成自己的更经得起追问。随笔/日志部分也有列表与详情，用来沉淀方法论。
它只有 6 页，克制到位，排版节奏本身就是卖点。但这个克制有前提：那个获奖背书展示位，你得真的有东西可放。 没有奖项和平台收录的话，那一块要么空着显得寒酸，要么硬填客户 Logo，气质就变了。刚起步的创作者可能更适合第 06、08 款。
06. 暗色调简历兼作品集 —— 首页给了四个版本
Bootstrap 5.3.2 4 个首页版本 暗色 UI
「简约克制 + 暗色调」路线，深色 UI 让作品成为视觉主角，配丝滑动画和创意化排版。首页给了 index-v2 / v3 / v4 多个版本可挑，博客详情、作品详情这些常用页面齐备，目录结构清晰，二次开发不费劲。
它和第 01 款的差别在重心：01 是「简历页很硬，作品是佐证」，这一款是「作品是主体，履历顺带交代」。设计师、摄影师、艺术总监这类靠视觉说话的职业更适合后者。
深色的老问题还是要提：作品图如果本身是白底或浅色，放进深色页面会出现一块块刺眼的亮斑，整页节奏会散。解决办法通常是给作品图统一加一层深色底衬或者做圆角容器，这属于上线前必做的一步，不是模板的锅，但得算进工时里。
07. 三套职业定位首页 —— 栏目最全的个人站
Bootstrap 5.3.7 明暗双模式 GSAP
三套首页分别是网页设计师、创意开发者、个人作品集，按职业定位选，不用改结构。配套页面在本组里是最全的一档：关于我、服务列表与详情、项目作品与详情、价格方案、客户评价、FAQ、博客列表与详情、联系页、404。深浅双模式切换，动效用 GSAP。
价格方案页 + 客户评价页 + FAQ 这个组合，是「接单型个人站」和「展示型个人站」的分水岭。 自由职业者最耗时的往往不是做项目，是反复回答同样的问题：怎么收费、周期多久、改几稿、怎么付款。把这些前置到页面上，来询价的人质量会明显提升。
它的首页只有 3 套，在本文里属于偏少的——同组第 06 款有 4 个版本，第三组几款动辄六套十套。但对个人站来说 3 套完全够用，你只会用其中一套，多出来的版式主要是选型时的对比参考。
08. 赛博终端风开发者主页 —— 代码雨和命令行界面
HTML + CSS + Canvas 终端交互 代码雨
把黑客终端和代码编辑器做进界面，配动态矩阵代码雨和暗黑霓虹质感，用 Canvas API 实现。它的思路很清楚：与其在简历里写「熟练掌握前端技术」，不如让页面本身就是证据。 一个能把终端交互做得像模像样的个人主页，技术基因是直接看得见的，这比技能条上那些百分比可信多了。
但它的适用面在本文里也是最窄的：
职业指向极强——后端、安全、基础架构方向的工程师用它很加分；UI 设计师、产品经理、市场岗用它会显得错位
Canvas 代码雨是持续动画，会一直占着 GPU 和电量，移动端尤其明显。建议做两件事：页面不可见时（visibilitychange）暂停绘制，以及在 prefers-reduced-motion 下换成静态背景
可读性要自己把关——霓虹绿配纯黑是这类风格的标配，但正文长段落用这种配色读起来很累，正文区建议降饱和度
选它的前提是你确实是这一挂的人。为了酷而用，气质对不上，反而扣分。
第三组 · 创意机构与工作室（09 - 14）—— 展示的是团队、服务线和报价
09. 52 页明暗双版的创意机构站 —— 页面数量要换算一下
Bootstrap 5.3.2 52 个页面 5 种作品集陈列
10 套首页排版，每套都配了对应的深色版本，同一批案例换个底色就是两种气质。真正实用的是作品集给了五种陈列形态：横向滚动、纵向瀑布、视差滚动、极简留白、智能筛选。这一条比首页套数重要得多——平面、动效、空间、影视这几类项目的媒介特性完全不同，横向滚动适合系列海报，纵向瀑布适合摄影，智能筛选适合项目多而杂的机构，能选是真的能省事。
项目详情、服务详情、团队成员详情都是独立页面，方法论和团队背景都讲得开。
关于「52 页」要换算一下：全站是明暗双版并行的，也就是说这 52 个文件对应的大约是 26 个真实栏目，每个栏目两份。 这不是缩水，双版本本来就是它的卖点，但选型时按 26 个栏目去比，才和其他模板在同一个量级上。另外双版并行意味着改一处内容要改两个文件，长期维护记得约定好。
10. 12 套 Demo 首页 —— 同一路数里选择最多的一款
Bootstrap 5.0.2 12 套 Demo 明暗主题
先说清楚一件事：本组的第 10、11、12 款是同一个路数的三兄弟——都是简约克制的创意机构风、都基于 Bootstrap 5 网格加 Swiper、都过 W3C 校验、作品集布局都很丰富。视觉气质相近，真正的差别在首页套数、内页数量和框架小版本上。我把三款并排放在这里，就是为了让这个差别一眼可比，而不是把同一件事换三种说法讲三遍。
这一款是三兄弟里选择最多的：12 套 Demo 首页 + 明暗主题模式，换风格比较从容。服务、博客、联系等常用内页齐备。框架是 Bootstrap 5.0.2。
选它的理由基本只有一条：你还没想好机构官网要什么调性，想在一个包里多试几种。反过来说，如果你已经很清楚要哪种气质，多出来的十套 Demo 就是十份用不上的文件，删起来还得小心别删到共用资源。
11. 六套首页 + 内页最厚的一款 —— 但官方数字自相矛盾
Bootstrap 5.0.2 6 套首页 10+ 项目展示页
三兄弟里内页最厚的。6 套差异化机构首页，加上 10 个以上的项目案例展示页——注意是「项目案例页」不是「项目条目」，也就是说案例的呈现版式本身就有十来种可选，这对作品类型跨度大的机构挺有用。服务、作品、案例、博客、联系这些栏目一次到位。
有一处得如实说明：官方描述里的内页数量前后不一致——正文写「配合 10+ 项目案例展示页与 45+ 内页」，下面的特色清单里写的却是「35+ 完整内页」。两个数差了十页。这种情况在模板描述里不算罕见（通常是不同批次的文案没同步），选型时按较小的数字估比较稳妥，也就是 35 页上下。不影响使用，但如果你是冲着「45 页」去的，要有心理准备。框架版本 Bootstrap 5.0.2。
12. 六套首页的基础款 —— 三兄弟里最轻的
Bootstrap 5.0.0 6 套首页 Swiper
同样是 6 套差异化机构首页、简约克制的视觉、Bootstrap 5 网格 + Swiper 动画、W3C 校验通过。作品集布局丰富，服务与博客页面齐备。
它和第 11 款的区别就一句话：官方没有给出内页数量。 描述里只说「丰富的作品集布局」和「服务与博客页面布局齐备」，没有像第 11 款那样列出具体页数。结合它的框架版本是三兄弟里最早的 5.0.0，可以判断它是这一系列里最基础的一款。
什么时候反而该选它：你要做的只是一个「有作品、有服务介绍、能联系上」的轻量机构站，不打算铺案例矩阵和内容营销。这种情况下第 11 款那 35 页大部分是负担，这一款反而干净。三兄弟里如果只能挑一个通用推荐，我会给第 11 款（内页最全）；追求选择空间给第 10 款（12 套 Demo）；只要够用给这一款。
13. 资源最全的机构模板 —— 但兼容列表里写着 IE9
Bootstrap 5.3.5 24+ HTML 近千枚图标
5 套多页式首页，24 个以上 HTML 文件，附带的资源相当厚：Revolution Slider 幻灯插件、Menuzord 响应式大菜单、Google 字体、Font Awesome 等多套图标库（近千枚）、AJAX 带验证的联系表单、data 属性配置的谷歌地图、响应式视频短代码。GSAP 动效配视差滚动，Retina 屏适配。
要选它，有个信号得先看懂：它的浏览器兼容列表里写着「Edge、IE9+、Firefox、Safari、Opera、Chrome」。 IE9 早已退出历史舞台，还把它写进兼容承诺里，说明这套设计的血统偏老，中间大概经历过升级到 Bootstrap 5（标注的框架版本是 5.3.5）但描述文案没有完全跟着更新。这不代表它不能用——Revolution Slider 和 Menuzord 这类插件的功能是实打实的，视差和大菜单做得也确实到位——但你要清楚它的技术底子是 jQuery 那一代，跟第 09 款那种纯 Bootstrap 5 的现代结构不是一回事。想要资源多、能拼出复杂首屏，它合适；想要干净轻量的代码，选别的。
14. 6 套多页 + 6 套单页 + RTL —— 代理机构的规模款
Bootstrap 5.3.0 50+ 内页 RTL 支持
体量是本文最大的一款：6 套常规首页 + 6 套单页（One-Page）风格首页，配 50 个以上内页。多页版和单页版成对给出这一点很实用——机构官网用多页，做提案演示或者投放专题时用单页，视觉是一套，不用重做设计。还支持 RTL 从右至左布局，接中东客户的代理公司用得上。
另外它有多套 MegaMenu 大型导航样式可选，业务线多的代理机构（SEO、投放、内容、设计各一条线）能把二级栏目摊开展示。
有一处冗余值得动手清理：它同时内置了 Swiper 和 OwlCarousel 两套轮播组件。 这两个库解决的是同一类问题，OwlCarousel 还依赖 jQuery。多半是不同版式各用了一套所致，上线前建议确认你选中的那套首页到底用了哪个，把另一个从引用里去掉——白白多加载一个轮播库并不划算。
怎么挑：想清楚谁会打开这个链接
个人站和作品集的选型，说到底就是一句话——你把这个链接发给谁。
发给 HR 和面试官——他们在几十份简历之间快速切换，停留时间以秒计。要的是「三十秒内看懂你是谁、会什么、做过什么」。选第 01、02 款，把简历页做扎实，首屏别放需要等待的动画。作品可以有，但不该挡在履历前面。
发给潜在客户——他们在判断「这个人能不能解决我的问题、要多少钱、靠不靠谱」。选第 07 款那种带价格方案、客户评价和 FAQ 的，把商务信息前置。第 05 款的作品详情页要认真填客户、年份和你的角色，这是客户真正会看的部分。
发给同行和评委（投奖、找合作）——他们看的是审美和完成度，页面本身就是作品。选第 05、06、08 款，视觉可以更有主张，甚至可以牺牲一点易用性去换风格。
代表工作室对外——展示的不是你一个人，是团队、服务线、报价和交付流程。选第三组，按规模挑：小工作室第 12 款够用，案例多的选第 11 款，业务线复杂或有出海需求的选第 14 款。
还有一条：如果你同时要应付两种访客（比如既求职又接单），别指望一个首页解决，把简历页和作品集页做成两个独立入口，发链接时发对应的那一个。
常见问题
Q：作品集到底该放几个项目？
A：宁少勿滥，通常 6 到 10 个就够，而且要按质量排序而不是按时间。原因很直接：访客对你的判断会被最弱的那个作品拉低，尤其是排在前面的。翻十五个项目没人有耐心，但认真看三个讲透的案例是可能的。比数量更重要的是每个项目要交代清楚三件事——问题是什么、你做了什么、结果如何。本文第 05、09 款的作品详情页留了客户、年份、角色这些字段，就是给这个用的。只贴一张效果图不写背景，等于让人猜。
Q：在线简历页和上传一份 PDF，哪个更好？
A：两个都要，用途不同。在线简历页负责被搜到、被随手点开、在手机上能读，还能随时更新不用重新发文件；PDF 负责被下载、被转发进内部系统、被打印出来带进面试间——很多公司的招聘流程到今天还是走 PDF。所以本文第 01 款把「下载简历」做成首屏按钮是有道理的。要注意的是保持两份内容一致，改了网页忘了换 PDF，被问起来会很尴尬。
Q：个人站需要写博客吗？
A：看你想不想被陌生人搜到。纯粹发给认识的人看，博客是负担，停更的博客比没有博客更减分（最新一篇停在两年前，传递的信号并不好）。但如果你希望有人通过搜索找到你，博客几乎是个人站唯一的自然流量来源——首页和作品页能覆盖的关键词非常有限，而一篇讲清楚某个具体问题的文章，可以持续被搜。判断标准是：你能不能保证一个月至少一篇。 做不到就把博客栏目删掉，别留个空壳。本文大部分模板的博客都是独立页面，删掉不影响其他栏目。
Q：模板里的技能进度条要不要用？
A：谨慎用。「JavaScript 90%、Photoshop 85%」这种表达的问题在于分母不明——90% 是相对谁？相对你自己去年，还是相对行业顶尖？懂行的人看了不会当真，不懂行的人也无从判断。更有效的替代是：把技能换成具体的东西——用过的工具和框架列清单、做过的项目类型分类、或者直接让作品说话。如果一定要保留（有些模板的版式确实靠这块撑），至少把百分比换成「熟练 / 常用 / 了解」这类分级描述，或者标上使用年限。
