ceu: (beronica)
Arrow ([personal profile] ceu) wrote in [community profile] masterball2026-03-03 03:43 am
  • Add Memory
  • Share This Entry

Updating documentation... you know what that means.

Last Updated: 28 February 2025

This is a manual on how and why I built Masterball. It is very long, with a lot of lists and subsections, and is mostly for me to verbalize the thoughts and reflections I had while (and after) making this website.

I may make changes or rewrite this wholecloth in the future. Here is how I've documented this site for now.

Table of Contents

Introduction

I made this website in February of 2017, but only started writing documentation for it in late November/early December 2025, and have continued it since then. I consider this documentation to be mostly accurate due to my trust in my own memory, but as memories work there are some pieces of the earlier process that I recall only vaguely, if at all. Additionally, the depth of my understanding of code, design, and web development has evolved over time, and continues to do so even today. My experience with web development and front-end code is and has only been entirely self-taught with minimal tutorial usage because I'm impatient. I started web designing like playing a video game without reading the instructions first, just like when I was younger and playing Pokémon for the first time.

The first website I owned dedicated to Pokémon was a fanlisting for Pokéballs, adopted from Georgie in 2011. My interest in maintaining fanlistings fell through; still, in the back of my head I knew I liked the idea of owning a website related to my love for Pokémon. All the creative independent Pokémon sites I'd been exposed to in my internet space so far had been shrines for specific species or characters or ships, or fanlistings which had more commitment in maintaining the listing regularly. So the thought of making similar shrines and fanlistings occurred to me repeatedly, but if I was honest with myself, wasn't very appealing.

And while there are Pokémon species and characters and ships I love, I wasn't that interested at the time in making web shrines. Shrines require a lot of work in writing, particularly the style of balancing the personal with the informative, something I've only been more confident with in recent years. And it's a lot of writing. I admire friends and sites I know with a ton of elaborately crafted and exhaustively written web shrines, but when I sit down at my computer, it's hard for me to fathom even starting one.

My favorite thing about making websites at all is the design component. I love writing and storytelling and analyzing, but it feels like a different task when the element of aesthetic design is added as well. Design and customization is purely indulgent for me; the work I put into writing things for my websites and making content for them is oftentimes an excuse for me to show off my designs. Yet I love Pokémon so much. So how was I to make a website dedicated to both of these things I love?

In January of 2017 I was thinking about my digital presence, perhaps a bit too much. But I asked myself again: what do I love about Pokémon? How can I create a personal and indulgent website about the franchise I've loved the longest, in a way that feels accurate to the relationship I have with it? And then it was so obvious: my teams in all of the games I'd played. I really only ever play a Pokémon game once, because I get so attached to the little bytes and pixels in my game data that I don't have the heart to reset and start all over and wipe my old team away. (Except for that one time where I had a bootleg copy of Emerald that would never save, so I played it for long stretches of time.) I love Pokémon because I love my Pokémon. Since I wanted to make a site driven by my relationship with Pokémon so badly, I could just make a site centered around it.

So that's what I did. I've also moved all of the Pokémon archived here to the most recent storage systems (currently Pokémon Home) so I can reset the games now while my old Pokémon remain accessible to me. But I still really only ever play the games once.

Background

As the seeds of this idea drifted in the wind toward me in January 2017, my life was in an in-between state. I'd dropped out of college for the first time in 2015, and spent the majority of 2016 traveling with the excuse of finding myself, though I was mostly just spending my credit card on trinkets I liked. One of the places I traveled to was Osaka, Japan, and the only thing I planned on doing there was visiting the Pokémon Center and buying merchandise for me and my friends. I'm sure I found a bit of myself somewhere along the way.

After dropping out and traveling, I lived with my mom and had few obligations and a lot of mental health issues. So it was a good time for me to put way too much time into my hobbies, including web development and design. After the idea of creating a personal archive crystallized in my head, I worked on it immediately and obsessively, as I do with any creative project I take on.

The details of creating this website from the ground up are a little fuzzy to me, but what I do remember with resounding clarity is that I designed and created all of the mainline game archive pages up to that point in one sitting, more or less. As the entire spotlight of this site, they were the pages I was excited to work on the most, even if listing all of their moves and metadata and characteristics turned menial and daunting at points. But this is one of the rare projects where, to me, the process isn't as important. It's the end result, and the satisfaction that I could archive something that means so much to me in a digital and creative way.

The pages that I designed in their beginning stages that are pretty much the same today are:

  • The splash page (with minor edits).
  • The trainer landing page (with minor edits).
  • All game pages from Ruby to Moon.
  • Favorites, Miscellaneous, and the Shiny Gallery got added soon afterward.
  • The Gym landing page.
  • Within the gym: Fight (site metadata, with minor edits), Bag (at the time, an external page rather than an in-page JavaScript toggle), Flee.
  • The Pokémon Go page, because I'd also spent a lot of 2016 playing PokéGo while traveling.

The design for the mainline game pages is simplistic, but that's intentional: I'm a minimalist, so I make the focus on content the crux of a webpage's design instead. Plus, when I was 18 I liked the idea of having a network of webpages that each had a distinct color theme that I could collate together like a rainbow. I tried to implement that rainbow idea for another website project before, but that didn't bring me the satisfaction I'd hoped. Distinguishing my Pokémon parties across different games, however, certainly does. It feels a little full circle being able to channel this older creative idea into this newer, more suitable one.

