如何快速搭建个人作品集网站：免费 HTML 作品集模板完整指南-开发者社区

如何快速搭建个人作品集网站：免费 HTML 作品集模板完整指南

【免费下载链接】portfolio-html🌍 Open source portfolio template built with plain Html, CSS and JavaScript for developers to create their portfolio website项目地址: https://gitcode.com/gh_mirrors/po/portfolio-html

portfolio-html是一个用纯 HTML、CSS、JavaScript 写的开源个人作品集网站模板，不依赖任何框架，克隆下来浏览器直接打开就能改。适合需要快速做出个人展示页的开发者、学生和自由职业者。

一、🎯 它到底解决什么问题

从零写一个作品集页面，光布局、配色、响应式就得磨掉一两个晚上。这个模板把这些都替你做好了：固定的导航栏、自我介绍首屏、六宫格项目展示、社交链接页脚，还有开箱即用的深色模式切换。

它适合三种人：

求职中的开发者，想挂一个能放项目截图的在线主页
学生，需要展示课程作业和毕业项目
自由职业者，需要一个能直接发给客户的作品陈列页

整个仓库就三个核心文件加一个素材目录：src/index.html是页面主体，src/css/放样式，src/js/放交互脚本，没有构建步骤，不需要装任何依赖。

二、🚀 从克隆到打开浏览器的三步路径

环境准备：什么都不用装。它不是 npm 项目，不需要 Node，不需要npm install，也不需要 live-server。一个文本编辑器加一个浏览器就够了。

把仓库拉到本地：

git clone https://gitcode.com/gh_mirrors/po/portfolio-html

首次运行：用编辑器打开仓库里的src/index.html，浏览器预览一下，或者用任意静态服务器起一下，比如：
```
python3 -m http.server 8000
```
然后访问http://127.0.0.1:8000/src/即可。

到这里，你的作品集网站已经在本地跑起来了。

三、✨ 让它真正好用起来的几个关键操作

把名字和简介换成你的打开src/index.html，把Hi I'm Franklin改成你的名字，下面两行<h2>是你的头衔（建议五到十个字），再改一下那段 20 词左右的自我介绍。这是访客看到的第一句话，值得认真写。

替换头像和 Logo首屏头像由src/assets/profile-image.svg控制，左上角 Logo 对应src/assets/logo.png。把同名文件覆盖掉就行，不用动 HTML。头像建议直接放你 GitHub 的个人头像地址，以后头像更新，网站自动跟着变。

改项目卡片的内容项目区默认是 3 列 2 行共六张卡片，每张卡片里<h3>是项目名，<p>是技术栈，右上角两个图标分别是代码仓库链接和线上访问链接。卡片不够就复制一段.card整块再改；布局想换列数，去src/css/style.css找.project的grid-template-columns改一个数字。

顺手调一下深色模式导航栏右侧的太阳月亮开关已经内置，切完会自动记住你的偏好（存在 localStorage），下次访问还是你选的样式。想换主题色，改style.css里:root的 CSS 变量即可，深色模式在[data-theme="dark"]里各有一套。