The New Alvies.org, Part Two
What you missed in part one was mostly me explaining that I like old video games and I've lived a lot of places. Full steam ahead into part two!
The Design In Practice
To make this idea work, I needed to establish the requirements for the design, just as if it were a fully-scoped project. I needed the design to accomplish the following:
- Be completely unique, even if drawing from existing inspiration.
- Showcase responsive content.
- Be quick to load.
- Be easy to maintain and extend.
- Be easy to use.
- Be a proper expression of my personality and my predilection towards professional goofiness.
My first decision was to utilize the existing art of River City Ransom as much as possible in building out the designs that would make up the background of the site. This was certainly an aesthetic choice, to give viewers who get the joke little things that they could point out as being directly from the game, but it was also a matter of pure practicality - remixing existing assets and having to hand-draw as little as possible made it far easier to get the art done and focus more on porting in the content. This also allowed me to keep the scenes small, within scope of the avatar I'd hoped to include, rather than a vast cityscape.
Having selected the cities with which to start (Chicago, New York, Boston, Kansas City, and New Orleans), I then had to choose what landmark to emulate.
For Chicago, I chose the Crown Fountain in Millennium Park. Cloud Gate would have been possibly a more obvious choice, though nigh-impossible to render within the parameters of the project. Besides, of all of Millennium Park, I preferred Crown Fountain anyway, as a longtime fan of both fountains and art based on light and reflection. Additionally, it was a great way to mix in a random reference to what is probably the most famous game of the NES era. This scene might have the most bits cut from whole cloth rather than taken from existing RCR assets due to the Mario sprite and the Photoshop trickery involved in setting it up with its reflection.
The New York scene is a bit of a flight of fancy, as it exists more accurately as a homage to another game existing in New York than the city itself. The closest analogue is probably Battery Park, though, if you're seeing anything behind the Statue of Liberty from Battery Park, it would most likely be New Jersey and not NYC itself. I place the blame for that quibble on Nintendo, though, since they're the ones who made Punch-Out!! in the first place. Despite the homage to this other game, all of the assets save the Statue were chopped up from original River City Ransom content.
The history of Boston was a strong draw in terms of choosing what landmark to echo, but at the end of the day it made the most sense to take something slightly more modern and likely even more recognizable - the Green Monster at Fenway Park. I used the official color of the wall as a basis, and drew in the details using the in-game River City Ransom text, converting in-game shop awnings and sidewalks into the field surface.
Kansas City proved to be the most difficult, to be honest; the city is known as the City of Fountains due to the hundreds of fountains installed over the last couple hundred years, first as water sources for animals and later as the aesthetic signature of the city, and I wanted to reflect that. However, the intricacies of the most famous fountains proved to be too difficult to make recognizable in the small scale provided, and as such I pivoted to the Country Club Plaza, an expansive shopping center in the neighborhood of the same name, in which many of the fountains themselves live. The Plaza is known for its architecture, inspired by the Spanish city of Seville, and its gorgeous holiday lighting. My scene mimics a late December night at the Plaza from the side of Brush Creek.
Finally, my newest home, New Orleans. There's nothing more iconic about New Orleans than the French Quarter, simple as that; so, this scene imagines the shops and pubs of Bourbon Street in their signature brick-and-iron Creole style. My version, it must be said, is far less crowded.
Into each scene will walk my avatar, itself designed from the inspiration of several of the in-game character sprites from River City Ransom. After strolling in to investigate the scene, my avatar will take some sort of action again inspired by an interaction within the game, selecting randomly from a half-dozen options.
I had every intention of leveraging Google Fonts for the text on the new alvies.org, using its variety to select a readable, fun, and generally unique set of fonts for the site. After testing a couple dozen combinations, I settled on Lobster and Raleway for headline and body copy respectively. I felt that Lobster had a classic feel that fits with the Rockabilly aesthetic of the source game, and Raleway provided a wide and rounded set of text that emulates the wide and rounded (but bitmapped) look of the actual in-game text.
The site's header exists on a solid black bar, and the site's content on a semi-transparent blue box. The black box emulates the letterboxing in the game, where information about the player's meta-status lives. The blue box is used in-game for menus that take place within the context of the world, such as shop menus - the transparency is just there to show a little more of the fancy city backgrounds.
Responsiveness
Let's be frank, there are a number of things on this site that simply aren't necessary to have if you're looking at this site on a phone. Well, okay, they're not really necessary on a desktop, either, but they're fun and fit better there, at least. Anyway, if you're on a phone, I've turned all things off! If you're reading this on a small device, though, you're totally missing out and should do something about that.
The Site's Guts
The ancient version of alvies.org that survived from the early 2000s until now was built entirely by hand using a simplified version of the templating system that powered the Caves of Narshe from that same time. As such, it was quite flexible but not much fun to maintain or extend, which was a factor in why it went without update for so long. For this new version, being able to keep content fresher was more important than having a fully-bespoke site framework; I work on bespoke frameworks all day long, and the idea of maintaining another for my portfolio was not exciting.
At first, I envisioned the site running as a heavily-themed Drupal 8 site. I've been using Drupal for sites for nearly a decade, and I've loved previous versions of the CMS for their relative ease of theming and their extremely robust collection of community-driven extensions for enhanced features. Drupal 8 seemed a natural fit as the most recent major version of the system, but, as you can see in my other blog, it did not at all work out for me. The site now runs back on Drupal 7, which is aging but still very well maintained by both the core Drupal team and the community. The scope of Drupal 7, its resilience and easy modification and its vast collection of extensions made it possible for me to design the site I wanted and keep it maintained without having to invest more time than I want to.
So that's it, this is how I buckled down and redid my own small personal space on the web. It's certainly a great leap forward from the past decade, and it's a light year beyond my very first personal website twenty years ago, which I absolutely will not show you. Please do enjoy and reach out to me any time!
- Log in to post comments
Copyright
© 2000 — 2022 Joshua E. Alvies. All Rights Reserved. More Info
