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.
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.
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 still like to look through all of the really old stuff (some of them had really nice designs!), but not everything needs to be visible to the public. Since the rest of the site was being written as a Snap web application, it only made sense to make an application for my portfolio as well. 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). The application itself doesn't realize there are different types of projects, it just pulls the data from the database.
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.
There are 3 basic groupings of splices found in this library: displaying common types other than Text, controlling the visibility of content, and dealing with lists.
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
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.
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.
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.
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.
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.
Guild Wars Gamependium
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.
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.
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.
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
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.
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.