I have rebuilt this site again, creating a custom theme and incorporating everything I've learned in development and design since my previous version. In this post I'll describe the improvements, engineering, and inspirations.

Focused Content

With a bounce rate of 82.35%, I wanted to increase user retention, so I removed a lot of content, like this single post dedicated to cowsay:

 _______________ 
< less cows plz >
 --------------- 
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

More Visuals

This new version includes larger hero images, intentional colors, and improved typography in a mobile-first responsive layout. Everything is balanced to keep load times under 1 second and 1MB.

// no comment
function recursive (n) {
    if(n <= 2) {
        return 1;
    } else {
        return this.recursive(n - 1) + this.recursive(n - 2);
    }
}

Engineering

In addition to improving the design and layout, I improved the tool infrastructure for easier maintainability and a more enjoyable developer experience.

The current resources and tools I’ve used to build this site are:

• Jekyll 3
• Kramdown
• Gulp
• Browsersync
• Bootstrap 3
• jQuery
• Sass
• http://www.unsplash.com for imagery
• https://picjumbo.com for imagery
• https://pixabay.com for imagery
• Git hooks for auto-deploys on commits

Inspirations

I’m not a designer but I try to educate myself on design principles as much as I can. One of the ways I do this is by observing the world around me and remixing the best design elements I see into a hopefully unique result.

Here are all the places I drew inspiration from:

• Zach Holman’s site. He’s a funny writer and speaker with a really cool blog.
• Paul Stamatiou. A designer with an amazing site with beautiful typography and photos.
• Medium, Ghost. Great blogging platforms with eye catching hero images and typography.

A Full and Comphrensive Style Test

Inspired by Ghost’s style test, this section will cover all of the theme’s UI elements. It’s mostly nonsensical and only here for testing purposes.

Bright Skies is a free and responsive Jekyll theme with a focus on imagery and typography. The goal of this theme is to minimize distractions and let content be the focus.

This is a right blockquote.

Bright Skies is built on top of many great open source frameworks and tools to make it easier to create maintainable content that loads fast and looks great on many different devices. This is emphasized. 5³ = 125. Water is H₂O. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.

This is a left blockquote.

HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. To copy a file type COPY filename. Dinner’s at 5:00. Let’s make that 7. This text has been struck.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph text

Blockquotes

Let’s keep it simple. Italics are good to help set it off from the body text. Be sure to style the citation.

And here’s a bit of trailing text.

Text-level semantics

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The _{sub element} example
The ^{sup element} example
The var element example
The u element example