Yet another WordPress theme I’ve built for cabrerahector.com, Grey was a much needed update.

The Story behind Grey

You’d think that since I’m a developer I’d keep my own website up-to-date with the latest trends. Far from it. “The shoemaker’s son always goes barefoot.”

The truth is that three years had passed since the last redesign. The website was starting to feel outdated and I wanted something simple yet elegant. A minimalist design that highlights what’s actually important, free of unnecessary distractions.

With that in mind, I took on the challenge to design and code a custom minimal portfolio theme from scratch. And -modesty aside- I think I did a pretty good job!

Building the theme

The main focus of Grey is User Experience: guide visitors to where you want them to go in an intuitive way, in as little clicks as possible.

The always-visible top section of the website contains only the logo and a very minimal navigation menu, and it tucks itself away when scrolling through the contents of the website to avoid obstructing what the visitor is currently seeing on screen.

Performance is also a key factor as I wanted my site to load as fast as possible, and for this I relied on Webpack to:

• Reduce the number of HTTP requests as Webpack bundles JavaScript modules (and their dependencies!) into static assets.
• Compile SCSS files into static CSS assets.
• “Minify” scripts and stylesheets (with the help of some Webpack plugins), reducing greatly the size of said assets.

Speaking of SCSS, I loosely followed the SMACSS architecture to keep my CSS organized and it proved to be a great decision: I could stop working on the theme for days and even weeks and still know what files I needed to edit when I wanted to change something. If you’re not familiar with SMACSS yet -and if you’re into web development- you should definitely check it out.

CSS3 transitions are all over the place, too. I’m a big fan of subtle, smooth animations since these can give a lot of life to what otherwise would be a plain looking website. My favorite one so far is on the About section (click on Say hi! to find out, I won’t spoil it for you).

Behold, Gray the WordPress portfolio theme!

After weeks of work, by the end of January 2018 I finally launched the new version of the site with Grey as protagonist:

Neat, huh?

Onto the next challenge!