Site Header and Footer

Why start with the site header and footer? Because I already had an idea of what I wanted these to look like and I had already designed the logo, so I just went with it!

I’ve played around with this logo for years, but it’s finally seeing the light of day:

A comparison of my personal logo with and without a bounding container, which consists of the letters d, p, and c

Logo with and without bounding container.

The logo consists of my initials: the letters d, p, and c, which stands for Derek Pearson Collins. While the logo can stand alone, I decided to add a bounding box to surround it because I have some ideas about how I’d like to change the background color and contents for certain special occasions (we’ll see how this plays out in practice.)

The site navigation resides in the header and is duplicated in the footer. I plan on having both a serif and sans-serif font that will be used throughout this site and when I saw the simple, minimalist Neue Haas Grotesk, I knew it was the right sans-serif font to use.


To link to other areas across the web where I have a personal or professional presence, I chose icons from Feather. I may eventually change these up, but I really like the simple outline style for the time being.


One fun little technical bit is that I’m using the JavaScript Clipboard API to copy my email address to the clipboard when you click on the email icon in the footer:

function copyToClipboard(text) {

I personally can’t stand when I click on a mailto link and it launches an email application and creates a new message — I’d much rather copy the email address and paste it into the email composer of my choice.