guuly05/personnel-security-resume

[](https://reactjs.org/) [](https://www.typescriptlang.org/) [](https://vitejs.dev/) [](https://tailwindcss.com/) [](LICENSE) # 人员安全简历 | 在线作品集 & 互动简历 **一个现代、响应式的单页作品集和简历网站** – 为重视精确性、清晰度和强大数字存在感的网络安全专业人士打造。这不是一个模板或简历生成器；这是 **我的** 活着的简历，用代码精心打造，以反映我作为人员安全专家的身份。 ## 📖 目录 - [项目概述](#project-overview) - [动机 – 为什么我建造了这个](#motivation--why-i-built-this) - [设计理念与方法](#design-philosophy--methodologies) - [技术栈 – 工具与库](#technology-stack--tools--libraries) - [开发工作流程与实施](#development-workflow--implementation) - [核心功能](#core-features) - [入门 (本地设置)](#getting-started-local-setup) - [部署与托管](#deployment--hosting) - [这有什么不同](#what-makes-this-different) - [未来路线图](#future-roadmap) - [许可证 & 联系方式](#license--contact) ## 📌 项目概述 此存储库包含 **我的个人在线简历和作品集** 的完整源代码。 它展示了： - 我在人员安全、风险评估和合规性方面的专业经验。 - 技术能力（安全框架、工具、事件响应等）。 - 关键项目和为安全社区做出的贡献。 - 直接联系我或通过专业网络建立联系的方式。 该网站完全响应式，支持深色/浅色主题，并得益于现代前端工具的即时加载。它作为永久、版本控制的静态PDF的替代品，始终是最新的，始终可访问。 ## 🎯 动机 – 为什么我建造了这个 传统的简历存在根本性的局限性： - **静态且过时** – 一旦发送，就无法更新收件人的副本。 - **单维** – 没有交互性，格式之外的视觉层次结构。 - **与你的工作脱节** – PDF无法展示你的实际编码能力或设计思维。 我创建这个项目是为了： - **展示技术能力** – 简历 **就是** 产品。招聘经理可以看到我如何结构代码、管理状态和设计UX。 - **维护单一事实来源** – 一个URL，一组内容，自动使用Git进行版本控制。 - **控制我的个人品牌** – 每一个像素、每一个动画、每一个词都是经过深思熟虑的，并反映我的专业身份。 - **尝试现代工具** – React 19、TypeScript、Vite和Tailwind CSS不是口号；我将它们深度融合，以构建一个生产级、高性能的应用程序。 ## 🧠 设计理念与方法 ### 1. **内容优先架构** 在编写任何组件之前，我绘制了信息层次结构： 页眉 → 概述 → 经验 → 资格证书 → 技术技能 → 项目 → 联系方式。 每个部分都服务于一个独特的目的，布局引导读者自然地从概述到细节。 ### 2. **移动优先响应式设计** 使用Tailwind的实用类，我首先为移动断点进行了样式设计，然后逐步增强到平板电脑和桌面。结果是：在任何设备上都能提供无缝体验。 ### 3. **组件化可重用性** React组件（`Header`、`ExperienceCard`、`SkillBadge`等）是隔离的、独立测试的，并在整个页面上重用。这使代码库保持DRY和可维护。 ### 4. **TypeScript 的类型安全** 每个属性、状态变量和API响应都是严格类型化的。这消除了整个类别的运行时错误，并作为未来更改的活文档。 ### 5. **默认性能** - **Vite** 用于开发期间闪电般的HMR。 - **非关键部分的懒加载**。 - **摇树优化** 以删除未使用的CSS和JS。 - **优化资产交付**（SVG、压缩图像）。 ### 6. **可访问性（a11y**） 语义HTML、ARIA标签、键盘导航和足够的颜色对比度是内置的。深色/浅色主题尊重系统首选项（`prefers-color-scheme`）。 ## 🛠️ 技术栈 – 工具与库 | 类别 | 具体工具 | |------|--------------| | **核心框架** | React 19（功能组件、hooks） | | **语言** | TypeScript 5.8（严格模式） | | **构建工具** | Vite 6.4 + 插件（React、Tailwind） | | **样式** | Tailwind CSS 4 + Autoprefixer | | **动画** | Framer Motion (`motion`) 用于进入动画和微妙的转换 | | **图标** | Lucide React（轻量级、一致的图标集） | | **AI 集成（可选）** | Google Gemini API (`@google/genai`) 用于交互式问答或内容增强 | | **包管理器** | npm | | **版本控制** | Git + GitHub | | **代码质量** | TypeScript 编译器 (`tsc --noEmit`), ESLint（隐式通过 React/Vite） | 没有第三方UI库 – 所有一切都是自定义构建的，以保持对设计和包大小的完全控制。 ## ⚙️ 开发工作流程与实施 ### 第 1 阶段 – 规划与内容策略 - 使用Markdown编写草稿内容（经验、技能、项目）。 - 定义信息架构和用户旅程。 - 在纸上创建线框，然后将其转换为Figma进行高保真模拟。 ### 第 2 阶段 – 环境设置 - 使用React-TypeScript模板初始化Vite项目： `npm create vite@latest . -- --template react-ts` - 添加Tailwind CSS、Lucide React和Framer Motion。 - 配置路径别名（`@/*`）以实现更干净的导入。 ### 第 3 阶段 – 组件开发 - 使用占位符数据构建静态组件。 - 使用Tailwind实用工具实现响应式网格/弹性布局。 - 添加主题切换（深色/浅色）使用React上下文和CSS变量。 - 集成可选的Gemini API服务模块（与核心简历显示分离）。 ### 第 4 阶段 – 内容集成与优化 - 用真实的简历内容替换占位符。 - 微调间距、排版（使用Tailwind的`font-*`实用工具）和动画。 - 在Chrome、Firefox、Safari和Edge上进行测试。 ### 第 5 阶段 – 构建优化与部署 - 运行 `npm run build` 生成 `/dist` 中的生产包。 - 使用 `npm run preview` 在本地预览。 - 将GitHub存储库连接到Vercel，在`main`分支推送时自动部署。 - 在Vercel仪表板上配置环境变量（Gemini API密钥）。 ### 第 6 阶段 – 持续维护 - 内容更新只需 `git commit` + `git push`。 - 通过Lighthouse进行性能监控（所有类别得分均≥95）。 ## ✨ 核心功能 | 功能 | 描述 | |------|-------------| | **交互式简历显示** | 清晰、可扫描的布局，包括经验、资格证书、技术技能和教育部分的区域。 | | **深色/浅色主题** | 使用 `localStorage` 在会话之间保持用户首选项。 | | **响应式网格** | 从移动到4K显示器优雅地重新流。 | | **打印友好样式** | 使用单独的打印媒体查询生成干净的PDF-like输出。 | | **可选的Gemini聊天（演示）** | 询问用户关于我的背景的问题，并返回格式化的答案 – 展示API集成。 | | **联系链接** | 直接按钮用于电子邮件、LinkedIn、GitHub和（可选）联系表单。 | | **作品集项目卡片** | 每个项目都包括描述、使用的技术和实时/演示链接。 | | **SEO就绪** | 正确的元标签、语义HTML和Open Graph图像，适用于社交分享。 | ## 🚀 入门 (本地设置) 要在自己的机器上运行此作品集（例如，用于审查或自定义）： ``` # 1. 克隆仓库 git clone https://github.com/guuly05/personnel-security-resume.git cd personnel-security-resume # 2. 安装依赖 npm install # 3. （可选）设置 Gemini API 密钥 cp .env.example .env.local # 然后编辑 .env.local 文件，使用您的实际密钥 # 4. 启动开发服务器 npm run dev ``` 网站将在 `http://localhost:3000` 上可用。 **构建生产版本：** ``` npm run build npm run preview # serves the built site locally ``` ## 🌍 部署与托管 实时网站通过 **Vercel** 自动部署。 - GitHub `main`分支是真相之源。 - 每次推送都会触发新的部署，并立即使缓存无效化。 - 可以通过托管提供商配置自定义域名。 **当前实时URL：** https://guuleed-maxamuud-portfolio.vercel.app/ ## 🔍 这有什么不同 | 方面 | 传统PDF简历 | 此项目 | |------|------------------------|---------------| | **可更新性** | 您必须重新发送新文件 | 一推 – 每个人都看到最新版本 | | **交互性** | 无 | 主题切换、可选的Gemini Q&A、平滑滚动 | | **代码质量** | 隐藏 | 开源、类型化、模块化、文档化 | | **性能** | N/A | Lighthouse得分为95+ | | **平台** | 需要下载和PDF查看器 | 任何现代浏览器 | | **版本控制** | 手动命名（final_v2_actual） | Git历史记录、可回滚 | ## 🧭 未来路线图 以下增强功能计划（但尚未实施）： - [ ] **i18n** – 支持多种语言（英语+另一种语言）。 - [ ] **博客/洞察** – 一个用于简短安全文章或案例研究的部分。 - [ ] **高级Gemini功能** – 简历测验、技能差距分析或自动求职信生成。 - [ ] **分析仪表板** – 隐私友好的页面视图跟踪（Plausible / Umami）。 - [ ] **离线支持** – 服务工作者为基本离线访问简历。 ## 📄 许可证 & 联系方式 **许可证：** 此项目是个人项目，未经许可不得进行一般性分发。您可以查看源代码以供参考，但请勿克隆并部署为自己的，除非进行重大更改。 © 2025 – guuleed maxamuud aw abdi **联系方式：** - 电子邮件：guuleedmaxamuud40@gmail.com - LinkedIn：[linkedin.com/in/yourprofile](https://www.linkedin.com/in/guuleed-aw-abdi-517928277/) - GitHub：[github.com/guuly05](https://github.com/guuly05) *以精确度构建，以信心部署。* **最后更新：** 2026年5月

标签：React, Syscalls, Tailwind CSS, TypeScript, Vite, 个人品牌, 个人简历, 人员安全, 人工智能安全, 单页应用, 合规性, 响应式设计, 在线作品集, 安全插件, 技术栈, 数字身份, 社区贡献, 网络安全, 自动化攻击, 隐私保护