Project Name:
Ogerpon Website
Software & Technologies Used:
-Adobe Premiere Pro
-CSS/SASS
-HTML
-JavaScript
-VS Code
Client:
Self
Link:
Ogerpon WebsiteDescription:
An informational website built as a side project, based off the story of Ogerpon from Pokemon.
Back in September 2023, I still had the coding itch and we were told we need to have some side projects in our portfolio to make it unique. That it would be a boon to have something different than the in class work and that potential employers may be tired of seeing the same old assignments.
I had just recently played the Teal Mask DLC in Pokemon Scarlet and Violet, and the main Pokemon in it, Ogerpon, touched my heart. I wanted to build a website dedicated to her, so I created a mock up informational website, one that you might find in the Pokemon universe, that exposes the truth behind Ogerpon. The poor thing went down in history as a villain, so it’s only right that something exists to help correct the mistakes of the past and clear her name!
The biggest challenge for this website was design. I was trying to create a website that looked like something Nintendo would publish. I went to various Nintendo websites like Splatoon and Smash Bros and realized that there were really no consistent elements in the websites, aside from them being single scroller pages with sections of information. As such, I decided to stick to what I was comfortable with and focused on functionality for the website.
And frankly, the functionality was fun! I took the stuff I learned over the summer, and even practiced some tips one of my professors gave me, and built it out to how I want it!
Thumbnail
The initial information being displayed, where it gives lore that's in spirit of the theme of the website.
A gallery using various screenshots from the game. Click on a thumbnail and it changes the source of the larger image!
My personal favourite area, where it displays the special forms Ogerpon gets where it terastalizes. Clicking on a mask changes the information below, including the video source.
Thumbnail
Thumbnail
Thumbnail