It’s built using WordPress, but you wouldn’t know it by looking at it. This way I can add and remove samples easily. I opted to go with a (mostly) single-page site. There’s a second page for a contact form. jQuery and various plugins handle the dynamic features. I definitely prefer this over what I had before.

Feel free to check it out by clicking the Portfolio link above.

Thematically, the design is derived from my alma mater. The color is taken from the school colors. The use of roman text for the blog title and headings gives a sense of classicism. The illuminated drop-caps in leading paragraphs and fancy borders adds refinement. Of course, these elements of classicism and refinement are juxtaposed against the asymmetric header graphic, the brick wall, rough edges, and weathered icons. The ivy ties the two by being both a symbol of refinement, but also being raw, organic, asymmetric, and destructive (to walls).

With this design, my goal was to bring in more irregularity and keep straight lines to a minimum. However, I wanted to avoid the overuse of gradients, reflections, and shadows which are a staple of Web 2.0 designs. I also didn’t want to overuse real-life textures or objects turned graphic elements common with Grunge designs. What I finally settled on was to use silhouettes almost exclusively for the graphics. Silhouettes evoke the idea of shadows, further compounding the idea of darkness. The negative space is just as important as the positive space because where the two spaces meet defines the edge of the silhouette.

The design has but one color and no other shade or tint of it—that dark, almost blood, red which is already an intense but not over-saturated color. The red is further accentuated by the backdrop of black and white, more emphasis on the black. The red is not used for many elements either, often just adding a punch of color. I also put more thought into balancing the contrast of the font color this time around. As some of my readers have pointed out and I’ve experienced on occasion, the contrast between white on black is too distracting at smaller font sizes. So I settled for light gray on dark gray for the main body text. I may eventually do the same for the right column, but it works for now. Those who read the code will be happy to know I switched plug-ins to SyntaxHighlighter Plus, and as a result, the code layout is much nicer.

The one graphic that is not a silhouette is the black and white photo of the brick wall with ivy growing on it. In my earlier iterations this was actually tinted red, but I felt the solid red silhouette became lost in the background, so I switched it to black and white. Instead of using a drop shadow to indicate depth, I “blurred” the image to give the illusion of depth of field, but rather than use a simple blur I used a noise filter giving it more of a speckled, cell-shaded look so that it fit in with the silhouettes better.

All in all, I’m very happy with the first pass. I’m sure there are still rough spots I need to iron out, and I don’t think design-wise, it will degrade well to older browsers. I’ll have to confirm this. I think I did strike a balance. I don’t know if I want to publish the template though. I like the fact that it’s one of a kind. I suggest you check out the About page for the credits.

UPDATE (15 Nov 2008): IE6 had a few minor rendering problems with transparent PNGs and box models for some DIVs. I corrected the problem using a conditional stylesheet specifically for IE6 replacing the PNGs with GIFs and adjusting the styles of the problematic DIVs.

Now, I’m just one among the many listed in those dismal unemployment numbers you hear during the evening news. Thank goodness I got that part-time job to give me some cash to float on. Unfortunately, that means some of my planned purchases will be delayed. I’ll be spending part of this weekend brushing up my resumé and reading about unemployment claims.