Portfolio Presentation

I would like to begin with Visualgui. Since this site showcases my work and personal exploration, I try to redesign it each year to improve the look and feel, tighten up the markups and incorporate the latest techniques I have learned. For the latest iteration, however, simplification was my goal. I wanted the site to have HTML5 markups, but not having to depend on JavaScript. I wanted to offer a user-center experience without depending on jQuery. I wanted to focus on readability and legibility across mobile devices.

The homepage is all about providing a reading experience. The body copy is set in Noto Serif. I chose Noto Serif for its legibility as well as its support for Vietnamese diacritics. I paid particular attention on the leading and line length, even on smaller screens, for readability. I am obsessed with typography. Even with the logo, I wanted to have real font, not just an image. The logo is set in Krona One, which is a beautiful, Swiss-inspired typeface.

Technically speaking, Visualgui is powered by WordPress with a heavy customized theme I have developed. It’s fairly stripped down to fit my needs. I only use the hooks that I absolutely need and nothing else. I am also using Sass to manage my CSS. I was a bit hesitated at the beginning, but now I don’t want to write CSS without Sass.

The second project I wanted talk about is the George Mason Law School. I have been with the Law School for two years now and I have learned so much from a developer standpoint. When I came to the Law School, my server admin skill was quite limited. Then I learned how to use Linux. I learned about Apache and I now love the command lines. I am basically responsible for everything from server administration to web site design/development to content management system.

The school main site is running on MODX. I didn’t know anything about MODX, but I began to love it as I started to work with it. It offers so much more flexibility than WordPress and Drupal. Within the first three months into my job, I was able to redesign the entire Law School site to bring the markup to HTML5 and made the entire site responsive. I was so amaze at the ability to pull off such a large site; therefore, I really like MODX.

I took what I have learned about MODX at the Law School and worked on a freelance project. Poplar Springs is a family-owned property spread over more than 200 acres of rolling countryside in northern Virginia’s wine country. When they approached me, I knew immediately that I needed to get them on board with me and get rid of its Flash-powered site. Then when it came to the content, they weren’t able to bring it all together so I suggested to them to hire a former colleague of mine who is a fantastic writer and editor. Working with a content strategist was such a pleasure. Together we delivered a brand new site that is clean, inviting and responsive. Their only booking jumped up to 300% with the new, mobile-friendly design.

The last project I want to show you is a personal one. I love jazz and a huge fan of Miles Davis. Three years ago, I created Sketches of Miles. At the time, HTML5 was so new to me and I wanted to learn it. At the same time CSS3, which offers the ability to use types beyond the web safe set. Google was also just offering its web fonts. If I remember correctly, it had about 75 fonts in its collection.

At the time I also heard about Stacey, which is a lightweight CMS that requires no database setup and installation files. It also gives you the ability to customize individual pages. With all the right tools available at my disposal, I wanted to create an art-directed site that combines Miles Davis’s album and web typography. After purchasing The Complete Columbia Album Collection of Miles Davis, I would go through and listen to each album, review it with one sentence and build the page using that one sentence review for each week. I had a lot of fun doing it and I learned quite a bit as well.