Custom "Sun Breathing" cursor: composed of multiple circles in different colors that follow mouse movement
HTMLPortfolio
Tanjiro-Themed-Personal-Website — HTML Portfolio Template
By YOBO-DANCE
A pure HTML personal portfolio page themed around Tanjiro Kamado from Demon Slayer, featuring a custom cursor, a sword rack-style awards display, and a liquid glass interface.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-03View source
What stands out
A quick read of the recorded project description.
Sword rack-shaped awards display area for showcasing personal achievements and skills
Liquid glass interface, uniformly controlled by three reusable CSS classes: .glass-box, .Introduction-para, and .stats-modal
Content data stored in HTML data-* attributes; click handler renders the corresponding modal template based on data-type
Declares support for prefers-reduced-motion, focus-visible keyboard focus styles, and alt text for decorative images
Template Details
This is a single-page personal portfolio built with pure HTML/CSS/JS, with the overall visual centered on Tanjiro Kamado, the protagonist of Demon Slayer. The page organizes personal introduction and portfolio content through a custom "Sun Breathing" cursor, a sword rack-shaped awards display area, and multiple liquid glass (glassmorphism) panels.
In implementation, the project does not rely on build tools and can run directly with any static file server. Awards and portfolio data are stored in HTML data-* attributes, and a unified click handler reads data-type and renders the corresponding modal template (book button, song list, or pure data display). Adding a new entry only requires adding an HTML block. The liquid glass effect is defined by three reusable classes: .glass-box, .Introduction-para, and .stats-modal, which share the same backdrop-filter, border, and shadow values.
The project declares prefers-reduced-motion support, focus-visible styles for keyboard navigation, and alt text for decorative images. Note that the hero video, character backgrounds, and Nichirin sword illustrations used on the page come from third-party sources such as Ufotables, Kopetfangki, and Pinterest. Their licensing status is independent of the code's MIT license and must be verified separately before use.
HTMLPortfolio
Is it right for your project?
Use Cases
- Create a character-themed personal homepage or portfolio for Demon Slayer fans
- As a pure static HTML/CSS/JS project, learn how to drive content rendering with data-* attributes
- Reference its liquid glass panels and custom cursor effects for other single-page projects
- Deploy to static hosting platforms like Vercel as an online resume or portfolio page
Suitable For
- Front-end learners who want to quickly build an anime-themed personal portfolio
- Developers who need a pure static page with no build step
- Web designers who want to reference glassmorphism and custom cursor implementations
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
No dependencies to install; run with any static file server
- 2
Use npx serve . to start on port 3000, or python -m http.server 8000 to start on port 8000, or php -S localhost:8000
- 3
The project is pure HTML/CSS/JS with no Node or Python version constraints
- 4
Third-party assets such as videos, character backgrounds, and illustrations on the page must be verified separately under their respective licenses and are not licensed together with the code's MIT license
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license from the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as-is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- The hero video asset used on the page comes from a third-party source, Ufotables. Its licensing status is independent of the code's MIT license, and its license terms must be confirmed before use.
- The Tanjiro character background image in the second section comes from a third-party source, Kopetfangki, and is not licensed together with the code's MIT license. Verify authorization before use.
- The Nichirin sword illustration comes from Pinterest and is a third-party asset. Its licensing status is independent of the code license; confirm before use.
- The Hotaru Haganezuka character artwork is credited to the original author Koyoharu Gotouge and is copyrighted character art. It is not licensed under the code's MIT license; authorization is required before commercial use or redistribution.
- The project uses GSAP 3.12.5 and the ScrollTrigger library, which are governed by their own license terms (GreenSock Standard License), different from the code's MIT license. Confirm their license scope before use.
- Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional fees.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Hero video | Ufotables
Original README
Tanjiro Kamado Background in Section 2 | Kopetfangki
Original README
Nichirin sword illustrations | Pinterest
Original README
Haganezuka character art | Koyoharu Gotouge
Original 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.mdGSAP 3.12.5 + ScrollTrigger | [GreenSock](https://greensock.com/gsap/)
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-03. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 83 / 100
- Technologies
- HTML
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-09-15
- Screenshot last checked
- 2026-10-03
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-04
Inspect the recorded source material
SHA-256: 904dc03c155a0429ddc077677f83148da97437c35de401ec5683fe94bd7d3a65
2026-10-03T20:32:22.429Z
Source file / repository<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 .
```
```bash
# Option 2: Serve using Python (opens on http://localhost:8000)
python -m http.server 8000
```
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
- ### 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!
## 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 ╯︿╰*
Explore similar templates
Compare previews and descriptions within the same stack and category.
simplefolio
Simplefolio is a minimal single-page portfolio template for developers, built with HTML, Bootstrap, SCSS, and Parcel under the MIT license. It includes Hero, About, Projects, Contact, and Footer sections, with content edited in /src/index.html and theme colors controlled by two SCSS variables.
HTML · Portfolio
Freelancer
A bright, single-page Bootstrap portfolio template for freelancers, designers, and small studios. It includes a responsive portfolio grid with modal detail windows and an SB Forms contact form that requires an API token.
HTML · Portfolio
Resume
A single-page resume and CV template from Start Bootstrap, built on Bootstrap with a fixed sidebar and content sections.
HTML · Portfolio
Creative
A single-page marketing template by Start Bootstrap for creative agencies and product services, built on Bootstrap with SCSS, featuring a portfolio grid and call-to-action sections. It includes pre-set SB Forms markers for form integration and npm build scripts for source customization.
HTML · Corporate Website
Grayscale
A dark single-page Bootstrap template from Start Bootstrap for photography, events and brand storytelling, with a large hero and clearly separated sections.
HTML · Corporate Website
startbootstrap-stylish-portfolio
A one-page Bootstrap portfolio theme from Start Bootstrap with multiple content sections and an off-canvas navigation menu. Basic use means editing HTML/CSS under dist and opening index.html; advanced use relies on npm with Pug and SCSS build scripts.
HTML · Portfolio