这是一个极简、正式且专业的个人介绍网站模板,专为研究员、工程师和学者设计。 本项目零构建依赖,使用纯 HTML5 + CSS3 + Vanilla JS 编写,并利用 Tailwind CSS (CDN) 进行快速样式排版。
- 极速部署:无需
npm install,无需任何构建步骤,完美适配 GitHub Pages。 - 数据与视图分离:所有个人履历信息存放在
js/data.js中,不懂前端也能轻松修改。 - 响应式设计:完美适配 PC、平板和手机端。
- 专业排版:学术风格,色彩克制,注重留白和阅读体验。
- 下载或克隆本仓库到本地。
- 直接在文件管理器中双击打开
index.html即可在浏览器中预览效果。
使用文本编辑器(如 VS Code、记事本)打开 js/data.js 文件,您会看到如下结构:
window.portfolioData = {
personal: {
name: "您的姓名",
title: "研究员 / 算法工程师",
// ...修改您的简介、联系方式和社交链接
},
education: [
// ...修改您的教育背景
],
publications: [
// ...修改您的论文列表
],
experience: [
// ...修改您的工作经历
]
};只需将引号内的文本替换为您自己的真实信息,保存后刷新浏览器即可看到变化。
(提示:如果您有自己的头像,请将照片重命名为 avatar.jpg,放入 images/ 文件夹中,并在 index.html 中的注释处解除 <img> 标签的注释,或者直接修改 data.js 中的头像路径。)
想要让其他人通过 https://<您的用户名>.github.io 访问您的简历?只需 3 步:
- 创建仓库:在 GitHub 上创建一个新的公开仓库,命名为
<您的用户名>.github.io(注意:必须和您的 GitHub 用户名完全一致)。 - 上传文件:将本项目文件夹中的所有文件(
index.html,css/,js/,images/等)推送到该仓库。 - 完成:等待约 1 分钟,浏览器访问
https://<您的用户名>.github.io,您的个人网站就已经上线了!
(如果您使用其他名称的仓库,也可以在仓库的 Settings -> Pages 中选择 main 分支作为 Source,GitHub 会为您生成一个在线链接。)