Games tend to be a largely visual medium, so I knew I wanted to create a layout that showcased the art and screenshots from various designs, but still allowed the user to learn more specifics about each project. Drawing inspiration from photography and artistic portfolios, I decided with a minimalistic layout that first focused on the imagery to draw the user in, then detailed the projects with further visuals and detailed descriptions. While I had plenty of work I could have included, I chose seven projects that reflected my best work: three for game design, and four for level design, since that is what the focus of the portfolio was going to be. Because all of the projects are very different, I decided not to include the color versions of their screenshots, so as not to overwhelm the user with a variety of different styles and colors. Instead, I chose to make greyscale versions of each, and switch to the color versions whenever the user hovered over them, using a simple CSS function.

With the greyscale images and a dark grey background, the layout felt too monochrome, and desperately needed a pop of color. I decided to include more whites, to offset the dark colors, as well as a bright blue that would serve as an accent color, especially for hover effects. The decision to use blue over any other color was because it fit in my with personality, as I enjoy sailing and often break the ice when meeting new people by telling them about this. To further drive the point home, I included a faint anchor in the logo/title, and used the same concepts when designing my business cards.

There are seven total pages that are dedicated to specific game and level designs, and each page contains a large preview image, specifics about the creation of that design, an overview, and thumbnails, as seen above. Because the designs are both visual and descriptive, I needed to showcase the imagery without cutting any of the necessary details, which lead to the preview image on the left, and the thumbnail gallery at the bottom. When the user clicks on a thumbnail, a popup window powered by lightbox will appear with the larger image and a caption.
 
In an effort to ease navigation between the different design pages, I included another navigation at the bottom of the page, so users can easily go to the next design, or visit the previous. The pages are also looped, so that if the user is on the last design page, clicking next will take them back to the first.

Shown above is the about page, which displays personal and professional information about myself, along with links to external sites. To keep with the style of the other pages, I included an image of myself to the left, which helped to break up what would have otherwise been a wall of text. I also decided to use large icons for the external links, rather than smaller icons or plain text, and the bright colors of these icons draw the user's vision down, where they can contact me, or check out my profiles on various sites.

In selecting colors and fonts, I tried to stick to choices that would allow the focus to be directed to the images, rather than a fancy font or crazy color. I went with a very monotone look, but used bright whites and blues to draw attention to important information, such as headers or titles, and to separate the navigation from the rest of the page. When it came to fonts, I wanted the text to be websafe, so I went with the classic Arial. The navigation font, Old Press, is bold but grungy, which helps to differentiate the navigation text, without too drastically departing from Arial. Finally, Denistina, which is restricted to header use, greatly contrasts with the sans-serif fonts Arial and Old Press, which helps the header text to stand out.