This project has been one that I wanted to undertake ever since I started at the Trail Blazers nearly three years ago. It is probably my most important and most visible project to date, yet. It was not only creatively and programmatically challenging, but damn fun to create, too.

I have attached mock-ups of how the design of the homepage progressed throughout a couple of weeks of iterations. Originally the project started out to look quite different, but I did not save those mock-ups. It’s for the best, anyhow, since the final product turned out for the better.

The last screenshot is of the website in final production form as seen on trailblazers.com. I think it turned out quite nice given the restraints the project was under.

A few notes:

• I built the project from the ground up using JavascriptMVC and jQuery.
  • I am quite proud how clean the code turned out to be from my end. Utilizing JavascriptMVCs framework and its ability to package everything up in a relatively tiny and simple package is such a time saver.
• This was also my first time using Less CSS.
  • I regret not using it before.
• I managed to create as clean of a HTML template as I could, and the biggest by-product of that was to get rid of some of the wholly unnecessary mark-up and javascript libraries that were included on the old website (due to no choice of my own, it was added in by the league). Thankfully, all of that excess code is gone now and I do not have to worry about library conflicts.
• Dan (@darbison, my boss) did an awesome job art directing the project, as usual.

I figured it might be prudent to have a record of the original design of my portfolio that I did two years ago. Let’s see how I can approve upon it:

Note: I tried posting this earlier at a coffee shop, but their WiFi was terrible. It’s 2011, have we not figured this out yet?

My buddy Gerardo tweeted about JavascriptMVC a couple of days ago. It took me about ten minutes to decide to use it for all of my JS projects from here on out. It just makes so much sense. As Gerardo put it, it’s a “whole package”. It’s more of a whole package than say, backbone.js, which is nice in it’s own right but it’s a very young framework.

What I like the best about JSMVC is the fact that it’s based off of jQuery and that it has a built-in scaffolding that generates many of the important MVC files and classes for you. The more important bits are that it also has a robust templating system, dependency management, unit testing, documentation, built-in class functions, and that it will generate a single production (or two, can’t remember) file to use with one simple command-line entry.

I am anxious to try it out.

Huh, I didn’t even know this had a proper gallery tool. Good to know, I am curious to find out how it works.

These are the third revisions of the wireframes. I don’t think I bothered posting the very first revision, it was very vanilla. There’s some progression from the earlier wireframe, but the concept is a bit more high-end… a bit more tighter. Less of a blog and a list of posts, and more of a “stream”. It’s a mix of written word, work, and images. That way I don’t have to keep and design for three different pages. Maybe in the future I’ll think about adding video, but I rarely do any video stuff which would make it ultimately useless.

I have let this concept bake in my head for a couple of days now, and I think it’s one I can be comfortable with. It’s also a little bit of an extension of my original portfolio that I made before I graduated back in June 2009. That was made in Flash, whereas this will use WordPress as the CMS and a wholly custom JavascriptMVC UI. Speaking of JSMVC…

I have been slowly working on the first round of wireframes for this portfolio. I have a few ideas floating in my head, but nothing has stood out at me. I am starting out with something simple, albeit not overtly unique. It’s pretty standard for what you would see for most interactive portfolios these days. But I find it good practice to get something out of the way first.

I’ll keep working on more wireframes and I will try to take myself out of my comfort zone with these. The biggest thing I struggle with at the moment is that since my CMS is WordPress, my mind is perpetually stuck with this idea that I need to design it with WordPress in mind. I need to change that mindset.

This subdomain and project was a little Google inspired. They like to designate a lot of their newly launched projects as “beta” (Gmail had that designation up until a year ago, I believe), but since this is just a basic WordPress setup (for now), I will treat this as an “alpha”. Besides, nobody likes being a beta. Alphas are much cooler.

This site will constantly change. Eventually my hope is that it will become my full-fledged portfolio/online portal of all my work and other interesting tidbits. But in order to get myself to actually build something once and for all since I last did it over two years ago, I made the decision to just start with nothing and build from there. I will treat this very experimentally as a way to catalog my design/development process.

I am curious to see how this goes. Hopefully I don’t forget about within a week.

Time to tear this design down.