]> Denis DerSarkisian • web design portfolio

347 866 9591
denis.dersarkisian@gmail.com

Portfolio

Margaret Chiarelli

Margaret wanted a new website to exhibit her artwork. I adapted the previous site’s black widescreen design, using a birds-on-a-wire collage for navigation and building horizontally scrolling galleries. Clicking on one of a gallery’s thumbnail images reveals the full scale picture, usually as a draggable popup inside the web page. These inline popups are set up with unobtrusive javascript, so the large pictures open in a new window if javascript is disabled. Since its original hosting was too basic for server scripting or content management systems, this site is made of static HTML pages.

Golem gallery with popup Photography gallery

Fukasa Kai

Toide view with about popup

Fukasa Kai is a Japanese martial arts organization, so this site’s look comes from the wood and paper shoji screens found in traditional Japanese buildings. A random musha-e print (woodblock print showing a fight) is visible through the shoji. Uniform patches across the page tops allow navigation, site controls are in hover menus on the left, and photos from the organization’s events line the right. Membership view Editing Aiki view

This website needed to coordinate all the students and teachers in a large organization, so had many requirements. The Drupal CMS has a collection of contributed modules that let me quickly add most of the site’s features, such as mass mailing capability, a site calendar, and Flickr account integration. I wrote custom Drupal modules for missing pieces like the inline About popups and affiliation request form. Affiliate application

Meat for Tea

Front page

This literary journal’s website was designed to read as much like a print magazine as possible—the fonts, shortest and longest possible line length, and color scheme were all chosen to enhance readability. The site has a clean look—its main decoration is a random cover image behind the articles in the center column. Site controls and links to contributors hang off the left, pushing article text aside in narrow browser windows.

Meat for Tea’s editors wanted to post stories, poems, and art, so the Wordpress blogging platform was a natural choice. My customizations made the built in TinyMCE editor behave properly and look like the published articles. I also added hit counter and access control plugins.

Bum's Rush page 3 Editing Defected

Antarctic Map

Map view

This zoomable map keeps its location list and controls in a sidebar. I designed the map’s interface to be intuitive, visually unified, and never cause the map itself scroll out of view. Stylistic tweaks include custom drop-down selects when editing locations and inline popups for notifications, password checks, etc.

The map demonstrates many different web technologies. It was built with the Google Maps API, which normally draws with a Mercator projection—that means its maps are centered at the equator. This works well for most parts of the world, but makes a mess out of Antarctica, splitting it in half and stretching it across a map’s bottom edge. I wrote made a custom projection to show it centered at the pole. Location's info popup showing

Since the map was already set up to AJAX load terrain pictures, it made sense to also have it AJAX load locations for the sidebar. This required custom routines to read Google Earth KML files. Server scripts make the map editable, letting a user edit and add locations when signed in.

Clicking on a sidebar entry pops up information on an Antarctic location. Originally the the browser’s ‘back’ button did not go back to the last location viewed—instead, it unloaded the entire map! This is a common problem with AJAX sites—you can load new information without loading a new page or changing the browser’s location bar URL, but web browsers only know how to go forward and backward when the location bar changes. I fixed this by integrating the Really Simple History framework, which gives each location its own local URL—also allowing direct links to map locations.

Editing a location Sign in dialog showing

Resume

Resume

At one point, I was working in several fields and maintaining multiple resumes. This was cumbersome, especially when I decided to change their look; I wanted to use a single document to make all my resumes. Moving my work experience into an XML file lets me use XSL and a CSS stylesheet to produce web resumes; a third-party program feeds that stylesheet into an XSL-FO formatter to generate the PDF version. This scheme lets me quickly and easily make resumes for any job type.