joshbotz/your-security-portfolio

# 安全作品集模板 这是一款专为云安全专业人士设计的实用作品集入门模板，帮助他们快速发布一个简洁、专业的网站。该模板围绕“AI 增强型从业者”的定位进行设计，因此默认文案读起来就像出自一位真正的云安全工程师之手，而不是一份课程结业作品。 **[→ 使用此模板](https://github.com/joshbotz/your-security-portfolio/generate)** 在 GitHub 上创建你自己的副本。 **[→ PORTFOLIO-GUIDE.md](PORTFOLIO-GUIDE.md)** — 完整指南：获取副本 → 个性化设置 → 添加项目 → 部署 → 分享。 此模板可帮助你： - 清晰地展示你的背景和技术方法 - 展示项目、实验室和技术文章 - 让雇主、同行和招聘人员更容易了解你的工作 - 快速启动 MVP 作品集，然后随着时间的推移进行改进 ## 适用人群 希望展示以下内容的云安全专业人士： - AWS 和云安全项目 - 检测和安全工具相关工作 - 架构笔记和技术文章 - 注重实施的实验室 - 实用的安全文档 ## 60 秒预览 无需设置 —— 只需在浏览器中打开 `index.html` 即可立即预览模板。 或者使用本地服务器： ``` npx serve . # 或：python3 -m http.server ``` ## 从这里开始 填写 5 个字段即可获得可发布的作品集： 1. 将此模板克隆到你自己的 GitHub 帐户。 2. 打开 `assets/js/config.js`。 3. 更新顶部的 **5 个必填字段**：名字、姓氏、职位名称、电子邮件、简历 URL。 4. 将 `assets/img/headshot.png` 替换为你自己的照片。 5. 在浏览器中打开 `setup.html` 以验证所有设置是否正确。 6. 准备好后进行部署。 就是这样。其他所有内容均已预填，开箱即用。 ## 文件结构 ``` YOUR-SECURITY-PORTFOLIO/ ├── assets/ │ ├── css/ │ │ └── style.css │ ├── img/ │ │ ├── favicon.svg │ │ ├── headshot.png │ │ └── og-image.png │ └── js/ │ ├── config.js ← Edit this (5 required fields + optional settings) │ ├── content.js ← Optional deeper page content │ └── main.js ← Binding engine (don't edit) ├── docs/ │ ├── architecture-notes.md │ ├── student-notes.md │ └── troubleshooting.md ├── projects/ │ ├── portfolio-platform.html │ └── project-template.html ├── scripts/ │ ├── deploy-site.sh │ └── validate.sh ├── site/ │ ├── main.tf │ ├── headers.tf │ ├── domain.tf │ ├── outputs.tf │ ├── variables.tf │ └── terraform.tfvars.example ├── .github/ │ └── workflows/ │ └── deploy.yml ├── setup.html ← Setup checklist (open locally to verify config) ├── 404.html ├── about.html ├── contact.html ├── index.html ├── projects.html └── README.md ``` ## 配置工作原理 该模板按加载顺序使用三个 JavaScript 文件： ### config.js — 首先编辑此文件 最顶部是 **5 个必填字段**。其下方是：可选链接（LinkedIn、GitHub、预约链接）、技能/认证、FAQ、“正在构建”项目，以及所有预填的入门文案。首次部署时，你可以忽略必填字段下方的所有内容。 ### content.js — 可选，已预填 包含“关于”、“项目”、“联系”和项目详情页面的更深层内容。开箱即用。删除此文件，网站仍能正常运行。 ### main.js — 请勿编辑 将配置连接到页面的绑定引擎。自动渲染 FAQ、技能、“正在构建”项目，并处理社交媒体元标签。 ## 当前页面 - `index.html` — 主页，包含精选项目、关注领域、“我正在做什么”以及 FAQ - `projects.html` — 项目作品集中心 - `about.html` — 背景、方法、方向、技能和认证 - `contact.html` — 联系方式（电子邮件、预约链接、LinkedIn、GitHub）+ FAQ - `404.html` — 自定义未找到页面 - `projects/portfolio-platform.html` — 精选项目详情 - `projects/project-template.html` — 用于新项目的入门模板 ## 主要功能 ### 预约链接 在 config.js 中将 `schedulingUrl` 设置为你的 Calendly、Cal.com 或预约链接。联系页面上会自动出现一张“预约通话”卡片。将其留空即可隐藏。这对于在求职期间减少阻力非常有用 —— 招聘人员可以直接预约时间。 ### 技能与认证 将你的技能和认证添加到 config.js 的 `skills` 和 `certifications` 数组中。它们将作为标签呈现在“关于”页面的侧边栏上。将其中任何一个设置为 `[]` 即可隐藏。 ### FAQ 部分 主页和联系页面上由配置驱动的折叠面板。在 config.js 中更新问题和答案。 ### “我正在做什么” 主页上的一个简单列表，展示你目前正在构建的内容。在 config.js 中更新 `currentlyBuilding`。设置为 `[]` 即可隐藏。 ### 社交分享 (OG 标签) 每个页面都包含 Open Graph 和 Twitter Card 元标签。部署后在 config.js 中设置 `siteUrl`，以确保 LinkedIn 预览正确显示。将 `assets/img/og-image.png` 替换为自定义图像（建议尺寸为 1200x630px）。 ### 最后更新 在 config.js 中设置 `lastUpdated`（例如 `"March 2026"`），以在页脚显示时间戳。向访问者表明该作品集仍在积极维护。 ### 打印样式表 该网站包含适合打印的样式表。招聘人员可以打印或另存为 PDF，且格式整洁 —— 会移除深色背景，隐藏导航栏，并针对纸张优化内容。 ### 设置清单 在浏览器中打开 `setup.html`，即可查看配置状态的实时仪表板 —— 已设置的字段会显示绿色对勾，仍保留占位符的字段会显示红色叉号。 ### 设置验证器 在部署前运行 `bash scripts/validate.sh` 以捕获缺失的字段。部署脚本会自动执行此操作。 ### 安全标头 CloudFront 响应标头策略添加了 HSTS、X-Content-Type-Options、X-Frame-Options、Referrer-Policy 和 CSP。 ### 自定义域名（可选） 在你的 `terraform.tfvars` 中设置 `domain_name` 和 `hosted_zone_id`，以添加带有 ACM 证书和 Route 53 DNS 的自定义域名。 ### CI/CD 部署 位于 `.github/workflows/deploy.yml` 的 GitHub Actions 工作流会在推送到 main 分支时进行部署。需要配置 GitHub secrets，包含 AWS OIDC 角色、区域、存储桶和 CloudFront ID。 ## 如何添加新项目 1. 复制模板： cp projects/project-template.html projects/your-project-name.html 2. 替换所有 `[BRACKETED]`（括号）占位符文本。搜索 `[` 即可找到它们。 3. 在 `projects.html` 中添加项目卡片 —— 模板在其注释中包含了确切的 HTML 供你复制。 4. 在本地预览，然后进行部署。 ## 图像与品牌化 将以下文件替换为你自己的内容： - `assets/img/headshot.png` — 你的照片 - `assets/img/favicon.svg` — 你的网站图标（可选） - `assets/img/og-image.png` — 社交分享预览图像（1200x630px，可选） ## 部署 ### 首次设置 ``` aws --version terraform version aws configure aws sts get-caller-identity cd site cp terraform.tfvars.example terraform.tfvars # Create your local config # 使用你的 bucket name、region 等编辑 terraform.tfvars。 terraform init terraform validate terraform plan terraform apply terraform output cd .. bash scripts/deploy-site.sh ``` ### 常规内容更新 ``` bash scripts/deploy-site.sh ``` ### 基础设施更新 ``` cd site terraform plan terraform apply cd .. bash scripts/deploy-site.sh ``` ## 销毁 ``` cd site aws s3 rm s3://YOUR_BUCKET_NAME --recursive terraform destroy ``` ## 安全说明 - 私有 S3 源，仅限 CloudFront 访问 - 强制执行 HTTPS 交付 - 静态加密 (AES256) - 已启用版本控制 - 安全响应标头（HSTS、CSP、X-Frame-Options） - 使用 Terraform 实现基础设施即代码 - 通过静态站点架构降低攻击面 ### 重要提示：将敏感信息排除在公共仓库之外 如果你将此模板 Fork 到 **公开的** GitHub 仓库中，请切勿提交： - 任何类型的 **API 密钥或令牌** —— 不要将它们放在 JavaScript 文件、HTML 或配置中 - **`terraform.tfvars`** —— 此文件默认被 `.gitignore` 忽略；请使用 `terraform.tfvars.example` 作为参考并创建一个本地副本 - **`.env` 文件** —— 环境变量保留在本地 - **私钥** (`.pem`, `.key`) —— 永远不要提交这些文件 此模板中的 `.gitignore` 已预先配置为拦截这些文件，但在推送之前务必仔细检查。如果你意外提交了敏感信息，轮换凭证是唯一安全的补救措施 —— 在未来的提交中删除该文件并不会将其从 git 历史记录中抹去。

标签：HTML, Syscall, Web开发, 个人主页, 前端模板, 后端开发, 多模态安全, 应用安全, 数据可视化, 静态网站