A new look for the homepage

View live site

The light view

Chispa is the consulting company I started in late 2016 with my friend Josh Orr. Over the years there have been many iterations of the site but this version has been around the longest and has both ranked the highest and had the most conversions. This is in part due to it being very fast, with everything above the fold loading in under a second. It is also very lightweight, coming in at 420kb (this does not include the Google Maps iFrame).

This recent update was twofold, to boost SEO with updated tags, descriptions, and site copy, in addition to adding something new and fun. I decided that instead of adding a ‘dark mode’ a more fun option is to invert the colors on the page, at random on load.

To do this I needed a little bit of JavaScript.

function flip() {

    // As close to a true 50/50 chance as nessecary
    if (Math.random() <= 0.5) {

        // Change colors of all the elements
        document.body.style.filter = "invert(100%)";

        // invert() does not change the background color
        document.body.style.backgroundColor = "#0f0f0f";
    }
}

// Runs on load
flip()

This fun and easy idea has made some good impressions with new clients and added a new dimension to our brand.

The Chispa website has been built using drag-and-drop editors, wordpress, and static site generators in the past but building it from scratch has turned out to be the best option. I learned a lot by not having tools help me put it together and I was able to find new libraries like skeleton.css and top optimize the use of others like Font Awesome.

The dark view

Complete source code available upon request.