During these beginnings, I was happy to contend with my inclination towards minimalism without needing to depend on graphics in a designing manner in order to bring my vision for this site to life. Yet even so, I began to realize with progressive clarity at how much general web development and coding knowledge I was lacking in, especially as I'm not the sort to really keep up with modern developments in code. I didn't use root variables to translate skins (and still don't, though this may change), I struggled with making the JavaScript in the first iteration of the Bag page to work, and for the more autobiographical section of my Trainer page, I didn't know until years later when I asked on StackExchange that I was using depreciated JavaScript logic. My passion has always been there, but since I've never really formally learned or been taught to think about webdesign in a technical manner, I knew that there was an entire ocean of contextual knowledge that I was missing out on.

But it was nice to have as a project, and served its purpose at the time: to look cool, to archive some pixels that I love, and, for me, to feel proud of it anyway. I then returned to college in fall 2017, this time majoring in Computer Science. I'd been conflicted about what I wanted to major in back when I was in high school, based on the two things I loved doing the most: telling stories, and making websites look pretty. I'd initially decided on Creative Writing, but upon learning that assigned reading in school only gets harder when it's my academic major, I swapped to Computer Science the second time.

I didn't learn any more about web development just by majoring in CS. But in my own time, I did, even if just a little bit. In the academic environment (and with ADHD medication) I learned to think about code algorithmically, strategically, modularly. I learned better the components of making things interact and operate and display from a coding angle. I learned the whys behind the best practices, not just the whats and hows. I dropped out of college again 2.5 years later because of my mental health (again) and covid, but even though I didn't write any programs beyond my college assignments, I understood coding and development, as a whole, with a lot more coherence and confidence than I had before.

This is mostly to say that there are significant portions of this website that I made before thinking about it technically, and the updates I've made since then have fallen more in line with this more functional and structural mentality. Websites had always been about the front-end experience to me; I used to think, who cares what it looks like from the back-end? But the truth is that I care about what it looks like from the back-end, especially as this is an ongoing project, so I need a comprehensible system that allows me to update it in the future without much hassle. Since the initial launch of this site and prior to November 2024, the only updates I had made were adding new pages for new games I played, and eventually removing initially planned portions that I realized I had no interest in following through with.

But starting in September 2024 I got the webdesign itch like I hadn't before, not since I was 15 and addicted to making several HTML/CSS layouts every day. I worked on my other web projects, and in lieu of that I touched up some things about Masterball that I thought I could do better. I decided to hunt for more affiliates just to keep my button wall more up to date and with less broken links. I reached out to some webmasters after clicking around here and there, which resulted in me getting an email from Butterfree that changed everything.

Well—not everything. But it did encourage me to think about (and subsequently change) the structure of this site, after retaining the same architecture for over seven years. And I knew I wanted to, anyway. This site was made while I was a creative writing dropout, but several years later I was someone who'd studied Computer Science for three years and had a steady job. Now I had more learned knowledge in code, design, and overall development reasoning. So the idea of changing this website that had been pretty much the same for several years was both daunting but also exciting. It made me think of how to make it accessible and navigable while retaining my stylistic touch and ambition to make it a unique experience of its own.

And all these years later, I finally understood something critical about myself: that I like making websites as a hobby and purely for fun. Though not the reason I dropped out the second time, I'm somewhat glad I never finished getting a CS degree. My interest in majoring in it in the first place back in high school was driven by my interest in webdesign and therefore no different than my interest in studying creative writing, too: I like doing them for fun, for me, in my own time, and not for anyone else. This is a passion project as much as any of my other websites or stories, and I want it to be thorough, accurate, and true to who I am as a person, Pokémon fan, and webdesigner. So upon getting prompted to think of new ways to improve my site, and then doing so, it was quick work for me to reorganize pages I had made several years ago into making more sense, and to come up with new ideas.

So here I am several years later: with a project I started when I was at an aimless point in my life and just wanted something to work on, to now where I'm eager to add and evolve this website as I traverse the inevitability of time. I'm much more confident in who I am and what I want, and one thing that I will continue to want is to change, to improve, even if it's in ways that only matter to me. Though this website is nominally centered around my love for Pokémon, it's also centered around my life. Pokémon is the franchise I've loved the longest with a consistent intensity more than anything else, even if I've written more fanfiction for other media or put more hours into other video games. But ever since I watched the Pokémon anime for the first time in that kindergarten classroom (which I can still recall with clarity because it's tied to that specific memory), I was hooked. Pokémon had taken its hold onto me. Even as the years passed, I always returned for more.

Site Purpose

The conceit behind Masterball is encompassed in the following four ideologies:

  1. It is a website that only I can make. Every element and aspect is directly tied to my life, experiences, and decisions: in games, teams, webdesign, and everything else. The unique thing about this website is not about the Pokémon or website aspects of it, but that everything about it is intrinsically tied to me. This website is a reflection of me much like my other personal website projects are; this one in particular is through the lens of the Pokémon franchise.
  2. It is an experience. My favorite websites—and, in a larger scope, something that I just enjoy conceptually—are ones that feel like a scavenger hunt, where you have to click on a lot of links, open a lot of doors, out of sheer curiosity and maybe get rewarded for it. Though a lot about websites and website-making have caught my interest since I was 11, I continued to be an internet cretin and eventually started noticing how much I liked websites that felt more than just some information in a web browser. Even from its beginnings, Masterball was my attempt to emulate that type of website, one that didn't just require you to read, but also to explore. And maybe you'll get rewarded for it along the way ;)
  3. It is an ongoing experiment. I love trying new things, especially in webdesign, but a problem I tend to run into with web development is that there needs to be a purpose for everything; there needs to be information to display or communicate in order for the design to need to exist in the first place. Masterball allows me to stretch my aesthetic muscles driven by my own vision and the things I like, rather than hanging the weight of expectation over my head. I don't want to feel limited in content, design, or structure. This website is whatever I want it to be, as long as it feels true to my desires.
  4. ...but it is just a Pokémon website at the end of the day, and so it is designed to reflect that in some way on every page. From the names of sections, to what goes where, to the graphics and use of in-game text, and to the nods to specific gimmicks in certain games, particularly the ones that I have a special fondness for, this website is ultimately about Pokémon. And it won't let you forget that.

Name

This website was always named Masterball, even before it had its own domain name. I purchased icirr.us in 2018, a year or so after I'd first put this site online.

Why Masterball? In coming up with a name for this site, I knew I wanted something obvious enough to be tied to Pokémon, but not too specific or broad. Something meaningful to me, but had a distinct taste even in the keystrokes of others. I decided on masterball primarily for the reason that I liked to cheat in my old Game Boy Advance and DS Pokémon games, and the first cheat I'd always turn on was an infinite supply of masterballs. You put a game shark in my hand, I was there. It also fits with my nickname anecdote from when I was a child and earned the title of "Pokémon Master" from my peers.

I suppose I enjoy the design of the ball, though since naming my site after the masterball I feel like I tricked myself into liking it a lot more now. It's almost poetic after adopting that Pokéballs fanlisting so many years ago. Moon balls are my favorite design, though. And I don't really have a double meaning for the "M"—my name does not start with M, unfortunately—so if you'd like deeper meaning on that, then it stands for, uhhh, me!

Why icirr.us? This site was initially hosted on an old website under the pkmn subdomain, because I like the idea of having subdomain projects. But this one got more ambitious and deserved a domain on its own. Even as I started it, a part of me knew that I'd be invested in working on it for a long time, so as long as my interest in Pokémon (and, apparently, webdesign) never weaned. In the back of my mind I wanted it to have its own home eventually.

This came to when I was idly pondering over domain ideas a bit later. I knew I was already very fond of Icirrus City from Pokémon Black because I enjoy the gimmick of the music changing and adding claps when you stand close to the ring of dancers. And yeah, that alone actually made Icirrus City my favorite city of all time. It's also just a nice city name. So when I realized that it would work perfectly as a .us domain, the idea lived in my head for months before I purchased it. I gave myself time to consider it because I tend to with big permanent-feeling choices like this. In the end, I purchased it a little over a year later, especially as I had the money and it was pretty affordable for me at the time, too. I was also retiring the domain that it had been a subdomain on, and wanted a domain that felt good, right. If I didn't like it in a year, I'd thought, I could always change it. But here we are now, years later.

Why two names?

While I was pondering over domain ideas, I already knew without question that I didn't want a domain like masterball.com, or .org, or .info. I didn't want masterball to be in the URL—it felt too committed, even if this site has still been named Masterball ever since. When it comes to things that are a creative reflection of my identity, I like to make choices that feel right just for me, even if it seems senseless to others. I don't like conforming to expectations. I like being able to do whatever I want.

So it had never really been a serious point of consideration, though I entertained the thought once or twice. Now, years later, I like the idea that my website has two names—who says that it should only have one? I use them both pretty interchangeably, though I suppose I'd say its preferred name is Masterball and icirr.us is on the birth certificate. But it's neither deliberate nor accidental, just a result of some decisions I made because they felt right to me in the moment, and continue to make me happy now. I have two names myself, anyway.

Construction

Design Notes

My initial approach to the design of this site was rooted in my own capabilities as a visual artist, which focuses more on minimalism and making use of negative space. I wanted the site to look good, but I didn't want to depend on graphics for that. Graphics are used here for function and substance rather than for decorative emphasis: that's how I like to design. And the only graphics I use are obviously Pokémon related in some way—in the sense that it's obvious with a mere glance, even if it's written on the tin. My penchant for minimalism makes those graphics stand out, and therefore also the decision making behind displaying each distinctly Pokémon-related image.

But I'm not being limiting here: this was just my initial approach so I had somewhere to start. A lot of style elements are obviously somewhat Pokémon-related too, and the use of accompanying graphics makes it achieve that Pokémon feel, rather than just being a simple design choice. I like creating things based on an existing media, something already concrete, but drawing out my favorite elements and personal feelings and interpretations to explore the sea of transformation in order to make something new and derivative, uniquely by me. I do also like coming up with original ideas like a greco-roman god birthing from one's head—but this website isn't like that. It's a love letter, a time capsule, a personal archive. I want everything about its experience and interface and substance to reflect that.

While I have my preference for simplicity and translated some aesthetic motifs across more universal pages for consistency, this website is mostly a place for me to follow my creative whims, wherever they may take me, and whenever that may happen. The flexibility to allow myself to design based on what the pages require rather than what I've already done makes this website feel like an exciting mishmash of all the different types of webdesign that I like, even if they're not necessarily in that minimalistic instinct. I created this website because I thought it'd be cool, and I continue to work on it in order to maintain that relationship with it. There's no final version of this site in my head; I improve on it as new ideas come to me, but I have no desire to make it ultimately perfect and unchangeable at any given point. In fact, I'd rather see how long I can be happy with a design.

Aside from this documentation, I don't spend a ton of words talking about myself on most of the rest of this website. I like to keep things brief, which complements my minimalistic affinities. My feelings are ever-changing, anyway, and while this site basically has my history with Pokémon on display, I don't intend for it to read like an encyclopedia or an informative website. Instead, it's more like a museum gallery: the exhibits speak for themselves, and I hope that visitors take something away from them. Even if that visitor is just me.

Sectional Distinction

When coming up with the sections and how visitors interact with the site, I wanted the undeniable identity of this being a Pokémon website not just make itself evident through its content or design, but practically oozing with every choice I made. I decided from the jump that everything would use Pokémon terminology in some way, even if that may make it harder to navigate for someone with a different level of familiarity than me. This doesn't impede my ability to make things more accessible, but I know that that can only go so far when I'm naming everything after Pokémon gimmicks.

What's important to me about this is that everything about a section must be related to its purpose in some way, though its obviousness or degree of relatability may vary across different sections. But its name must be tied to its design which also must be tied to its content and how I feel about the content, and while I can settle for something that may feel good enough, I don't want less than that. Additionally, I want each section to feel distinct from other sections in some way, when applicable and to relevant degrees. Though this is one website, I want the experience to feel like a sprawling home of different websites.

The Bag in the gym is essentially an extremely reductionist presentation of these ideas: without explanation, it prompts you to pick an item leading you to another area of the site that you could otherwise access from the more explanatory home page. Though the bag exists out of menu completion, I like that it tests your familiarity with the functional nature of this website (and Pokémon.) The link names don't always match the names of the sections, largely because I only want the bag to list key items. Except for the masterball, of course. Still, there is some relevance between a section and how it's referred to in the bag. And it's a nice way for me to keep a reference to the guestbook being formerly designed and named as an Xtransceiver.

Fonts

I don't really complicate it with the font choices here. Century Gothic was my favorite font when I was younger, but I have a Mac and like the aesthetic display of the similar font Futura a little more. (The main font is still Century Gothic on PC though.) Both fonts fit with the minimalism aesthetic in their sans-serif nature, yet have a unique look, as I hope this website also feels despite its plainness in parts.

I use other fonts when the content calls for it. The trainer section is styled most similarly to the home and landing page because for all intents and purposes, it is the main showcase of this site, and the uniformity of font use reflects that. Other sections—the Gym, the Wild Area, the Secret Base—use fonts that better fit the content, and more often than not are monospace, primarily to emulate the video game feel. Inconsolata (the Gym and Fight font) is the font I've used the most on my other websites; chronologically, however, I believe it started here. It's more of my love-for-websites font, which fits with being used for my site's metadata.

What's different about this site?

As I've mentioned before, I have other website projects. This is just one of many, but it's a pretty big one nonetheless, due to the omnipresence of Pokémon in my life. I've made a conscious effort to make this one different in a lot of ways though, centered around a single idea with a clear focus (Pokémon), while my other projects have more personal or less franchise-driven intents. But I like channeling my more superficial and consumerist tendencies here.

Similarly, a lot of the tactics I use in both structure and design on this website are deliberately different from my other web projects. This came about due to the nature of this site; my mentality isn't any different. Some strategies that I've only ever or first used on this project include:

  • Gradient backgrounds, as I've never really found the need to use it before the Pokémon Go section.
  • Emulating another existing design and layout idea rather than creating or transforming my own, coming through the Pokémon Go page being reminiscent of the app.
  • Image mapping in the Secret Base. I've had experience with image mapping, from when I was younger and still learning everything, but even that was through my photo editor at the time. For years I hadn't even needed to want to use image maps, but this site gave me a reason to.
  • Radio buttons as in-page navigation in the Wild Area. This was brand new for me, relatively speaking, though I had always known how radio buttons worked in code. I didn't have a project that needed them before, so this was an exciting first time experimental use.

Much like my other sites, Masterball is mostly focused on organizational design with an emphasis on substance, because that's how I operate as an artist and a visual architect. If I were another person I'd say that I could change this around if I ever wanted to—but I won't, because this is just a part of who I am and how my creative brain works. Even with writing, I spend a lot of time thinking about syntax and vocabulary to strengthen my voice and style in prose. I'm consistent, I suppose. And an over-thinker.

February 2017: Process & Launch

Beyond conceptualizing and drawing wireframes, the first thing I did was make the index page and create the graphics in Photoshop. I wanted an obvious and visually appealing masterball motif, so I opted to make it more pastel than accurate to game sprites. I'd initially made the vector as a masterball idea to then convert into splash page graphics, and liked it so much that I made linkback buttons out of it right afterward.

I brought this website to life in the order I anticipated each page to be visited. As this was before I'd made the home page, the next thing I worked on was the trainer main page. Tackling it right after the index page had a functional use as well, in being a to-do list of sorts for when I would make the game pages shortly afterward. Prior to 2024, I had also cycled through various NPC avatars on the page, most prominently the female Ace Trainer, because I had attributed that trainer class to myself at the time, even though I've never been that interested in battling. I made the "about" portion of the trainer page (at that time an in-page pop-up) sometime between making the game pages, because I wanted to display a party of my favorite Pokémon and needed an excuse to sit six sprites next to each other.

I created all of my mainline game party pages after that, which started with me whipping out my 3DS and going through my lovingly crafted boxes of old parties and finding game-specific sprites for all of them. I wanted each page to feel like an accurate representation of my experience with the game, as substance-wise that's what it was doing; I wanted to emphasize it through the graphics and design too.

To structure the style of each page, I decided to have a universal stylesheet to adjust colors on each page while maintaining the blocking logic. As I went through each game, I differentiated between the generation and the year I played, particularly since I played both Heart Gold and Fire Red out of order. I quickly opted for each game to have a short blurb about my experience with it, as a way to evoke my own memories while appeasing my discomfort at the time with writing about myself in longform. When it came to Pokémon metadata, I wanted to archive everything that felt integral to my experience with each Pokémon and made it unique, even if it meant doing the tedious work of adding specific balls and ribbons (and their tooltips), as well as working with tables for my non-competitive movesets. I pretty much did the same thing for each game after I had procured the party and trainer sprites and started putting the page together to match what I'd envisioned for the structural template.

At least, for the first three. See, when I played Pokémon Platinum, I had a stupid ambition: to beat the game with only one unevolved starter. That starter was Chimchar, and it ended up working eventually thanks to RNG. I didn't want to display it like the other pages, though, which had more Pokémon. That would make it look plain and boring, and conflicted with my playthrough of Platinum, which, however inefficient, was still special to me at the time. So I adjusted it, even only just a little bit, to tie in that feeling to the webpage.

Then, when I was making the Omega Ruby page a few games afterward, I realized it looked too similar to the original Ruby game page. It was also the game I was the most obsessed with at the time, so I wasn't happy with the idea of it looking like a previous party page. I needed it to look different. So with Omega Ruby being a 3DS game and my already existing (though rarely used) knowledge of how to achieve 3D effects with CSS, I reached that natural conclusion of adding shadows to elements on the page to match that gimmick. I'd already made the X page (and hadn't yet played Y), so I went back and added the elemental shadows to it too. This later set the precedent for when I would later make my Let's Go Pikachu page during a flight in December 2018, and decided to add borders to the page to similarly represent that it was a game on the Switch.

My obsession with Omega Ruby also spurred me into making a separate page for progress in my attempts to 1000% the game. I was particularly proud when, shortly after making this site, I had gotten 1000 flags and could update my secret base graphic to reflect that. Giving myself this flexibility for game-specific subpages also later prompted me to make my collection of shinies during my addiction to raid den exploits in Shield. And though I haven't gone on long-term shiny hunts in Legends Arceus yet, I did hunt a handful that I show off on that game page because shiny hunting is a lot easier and more fun in this game.

The idea of having a Miscellaneous page was there from the beginning because my main party game box in Pokémon Black—where all my pre-3DS parties were living, at the time— also had these stray Pokémon, and I wanted to show them off too. Having a Favorites page wasn't in the original idea but occurred to me sometime during this initial development phase, because I wanted to list my favorites of everything related to Pokémon—I have opinions on characters and ships and mega designs!—and the Trainer page felt only fitting. The shiny collection was added some months after the project had been launched, because I got obsessed with shiny hunting in Omega Ruby as well as through the Pal Park in XY, and wanted a place to archive those hunts, when successful.

My vision for the Gym section was less clear, but was necessary because though I wasn't inclined to writing elaborate documentation like this yet, I knew the importance of public site metadata. It also made sense to be in the Gym, at least in my head. I settled on emulating the battle menu especially as I was pretty happy about the navigation hover effects. I chose to add the sprite of the gym guide from Emerald as well, to set up the idea of it being the Gym section along with being a nod to my extensive familiarity with the Hoenn games.

My idea for the gym sections were somewhat vague, aside from "Flee" being an obvious links-out page. "Fight" made the most suitable sense to have the bulk of the site metadata, being what you'd click on first and most often when in a Pokémon battle. My design for "Fight" has always been the same since the beginning, though I don't really feel a particular way about it. Its simplicity is necessary to make the content readable, or at least that's what I've been telling myself so I don't have to wrack my brain for ways to make it more creative. I switched from initially being an ice-type gym leader to a steel-type sometime in 2019, as a result of my Shield shiny hunting hyperfixation. Some friends I had met through this and I had brainstormed the idea of creating a sort of battle ladder as if we were gym leaders, though it never actually happened. But while we were discussing it, I realized how many steel types I liked, particularly in Galar and with my shiny gigantamax Corviknight. I was happy with the realization that I'd more accurately be a steel-type gym leader. It's a stronger typing than ice, anyway.

The original vision for the Bag part of the Gym was to stay in-page, but as I didn't trust my knowledge of Javascript at the time, it was a page on its own at first. It also had the site map contained inside of it as a similar looking menu, which was the real purpose of the Bag. I hadn't been too satisfied when it was done but couldn't think of how to improve on it for years.

I worked on the exit links out section next. I'd really only known a handful of personal Pokémon sites and collectives already so it took me a bit of hunting to find more Pokémon sites that I wanted to link to. When it came to the design portion, I'd actually already made the love ball graphic shortly after being satisfied with how the masterball graphics on the splash page had turned out, and figured using the love ball motif would be cute on the exits page. I remember that I considered some other design ideas, but found that I liked the aesthetic of the Love Ball too much to settle for anything else.

Lastly, I made the Pokémon Go section, which was the Pokémon link in the Gym at the time. I'd put it off to work on at the end because it required me to archive game data again, when the other sections were more about the site. Before I even started it, I knew that I wanted the webpage to look like it had been taken straight from the Pokémon Go app. So I implemented a CSS gradient background, turned my in-game trainer into a PNG, and archived my dex progress by displaying hundreds of sprites on one page. I've updated the trainer info off and on as often as I play Pokémon Go, though I like my current avatar a lot (added during the November 2024 update) that I don't anticipate changing it much any time soon.

I saved and tested all the webpages locally as HTML and CSS files, then converted them to PHP and uploaded the entire project via FTP at the end. However, as of October 2024, I upload via Github Desktop, so now I can skip a few steps.

November 2024: The Responsive Update

I'd known how to make my code responsive before I even started this website. But—and this isn't the first time I'm complaining about it—I don't like making my designs responsive, even though I absolutely understand its necessity. Responsive designs are generally about resizing in a preset boundary with barely any reason to make decisions when it comes to aesthetic design, and therefore is webdesign but without the part that's actually fun to me.

When I launched the site, I knew I'd want to make it responsive. Eventually. But I really didn't want to, especially as doing that meant not just making one style responsive, but multiple, with some page-specific quirks. So I put it off for a long time. For over seven years, at that.

It was shortly before American Thanksgiving in 2024—and after I'd moved this entire site to a Github repository, so I could update it locally—when I got the aforementioned email about taking navigation accessibility into more consideration. It spurred me not only to reorganize, but also to sit my ass down and make this site responsive like I knew I wanted it to be for ages, despite my gripes with the process. But I thought of it as a fun and practical makeover, especially since I knew I could do better, and how, and why, so I might as well. Not to mention that my brain was swirling with webdesign brainrot that I put this particular long-term task off by working on so many other website projects in the meantime. Finally, I told myself, alright, I guess it's time to do this.

I edited a lot of the stuff in the Scrapped Plans list during this update, including:

  • The index page, originally the main navigation, became a splash page that led to
  • The home navigation, a brand new page with a more straightforward method to navigate
  • The look of the Trainer page and its associated NPC
  • Creating and writing a lengthier separate autobiographical section
  • Using my better understanding of Javascript functions to convert the gym bag into an in-page pop-up like I'd always wanted
  • Created a much-needed accessible site map
  • Added a guestbook
  • Wrote the first draft of this documentation
  • And, of course, made each page and design responsive to screen sizes.

Though I was initially motivated by the necessity of accessibility, this update soon turned into thinking of ways that I could develop this website even more. After being online for so many years with so few updates, I knew it was starting to feel too stale for my liking. Now that I was reorganizing everything, I could imagine not only how I could make it better, but also more interesting—more fun, more creative, more me. The creation of the home page especially helped with this, no longer limiting myself to the binary options of just "Trainer" and "Gym." And, well, I guess the ball button, which was just to refresh.

It helped that I'd gotten really into PokéRogue some months previous and wanted to find a way to work my runs onto this website. I was starting to get into TCG Pocket too, and liked the idea of translating my rare collection from the game into a webpage, since it was a lot more accessible and affordable than the real life cards, which I hadn't been that interested in after kindergarten. I didn't actually add these subpages yet, but making this site more navigable gave me new ideas that I could do if I wanted to, and add them to the home navigation if I ever did. I was happy with this update, but even more than that I had set up ways to expand this site even further in the future.

I worked on this all through my Thanksgiving holiday in 2024, while my mom was visiting me. This isn't that important, but that memory will forever be tied to that development stage of this site now.

February 2025: The Wild Area & Secret Base Update

I had TCGP and PokéRogue as the elements of this site that I would work on next. But as I had a lot less to show about PokéRogue, and a lot more with TCGP due to my luck with pulls, I decided to work on the TCGP page. I ran into some creative difficulties in the process since I barely had even a visual idea of how I wanted it to look, just that it should be as true and necessary as any other section. I settled on the motif of a binder of cards but displayed as a vertical scrolling webpage to emulate the mobile app feel, with a large empty section to showcase the binder image as its cover. The background was an annoying point of indecision that I put off until the end. Eventually I realized that a wood pattern would make the page look like a binder on a desk and enhance that vibe even more.

When I linked it from the home page like I'd planned to in November, it felt wrong in a lot of ways. For one, it would be the only one-page archive linked to from the home navigation, while Pokémon Go was in the Gym and everything else was in Trainer. For another...as much as I dreaded admitting it, it would actually be better suited in a section with Pokémon Go, and the Pokémon section should link to something else. I was annoyed with realizing this, though, because that meant I had to think of something else to replace it, and that was frustrating when I couldn't just make the idea magically manifest in my head as they often did at other times.

Still, I knew what felt right. So despite my lack of ideas, I made the navigation of putting the Go and TGCP sections together, in what's now known as the Wild Area. But it was Pokémon in the gym first, which was also how I came up with the idea of making it look like the starter selection screen in Pokémon Ruby/Sapphire/Emerald, since the idea is sort of the same in picking a Pokémon, though the menu and literal functions are different. Soon after considering the starter selection screen as this new navigational page's aesthetic motif, I remembered that I'd been wanting to employ the logic of radio buttons as in-page navigation for an eventual project. And that was basically perfect for it. Once I made it work, I liked it a lot—but I also knew it didn't quite fit in the Gym section. I knew I was going to move it. I just needed to think of something to replace it first.

So I asked a friend if she wanted to help me brainstorm page ideas, since we tend to brainstorm all sorts of bullshit together. She suggested having a little pet feeder adoptable; I expanded that idea into even more cliques and digital collectibles. And then as I was hunting for Pokémon sprites and PNGs to adopt, I came across newlambda's Pokémon shrine and it gave me the aesthetic inspiration I needed in order to figure out how I wanted this page to look, particularly with having a game overworld image as the background. I chose Route 104 from the original Hoenn games because it's both nostalgic and extremely distinct for me. The Pokémon section is more for posterity than anything else, but I admit that I love the idea of having just one page on this otherwise pretty minimalistic website that looks so maximized.

From there, I had a new page for Pokémon, and also a brand new section with a new subpage of its own: the Wild Area for mobile games. Because playing in the real world is like wandering into tall grass, I guess.

While I had been wracking my brain for page ideas to replace the Pokémon section, I got other not-as-relevant but nevertheless enticing ideas in the meantime. I decided that I would have the PokéRogue section be a part of a wider fangames section, so I can put it off until I play more fangames. Another thing that occurred to me was that I could make a Secret Base of my IRL trinkets. I'd already been considering a section for some of my more materialistic things on my personal website, but I have a lot of Pokémon merch and realized that hey, I could make a page like that here too. The only excuse I could give myself to procrastinate on it was that I'd ideally like to have a customized Secret Base used as navigation but couldn't make it that easily on my computer yet...and then I found Pamtre-Berry's Secret Base maker which had somehow escaped my notice ages before that very moment. So I no longer had that excuse.

Over Super Bowl weekend in 2025, I sat down and made it. I didn't have a concrete idea for how I wanted it to look or function design-wise yet, but I knew that my online-made secret base would at least inspire it, if not be a part of it. I started with making something that I liked in the Secret Base maker and trusted that the rest of my ideas would follow.

And wouldn't you know it? It worked. From making the base online I implemented the idea of my merch being in two separate "rooms," distinct by intuitive association. I created what the conclusion of the secret base would look like first, then moved the items that I wanted to be the navigational buttons so what remained was for practical usage on the site. I'd listed beforehand how I wanted my things to be divided by category, so I knew how many navigational items I needed to take away and later download and edit to operate as image-mapped links. I hadn't done image mapping in a while and never really had the experience doing so manually, but I was happy to do it because I knew how I wanted it to look, and precisely how to code it to get it there.

After that, I settled on the base background being the page background, then the content being a brown square before slowly and surely, the more I made it look like a corkboard, the happier I became with it. I found and took pictures of all of my Pokémon things and turned them into PNGs which was a task in and of itself. I also decided to use iframes to display them as I think it's kinder for each page load. I really don't like designing with the colors green or brown, but the breadth and uniqueness of this section's design makes me feel especially proud of it now that it's done.

The Secret Base was a day-long project; I passed out early on Sunday morning. I woke up several hours later suddenly with an idea of how to make the guestbook look cuter in a way that I liked. So I worked on it immediately, after being asleep barely 10 minutes prior, now looking up PNGs of Gabby and Ty from Ruby/Sapphire/Emerald and creating a design I was a lot more fond of than its initial Xtransceiver layout. I updated the Documentation—this page—too, in the next couple of days, doubling its word count. It felt quite fitting making such a significant update as this was also around the eighth anniversary of this website's launch.

February 2026: The Trick House & Ball Guy Update

Coming soon!

Site Walkthrough

Upon entering the site, the visitor gets presented with the image of a large masterball and the instruction to open it (or click on an adjoining link) to begin the journey.

Doing so will lead you to the main navigation, or Home — a hub of all the main sections of this site, along with a small description of each. Webrings, my GPX party, documentation, splash page, and web portal are linked in the footer.

The sections on the Home navigation are:

  1. Trainer
  2. Gym
  3. Wild Area
  4. Secret Base
  5. Amie
  6. Map

1. Trainer, listed at the top, is the main showcase of the site as a mini-archive of my parties across all played games. Each page lists:

  • The game and its generational release
  • The year played and name of region
  • A small blurb about my experience with the specific game
  • My primary party of any playthroughs (usually one), including each Pokémon's species, nickname, gender, ball caught, ability, nature/characteristics, IVs and ribbons (if relevant), and moves. Each Pokémon's metadata is accompanied by a game-appropriate sprite.
  • Additional interests and time-sinkers in the same playthrough, including shiny collecting or specific goals (like secret bases and trainer card colors.)

Clicking on "Trainer Battle" in Trainer directs the visitor to a small autobiographical section about myself as a Pokémon fan, why I think I would be the respective NPC in the Pokémon world, a small blurb of why each of my favorite six Pokémon are my favorites, digital trinkets related to me as a Pokémon trainer, and fun facts about me. This page is a dead end and only navigates back out to the main trainer page.

Other pages listed in the trainer section are:

  • Miscellaneous, for non-main party Pokémon that are significant to me
  • Favorites, of everything Pokémon related
  • Shiny Gallery, for my 1-in-4096 (or more) shinies

Visitors can leave the Trainer section by avoiding eye contact.

2. Gym is the second page listed in the Home navigation, and contains pages relevant to the site's identity. Navigating the gym requires the visitor to rely on their intuition to figure out where each option will take them.

Fight directs to the main site information page, which has an in-page menu of clickable shiny Pokémon. This menu further expands into the following sections:

  • Updates, directing to a Dreamwidth journal as this site's update log
  • My Friend Codes and notes on contacting me as the webmaster
  • An overview of me and Pokémon in my real life, particularly as a franchise
  • A brief summary of the website, both in intent and semantics
  • Linkback buttons
  • Navigation to other site metadata not listed on this page

Bag toggles into an in-page subpage of the Gym as a menu of quick links around the site. This is to quickly access other sections without needing to go back to the home menu, and fits with the idea of opening your bag if you need resources during a battle. There is also a link back to the home menu.

The links are:

  • Bicycle, for flavor text.
  • Town Map, for the sitemap. It is listed second in case the visitor is lost.
  • Vs. Seeker, for Trainer.
  • Exp. Share, for the Wild Area.
  • Basement Key, for the Secret Base.
  • Xtransceiver, for the Guestbook.
  • Masterball (which is not a key item), for the Home navigation.

Closing the bag will indeed close the bag.

The Pokémon option in the gym directs to a page of digital adoptables in the form of images, as well as cliques, similarly themed widgets, and any other graphics I make related to a particular Pokémon species.

Run directs to exit links out in the form of a button wall. Pokémon sites are selected to be shared here based on my interest in their content and design, especially if I've affiliated with them. Other links are independent Pokémon sites useful to fans, and archived links through the Wayback machine.

3. The Wild Area is a hub of my mobile game archives. Each Pokéball serves as a navigation link, opening up an explanation for what mobile game that section will lead to. Currently, there are only two. The third Pokéball appears to be empty.

The first ball leads to the Pokémon Go archive, listing my public player information if you were to add me. My selected Go team is also evident in its design. The bulk of the page contains my Pokédex progress in Go, with unseen Pokémon invisible, seen but not caught Pokémon somewhat transparent, and caught Pokémon fully opaque. This page is a dead end and only navigates back out to the Wild Area.

The second ball leads to the Pocket Trading Card Game archive, listing my public player information if you were to add me. It contains the in-game graphic I selected as the cover of my main binder. Scrolling down will show you an archive of all my rare cards, which can be hovered over to see at full opacity. This page is a dead end and only navigates back out to the Wild Area.

Visitors can leave the Wild Area by retreating from the tall grass.

4. The Secret Base is a display of my real life Pokémon merch. Each page can be navigated through the Secret Base in the top left via highlighted furniture items, or the text navigation below it. The landing page is reminiscent of a corkboard, with some guidance in navigating. All internal pages open in an iframe.

Each page of trinkets contains PNGs of all respective items, as well as a sentence or two explaining the item as well as the context of my ownership, if interesting. The About section (the PC in the Secret Base) contains a backstory on my ownership for many of the items, in the context of my life.

Visitors can leave the Secret Base by clicking on "Exit" in the text navigation. There is no adjoining link through the Secret Base furniture, to prevent navigation confusion.

5. Amie directs to the Guestbook, based on the idea of friendliness and interaction. Visitors can sign the guestbook, and read through messages other visitors have left. Closing the guestbook redirects to Home. The footer contains additional links to the site map and documentation.

6. The Site Map is a hierarchal list of all pages on this website. It also contains some explanations for smaller sections that are not accessibly and summarily detailed on their respective page. There is no further navigation here, as the map itself is navigation. The documentation is linked here as well.

Future Plans

  • Game pages: Brilliant Diamond (& my Soul Link with Yin); need to play: Ultra Moon, Violet, Legends ZA; will play: Waves
  • Wild: The last capsule will be for Pokémon Sleep once I figure out how I want to display it.
  • Battle Frontier (S.S. Ticket in Bag) for spinoff games: Magikarp Jump, Rumble Blast, Unite, New Pokemon Snap, Pokopia (when it comes out)
  • Victory Road (Liberty Pass) for fangames/romhacks: PokéRogue, Infinite Fusion, Run & Bun for a/some Nuzlocke attempts, Emerald (archipelago), Tectonic, Mariomon (it counts).
  • Dream World (no bag access): Side-along feature to emulate the quick attachment I have to Pokémon on runs. Contains mini games and other party enhancements/digital collectibles. Interactable with Gym/Fight and Contests.
  • Updates/refactoring: convert main game party pages to root styles, reorganize subdirectories and assets, an optional gym puzzle.
  • Other sections: Mirage Island (Dowsing Machine; visitor content), Abandoned Ship (Explorer Kit; roguelite, only linked through map), Contests (Point Card; ARG), Strange House (Go-Goggles; not sure yet).

Though as of writing this, the Trick House is relatively new, it's not going to be completely untouched after publication! There's one room where I plan on rotate something regularly, and along with it the location of a front-end secret and my hiding spot. Keep an eye out for future tricks ;)

Scrapped/Initial Plans

This website has gone through a lot of changes, both big and small, despite the amount of things that have also stayed the same. Here's a list of design and organizational choices I had made for previous iterations of this project that are no longer present:

  • The front page used to be the main navigation, with Trainer and Gym linked on the grey line of the ball.
  • I originally planned for there to be a "Someone's PC" in the navigation as well, with the anticipation that I may be interested enough in making shrines or fanlistings. I removed this when I realized I couldn't convince myself to even pretend to be interested in the idea.
  • Before it was mobile responsive, the mobile version of the front page was designed like a premier ball (much like the front page masterball or the exit links love ball), notifying visitors that the site was not responsive yet.
  • The color scheme in the Trainer section used to be light blue and white, fitting with the female Ace Trainer sprite in Pokémon Omega Ruby.
  • The autobiographical Trainer section used to be an in-page pop up, but I decided to make it its own page during my November 2024 update instead, now that I was more confident writing about myself at length.
  • The Favorites page used to be themed after a design of the Furisode NPC from Pokémon X/Y, but sometime between 2021 and 2023 I decided I liked Clair more and reworked the colors.
  • Fighting the gym used to have a contact form, but I wasn't too happy with it and eventually removed it.
  • My old gym ice-type team was Alolan Sandslash, Alolan Ninetales, Aurorus, Weavile, Mega Glalie, and shiny Walrein as a reference to Walrein being my first ever shiny Pokémon. I also cycled through Regice, Froslass, and Frosmoth at points.
  • I used to have Bisharp in the gym because for a while, it was one of my top 6 favorite Pokémon. But the way I pick my favorite Pokémon isn't just in aesthetic design, but also by evolution stage. I'm a lot more drawn to final evolutions, and only prefer pre-evolutions if I have nostalgia for them or like the design immensely. Even more rarely do I ever pick middle evolutions over the final or first stage at all. I was drawn to Bisharp when I was 16 for no reason other than sharing some physical traits with it, but I started to forget about it over time. And then when Scarlet/Violet released Kingambit, Bisharp felt like a different Pokémon to me, and I knew I didn't think of it as one of my favorites anymore.
  • The Bag used to be on a separate page with the Town Map, but is now contained in the Gym page with its only purpose being a navigation of quick links.
  • The Pokémon Go section used to have IRL "gyms" that I had conquered, but I decided to remove it as it felt a little too doxxy for my liking. Gyms in Go don't work like that anymore, anyway.
  • The Pokémon link in the Gym used to go to the Pokémon Go page.
  • The guestbook was added in the November 2024 update, but emulated the design of the Xtransceiver in Diamond/Pearl/Platinum, taken from this code of drawing a Pokétch calculator as a webpage. I changed the design to something that I felt happier with in my February 2025 update.
  • My error page used to have a white background, but now it's all black.

End Credits

The Pokémon section has its own list of credits, as it is a page of things I've collected from other people's websites.

Disclaimers, Privacy, & Accessibility

Though I have done my best, some pages on this site do not have a fully accessible color contrast ratio but do not require the visitor to spend more than a minute or so of reading.

All pages are hand-coded by me.

As a big believer in accessibility and privacy, I have done my best to make my websites as accessible and uninterested in visitor information as possible. This includes:

  • Not using tracking cookies for analytics.
  • No third-party advertisements, sponsorships, corporate endorsements, or pop-ups.
  • Using semantic HTML as much as possible for screenreaders.

Additionally, this website:

  • Works responsively for most screen sizes, though it is best viewed on a desktop or laptop computer.
  • Uses javascript for light functional usage.
  • Makes simple use of domestic iframes to convey a small amount of information between separated content.
  • Does not use any audio on webpages, auto-play or otherwise.
  • Does not make any use of AI-generated text, images, or content.
  • Allows little to no access for AI scraping, web crawlers, or bots. I don't mind being shared or archived but I don't want my data to be commodified either.

This website was made for creative and entertainment purposes under the WTFPL license. I am not receiving anything monetarily through this website. No copyright infringement intended.