AetherRealm
Project Description
AetherRealm is a fan-driven website designed to bring the world of Final Fantasy XIV to life. The project includes various elements such as an image slider, a dynamic graph, and a small game, all designed to enhance user engagement. Tailwind CSS was used to create a fast and responsive design, while jQuery added dynamic functionality throughout the site. In addition to the main page features, jQuery was used to fine-tune the responsive layout and enable form validation for improved user input accuracy and feedback. Performance optimization was also prioritized, including reducing image sizes and using caching to enhance load times.
The design draws inspiration from the Final Fantasy XIV universe, incorporating fantasy-themed colors and custom graphics to maintain a cohesive visual style. The result is a fully functional and engaging site that provides an enjoyable browsing experience for fans of the game.
Role
As the sole designer and developer, I was responsible for the entire project lifecycle. I used Tailwind CSS, jQuery UI, and custom styles to create a visually appealing interface that works on all screen sizes. I also integrated jQuery for dynamic features, such as the image slider, multi-select, and game. Additionally, PHP was used for back-end functionality, including data processing for the graph and forms.
This project provided an opportunity to expand my skills in jQuery, game development, and performance optimization. One of the biggest challenges was incorporating a countdown timer into the game, as it was my first time doing so. Despite the difficulties, I managed to make it work, and it ultimately enhanced the game by adding an element of urgency and excitement. I also focused on creating interactive features, such as the form, filterable graph, and many others, which pushed my knowledge even further. The process allowed me to think outside my usual style, improve my problem-solving abilities, and learn the importance of caching, image size reduction, and how to create more engaging elements for users to interact with. I also discovered how much of an impact these elements can have on the overall user experience.
