Gaming Photo Gallery

github project snapshot project snapshot

I wanted to make a website that was responsive but also have code that was scalable and rely more on Javascript and not have too much HTML.

Process
Innitial Idea

The initial idea was just to organize and categorize photos for Love & Deepspace, a mobile game I enjoy playing. Taking photos in game is a big part of the gameplay, so that was one of the main reasons, this idea came about.

Initially, the html and JavaScript set up wasn't too different from this portfolio site's home page. But because the photo gallery site's photos only lead to a modal, the html ended looking fairly repetitive. So the decision was made to convert much of it to Javascript to project the html appropriately depending on the picture and categories the photo belonged to.

So with refactoring the code to involve more code projection, there also came another issue I arrived to. I had way too many Love and Deepspace photos to input efficiently into code. So part of the refactoring involved at this point was transfering much of the photo data, the image sources, the photo catories, and the photo ids I'd chosen, into JSON. This decision didn't come to me at first admittedly because I haven't worked with it all too much in the specific context of organizing data. So this was a good opportunity to try.

The primary categories for the photo gallery would be the five main characters you interact with. The other categories would be photo modes, whether it's Solo shots, Duo shots, snapshots, or portrait shots, while the rest would be misallaneous modes that sometimes did not involve the five main characters, like the background toggle for instance.

After adding more photos and filters, I've come to realize this website would be very useful for me with screenshots from other games too. So I had to do a lot of refactoring to adjust some of the code's scalability. That way, I would have an easier time adding more games down the road.

The easiest way I could think of to have more game options while taking up the least amount of space as possible was to use a drop down menu. So that was put at the top for convenience. So I added more data JSON files while adding more game options in the drop down menu.