Personal Website Colophon

2 minute read

Table of Contents

  1. Philosophy
  2. Tools/Software
  3. Registrar
  4. Hosting


This webpage’s purpose is to show, rather than tell, clients or employers what I do with examples. An importance is placed upon the accessibility of information relative to what a user is looking for which is emphasized by the focus on content filtration. This site was designed with a mobile first, feature rich philosophy. Media queries and breakpoints are specified for minimum widths rather than maximums with default styling being optimized for mobile users. The site was also developed completely, with scripting, before being optimized for users JavaScript enabled. As a result the filtering feature is unavailable when JavaScript is disabled in ones browser.


Pages are initialized with correct HTML meta info, links without text have been assigned names and content, such as text, shares significant contrast with their background colors. Google Developers’ Lighthouse chrome extension was used to assess accessibility.

Attention to detail

The website was designed to be a complete experience; in that it is brand consistent down to very specific details in both styling and interactions. For example, user selection of text displays in a purple consistent to brand colors without being too off-putting compared to the typical default of light blue. Additionally many animations remain consistent within one another in ease, timing and motion.



Developed on a 2017, 13” Macbook Pro with the following specifications.

Operation System macOS Mojave 10.13.5
Processor 23 GHz Intel Core i5
Memory (RAM) 8 GB @ 2133 MHz (LPDDR3)
Graphics Card Intel Iris Plus 640
VRAM 1536 MB
Storage 256 GB

Interface & Graphic Design

Low fidelity mockups were drafted with gel pen on paper. High fidelity user interface designs were made in Bohemian Coding’s Sketch. Graphics, logos and thumbnails were designed in Adobe Illustrator and Photoshop and compressed and optimized in ImageOptim.


I use Atom as my main text editor along with the Emmet package for rapid construction of HTML markup and CSS engine support.

Libraries & Plugins

  • The site’s structure and responsive nature is based highly on a heavily modified version of the Skeleton web boilerplate manually merged with normalize.css.
  • jQuery 3.4.0 is used as a for more accessible JavaScript and DOM manipulation as well as specified content load-in protocols.
  • The portfolio grid implements Patrick Kunka’s MixItUp 3 plugin to fluidly animate content filtration.


I now host my domain and nameservers with Google Domains after previously using NameCheap as my registrar. My main motive in choosing Google Domains was not for their pricing (which at 12 USD is very typical for ‘.com’ domains), but rather their transparency. While other registrars often advertise on false or temporary premises and could hold your domain hostage, Google is very direct and even bundles in perks like WhoIS protection with every domain.


I host with Hostinger. They have excellent prices, but without the sacrifice of not having utilities like cPanel, Git integration and more.