Project Name:
EmblemCon
Software & Technologies Used:
-APIs
-Adobe Illustrator
-Adobe Photoshop
-CSS/SASS
-HTML
-JSON
-JavaScript
-JavaScript Libraries
-Lumen/Laravel
-Procedural PHP
-Responsive Design
-VS Code
-phpMyAdmin
Client:
EmblemCon
Link:
EmblemConDescription:
An upgrade and revamp of the EmblemCon website.
Back in 2024, just as I was graduating from college, I was noticing that con goers in the artist alley wish there was something that could help them look through shops more. As such, I stopped and thought "Is there something I can build that can do that?". I talked to the mods of EmblemCon and offered to build a filter system for them that would list all of the Fire Emblem games, and then display a list of artists that are selling art with characters from that game.
Because of this offer, I was brought on to be part of the EmblemCon team! Their current website was functional, but they were limited due to the amount of pages they could use and display because of their web host service. Thanks to my Professor from college, I knew how to navigate a new web service for them and offer them unlimited pages to use.
EmblemCon is mostly a hands-off team, as all of the work being done is by volunteers. I worked with other members, and the only requests I had was to not make the filter system too extensive that it takes away from the experience, and to have a gallery.
Due to the limited nature of the convention, aka being online only and the streamed vods only being available for 30 days after recording, I had to get creative in how I wanted to approach the whole website. In terms of assets, there was a bunch created already by one of the other mods that I asked to use. Anything else I tried to create myself via Illustrator until we could get something a little more final.
One thing I wanted to convey and showcase with the website, was heart. This convention is run by volunteers who have a common love of Fire Emblem. This isn't just limited to the mods, but artists, voice actors, and other creatives as well. Everyone comes together for the love of the franchise, which I find to be beautiful and what gives EmblemCon its true strength.
One of the ways I wanted to convey this was to have an area that would link to pages detailing some of the things that were made by the EmblemCon team for the convention. This included mascot comics, assets, off season events, and more. To me, it's a shame that these things can be viewed just a short amount of time during the year, so I wanted to have a place where they could live and be appreciated year-round. Thanks to this, I was able to fulfill the gallery request, with more than one.
Something else I wanted to include was a team page. Everyone works year round; creating ideas for the con, ensuring that the off-season chat stays civil and clean for everyone to use, answering questions, and more. I wanted to have something that gives a little bit of humanity behind the team, to show that the team isn't just a group of screennames and messages. As such, I created a form for the team to fill out which includes some small information like their name, pronouns, favourite character, and a short bio. Once that was filled out, I tossed all of the information into the database to be accessed, displayed, and styled via Javascript and an API Call.
The biggest challenge for me was mixing professionalism and the heart I wanted to achieve. There's a lot of information when it comes to convention websites that needs to be displayed, and I didn't want that to be drowned out. It was difficult, but I was up to the challenge, and I think the end result is something that I believe everyone can enjoy!
Thumbnail
The home page of the convention website; where it shows latest updates and helps users get started. There's even a scrolling hero image as well!
Part of the team page, where the lords information is being displayed. Clicking on one will activate a CSS animation to display that user's specific information.
The filter system that was originally conceptualized. The games are coded by their game's continent; due to remakes being a factor and could make selections look chunky.
Thumbnail
Thumbnail
Thumbnail