Freshly Rebuilt Website

β€’Show β€’3 min read
By: Dustin Delatore

Rebuilt my website after several years with a stagnant portfolio site. It was built fast and careless as my knowledge for development was that of a junior developer. I considered myself a’hybrid’ UI designer and frontend developer but focused more on design. The new site on the other hand is a reflection upon my career choice and passion for Frontend Development.

Under The Hood

My site is built in Jekyll with the help of an amazing Yeoman generator. I highly recommend to those using Jekyll. A major change to the site is it’s hosting. What was once hosted by Pagoda Box has now found a new home at Github pages.

As far as the frontend, my site is comprised of Sass for layout and styling. Also, combination of javascript and jQuery for small tracking items. I will soon be making the move to coffeescript for any DOM manipulations.

Sass styling

Over the past year I have been developing style guidelines for Bisk Education and decided to implement them on this new site as well.

The grid system is built with the help of the semantic grid framework Susy. No more β€˜bloated’ css libraries full of every possible grid combination. I am allowed to capture the bare minimum for what I need; keeping my code small, clean, and concise.

Scripting

All of my javascript is basically for tracking and SEO purposes. I use GoSquared for all my site tracking. Google Analytics is an amazing and free tool but I chose to venture away from the norm. I added a simple jQuery plugin that added data-events to all my article links explaining in plain english where my visitors have gone.

It looks like this:

;(function($){
  β€˜use strict’;
  $.fn.NoFollow = function() {
    var $this = $(this);
    var page = window.location.pathname;
    var url = $this.attr(β€˜href’);
    $this.attr(β€˜rel’, β€˜nofollow’)
         .attr(β€˜data-event’, β€˜Left site from β€˜ + page + β€˜ to β€˜ + url)
         .attr(β€˜target’, β€˜_blank’);
  };
})(jQuery);
$(β€˜.js-nofollow a’).NoFollow();

GoSquared has great documentation when it comes to click tracking on all site actions. With the attached js I am able to read all data-events with their simple call.

$(β€˜[data-event]’).on(β€˜click’, function() {
    _gs(β€˜event’, $(this).data(β€˜event’));
  });

No More Designs

I previously had designs on the site for my portfolio. I have removed them and will no longer be hosting them here. My designs will be hosted on external sites such as Behance and Dribbble. This is all part of an effort to focus all my efforts to writing articles about frontend development.

Coming soon to the site will also be all my open-source projects I am working on.