ditto03/Portfolio
GitHub: ditto03/Portfolio
一个面向 SOC 分析师的纯静态个人作品集网站模板，通过单一 JS 数据文件驱动所有页面内容，展示安全项目案例与专业技能。
Stars: 0 | Forks: 0
# Ditto D — 个人作品集网站
一个简单的静态网站：包含一个主页以及每个项目（“案例文件”）的详情页。
## 文件
```
index.html → homepage
case-01.html → Splunk SIEM project detail page
case-02.html → Sign-language ML project detail page
css/style.css → all styling
js/data.js → EDIT THIS to update your info (skills, projects, certs, docs, education, contact)
js/render-index.js → renders homepage sections from data.js (no need to touch)
js/common.js → renders nav/footer contact info + scroll animations (no need to touch)
```
## 编辑你的内容
打开 `js/data.js`。主页上的所有内容——你的技能、项目、证书、
文档、教育背景和联系信息——都是该
单一文件中普通的 JavaScript 数组或对象。在那里修改文本，每个页面都会自动更新。
要添加**第三个项目**：
1. 在 `js/data.js` 中的 `CASES` 数组中添加一个新条目，并包含一个类似 `"case-03.html"` 的 `page` 字段。
2. 复制 `case-02.html`，将其重命名为 `case-03.html`，然后重写里面的内容。
## 免费托管（任选其一）
### 选项 A — Netlify Drop（最快，无需账户即可预览）
1. 访问 https://app.netlify.com/drop
2. 将整个文件夹拖拽到页面上。
3. Netlify 会立即为你提供一个可访问的 URL。如果你想永久保留它并获取一个自定义子域名，可以创建一个免费账户。
### 选项 B — GitHub Pages（如果你想要一个持久且专业的 URL，这是最佳选择）
1. 创建一个新的 GitHub 仓库，例如 `ditto-portfolio`。
2. 上传所有这些文件（保持文件夹结构：`css/`、`js/` 和 `.html` 文件位于根目录）。
3. 进入仓库的 **Settings → Pages**。
4. 在 "Build and deployment" 下，设置 **Source: Deploy from a branch**，branch 为 `main`，folder 为 `/ (root)`。
5. 保存。GitHub 会给你一个类似 `https://.github.io/ditto-portfolio/` 的 URL。
### 选项 C — Vercel
1. 访问 https://vercel.com/new
2. 导入文件夹/仓库并部署——对于像这样的静态网站，无需任何配置。
## 注意事项
- 这个网站没有后端——一旦你将 PDF 上传到某处（例如同一个
仓库、Google Drive 或你的托管服务提供商），你的简历/证书的 "Download" 链接以及
`resumeHref` 字段就需要真实的文件链接。
- 所有内容都是纯 HTML/CSS/JS——没有构建步骤，也不需要安装任何依赖。
标签：CMS安全, HTML/CSS, JavaScript, 个人作品集, 后端开发, 多模态安全, 数据可视化, 静态网站