HTML作品集

Tanjiro-Themed-Personal-Website — HTML 作品集模板

作者 YOBO-DANCE

以《鬼灭之刃》灶门炭治郎为主题的纯 HTML 个人作品集页面，包含自定义光标、刀架式奖项展示与液态玻璃界面。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

01

自定义「日之呼吸」光标：由多个不同颜色的圆圈组成并跟随鼠标移动

02

刀架造型的奖项展示区，用于陈列个人成就与技能

03

液态玻璃界面，由 .glass-box、.Introduction-para、.stats-modal 三个可复用 CSS 类统一控制

04

内容数据存放在 HTML 的 data-* 属性中，点击处理器按 data-type 渲染对应弹窗模板

05

声明支持 prefers-reduced-motion、focus-visible 键盘焦点样式与装饰图片 alt 文本

模板详细介绍

这是一个用纯 HTML/CSS/JS 构建的单页个人作品集，整体视觉围绕《鬼灭之刃》主角灶门炭治郎展开。页面通过自定义的「日之呼吸」光标、刀架造型的奖项展示区，以及多处液态玻璃（glassmorphism）面板来组织个人介绍与作品内容。

在实现上，项目不依赖构建工具，直接用任意静态文件服务器即可运行。奖项与作品数据存放在 HTML 的 data-* 属性中，由统一的点击处理器读取 data-type 并渲染对应的弹窗模板（书籍按钮、歌曲列表或纯数据展示），新增一个条目只需添加一个 HTML 块。液态玻璃效果由 .glass-box、.Introduction-para、.stats-modal 三个可复用类定义，共享相同的 backdrop-filter、边框与阴影值。

项目声明了 prefers-reduced-motion 支持、键盘导航的 focus-visible 样式以及装饰图片的 alt 文本。需要注意的是，页面使用的英雄视频、角色背景、日轮刀插画等素材来自 Ufotables、Kopetfangki、Pinterest 等第三方来源，其授权状态与代码的 MIT 许可相互独立，使用前需自行核对。

HTML作品集

适合你的项目吗？

适用场景

  • 为《鬼灭之刃》爱好者制作带角色主题的个人主页或作品集
  • 作为纯静态 HTML/CSS/JS 项目，学习 data-* 属性驱动内容渲染的写法
  • 参考其液态玻璃面板与自定义光标效果，用于其他单页项目
  • 部署到 Vercel 等静态托管平台作为在线简历或作品展示页

适合人群

  • 希望快速搭建动漫主题个人作品集的前端学习者
  • 需要纯静态、无构建步骤页面的开发者
  • 想参考 glassmorphism 与自定义光标实现的网页设计者

上手与定制指南

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

  1. 1

    无需安装依赖，使用任意静态文件服务器即可运行

  2. 2

    可用 npx serve . 在 3000 端口启动，或用 python -m http.server 8000 在 8000 端口启动，也可用 php -S localhost:8000

  3. 3

    项目为纯 HTML/CSS/JS，没有 Node 或 Python 版本约束

  4. 4

    页面中的视频、角色背景与插画等第三方素材需按各自许可单独核对，不随代码的 MIT 许可一并授权

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 页面使用的英雄视频素材来自第三方来源 Ufotables，其授权状态与代码的 MIT 许可相互独立，使用前需自行确认该素材的许可条件。
  • 第二部分的炭治郎角色背景图来自第三方来源 Kopetfangki，不随代码的 MIT 许可一并授权，使用前需自行核对授权。
  • 日轮刀插画来自 Pinterest，属于第三方素材，其授权状态独立于代码许可，使用前需自行确认。
  • 钢铁冢角色美术作品署名原作者吾峠呼世晴，属于受版权保护的角色美术，不随代码的 MIT 许可授权，商用或再发布前需获得授权。
  • 项目使用 GSAP 3.12.5 与 ScrollTrigger 库，该库遵循其自身的许可条款（GreenSock 标准许可），与代码的 MIT 许可不同，使用前需确认其许可范围。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Hero video | Ufotables

