Cimmanon

Featured Projects

These projects best represent my abilities as a web designer and developer. No matter how much I improve over the years, I'm always finding better, more efficient ways to do things.

Portfolio

Design

This is the next evolution in the site's logo. I'm still using Coronet here as the base font, but the flower is different. The simple 5-petal coneflower has been replaced by a 5-petal water lily that uses partial transparency to give it the illusion of having more than that.

Development

(View)

For years, the markup for my portfolio was written by hand. This was fine when I only had a few year's worth of designs, but I've been doing this for over 15 years now. I wanted to be able to sort them in different ways (year, color, etc.), as well integrate my development projects into the list. The biggest challenge was designing the database in a way that would accommodate both development and design projects so that any given project could have designs and/or code associated with it, without having to duplicate tables (one for design projects, one for development projects). With this schema, it's trivial to add new project types in the future.

Design

I had been tinkering with creating replacement SVGs for the redesign I started over a year ago for several months before I started actually pulling together a new design. It has a lot of the same features as before, but there content is quite different. Projects are now completely unified, instead of having design and development projects segregated.

selector-nth

Development

The desire to be DRY when writing Sass often works against the author. This library is the embodiment of writing more code in an attempt to repeat yourself less. Included are functions and mixins allow you to do things like inject classes into a specific position or append sibling selectors.

MPQ Gamependium

Design

This is an extremely simplistic design that I threw together. The primary focus of the site is the content, so I didn't want to detract from that. The silhouette found in the header is a tracing of a piece of in-game artwork found on survival matches. It features iconic characters like Iron Man, Deadpool, Doctor Octopus, and the Juggernaut. The primary blue color repeated throughout the design was chosen from the game itself. A number of the UI elements were inspired by the game. The site's default view for rosters mimics its in game appearance. The icons that appear in the DDQ calendar and character information pages also come from the game.

Development

The development for this application started in the database before being turned into a web application using the Snap web framework. It has 2 core features: tracking and predicting a quest that changes daily and an online inventory tracker. In February 2015, Deadpool's Daily Quest introduced to the game. Due to the structure and predictability of the rewards, players were interested in seeing this information well in advance so they could decide when to spend their tokens. They were sharing this information on a flat forum, so I placed it in a database and presented it in an attractive calendar format. The database is setup to learn as new characters are introduced to the game. Previously, sharing and tracking a player's in game inventory was typically done by posting screenshots or keeping a spreadsheet. The initial prototype of the inventory tracker was written entirely in JavaScript, but it was a bit clumsy to share the information with others. The current version features such things as multiple ways to sort the data and a complete history of all of the updates the user makes on the site.

Zalora Application

Development

This application was written using the Snap web framework. It does 3 basic tasks: adds new items to the database that were submitted via JSON, displays a complete list of items, and displays a single item along with a photograph. This was my first time processing JSON requests with Haskell.

Mystic Dhalmel Herder

Development

It wasn't long until the linkshell needed more than just a way to process applicants who wanted to join our group. We ended up needing pages to track all sorts of things: events we had done and who came to them, items people wanted, items people had already received, how many upgrades people had collected to build a particular item, etc. This made it a lot easier to plan what events we should do for the evening.

Design

This design is heavily inspired by the one I did for Guild Wars Gamependium back in 2005, but it has a lot better contrast. The header contains a panorama of Tahrongi Canyon, an area famous for the camel-like creatures with long necks known as dhalmels. The silhouettes in the foreground are the 3 original members of the linkshell running from a herd of dhalmels.

Christy's Costumes

Design

(Archived)

This design is heavily influenced by skating costumes while also having a bit of a Web 2.0 look. Different sections of the page are embellished with stitching, the header is adorned with Aurora Borealis colored Swarovski crystals, and the logo looks like it is "printed" on a tag that is sticking out of the back of the dress. The popular browsers at the time didn't have much support for linear-gradient or box-shadow, so I used tiling background images and pseudo elements to get the same effect. Having a gradient as a design element was very important to me, since creating an ombre or gradient effect on the costumes was one of the services I provided.

Design

I had created a logo for my imaginary costume design business years ago, but it seemed a bit crude and amateurish to use now. The most promising concept I came up with was an outline of a skating dress that flowed into my name. The base font here is Allegro. I don't normally work with print, so I created a variation that was completely black and white just in case the color gradient couldn't be printed as intended.

Diary

Development

After working with Pike for a few years to write the Gamependium website, I found it difficult to go back to using PHP as my language of choice for web applications, so I started rewriting my diary application in Pike. In addition to changing programming languages, I switched from MySQL to PostgreSQL for my database. The only significant feature I added in this version is allowing entries to be associated with multiple tags. Previously, entries could only belong to a single category. Also, dates are stored as dates rather than unix timestamps.

Design

The photograph that is the basis for this design was taken shortly after we moved to a new apartment in a new city. The previous design was starting to feel dark and gloomy, so I wanted to create something light and fresh. Green is not something I use very often outside of an accent color, but the springy hue I chose complemented the blue in the photograph very well.

Guild Wars Gamependium

Design

(Archived)

This is the first time I worked on a design for a site where the content itself and its UI were designed before the general look and feel was. The header features a panorama of an area of the game called Old Ascalon, which is the first thing you see after you leave the tutorial area. The silhouettes in the foreground are of a Mesmer, a Ranger and her pet bear. Some of the styling techniques, such as formatting a table to not look like a table, was quite cutting edge at the time and didn't actually work in the versions of Internet Explorer that were popular at the time.

Development

The initial prototype for this application was done using PHP/MySQL, but it was moved to Pike/PostgreSQL very early in the development process. This is the very first application written using the Mako web framework (which remained closed source), and design changes within the framework were heavily influenced by the needs of GWG. One of the unique features of the builds section of the application is that as the skills were updated through game updates, you can see all of the skills as they looked when each revision of the build is submitted. When an update to the game was made that allowed players to save and share their builds in game, GWG was updated to read and generate build data that is compatible with the game.

Photolog

Design

(Archived)

After I redesigned my diary to have a more vibrant look and feel last month, I started getting the itch to do something similar for my photolog. The layout itself didn't change, it just got a new photograph and a fresh set of colors. In fact, the old design was left in place as an alternate style sheet.

Development

The PHP/MySQL web application that powers the photolog is a fork of the one that powers my diary. The most significant modification is that it expects a single photograph to be uploaded per entry and it automatically generates a thumbnail upon submission. In addition to searching and displaying entries by month or category like one would expect from your typical blog software, entries can also be displayed by day.

The Taming Archive

Development

It started to become a nuisance to keep all of the creature stats up to date on every single page, so I created a simple web interface to a central database. In addition to only having to update the information once whenever something changed, I was able to add custom sorting methods for the data (eg. sort by skill requirement, HP, etc.). It also made it a lot easier to update the markup for individual creature pages, since they all share the same template now.

Design

(Archived)

I got bored of the previous design rather quickly, so I wanted to redesign again. I really liked the previous design, which was done using screenshots from the game and wanted to return to that style. This time, I chose the stables in the city of Minoc. I used the stamp tool in Photoshop to create the tiling grass pattern. I had a difficult time picking a color scheme to go with it. The green I chose was the result of a typo, but it looked good with the rest of the artwork so I kept it. This design originally used tables for layout, but it was updated to use CSS in 2003.