fumioryoto/fumioryoto.github.io

# Md. Nahidul Islam - 专业网络安全作品集 这是一个为 Md. Nahidul Islam —— 网络安全专家、渗透测试员和漏洞赏金猎人打造的现代化专业作品集网站。采用时尚的紫色渐变主题，并带有一个功能齐全的仪表板，用于动态管理经验、项目和作品集内容。使用原版 HTML、CSS 和 JavaScript 构建，没有任何外部框架依赖。 ## 🎯 主要特性 - **现代化设计**：采用紫色渐变配色方案的简洁专业布局 - **响应式设计**：针对桌面端、平板和移动端优化的完全响应式设计 - **仪表板驱动内容**：安全的后台管理仪表板，用于动态管理所有作品集内容 - **高性能**：纯粹的原版 HTML、CSS 和 JavaScript —— 无臃肿框架 - **交互元素**：流畅的动画、悬停效果、视差滚动和粒子特效 - **移动端优化**：在桌面端展示高级动画，在移动端采用省电动画 - **无障碍访问**：语义化 HTML、适当的颜色对比度以及 `prefers-reduced-motion` 支持 - **SEO 友好**：Meta 标签、Open Graph 支持和规范的 HTML 结构 - **数据持久化**：基于 localStorage 的内容管理（完全在客户端运行，无需后端） - **图片支持**：支持图片 URL 托管的项目缩略图及错误回退处理 ## 📁 项目结构 ``` fumioryoto.github.io/ ├── index.html # Main portfolio page ├── script.js # Dashboard logic & interactivity ├── style.css # Styling with purple gradient theme ├── DASHBOARD_README.md # Dashboard setup instructions ├── README.md # This file ├── package.json # Project metadata └── vercel.json # Vercel deployment config ``` ## 🎛️ 仪表板功能 该作品集包含一个**安全管理仪表板**，无需编辑 HTML 即可管理内容： ### 经验管理 - 添加/编辑/删除工作经验条目 - 将经验标记为“当前”职位 - 按日期排序，当前职位优先显示 - 带有标签的富文本描述 ### 项目管理 - 添加/编辑/删除作品集项目 - 支持通过外部图片 URL 设置项目缩略图 - 链接到实际项目或 GitHub 仓库 - 水平滚动轮播展示项目 - 图片加载错误的回退处理 ### 数据持久化 - 所有内容均存储在浏览器的 localStorage 中 - 无需后端服务器 - 数据在浏览器会话间持久保存 - 可从浏览器 DevTools 手动导出/备份数据 ### 安全性 - 仪表板对公众隐藏（不在站点地图中建立索引） - 需要知道访问路径才能进入仪表板 - 仅限客户端 —— 无服务器暴露风险 ## 🚀 快速开始 ### 前置条件 - 现代网络浏览器（Chrome、Firefox、Safari、Edge） - Git（用于版本控制） - GitHub 账户（用于推送代码） - Vercel 账户（可选，用于托管） ### 本地开发 1. **克隆仓库**： ``` git clone https://github.com/yourusername/portfolio.git cd portfolio ``` 2. **启动本地服务器**（任选其一）： **Python 3**: ``` python -m http.server 8000 ``` **Python 2**: ``` python -m SimpleHTTPServer 8000 ``` **Node.js 及 http-server**: ``` npx http-server ``` **Live Server (VS Code 扩展)**: - 安装 "Live Server" 扩展 - 右键点击 `index.html` → "Open with Live Server" 3. **在浏览器中打开**： - 导航至 `http://localhost:8000` ### 使用仪表板 1. 导航至 `http://localhost:8000/#dashboard` 2. 添加你的经验和项目 3. 所有更改将自动保存到 localStorage 4. 刷新页面 —— 你的数据将依然存在 有关详细的仪表板操作说明，请参阅 [DASHBOARD_README.md](DASHBOARD_README.md) ## 🌐 部署 ### 选项 1：Vercel（推荐） ✨ Vercel 提供无缝部署，并支持针对拉取请求的自动预览和生产环境。 #### 前置条件 - GitHub 账户（代码仓库） - Vercel 账户（在 [vercel.com](https://vercel.com) 免费注册） #### 部署步骤 1. **推送到 GitHub**： ``` git remote add origin https://github.com/yourusername/portfolio.git git branch -M main git push -u origin main ``` 2. **连接到 Vercel**： - 前往 [vercel.com](https://vercel.com) - 点击 "Add New Project" - 导入你的 GitHub 仓库 - 点击 "Import" 3. **配置项目**： - **Framework Preset**：选择 "Other"（静态网站） - **Build Command**：留空（静态网站不需要） - **Output Directory**：留空 - **Environment Variables**：无需填写（数据存储在 localStorage 中） 4. **部署**： - 点击 "Deploy" - 你的作品集将在以下地址上线：`https://yourusername.vercel.app` #### 自定义域名 1. 转到你的 Vercel 项目设置 → Domains 2. 添加你的自定义域名（例如，`yourdomain.com`） 3. 根据 Vercel 的说明更新 DNS 记录 4. 你的作品集将可以通过你的自定义域名访问 #### 自动部署 每次你推送到 `main` 分支时，Vercel 都会自动重新构建并部署你的更改。针对拉取请求还会创建预览部署。 ### 选项 2：GitHub Pages 1. 创建名为 `yourusername.github.io` 的仓库 2. 将你的代码推送到 `main` 分支 3. 在仓库设置 → Pages 中启用 GitHub Pages 4. 选择 `main` 分支作为源 5. 你的作品集将在以下地址上线：`https://yourusername.github.io` ### 选项 3：传统托管 部署到任何静态托管服务提供商（Netlify、GitHub Pages、AWS S3 等）： ## 🎨 自定义 ### 编辑静态内容 编辑 `index.html` 以自定义： - Meta 标签（标题、描述、Open Graph） - 导航菜单项 - 各版块标题和描述 - 技能和专长类别 - 联系信息和社交链接 - 社交媒体 URL ### 编辑样式 更新 `style.css` 以自定义： - **配色方案**：文件顶部的 CSS 自定义属性（变量） - **排版**：字体系列和大小 - **间距**：内边距、外边距和间隙 - **动画**：关键帧动画和过渡时间 - **断点**：移动端响应式设计的阈值 ### 添加字体 在 `index.html` 的 `` 中导入 Google Fonts： ``` ``` 然后在 `style.css` 中更新 CSS 变量： ``` :root { --font-primary: 'YourFont', sans-serif; } ``` ### 上传项目图片 对于仪表板中的项目缩略图： 1. 将图片上传到图片托管服务（Imgur、Cloudinary 等） 2. 获取图片 URL 3. 在仪表板中，将图片 URL 粘贴到 "Image URL" 字段 4. 图片将显示在项目轮播中 ### 动态作品集内容 该作品集现在是 **100% 由仪表板驱动** 的： - 没有硬编码的经验卡片 —— 均由仪表板管理 - 没有硬编码的项目卡片 —— 均由仪表板管理 - 所有内容存储在浏览器的 localStorage 中 - 可通过从浏览器 DevTools 的 LocalStorage 中复制来导出数据 - 可通过直接更新 localStorage 来导入数据 ## 📱 页面版块 1. **导航头**：固定、响应式、平滑滚动的导航 2. **主视觉版块**：引人注目的介绍，配有动画网格背景和浮动粒子 3. **经验时间轴**：动态工作经历，当前职位高亮显示 4. **技能与专长**：按类别组织的技术技能 5. **提供的服务**：核心服务和专业领域 6. **项目轮播**：带有项目缩略图的水平滚动展示 7. **技术栈**：使用的工具和技术 8. **推荐语/社交**：社交媒体和专业主页的链接 9. **联系版块**：多种联系方式和行动号召 10. **仪表板**：用于内容管理的安全管理界面 11. **页脚**：快速链接、社交媒体和版权信息 ## ⚡ 性能与移动端优化 ### 桌面端性能 - 网格动画为正常速度（20秒） - 浮动粒子为正常速度（15秒） - 徽章动画流畅且可见（3秒） - 启用完整的视差和视觉效果 ### 移动端性能 - 较慢的动画（30秒、20秒、4秒）以减少电池消耗 - 较小的粒子尺寸以降低渲染开销 - 通过 `will-change` 提示实现 GPU 硬件加速 - 带有 webkit 前缀和回退的优化 backdrop-filter ### 无障碍访问 - `prefers-reduced-motion` 支持为对动效敏感的用户禁用动画 - 供屏幕阅读器使用的语义化 HTML - 规范的标题层级结构 - 符合 WCAG 标准的颜色对比度 - 键盘导航支持 ### SEO 优化 - 用于社交分享的 Meta 标签（Open Graph） - 带有语义元素的 HTML 结构 - 适合移动端的响应式设计 - 无外部依赖的快速加载 ## 📧 联系方式与社交媒体 - **邮箱**：nahidhasanph79@gmail.com - **Telegram**：[@fumioryoto](https://t.me/fumioryoto) - **GitHub**：[fumioryoto](https://github.com/fumioryoto) - **LinkedIn**：[你的 LinkedIn 主页] - **Twitter/X**：[你的 Twitter 主页] ## 🐛 故障排除 ### 仪表板问题 **仪表板无法加载？** - 确保你的浏览器已启用 JavaScript - 清除浏览器缓存（Ctrl+F5 或 Cmd+Shift+R） - 检查浏览器控制台是否有错误（F12 → Console 选项卡） **数据未保存？** - 检查浏览器设置中是否启用了 localStorage - 检查可用存储空间 - 数据仅在本地存储，按浏览器/设备区分 **图片未显示？** - 确认图片 URL 可公开访问 - 检查图片 URL 格式（必须以 `http://` 或 `https://` 开头） - 使用可靠的图片托管服务（Imgur、Cloudinary 等） ### 一般问题 **部署后作品集未显示？** - 等待 2-3 分钟让 Vercel 完成部署 - 检查 Vercel 部署日志是否有错误 - 清除浏览器缓存并硬刷新（Cmd+Shift+R） **样式未加载？** - 硬刷新浏览器（Ctrl+F5 或 Cmd+Shift+R） - 检查 CSS 文件路径是否正确 - 确认 `style.css` 与 `index.html` 位于同一目录下 **链接无效？** - 确认所有 href 值与锚点 ID 匹配 - 使用正斜杠（/）而非反斜杠（\） - 在无痕/隐私模式下测试，以排除缓存问题 ## 🛠️ 开发 ### 技术栈 - **HTML5**：语义化标记和无障碍访问 - **CSS3**：自定义属性、动画、媒体查询、backdrop-filter 效果 - **JavaScript (ES6+)**：CRUD 操作、localStorage、DOM 操作 - **无框架**：使用原生 JS 实现最大化性能 ### 文件说明 - **index.html**：主要作品集结构，包含仪表板版块（对公众隐藏） - **script.js**：所有交互功能（轮播、仪表板逻辑、localStorage 同步） - **style.css**：包含响应式设计、动画和移动端优化的样式 ### 核心 JavaScript 函数 仪表板管理： - `saveExperiencePost()` - 将经验保存到 localStorage - `renderExperiencePosts()` - 按日期排序显示经验 - `saveDashboardPost()` - 将项目保存到 localStorage - `renderDashboardPosts()` - 在轮播中显示项目 - `initProjectCarousel()` - 初始化水平滚动 ### CSS 自定义属性 位于 `style.css` 顶部： ``` :root { --primary: #c084fc; /* Purple accent color */ --primary-dark: #a855f7; --bg-main: #0f172a; /* Dark background */ --bg-card: #1e293b; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --border: #334155; /* ... more variables */ } ``` ## 🚢 生产部署检查清单 在部署到生产环境之前： - [ ] 在 `index.html` 中使用你的个人信息更新 meta 标签 - [ ] 更新社交媒体链接和联系信息 - [ ] 通过仪表板添加你的项目和经验 - [ ] 在移动端浏览器上进行测试（iPhone Safari、Android Chrome） - [ ] 在桌面端浏览器上进行测试（Chrome、Firefox、Safari、Edge） - [ ] 验证所有内部链接是否正常工作 - [ ] 测试项目缩略图的图片加载情况 - [ ] 清除 localStorage 以获取全新的生产数据 - [ ] 检查 Lighthouse 得分（PageSpeed Insights） - [ ] 在 Vercel 中配置自定义域名（如果使用） ## 📚 文档 - [DASHBOARD_README.md](DASHBOARD_README.md) - 详细的仪表板使用指南 - Browser DevTools Console - 检查 JavaScript 错误 - Vercel Deployment Logs - 监控部署状态 ## 📄 许可证 本作品集是开源的，并基于 **MIT License** 提供。欢迎自由刻、修改并将其用于你自己的作品集！ ## 🤝 贡献 发现了 Bug 或有建议？欢迎随时： 1. 复刻该仓库 2. 创建一个功能分支 3. 进行你的修改 4. 提交 Pull Request **由 Md. Nahidul Islam 用 ❤️ 创建** 如有问题或需要支持，请通过电子邮件或 Telegram 联系（链接如上）。

标签：CMS安全, CSS, GitHub Pages, JavaScript, localStorage, meg, SEO优化, Vercel部署, 个人作品集, 仪表盘, 信息安全, 内容管理系统, 动画效果, 单页应用, 后端开发, 响应式设计, 客户端存储, 数据可视化, 数据展示, 无框架, 白帽黑客, 紫色主题, 红队, 纯HTML, 网络安全, 网页设计, 隐私保护, 静态网站