a tablet on a desk with the Megglo home page open

Last year, I redesigned my portfolio site to better communicate myself and my work, and to gain hands-on experience with responsive web design and JavaScript.

The process was slow-going because I'd only coded a few basic sites before and had never used JavaScript. I executed every step of the process, including wireframes, mockups, illustrations, coding, and testing. My goal: a site that was interactive, responsive, and well-organized. I spent over 400 hours working on the site and was very excited about the result.

Since then, I've spoken to several users and made revisions based on feedback. The site you're currently browsing is the one-year evolution of this endeavor. See the original here.

The interactive clock graphic above is displayed on the home page.

Use the phone icon in the lower left to toggle to an interactive view in which users can browse images in the phone's photo gallery, unlock secret pages with the right PIN, and power the phone down. The graphic isn't particularly relevant and will probably be replaced soon, but it was an interesting exercise and my first project with JavaScript.

I used JavaScript for the first time while developing this site.

The first page I tackled was the home page, which took me over two weeks to complete. After reading a few chapters of Jon Duckett’s JavaScript and jQuery, I had the idea: I would make an illustrated clock which used Javascript to pull the current time and date. The plan quickly became more elaborate, and I added a digital option which soon became a fully interactive iPhone graphic. During my job search, I used the phone's PIN input to provide each company with tailored content. By now, I've written thousands of lines of code (and deleted many more as I went through and tried to make my early code more efficient). The current site contains almost 2,000 lines of original code (excluding embedded SVG graphics), plus a polyfill I used to add IE media query support.

I utilized the Google Maps API to include a stylized map with custom icons.

It took me a while to dig through the online documentation and figure out how to make the map look and function the way I wanted, but I finally got it working. Now, as you zoom in or out and pan across the screen, different icons appear. Try it yourself below.

The site is fully responsive and functions across all modern browsers and screen sizes.

The interactive SVG graphics included throughout the site required particular attention. On the About page, for example, the graphic transforms into a slider to accomodate smaller screens. The navigation menu also changes layout to best fit the available space.