README 原文

Tanjiro Kamado Background in Section 2 | Kopetfangki

README 原文

Nichirin sword illustrations | Pinterest

README 原文

Haganezuka character art | Koyoharu Gotouge

README 原文

GSAP 3.12.5 + ScrollTrigger | [GreenSock](https://greensock.com/gsap/)

README 原文
https://github.com/YOBO-DANCE/Tanjiro-Themed-Personal-Website/blob/main/LICENSE.mdhttps://github.com/YOBO-DANCE/Tanjiro-Themed-Personal-Website/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 83 / 100
技术栈
HTML
网站类型
作品集
这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间
2026-09-15
截图检查日期
2026-10-03

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 904dc03c155a0429ddc077677f83148da97437c35de401ec5683fe94bd7d3a65

2026-10-03T20:32:22.429Z

来源文件 / 仓库
<p align="center">
  <img src="./README_FILES/2828207790ced56b3d23dadc26230e99.png" alt="Hero-Title">
</p>

---
A Tanjiro-Themed Personal Portfolio for Demon Slayer Lover 👺!
<div align="center">
<img src="./README_FILES/Screenshot 2026-09-05 145045.png" alt="Hero Screenshot" style="width: 80%;">
</div>

## Checkout My Tanjiro Style Portfolio

*>>>*[Just Click Here!](https://tanjiro-themed-personal-website.vercel.app/)

## Quick Start

Run either of the following commands to start a local development server:

```bash
# Option 1: Serve using Node.js (opens on http://localhost:3000)
npx serve .
```

![Node Server Demo](./README_FILES/Node-Server-Demo.gif)

```bash
# Option 2: Serve using Python (opens on http://localhost:8000)
python -m http.server 8000
```

![Python Server Demo](./README_FILES/Python-Server-Demo.gif)

Open `http://localhost:3000` (for Node) or `http://localhost:8000` (for Python). That's it.


## Features

- ### A Custom Sun Breathing style Cursor for Tanjiro Lovers! ^.^
  <div align="center">
    <img src="./README_FILES/Custom-Cursor-Demo.gif" alt="Custom Cursor Demo" style="">
  </div>

- ### A Sword-Rack to showcase your Talents & Achievement as Awards
  ![Sword Rack Demo](./README_FILES/Sword-Rack-Demo.gif)

- ### Samsung Style Liquid Glass
  <div align="center">
    <img src="./README_FILES/Screenshot-2026-09-05-151351.png" alt="Glassmorphism UI Preview" width="800" />
    <br>
    <img src="./README_FILES/Screenshot 2026-09-05 151419.png" alt="Glassmorphism UI Preview" width="800" />
    <br>
    <img src="./README_FILES/Screenshot 2026-09-05 151444.png" alt="Glassmorphism UI Preview" width="800" />
    <br>
    <img src="./README_FILES/Screenshot 2026-09-05 151515.png" alt="Glassmorphism UI Preview" width="800" />

  </div>


- ### A Fully Responsive UI so you can easily introduce yourself on a Demon Slayer branded ROG Phone! 
    ![Responsive Demo](README_FILES/Responsive-Demo.gif)

## Run Locally

### Requirements
- Any static file server (Node, Python, PHP, Go, etc.)
- No Node/Python version constraints — pure HTML/CSS/JS

### Commands

```bash
# Option 1: Node (serves on :3000)
npx serve .

# Option 2: Python (serves on :8000)
python -m http.server 8000

# Option 3: PHP (serves on :8000)
php -S localhost:8000
```

## How It Works

### Sun Breathing Cursor
A Custom Sun Breathing Style Cursor which uses circles each colored in a different color and folows the Mouse

### Efficient use of `data-*` attribute
All sword content lives in HTML `data-*` attributes — no JS objects to maintain. One click handler reads `data-type` and renders the appropriate modal template (book button, song list, or plain stats). Adding a sword = one HTML block.

### Liquid Glass!!!
Three reusable glass patterns defined in CSS:
- `.glass-box` (hero overlay)
- `.Introduction-para` (bio card)
- `.stats-modal` (sword detail)

Each uses identical `backdrop-filter`, border, and shadow values — change one place, updates everywhere.


## Credits

| Asset / Library | Source |
|-----------------|--------|
| GSAP 3.12.5 + ScrollTrigger | [GreenSock](https://greensock.com/gsap/) |
| DM Sans, Sekuya, Titillium Web, Black Ops One | [Google Fonts](https://fonts.google.com/) |
| Blood Crow Condensed | Base64-embedded in CSS (woff2 + woff) |
| Hero video | Ufotables |
| Tanjiro Kamado Background in Section 2 | Kopetfangki |
| Nichirin sword illustrations | Pinterest |
| Haganezuka character art | Koyoharu Gotouge |

## Accessibility Status

- [x] `prefers-reduced-motion` — disable cursor, reduce animation duration
- [x] Focus-visible styles for keyboard navigation
- [x] Alt text on decorative images

## Badges


<p align="center">
  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/YOBO-DANCE/Tanjiro-Themed-Personal-Website">
  <img alt="GitHub followers" src="https://img.shields.io/github/followers/YOBO-DANCE">
  <img alt="GitHub forks" src="https://img.shields.io/github/forks/YOBO-DANCE/Tanjiro-Themed-Personal-Website">
  <img alt="GitHub repo size" src="https://img.shields.io/github/repo-size/YOBO-DANCE/Tanjiro-Themed-Personal-Website">
  <img alt="GitHub language count" src="https://img.shields.io/github/languages/count/YOBO-DANCE/Tanjiro-Themed-Personal-Website">
  <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/YOBO-DANCE/Tanjiro-Themed-Personal-Website">
  <img alt="Website" src="https://img.shields.io/website?url=https%3A%2F%2Ftanjiro-themed-personal-website.vercel.app%2F">
  <img alt="GitHub License" src="https://img.shields.io/github/license/YOBO-DANCE/Tanjiro-Themed-Personal-Website">

</p>


<h1 align='center'>NOW GO AND MAKE YOUR OWN TANJIRO PORTFOLIO!</h1>

*Code Breathing 12th Form - Dispression Dance ╯︿╰*
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

simplefolio

simplefolio

⚡️ A minimal portfolio template for Developers

HTML · 作品集

Freelancer

Freelancer

Freelancer 是 Start Bootstrap 出品的单页作品集模板，专为自由职业者、设计师和小型工作室设计。 页面结构清晰，包含多个内容区块、响应式作品集网格，每个作品项目配有模态窗口展示详情。

HTML · 作品集

Resume

Resume

Resume 是 Start Bootstrap 推出的简历与 CV 主题，基于 Bootstrap 构建，采用固定侧边栏加内容区块的结构。

HTML · 作品集

Creative

Creative

Creative 是 Start Bootstrap 团队维护的一款单页营销模板，定位明确：为创意机构或产品服务提供一个以作品展示和行动号召为核心的落地页。

HTML · 企业官网

Grayscale

Grayscale

Grayscale 是 Start Bootstrap 出品的深色系单页 HTML 模板，基于 Bootstrap 构建。 它的视觉重心放在大尺寸首屏和清晰的内容分区上，整体氛围偏暗，适合摄影、活动或品牌叙事类网站。

HTML · 企业官网

startbootstrap-stylish-portfolio

startbootstrap-stylish-portfolio

Stylish Portfolio 是 Start Bootstrap 维护的单页作品集主题，基于 Bootstrap 构建，采用多个内容区块加离屏导航菜单的结构。

HTML · 作品集