This project was created to capture the charm and appeal of the characters in Hades, providing users with an engaging and visually pleasing experience. Whether you're a fan of Greek mythology or just curious to explore the characters, this web app offers a fun way to interact with the game's cast.
Link to project: https://notare.github.io/hades-select-your-character
Tech used: HTML, CSS, JavaScript
I wanted to bring to life an immersive character selection experience inspired by the Hades game. While my frontend development expertise might not be extensive yet, my passion for creating captivating user interactions fueled every step of this project's creation.
HTML: The structure of the web app was established using HTML. I organized the content into sections: one for character selection and another for displaying detailed character information. Each character is represented with a unique class and data attribute.
CSS: The visual aspects of the project were crafted with CSS. I leveraged CSS Flexbox for the layout, ensuring responsive design across various devices. I implemented custom styling for the character buttons, including hover effects and selection highlighting. Additionally, I used Google Fonts to apply a unique typography style to the project.
JavaScript: The interactive aspect of the web app was brought to life using JavaScript. I added event listeners to the character selection section, allowing users to click on characters and see their information displayed on the right side. This included updating the character's image, name, and playing associated audio. I aimed for a seamless user experience by managing the audio playback and resetting the selection state when a new character is chosen.
This project has allowed me to showcase my dedication to creating engaging and user-centric web experiences. The process has also ignited a desire to further enhance my skills in frontend development and design.
I recognized the importance of not only achieving a visually appealing result but also ensuring efficient functionality. This mindset drove me to implement several optimizations that enhanced the user experience and performance of the web app.
One notable optimization was the handling of audio playback. When a user selects a character, I ensured that the associated audio for the previous character is stopped, preventing any overlapping sounds. This not only maintains a pleasant auditory experience but also contributes to the overall cleanliness of the interaction.
To reinforce the sense of engagement, I incorporated a hover effect and border styling on the currently selected character. This subtle yet effective touch not only guides users but also adds a layer of interactivity that aligns with modern design standards.
While I successfully accomplished these optimizations, I acknowledge that there's always room for improvement. Given more time, I would focus on refining the image size of selected characters. Since the original image sizes are not standardized, I envision implementing a consistent image enlargement on selection to provide users with a clearer and more detailed view of their chosen character.
These optimizations underscore my commitment to delivering not just functional products, but ones that prioritize user satisfaction and engagement. They also reflect my drive to continuously learn and implement best practices for a more polished and efficient user experience.
One key takeaway is the significance of meticulous planning in frontend development. Starting with a well-structured layout and carefully designed interactions sets the foundation for a successful project. The importance of attention to detail in HTML, CSS, and JavaScript cannot be overstated, as it directly impacts the user experience and overall functionality.
Additionally, I learned the value of optimization. Recognizing areas for improvement and implementing solutions, such as refining audio playback and enhancing user feedback, demonstrated the transformative power of fine-tuning even small aspects of a project.
This endeavor has left me even more committed to embracing challenges and continuously expanding my skills. The satisfaction of delivering an engaging, polished product underscore my passion for frontend development and the exciting path of growth it offers.
Top Brother Rocha (MMA center): https://github.com/Notare/top-brother-rocha
Bia Cabeleireira (hair salon): https://github.com/Notare/bia-cabeleireira
Bar do Léo (bar and restaurant): https://github.com/Notare/bar-do-leo