The Project

The Goals

My project for the final is to create a personal website for myself. I would like to use it to aggregate my various projects that I work on and also use it to increase my presence in the design and technology spaces.

The audience for the site is first and foremost myself. I want to make something that meets my needs functionally and ascetically. Additional groups I want the site to reach and serve are friends, potential employers/ clients and people interested in topics I may cover in a future blog.

The Scope

The initial scope of the site is to create a few of the pages for the site. In this case I elected to make a Meta page describing the Final Project, a Portfolio page to house future works and projects, an About page to offer contact information and a blurb about myself and a 404 page that will come up when a user tries to visit the non-existent Blog page. I chose to do this because I wanted to focus on the design of my site and because I have not yet settled on a CMS and this allowed me to focus on creating a consistent visual identity now.

The Inspiration

The design of the site was predicated on minimalism and typography. I drew inspiration from the minimal design of Marco Arment’s blog for the minimal look of the site. For the portfolio layout I referred to Levin Sadsad’s personal design portfolio at his site okdomo

The Implementation

Initially I researched using Typekit to increase my font options, but decided for this exercise to try to design as best as I could within the restrictions of Web-safe Fonts. Initially I attempted to make the pages valid strict XHTML 1.0, but due to my inclusion of Twitter’s official follow widget this became impossible as the widget relied on data-attributes that were not supported.

I implemented a consistent navigation across the site using JQuery UI’s Accordion widget to function as a collapsible drawer for the navigation. I chose to do this because I wanted to have the user have the option to reduce the visual clutter if they wanted to read a lengthy post or article, like a Meta report on the site they are visiting. I limited the width of the full content area to ensure readability was maintained on wider screens.

For the portfolio page I wanted to have the option to show a grid of thumbnails, each one representing a different project. I implemented the grid using floats to ensure that they adjusted accordingly to the browser’s width to remove the need for horizontal scrolling. When clicked these images bring up a lightbox implemented using the Colorbox framework to show full images, and allow the user to cycle through all of the projects. Additionally, I overlaid each thumbnail with a span that showed the title of each project. Due to the limited scope of the project, I used mostly photos I took on Instagram as placeholders for future creative works.

For the about page, I attempted to just make a short and simple page offering both means to contact me and also the methods in which to find me elsewhere on the internet. The email address is intentionally obfuscated in the Markup using JavaScript to prevent spam bots from crawling the email address. I used an encoder made by Dan Benjamin located at hivelogic. Finally, I created a custom 404 page and created a corresponding .htaccess file to have a error page that matches the overall design of the rest of the site

Future Directions

Once I have settled on a CMS I will attempt to implement the same CSS design for the blog. I am currently leaning toward doing a Wordpress install on my personal domain. I would also like to spend time learning to use media-queries to create a true responsive design that suits the needs for mobile. Finally, after completing the majority of the design, I discovered Google hosts open source web fonts and I would like to spend some time trying to try out some of the options they host.


I am mostly satisfied with the way the design turned out. I regret not making parts of the site more modular, the headers and footers needed adjustment, and even after the design was mostly completed small tweaks were needed. The use of PHP or another alternative is something I would investigate. Also while I like the effect of Lightboxes, I feel given more time I would attempt to implement a different kind of overlay for the portfolio page that would better suit other kinds of media. Despite those problems, I felt the process was entirely a success. I am pleased with the overall look and the functional aspects that I implemented.

Frameworks and References