Interactive Character Selection UI - Based on game Genshin Impact

Overview

A frontend web application that displays characters from Genshin Impact, organized by region. The project focuses on interactive UI elements and dynamic visual feedback using vanilla JavaScript without external frameworks.

Tech Stack

• HTML
• CSS (custom styling, scrollbar customization)
• JavaScript (DOM manipulation, interactivity)

My Contributions

• Built the entire frontend using vanilla HTML, CSS, and JavaScript (no frameworks)
• Implemented interactive hover effects to reveal character visuals and details
• Designed UI transitions where character silhouettes animate into full images
• Added dynamic background changes based on character element types
• Integrated audio toggle functionality for background music
• Structured content by region for organized navigation
• Visuals completely made with CSS

Key Features

• Interactive character selection grid with hover-based animations
• Region-based categorization of characters
• Dynamic visual effects tied to character attributes (e.g., element types)
• Custom UI styling including scrollbar design
• External linking to official resources

Challenges & Decisions

• Implemented interactive UI effects without relying on frameworks, requiring direct DOM manipulation
• Balanced visual effects with performance to maintain smooth user interactions
• Designed layout and styling to keep the interface visually engaging and organized

Notes

• This project was not deployed publicly and was developed as a frontend-focused exploration project.