HTML作品集

portfolio-website — HTML 作品集模板

作者 b2kproedit

一个用纯 HTML、CSS 和原生 JavaScript 编写的开发者作品集单页模板，包含明暗主题、打字动画、技能条与项目筛选等交互。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

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

桌面端截图首屏预览

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

纯 HTML/CSS/原生 JavaScript 实现，无框架、无构建步骤、无依赖

明暗主题切换，选择结果保存在 localStorage 中

角色标题打字动画，技能条与数字统计在滚动进入视口时触发

项目网格支持按 All / Web / Apps / Games 筛选

响应式布局，移动端使用汉堡菜单

联系表单带内联校验与提示消息

模板详细介绍

这是一个面向开发者个人展示的单页作品集模板，使用 HTML5、CSS3 和原生 JavaScript 构建，不依赖框架、构建工具或第三方库。页面结构包含首页首屏、关于、技能、项目与联系等区块，可直接打开 index.html 查看效果。

模板内置明暗主题切换并通过 localStorage 记住选择，角色标题带打字动画，技能条与数字统计在滚动进入视口时触发动画，项目网格可按 All / Web / Apps / Games 筛选，移动端提供汉堡菜单，联系表单带内联校验和提示消息。README 说明可替换姓名、角色、技能百分比（data-fill 属性）、项目卡片与 :root 中的颜色变量来完成定制。

使用限制方面：联系表单在 README 中被列为待接入 Formspree 或 EmailJS 等外部服务，仓库当前版本未包含真实提交端点；博客区块与项目截图在路线图中仍为未完成项。演示图片、字体、图标等第三方素材需按各自许可单独核对，代码的 MIT 许可不覆盖这些素材。

HTML作品集

适合你的项目吗？

适用场景

开发者需要一个可直接部署到 GitHub Pages 的个人作品集页面
想用原生 JavaScript 练习主题切换、IntersectionObserver 与表单校验等前端交互
作为个人主页的起点，替换姓名、技能与项目卡片后用于求职或接单展示

适合人群

希望快速搭建单页个人作品集的开发者
偏好无框架、无构建流程的静态站点方案的人
需要明暗主题与滚动动画等基础交互效果的展示型页面

上手与定制指南

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

1
克隆仓库后可直接双击 index.html 打开，或用 python3 -m http.server 8000 本地预览
2
部署到 GitHub Pages 时在仓库 Settings → Pages 中选择 main 分支根目录
3
联系表单需自行接入 Formspree 或 EmailJS 等服务端点才能真实提交
4
定制时替换 index.html 中的姓名与角色、调整 data-fill 属性、更换项目卡片，并在 css/style.css 的 :root 中修改颜色变量
5
演示图片、字体、图标等第三方素材需按各自许可核对，MIT 许可仅覆盖代码

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

README 提及 Formspree 表单服务；真实提交需配置服务端点，其使用额度与费用需单独核对。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
联系表单尚未接入真实提交端点，README 路线图中列为待办：需自行接入 Formspree 或 EmailJS 等外部服务后表单才能实际发送消息。
博客区块在 README 路线图中仍为未完成项，当前模板不包含可用的博客功能。
项目截图在 README 路线图中仍为未完成项，模板当前未附带项目截图素材。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

- [ ] Wire the contact form to a service (Formspree / EmailJS)
README 原文

- [ ] Add a real blog section
README 原文

- [ ] Add project screenshots
README 原文

https://github.com/b2kproedit/portfolio-website/blob/main/LICENSE https://github.com/b2kproedit/portfolio-website/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间: 2026-09-11
截图检查日期: 2026-10-13

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: [email protected] · 2026-10-13

查看当时使用的来源资料

SHA-256: 275bf8b690cac4a45638aa4fd3887806d11ea43a5ae090d3cfb360a3392e7048

2026-10-13T07:54:24.630Z

来源文件 / 仓库

# 💻 Portfolio Website — Day 13

A modern, fully responsive **developer portfolio website** built with pure **HTML, CSS and JavaScript** — no frameworks, no build tools, no dependencies.

![License](https://img.shields.io/badge/license-MIT-green)
![Tech](https://img.shields.io/badge/stack-Vanilla%20JS-yellow)
![Day](https://img.shields.io/badge/40--days-of--code-blueviolet)

## ✨ Features

- 🌗 **Dark / light theme** toggle with `localStorage` persistence
- ⌨️ **Typing animation** for role headlines
- 📊 **Animated skill bars** and **count-up stats** (IntersectionObserver)
- 🗂️ **Filterable project grid** (All / Web / Apps / Games)
- 📱 Fully **responsive** with a mobile hamburger menu
- ✉️ **Contact form** with inline validation + toast notifications
- 🧈 Smooth scrolling, scroll-spy navbar, reveal-on-scroll animations
- 🚀 100 dependency-free — open `index.html` and go

## 🛠 Tech Stack

| Layer  | Technology |
|--------|------------|
| Markup | HTML5 (semantic, accessible) |
| Style  | CSS3 — custom properties, grid, flexbox, keyframes |
| Logic  | Vanilla JavaScript (ES6+) |

## 🚀 Getting Started

```bash
# clone it
git clone https://github.com/<your-username>/portfolio-website.git
cd portfolio-website

# open it — no install needed
# option 1: double-click index.html
# option 2: serve it
python3 -m http.server 8000
# → http://localhost:8000
```

## 🌍 Deploy on GitHub Pages

1. Push this repo to GitHub
2. **Settings → Pages → Deploy from a branch → main / (root)**
3. Your live site: `https://<your-username>.github.io/portfolio-website/`

## 📁 Project Structure

```
portfolio-website/
├── index.html        # Single-page layout (hero, about, skills, projects, contact)
├── css/
│   └── style.css     # Theme variables + all styling
├── js/
│   └── main.js       # Theme, typing, reveal, counters, filters, form validation
├── LICENSE
└── README.md
```

## 🎨 Customize It

- Replace the name/roles in `index.html` (hero + about sections)
- Adjust skill percentages via the `data-fill` attributes
- Swap the project cards for your own repositories
- Colors live in the `:root` block of `css/style.css`

## 🗺 Roadmap

- [ ] Add a real blog section
- [ ] Wire the contact form to a service (Formspree / EmailJS)
- [ ] Add project screenshots

## 📄 License

Distributed under the MIT License. See [`LICENSE`](LICENSE) for details.

---

Built with ❤️ as part of a *40-day web development challenge*.

反馈内容错误