(prototype: http://michaelmabale.com/sandbox)

This is the start of one of the first iterations of my site.

Looking at other portfolios and agency pages, I wanted to build on the theme of presenting work via a grid of linked tiles. One prevailing idea that I wanted to convey was the idea of randomness and how to use it to create pleasing variations on the homepage.

In order to simulate random placement of tiles in the grid, including empty tile slots, I simply randomized the left margin to an increment of the tile width + margins. I also wanted to play with newer CSS3/HTML5 features like rounded corners and opacity via rgba colors. In developing the function to randomize the tile colors, I found that randomizing each channel (Red, Green, Blue, Alpha) independently produced a more pleasing mix overall.

While this was all a great exercise in expanding my knowledge with CSS3, PHP, jQuery, and JavaScript, this  idea was eventually abandoned. I felt that the site was getting in the way of the content and navigation and forgetting about my primary audience: someone trying to view my work.

Also, as I started devising ways to build the mySQL backend to manage the images, I was reminded by the practical programmer in me not to reinvent the wheel, and I quickly gravitated towards using WordPress as a CMS solution instead.

So although this was an abandoned idea, it was a valuable learning exercise with pleasing visual results. Who knows, I may revisit this idea later and build a fully-fledged WordPress theme around it.

Here is the random color function:

I

function getRandomRgb(max){
     // max is a number less than 256
     // the lower the number, the lower key your color range will be.

     var color;
     var r = Math.floor(Math.random() * max)
     var g = Math.floor(Math.random() * max)
     var b = Math.floor(Math.random() * max)

     var hasOpacity = jQuery.support.opacity;

     if (hasOpacity) {
          var rand = Math.random();
          var alpha = (rand < .5) ? (1 - rand) : rand;
          color = 'rgba(' + r.toString() + ',' + g.toString() + ',' + b.toString() + ',' +  alpha.toString() + ')';
     } else {
          color = 'rgb(' + r.toString() + ',' + g.toString() + ',' + b.toString() + ')';
     }
     return color;
}

Here is the code that randomizes the tiles

var tWidth = parseInt($('div.tile').css('width'));
var tMargin = parseInt($('div.tile').css('margin-left'));
var tPadding = parseInt($('div.tile').css('padding-left'));
var tBorder = parseInt($('div.tile').css('border-left-width'));

var tOuterWidth = tWidth + (tMargin * 2) + (tPadding*2) + (tBorder*2);

$('div.tile').each( function() {
     var randMargin = (tMargin + Math.floor(Math.random() * 7) * tOuterWidth).toString() + "px";
     $(this).css('margin-left', randMargin);
     $(this).css('background-color', getRandomRgb(200));
     var randSpeed = Math.floor(Math.random() * 3500);
     $(this).fadeIn(randSpeed);

     var bgImage = $(this).attr('name');

     $(this).click( function(){
          $('#modal').css({
               background: "#000 url(" + bgImage + ") center top no-repeat",
               margin: '0',
               padding: '0',
               height: $(window).height() * .80,
               width: $(window).width() * .80,
               position: 'absolute',
               top: $(window).height() * .10,
               left: $(window).width() * .10
          });
          $('#modalOverlay,#modal').fadeIn();
     });
});