This post was originally published on Medium, but is since removed. Strikethroughs represent some light edits made to the original.

Between client projects, I recently set aside time to redesign and build my personal website. The website is a simple online portfolio, aiming to provide context about my professional experience through writing and samples of past design work  –  all presented in a casual at-a-glance fashion. The prospect of a redesign provided a fun opportunity to explore a few new development techniques that I’d been keen to try out. In this post, I wanted to jot down some notes about said techniques both for personal reference and in case they’re of possible wider interest. Screenshots are provided as a snapshot of the site at the time of writing.

Off-canvas content

I’ve used an “off-canvas” pattern to house the text-heavy About content, which is a UI pattern more commonly used with navigation menus. I’m calling this off-canvas area the “drawer”. The challenge here was having the link to close the drawer be unobtrusive yet obvious enough to be found when needed. I think we’ve achieved this by positioning the link to close the drawer where the original About link was. This way, the user can toggle the open state of the drawer without having to move the cursor. Clicking outside of the drawer or pressing Esc will also trigger it to slide away. The drawer also self-closes when users reach the end of its content.

Local font checking

The typeface in use is Seravek (Bold) from Process Type Foundry. I purchased a webfont license for this back in 2012 after discovering it in the iBooks app for iOS. I was pleased to see that it had made its way into Apple OS X Mavericks by default. Since a large portion of my site audience runs an up-to-date version of OS X, this provided an interesting opportunity to experiment with font performance.

I’ve implemented a few extra lines to my @font-face rules so that the browser first checks whether the font is locally installed before making a request to download it from the server — a minor performance gain. The @font-face rule for the bold weight only is:

@font-face {
  font-family: Seravek;
  font-weight: 700;
  src: url("SeravekWebBasicBold.eot");
  src: local("Seravek Bold"), /* Full name */ local("Seravek-Bold"), /* PostScript name */
      url("SeravekWebBasicBold.eot?#iefix") format("embedded-opentype"),
    url("SeravekWebBasicBold.woff") format("woff");
}

The first local call is the font’s full name (Seravek Bold), and the second is for the PostScript name (Seravek-Bold). There is a useful in-depth overview on the cascading nature and browser support for this technique here.

CSS image manipulation

When displaying images in my portfolio in the past, I’ve carefully and consistently added a one-pixel grey outline or subtle background tint to images in order to make them stand out against a white background, or Photoshopped a drop shadow on a website to give it a screenshot-like feel. I was keen to explore what might be possible with CSS instead, both for efficiency and to keep the images themselves as unedited as possible. With the CSS styles written, I now just need to add various class names to the images which manipulate the image directly. For instance: a class of .keyline adds a thin outline, whilst a class of .full extends the image width to that of the viewport, effectively making it full-bleed (achieved by using vw units).

Next steps

I have many future plans for the site, including improving the performance and both adding and fine-tuning content. I’d really appreciate feedback, so don’t hesitate to leave a comment here or tweet me at @baldwinsam. Thanks for reading.