HTML作品集

Personal-Porfolio — HTML 作品集模板

作者 WanadeBotman

基于 HTML5、CSS3 与 JavaScript 的个人作品集页面模板，使用 Three.js 渲染 3D 线框球体，并配有 Canvas 粒子背景、明暗主题切换与 EmailJS 联系表单。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

Three.js 渲染的 3D 线框球体位于首屏，随鼠标移动产生响应

基于 HTML5 Canvas API 的轻量粒子背景

明暗主题切换，选择状态通过 localStorage 持久保存

滚动进度条、打字动画与 Intersection Observer 区块过渡

CSS Grid 与 Flexbox 构建的移动优先响应式布局

联系表单集成 EmailJS 用于发送消息

模板详细介绍

这是一个纯静态的个人作品集页面，仓库结构只有 index.html、style.css 和 script.js 三个文件，直接用浏览器打开 index.html 即可查看。页面面向前端开发者展示个人技能与作品，首屏使用 Three.js 绘制可随鼠标移动响应的 3D 线框球体，背景由基于 HTML5 Canvas API 的粒子系统构成。

交互与视觉部分包括：明暗主题切换并通过 localStorage 记住选择；滚动进度条；职业角色的打字动画；借助 Intersection Observer API 实现的区块进入过渡；使用 CSS Grid 与 Flexbox 的移动优先响应式布局。联系表单接入 EmailJS 用于发送消息，图标使用 Unicons。

使用限制：项目没有构建步骤和依赖管理文件，所有逻辑集中在单个 script.js 中；Three.js、Unicons 与 EmailJS 属于外部依赖，需自行确认其引入方式与可用性；EmailJS 需要配置自己的服务与模板参数才能实际发送邮件。仓库采用 Apache-2.0 许可，可免费使用、修改与分发，但页面中的演示图片、字体、图标等第三方素材需单独核对授权。

HTML作品集

适合你的项目吗？

适用场景

前端开发者搭建个人作品集与简历展示页
作为 Three.js 与 Canvas 粒子效果的入门参考页面
用于练习明暗主题切换与 localStorage 状态持久化
作为纯静态站点部署到 GitHub Pages 等静态托管

适合人群

具备基础 HTML/CSS/JavaScript 知识、希望快速上线个人主页的开发者
需要展示技能、项目与联系方式的自由职业者或求职者
想参考 3D 与粒子背景实现方式的前端学习者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆仓库后直接用浏览器打开 index.html，无需构建或安装依赖
2
仓库结构为 index.html、style.css、script.js 三个文件，修改内容集中在 script.js
3
联系表单依赖 EmailJS，需自行注册并替换服务 ID、模板 ID 与公钥等配置
4
Three.js、Unicons 等外部资源需确认引入方式，离线环境下可能无法加载
5
使用前请替换页面中的个人信息、社交链接与演示图片，并核对第三方素材授权

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 Apache-2.0 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发；分发时需随附 Apache-2.0 许可证。
修改过的文件需显著标明改动，并保留相关版权、专利、商标及归属声明。
若原项目附有 NOTICE 文件，分发衍生作品时需保留其中适用的归属声明。
许可包含适用的贡献者专利授权；发起许可所述专利诉讼会终止该专利授权，且不授予商标使用权。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

联系表单依赖第三方服务 EmailJS，需自行注册账号并配置服务 ID、模板 ID 与公钥等参数，否则表单无法实际发送邮件。
3D 线框球体依赖外部库 Three.js，需确认其引入方式（CDN 或本地文件），离线环境下可能无法加载。
图标使用外部资源 Unicons，需自行确认引入方式与可用性。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 Apache-2.0 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

no-charge, royalty-free, irrevocable copyright license
许可证原文

Fully functional contact form integrated with **EmailJS** for direct client communication.
README 原文

* **3D Graphics**: Three.js
README 原文

* **Icons**: Unicons
README 原文

https://github.com/WanadeBotman/Personal-Porfolio/blob/main/LICENSE https://github.com/WanadeBotman/Personal-Porfolio/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 83 / 100
技术栈: HTML
网站类型: 作品集

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-01-18
截图检查日期: 2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: d233d97b45b4aaecdaa36e29c870598c6a8a0b2c4fb61aec44e4a0eccfd482a0

2026-10-02T08:33:54.376Z

来源文件 / 仓库

# Wanade Botman | Front-End Developer Portfolio 🚀
---
<img width="1917" height="902" alt="Portfolio" src="https://github.com/user-attachments/assets/0d2307b6-f2d2-469b-bf7e-a865b62a6c24" />


A high-performance, interactive portfolio website designed to showcase modern web development skills. This project features a unique 3D interactive interface, dynamic animations, and a seamless user experience across all devices.

## 🔗 Live Demo

Check out the live version of this project here:
**[View Live Demo](https://wanadebotman.github.io/Personal-Porfolio/)**

## ✨ Key Features

* **Interactive 3D Elements**: Uses **Three.js** to render a dynamic 3D wireframe sphere in the hero section that responds to mouse movement.
* **Custom Particle System**: A lightweight, high-performance background particle engine built using the **HTML5 Canvas API**.
* **Dynamic Theme Switching**: Seamless toggle between **Light and Dark modes** with persistent state using `localStorage`.
* **Modern UI/UX**: Includes a scroll progress bar, custom typing animations for professional roles, and smooth section transitions using **Intersection Observer API**.
* **Responsive Architecture**: Built with a mobile-first approach using **CSS Grid and Flexbox** to ensure compatibility across all screen sizes.
* **Contact Integration**: Fully functional contact form integrated with **EmailJS** for direct client communication.

## 🛠️ Tech Stack

* **Core**: HTML5, CSS3, JavaScript (ES6+)
* **3D Graphics**: Three.js
* **Icons**: Unicons
* **Form Handling**: EmailJS
* **Animations**: CSS Keyframes & JavaScript-driven particle logic

## 🚀 Getting Started

To run this project locally, follow these steps:

1. **Clone the repository:**
```bash
git clone https://github.com/WanadeBotman/portfolio.git

```


2. **Navigate to the project folder:**
```bash
cd portfolio

```


3. **Open in Browser:**
Simply open `index.html` in your preferred web browser.

## 📂 Project Structure

```text
├── index.html   # Main structure and layout
├── style.css    # Custom properties, glassmorphism, and responsive styles
└── script.js    # Three.js logic, particle engine, and theme management

```

## 👤 About the Author

I am a passionate Front-End Developer with an **IT Diploma in Software Development**. I specialize in transforming complex ideas into elegant, high-performance web experiences.

* **GitHub**: [@WanadeBotman](https://github.com/WanadeBotman)
* **LinkedIn**: [Wanade Botman](https://linkedin.com/in/https://www.linkedin.com/in/wanade-botman/)
* **Instagram**: [@sharkcxde_](https://www.google.com/search?q=https://instagram.com/sharkcxde_)

---

*Designed & Built with ❤️ by sharkcxde*

反馈内容错误