FirdawsM/firdawsalnuur.github.io

## 预览

# 概述 本仓库包含我个人作品集网站的源代码。 该作品集作为一个中心平台，通过交互式、响应式和面向性能的用户体验，展示我在软件工程、网络安全、人工智能和检测工程方面的工作。 该网站包含： * 软件工程项目 * 网络安全实验室 * AI 应用 * 技术技能 * 认证 * 专业经验 * 联系信息 # 设计目标 该项目围绕四个核心工程原则构建。 * 性能优先的渲染 * 跨所有屏幕尺寸的响应式设计 * 干净且易于维护的架构 * 最小依赖 该网站没有依赖前端框架，而是使用原生浏览器 API 和现代 CSS 来提供轻量级的体验。 # 功能 ## 用户体验 * 响应式桌面和移动布局 * 深色和浅色主题 * 移动端侧边栏导航 * 当前区域高亮 * 平滑滚动 ## 交互组件 * Hero 视差动画 * 交互式项目卡片 * 滚动显示动画 * 动画统计数据计数器 * 鼠标响应粒子背景 * 使用 Local Storage 的主题持久化 ## 工程 * 纯 HTML、CSS 和 JavaScript 实现 * 支持可访问性的动画 * 支持减少动态效果 * 模块化 JavaScript 架构 * GitHub Pages 部署 * 无运行时依赖 # 技术栈 | 层级 | 技术 | | --------------- | ----------------------------------------------------------- | | 标记 | HTML5 | | 样式 | CSS3, CSS Variables, Flexbox, CSS Grid | | 编程 | JavaScript (ES6+) | | 浏览器 API | Intersection Observer, requestAnimationFrame, Local Storage | | 版本控制 | Git, GitHub | | 部署 | GitHub Pages | # 项目结构 ``` portfolio/ │ ├── assets/ │ ├── images/ Images and illustrations │ ├── resume/ Resume PDF │ └── preview.png README preview image │ ├── css/ │ ├── style.css Global styles │ └── responsive.css Responsive layouts │ ├── js/ │ └── script.js Interactive UI logic │ ├── index.html | └─── README.md ``` # 工程亮点 * 无需前端框架构建 * 零运行时依赖的轻量级架构 * 使用 Flexbox 和 CSS Grid 的响应式布局 * 由 requestAnimationFrame 驱动的平滑动画 * 使用 Intersection Observer 的基于滚动的交互 * 使用 Local Storage 的持久化主题偏好 * 交互式网络安全风格视觉效果 * 为可维护性设计的模块化代码 # 快速开始 克隆仓库。 ``` git clone https://github.com/FirdawsM/firdawsalnuur.github.io.git ``` 进入项目。 ``` cd firdawsalnuur.github.io ``` 启动本地开发服务器。 ``` python -m http.server ``` 打开浏览器。 ``` http://localhost:8000 ``` # 部署 该项目使用 **GitHub Pages** 部署。 每次推送到默认分支都会自动更新在线网站。 在线网站： https://firdawsm.github.io/firdawsalnuur.github.io/ # 路线图 * [ ] 技术博客 * [ ] 交互式项目过滤 * [ ] 项目案例研究 * [ ] 认证图库 * [ ] 联系表单后端 * [ ] Progressive Web App 支持 * [ ] Lighthouse 性能优化 * [ ] 可访问性改进 # 作者 **Firdaws Alnuur** 软件工程师 • 网络安全工程师 • AI 开发者 作品集 https://firdawsm.github.io/firdawsalnuur.github.io/ LinkedIn https://www.linkedin.com/in/firdaws-alnuur-b2788722a/ GitHub https://github.com/FirdawsM # 许可证 该项目基于 MIT 许可证授权。

标签：HTML/CSS/JS, 个人主页, 后端开发, 响应式设计, 安全研究展示, 网络安全研究