55Sketch - Portfolio design

55Sketch - Portfolio design.markdown

55Sketch - Portfolio design

Started building my portfolio on CodePen, then finished it off with content locally, so thought I'd add the finishing touches to the CodePen version!

A Pen by Nick Moreton on CodePen.

License.

index.html

  <div class="topbar">
  <h1>55Sketch</h1>
  <ul class="social">
    <li><a class="fa fa-2x fa-twitter" href="http://twitter.com/ngmoreton" target="_blank" title="Twitter" alt="Twitter"></a></li>
    <li><a class="fa fa-2x fa-codepen" href="http://codepen.io/nickmoreton" target="_blank" title="Codepen" alt="CodePen Profile"></a></li>
    <li><a class="fa fa-2x fa-github" href="https://gist.github.com/55sketch" target="_blank" title="Github" alt="Github"></a></li>
    <li><a class="fa fa-2x fa-envelope-o" href="mailto:nick@55sketch.com" target="_blank" title="Contact" alt="Contact"></a></li>
    <li><a class="fa fa-2x fa-rss" href="http://codepen.io/nickmoreton/blog/" target="_blank" title="Blog" alt="Blog"></a></li>
  </ul>
</div>
   <div class="fa fa-times fa-2x close">&nbsp;</div>
<div class="wrapper" id="portfolio">
 
  <div class="project one" id="bcmcr">
    <h2 class="title">BCMCR.org</h2>
    <div class="content">
      <a href="http://bcmcr.org" target="_blank">
        <picture>
        <source srcset="http://55sketch.com/images/bcmcr_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/bcmcr.jpg" alt="BCMCR.org website screenshot" title="Click Image To Visit Site"/>
       </picture>
        
    </a>
      <a href="http://bcmcr.org" class="button" target="_blank">Visit Site <i class="fa fa-arrow-right"></i></a>
      <div class="details">
      <b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, PHP | <b>Plugins:</b> <a href="http://isotope.metafizzy.co" target="_blank">Isotope</a>
      </div>
      <p>The <a href="http://bcmcr.org" target="_blank">Birmingham Centre For Media & Cultural Research</a> is made up of several research teams carrying out collaborative work aross a range of cultural interests. They required a new website that amalgamated the existing websites for these teams and acted as a hub for the research centre itself.</p>
      <picture>
        <source srcset="http://55sketch.com/images/bcmcr_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/bcmcr-main.jpg" alt="BCMCR.org website screenshot" title="Click Image To Visit Site"/>
       </picture>
      <p>The treatment of the main site was to make the central hub focussed on the researchers - the people behind the centre - and offer them an attractive profile page that brings in all of their work across the teams.</p>
      <picture>
        <source srcset="http://55sketch.com/images/bcmcr-profile_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/bcmcr-profile.jpg" alt="BCMCR.org profile screenshot"/>
       </picture>
      <p>Complementary themes were created for the individual sites to give them their own personality, as well as holding together a coherent design style throughout.</p>
      <picture>
        <source srcset="http://55sketch.com/images/bcmcr-ic_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/bcmcr-ic.jpg" alt="Interactive Cultures screenshot"/>
       </picture>
      <picture>
        <source srcset="http://55sketch.com/images/bcmcr-cecp_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/bcmcr-cecp.jpg" class="left" alt="CECP.org screenshot"/>
       </picture>
       <picture class="clearfix">
        <source srcset="http://55sketch.com/images/bcmcr-sc_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/bcmcr-sc.jpg" class="right" alt="Screen Cultures screenshot"/>
       </picture>
      <p>The sites are responsive, built on WordPress using custom MySQL queries, and the <a href="http://isotope.metafizzy.co" target="_blank">Isotope JQuery plugin</a> was used to handle sorting and filtering.</p>


    </div>
    </div>
  <div class="project two" id="edition-records">
    <h2 class="title">Edition Records</h2>
    <div class="content">
      <a href="http://editionrecords.com" target="_blank">
        <picture>
        <source srcset="http://55sketch.com/images/edition_mobile.jpg" media="(max-width: 480px)">
        <img src="http://55sketch.com/images/edition.jpg" alt="Edition Records website screenshot" title="Click Image To Visit Site"/>
        </picture>
      </a>
      <a href="http://editionrecords.com" class="button" target="_blank">Visit Site <i class="fa fa-arrow-right"></i></a>
      <div class="details">
      <b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, PHP
      </div>
      <p><a href="http://editionrecords.com" target="_blank">Edition Records</a> is one of the leading Jazz record labels in Europe.</p>
      <picture>
        <source srcset="http://55sketch.com/images/edition_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/edition-main.jpg" alt="Edition Records website screenshot"/>
       </picture>
      <p>The label has access to a very large range of high quality photography, so the design of the site is geared towards showing off this fantastic imagery.</p>
      <picture>
        <source srcset="http://55sketch.com/images/edition-artist_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/edition-artist.jpg" class="left" alt="Artist example screenshot"/>
       </picture>
       <picture class="clearfix">
        <source srcset="http://55sketch.com/images/edition-release_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/edition-release.jpg" class="right" alt="Release example screenshot"/>
       </picture>
      <p>The client needed distinct areas of the site for their artists and releases, as well as more standard features such as news updates and static pages. The site needed to be responsive and several third party services, such as Bandcamp, Flickr and Soundcloud also needed to be integrated.</p>
      <picture>
        <source srcset="http://55sketch.com/images/edition-video_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/edition-video.jpg" alt="Video modal screenshot"/>
       </picture>

      <p>In response to these requirements the site was built on WordPress, using a wide range of Custom Post Types and Custom Fields in order to make updating and managing the site extremely easy for the client.</p>
    </div>
  </div>
  <div class="project three" id="uberbooths">
    <h2 class="title">Uberbooths</h2>
    <div class="content">
      <a href="http://uberbooths.co.uk" target="_blank">
        <picture>
        <source srcset="http://55sketch.com/images/uberbooths_mobile.jpg" media="(max-width: 480px)">
        <img src="http://55sketch.com/images/uberbooths.jpg" alt="Uberbooths website screenshot" title="Click Image To Visit Site"/>
        </picture>
      </a>
      <a href="http://uberbooths.co.uk" class="button" target="_blank">Visit Site <i class="fa fa-arrow-right"></i></a>
      <div class="details">
      <b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, Javascript, PHP | <b>Plugins:</b> <a href="http://liquidslider.kevinbatdorf.com/" target="_blank">LiquidSlider</a>
      </div>
      <p><a href="http://uberbooths.co.uk" target="_blank">Uberbooths</a> provide bespoke photobooths for a variety of events across the whole of the UK.</p>
      <picture>
        <source srcset="http://55sketch.com/images/uberbooths_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/uberbooths-main.jpg" alt="Uberbooths main screenshot"/>
       </picture>
       <p>The client had access to some excellent imagery for the website, so a large featured image was utilised on each page, and a full width content slider welcomes visitors to the front page of the website.</p>
        <picture>
        <source srcset="http://55sketch.com/images/uberbooths-page_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/uberbooths-page.jpg" alt="Uberbooths page screenshot"/>
       </picture>
       <p>One of the main features of the site allows users to design their own custom booth and get an instant quote. This was achieved using Javascript, JQuery and a PHP mail form.</p>
        <picture>
        <source srcset="http://55sketch.com/images/uberbooths-booth_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/uberbooths-booth.jpg" alt="Uberbooths Design Your Booth screenshot"/>
       </picture>
       <p>The site is responsive and built on WordPress</p>
    </div>
  </div>
  <div class="project four" id="tim-garland">
    <h2 class="title">Tim Garland</h2>
    <div class="content">
      <a href="http://timgarland.com" target="_blank">
        <picture>
        <source srcset="http://55sketch.com/images/tim-garland_mobile.jpg" media="(max-width: 480px)">
        <img src="http://55sketch.com/images/tim-garland.jpg" alt="Tim Garland website screenshot" title="Click Image To Visit Site"/>
        </picture>
      </a>
      <a href="http://timgarland.com" class="button" target="_blank">Visit Site <i class="fa fa-arrow-right"></i></a>
      <div class="details">
      <b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, PHP | <b>Plugins:</b> <a href="http://liquidslider.kevinbatdorf.com/" target="_blank">LiquidSlider</a>
      </div>
      <p><a href="http://timgarland.com" target="_blank">Tim Garland</a> is one of <a href="http://editionrecords.com" target="_blank">Edition Records'</a> main artists and the label required a new website to coincide with the launch of Tim's new album.</p>
     <picture>
        <source srcset="http://55sketch.com/images/tim-garland-1_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/tim-garland-1.jpg" alt="Tim Garland screenshot"/>
       </picture>
       <p>Due to the nature of Tim's long, successful and varied career the website needed to showcase several different areas in which Tim works.</p>
       <picture>
        <source srcset="http://55sketch.com/images/tim-garland-2_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/tim-garland-2.jpg" alt="Tim Garland screenshot"/>
       </picture>
       <p>The site is built on WordPress and the responsive design reflects the artwork from Tim's latest album. Several third party services needed to be integrated, such as YouTube, SoundCloud and Songkick</p>
       <picture>
        <source srcset="http://55sketch.com/images/tim-garland-3_mobile.jpg" media="(max-width: 480px)">

        <img src="http://55sketch.com/images/tim-garland-3.jpg" alt="Tim Garland screenshot"/>
       </picture>
       <p>The entire site is navigated through utilising LiquidSlider acting as a full page content slider, which provides an interesting and unique user experience.</p>
    </div>
  </div>
  <div class="project five" id="soundcloud-visualiser">
    <h2 class="title">Soundcloud Data</h2>
    <div class="content">
      <a href="http://55sketch.com/soundcloud" target="_blank">
        <picture>
        <source srcset="http://55sketch.com/images/soundcloud_mobile.jpg" media="(max-width: 480px)">
        <img src="http://55sketch.com/images/soundcloud.jpg" alt="Soundcloud Visualiser website screenshot" title="Click Image To Visit Site"/>
        </picture>  
      </a>
      <a href="http://55sketch.com/soundcloud" class="button" target="_blank">Visit Site <i class="fa fa-arrow-right"></i></a>
      <div class="details">
      <b>Platform:</b> Static | <b>Languages:</b> HTML, CSS, JQuery, JSON, API | <b>Plugins:</b> <a href="https://github.com/soundcloud/SoundCloud-API-jQuery-plugin" target="_blank">SoundCloud API JQuery Plugin</a>, <a href="http://isotope.metafizzy.co" target="_blank">Isotope</a>
      </div>
      <p>Built as an exercise in learning how to utilise Web APIs, my <a href="http://55sketch.com/soundcloud" target="_blank">SoundCloud Data Visualiser</a> allows users to log in with their SoundCloud account and view their stats for Plays, Downloads and Favourites</p>
      <p>The stats can be sorted using the Isotope plugin, and the relative size of the bars can be adjusted to suit the user's taste</p>
      <p>If you don't have a SoundCloud account, you can view a basic version of the visualiser on my <a href="http://codepen.io/nickmoreton/pen/Eveaq" target="_blank">CodePen account</a></p>  
    </div>
  </div>

