An anime-style portfolio website inspired by Bleach: Rebirth of Souls, combining immersive character selection with interactive UI design and personal resume content. This project demonstrates full-stack capabilities using HTML, CSS, and JavaScript along with animation, JSON data handling, and modular code organization.
- Choose between multiple anime-style characters.
- Dynamic costume selection with hover effects.
- Each costume dynamically loads a unique map selection screen.
- Characters include 2–3 unique costumes, each with its own:
- Artwork (full-body image).
- Description.
- Unlockable maps.
- Designed like a carousel with angled map cards.
- Includes background previews and map descriptions.
- Select a map to load a connected resume section (
resume.html#skills, etc.). - Smooth loading screen with animated transitions.
- Fully animated parallax scroll resume built in
resume.html. - Sections include:
- Education & Certifications
- Skills
- Work Experience
- Soft Skills
- Honors & Awards
- Intersection Observer reveals content as user scrolls.
- Custom
BleachFont+ responsive layout.
- Inspired by Bleach anime UI:
- Black & red color palette
- Glowing borders
- Hover transitions
- Custom animations with GSAP and CSS transitions.
- Fully responsive on mobile and desktop.
- Character data from
bleach_characters.json. - Map and costume relationships from
bleach_map.json. - Dynamic rendering handled via
script.js.
- Random character slot with silhouette icon.
- Locked character slots with padlock image.
- Designed for possible expansion: more characters, costumes, maps.
- HTML5, CSS3, JavaScript ES6
- GSAP for animations
- JSON for data management
- Google Fonts + custom font loading
- GitHub for version control and demo hosting
- Clone the repository:
git clone https://github.com/Edge-J/Character-Selection-Portfolio-Website.git