Version 03 of Web Site


Well it has been a little over two years since the last web site re-design, so I thought the old personal web site was due for a redesign. If you are reading this then the new site is up and you are seeing the new design. Hope you like it.

Kirby CMS

I am still using Kirby as my file based CMS. Over two years ago I decided to go with Kirby as my CMS and I saw no reason to change that now. You can read some of my reasoning for using Kirby in my blog post on the launch of version 02 of this web site (this current design is version 3 of this web site).

The Theme

I decided to base the site on a pre-built theme this time around. I have come to realize I am not the best at design, or at the very least it takes me a very long time to design something decent. So, going with something off the shelf was a huge time saver for me.

An important note is I only based the design of the site on a theme. I took some code from the theme code but most of the code was based off the Kirby Starter Kit.

The theme I chose to base this site re-design off was the free Kompact theme. It is a theme meant for the Kirby CMS. I liked its minimalist feel and its wide open airy design. The nice slide in navigation menu that worked the same on desktop all the way down to phone sizes was a nice bonus.

Technologies Used

jQuery

I’m Still using my good old web buddy jQuery. Mainly for the slide in menu and to perform some height calculations, using the jQuery matchHeight plugin. I needed to make sure that the main content area and the slide in navigation menu are equal heights. I also used jQuery to handle some focus states. I wanted to make sure the navigation menu opened and close when keyboard users focused into the navigation menu. So jQuery to the rescue there. I realize I could do all this with vanilla JavaScript but I could do it in less time using jQuery, so I stuck with that.

SASS

5 years late to the party, but better late than never. I finally wrote my CSS in SASS. All the CSS Is broken up into SASS partials. I even used some SASS arrays, loops and functions. It was a nice to use SASS instead of native CSS.

Build Tools or Lack Thereof

On the development side, I did not use any fancy build tools. I ran SASS natively from the terminal and ran Browsersync natively in the terminal. Between the two I had a nice simple work flow, where my browser refreshed whenever a plain text file, a CSS file, a JavaScript file or even a PHP file changed. For me this was all I needed. Auto compile SASS and auto refresh the browser, all with just two terminal commands. Nice and simple.

Fonts

I went with all Google fonts this time around. No real reason, I just found all the fonts I needed on Google fonts. The Kompact theme that I based my site on used the Muli font (which is on Google fonts) and another serif font. I did not like the serif font, so I went with what Google Fonts recommended was a good pairing with Muli. That font was Open Sans. For the web site logo, I just used the condensed version of Open sans. Code snippets again used the standard monospace font family of Consolas, Monaco, Andale Mono and a monospace fallback.

Oh, I almost forgot, the social media icons use an icon font. The free and fabulous Font Awesome. They look great, it’s free, and it’s easy to use. Enough said.

Slide Show

I stuck with the nice Royal Slider for the photos slide show. It is a paid plugin, but for $14 US it is worth it, due to how configurable this slider is.

Cuts

I simplified the site quite a bit as I am no longer taking on client work and had no need for a web design portfolio section.

Also cut were the demo pages and the presentation page.

I also eliminated some web site features. Search is gone, as the site is too small to really need it. If I start blogging like crazy (doubt it) then I may bring it back. The contact form is no more. Over the years I only got a few replies in the form. My email address is on the site, along with all my social media links, so if anyone wishes to get a hold of me there are still plenty of options for them to do so.

To do

Still a few things to do with the web site, but if I wait until I finish everything then the site will never go live.

https

As I write this I still have not setup the web site for https, but this is priority number one and maybe by the time you are reading this this site will be running on a more secure https connection.

Minification

Since the site is so small with little traffic, I am not too concerned about minifying the HTML, CSS and JavaScript, but I am looking at a Kirby plugin that will automate this for me.

Image Optimization

I have a PHP plugin called Adaptive Images that I used on version 02 of the web site, but I still must implement it on this web site.

Summary

Well that’s about it. All in all, I am quite happy with the new design. I feel the web site is a bit leaner and it is now just a personal home for me on the web. I hope you enjoy it.

Thanks for reading.