</div>

script.js

$(function(){
 var topbar = $('.topbar').height()+20;
 var height = $(window).innerHeight();
 var width = $(window).innerWidth();
  if(580 >= width){
    $('.fa-2x').removeClass('fa-2x').addClass('fa-lg');
  }
  else {
    $('.project').css({'min-height':height-topbar, 'height':'auto'});
  }
  
  $('.title').fitText(0.9,{ maxFontSize: '28px' });
  
  if ( window.location.hash ) {
    $(window.location.hash).click();
  }
  $('.social').tooltip();
});

if(screen && screen.width > 580) {
$(window).resize(function(){
 var height = $(window).innerHeight();
 var topbar = $('.topbar').height()+20;
      $('.project').css({'min-height':height-topbar});
});
}

$('body').on('click', '.project', function(){
  
  $(this).addClass('selected').siblings().addClass('deselected');
  window.location.hash = $(this).attr('id');
  $(this).siblings().children('.title').hide();
  $('.close').fadeIn();
  setTimeout(function(){
    $('.selected').children('.content').fadeIn();
  },500);
});

$('body').on('click', '.close', function(){
  $(this).fadeOut();
  window.location.hash = '';
  $('.selected').children('.content').fadeOut();
  setTimeout(function(){
  $('.selected').siblings().removeClass('deselected');
    $('.selected').removeClass('selected');
   
    setTimeout(function(){
     $('.title').fadeIn();
     $('.title').fitText(0.9,{ maxFontSize: '28px' });
    },500);
  },500);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/jquery.fittext.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/picturefill.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/jquery-ui.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);


@base: #00ADD5;
@complement1: lighten(spin(@base, 180),15%);
@complement2: lighten(spin(@base, 180),10%);
@complement3: lighten(spin(@base, 205),30%);
@complement4: lighten(spin(@base, 205),20%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 25%);
@lighten3: lighten(@base, 30%);
@projects: 5;

* {
  box-sizing:border-box;
}

body {
  font-size:20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position:relative;
}

img {
  max-width:100%;
}

.topbar {
  padding:10px 30px;
  height:106px;

  
  a, a:link, a:visited {
  color:black;
  text-decoration:none;
  display:block;
  }
  
  a:hover, a:active {
    color:#333;
  }
}

h1 {
  float:left;
  margin:20px 0;
}

h2 {
  font-size:30px;
}

.social {
  float:right;
  margin:24px 0;
  text-align:center;
  padding:0;
}

.social li {
  display:inline-block;
  margin:0 8px;
}


.wrapper {
  position:relative;
  width:100%;
  overflow-x:hidden;
}

.project {
  float:left;
  transition: width 0.5s ease;
  overflow:auto;
  cursor:pointer;
  position:relative;
  width:calc(100% / @projects);
  height:0;
}

.selected {
  cursor:auto;
  width:100%;
}

.deselected {
  width:0;
}

.close {
  position:absolute;
  right:50px;
  top:158px;
  color:white;
  cursor:pointer;
  display:none;
  z-index:9999;
  max-width:40px;
}

.title {
  display:block;
  padding:5px 10px;
  background:white;
  left:0;
  margin-top:50px;
  width:90%;
  text-align: right;
}

.project:hover > .title, .selected > .title {
  color:white;
}

.content {
  width:80%;
  margin:auto;
  display:none;
  background:white;
  padding:20px;
  margin-top:50px;
  margin-bottom:30px;
  line-height: 1.5;
  font-weight: 300;
  text-align: justify;
}

.details {
  margin: 10px 0;
  background:#eee;
  padding:5px;
  border-radius: 3px;
  font-size: 0.85em;
  font-family: 'Source Code Pro', "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
  font-weight: 300;
  text-align: left;
}

.details b {
  font-weight: 500;
}

a.button {
    color:white !important;
    text-transform: uppercase;
    text-decoration:none;
    padding:10px;
    border-radius: 3px;
    margin:10px 0;
    display:inline-block;
    font-weight: bold;
}

.ui-tooltip {
    padding: 5px 10px;
    color: black;
    border-radius: 3px;
    font: bold 12px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: none;
    border:solid 2px black;
  }

.project:nth-of-type(8n+1) {
  background:@complement1;
  border-top:5px solid darken(@complement1,10);
  
  a, a:link, a:visited {
    color:@complement1;
  }
  a:hover, a:active {
    color:darken(@complement1,10);
  }

  a.button {
    background:@complement1;
    

    &:hover{
      background:darken(@complement1,10);
    }
  } 
}

.project:nth-of-type(8n+1):hover > .title, .project:nth-of-type(8n+1).selected > .title {
  background:darken(@complement1,10);
}

.project:nth-of-type(8n+2) {
  background:@complement2;
  border-top:5px solid darken(@complement2,10);
  
  a, a:link, a:visited {
    color:@complement2;
  }
  a:hover, a:active {
    color:darken(@complement2,10);
  }
  a.button {
    background:@complement2;
    

    &:hover{
      background:darken(@complement2,10);
    }
  } 
}

.project:nth-of-type(8n+2):hover > .title, .project:nth-of-type(8n+2).selected > .title {
  background:darken(@complement2,10);
}

.project:nth-of-type(8n+3) {
  background:@base;
  border-top:5px solid darken(@base,10);
  
  a, a:link, a:visited {
    color:@base;
  }
  a:hover, a:active {
    color:darken(@base,10);
  }
  a.button {
    background:@base;
    

    &:hover{
      background:darken(@base,10);
    }
  } 
}

.project:nth-of-type(8n+3):hover > .title, .project:nth-of-type(8n+3).selected > .title {
  background:darken(@base,20);
}

.project:nth-of-type(8n+4) {
  background:@lighten1;
  border-top:5px solid darken(@lighten1,10);
  
  a, a:link, a:visited {
    color:@lighten1;
  }
  a:hover, a:active {
    color:darken(@lighten1,10);
  }
  a.button {
    background:@lighten1;
    

    &:hover{
      background:darken(@lighten1,10);
    }
  } 
}

.project:nth-of-type(8n+4):hover > .title, .project:nth-of-type(8n+4).selected > .title {
  background:darken(@lighten1,20);
}

.project:nth-of-type(8n+5) {
  background:@lighten2;
  border-top:5px solid darken(@lighten2,10);
  
  a, a:link, a:visited {
    color:@lighten2;
  }
  a:hover, a:active {
    color:darken(@lighten2,10);
  }
  a.button {
    background:@lighten2;
    

    &:hover{
      background:darken(@lighten2,10);
    }
  } 
}

.project:nth-of-type(8n+5):hover > .title, .project:nth-of-type(8n+5).selected > .title {
  background:darken(@lighten2,20);
}

.project:nth-of-type(8n+6) {
  background:@lighten3;
  border-top:5px solid darken(@lighten3,10);
  
  a, a:link, a:visited {
    color:@lighten3;
  }
  a:hover, a:active {
    color:darken(@lighten3,10);
  }
  a.button {
    background:@lighten3;
    

    &:hover{
      background:darken(@lighten3,10);
    }
  } 
}

.project:nth-of-type(8n+6):hover > .title, .project:nth-of-type(8n+6).selected > .title {
  background:darken(@lighten3,20);
}

.project:nth-of-type(8n+7) {
  background:@complement3;
  border-top:5px solid darken(@complement3,10);
  
  a, a:link, a:visited {
    color:@complement3;
  }
  a:hover, a:active {
    color:darken(@complement3,10);
  }
  a.button {
    background:@complement3;
    

    &:hover{
      background:darken(@complement3,10);
    }
  } 
}

.project:nth-of-type(8n+7):hover > .title, .project:nth-of-type(8n+7).selected > .title {
  background:darken(@complement3,20);
}

.project:nth-of-type(8n+8) {
  background:@complement4;
  border-top:5px solid darken(@complement4,10);
  
  a, a:link, a:visited {
    color:@complement4;
  }
  a:hover, a:active {
    color:darken(@complement4,10);
  }
  a.button {
    background:@complement4;
    

    &:hover{
      background:darken(@complement4,10);
    }
  } 
}

.project:nth-of-type(8n+8):hover > .title, .project:nth-of-type(8n+8).selected > .title {
  background:darken(@complement4,20);
}


.left {
  display:block;
  width:49%;
  margin-left:0;
  margin-right: 1%;
  float:left;
}

.right {
  display:block;
  width:49%;
  margin-left: 1%;
  margin-right:0;
  float:left;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

@media screen and (max-width:580px){
  .content {
    width:95%;
    margin-top:30px;
    padding: 10px;
  }
  
  h1 {
    margin:5px auto;
    text-align:center;
    display:block;
    float:none;
  }
  
  h2 {
    font-size:18px;
  }
  .social {
    margin:5px auto;
    float:none;
  }
  
  .title {
    margin:20px 0;
  }
  
  .close {
    right:0px;
    top:145px;
  }
  
  .project {
   width:100%;
   border-top:none !important;
   height:auto;
 }
 .deselected {
   height:0;
   min-height:0;
 }

 .left, .right {
  width:100%;
  float:none;
  margin:10px 0;
 }

}

styles

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />