A CodePen by ryan2611.

index.html

<div id="content">
<img class="avatar" src="http://i.imgur.com/r0mcJ.jpg alt="Ryan Murphy" width="70px" height="70px">
  <h1>
    RYAN MURPHY</h1>
  <h2> UI DESIGNER</h2>
  
  <ul id="work">DIVISIONS OF WORK
    <li><a href="http://dribbble.com/ryanAmurphy/projects/93876-UI-Stuff">USER INTERFACE</a></li>
    <li><a href="http://dribbble.com/ryanAmurphy/projects/93875-Typography">TYPOGRAPHY</a></li>
    <li><a href="http://dribbble.com/ryanAmurphy/projects/93877-CSS-stuff">CSS</a></li>
   
  </ul>  
  
    <ul class="contact">CONTACT ME
    <li><a class="email" href="mailto:ryan_murphy2611@hotmail.com">EMAIL</a></li>
      <li><a class="twitter" href="https://twitter.com/ryanAmurphy">TWITTER</a></li>
    <li><a  class="skype" href="skype:add?ryan_murphy2611">SKYPE</a></li>
      <li><a class="dribbble" href="http://dribbble.com/ryanAmurphy">DRIBBBLE</a></li>
  </ul> 
 
</div>

<div id="port">
<ul id="gallery">
<img class="images" src="http://dribbble.s3.amazonaws.com/users/144245/screenshots/728688/screen_shot_2012-09-13_at_20.21.45.png" width="200" height="150">
  
  <img class="images" src="http://dribbble.s3.amazonaws.com/users/144245/screenshots/705745/dribbles.jpg"
  width="200" height="150">
  
  <img class="images" src="http://dribbble.s3.amazonaws.com/users/144245/screenshots/704839/knobonknob.jpg"
  width="200" height="150">
  
  <img class="images" src="http://dribbble.s3.amazonaws.com/users/144245/screenshots/704309/bubble.jpg"
  width="200" height="150">
  
  <img class="images" src="http://dribbble.s3.amazonaws.com/users/144245/screenshots/696755/dribbble_rp.jpg"
  width="200" height="150">
  
  <img class="images" src="http://dribbble.s3.amazonaws.com/users/144245/screenshots/691052/greencube.jpg"
  width="200" height="150">
  
  <img class="images" src="http://dribbble.s3.amazonaws.com/users/144245/screenshots/671702/screen_shot_2012-08-02_at_11.12.38.png"
  width="200" height="150">
  
  <img class="images" src="http://dribbble.s3.amazonaws.com/users/144245/screenshots/663806/screen_shot_2012-07-27_at_10.34.47.png"
  width="200" height="150">
  
  <img class="images" src="http://dribbble.s3.amazonaws.com/users/144245/screenshots/663805/screen_shot_2012-07-27_at_10.35.52.png"
  width="200" height="150">
  
  <img class="images" src="http://dribbble.s3.amazonaws.com/users/144245/screenshots/655428/screen_shot_2012-07-20_at_21.55.29.png"
  width="200" height="150">
  
  <img class="images" src="http://dribbble.s3.amazonaws.com/users/144245/screenshots/655317/screen_shot_2012-07-20_at_20.42.29.png"
  width="200" height="150">
  
  <img class="images" src="http://dribbble.s3.amazonaws.com/users/144245/screenshots/639831/screw.jpg"
  width="200" height="150">
  

  
  
  </ul>
</div>

style.css

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



* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
  font-family: 'Open Sans', sans-serif;  
background-color: #fff;

}

#mainnav{
 float:right;
  margin: 0;
}

#content{
  position: fixed;
 margin: 100px  auto;
  width: 50%;
  padding: 40px;
  float:left;
  height: 400px;
}

h1{
  font-weight: 100;
  color: rgba(0,0,0,.4);
  font-size: 2em;
  -webkit-transition: color, font-size .5s;
-moz-transition: color, font-size .5s;
transition: color, font-size .5s;
}

h1:hover{
  color: rgba(0,0,0,1);
  font-size: 2.2em;
}
h2{
  margin-top: -25px;
  font-weight: 100;
  color: rgba(0,0,0,.7);
  font-size: 1em;
  -webkit-transition: color, font-size .5s;
-moz-transition: color, font-size .5s;
transition: color, font-size .5s;
}


li{
  width: 102px;
  font-weight: 100;
  list-style-type: none;
  float:left;
  margin-top: 10px;
  padding-top: 20px;
  padding-right: 20px;
  color: rgba(0,0,0,.4);
  font-size: 1em;
  -webkit-transition: color, font-size .5s;
-moz-transition: color, font-size .5s;
transition: color, font-size .5s;
}

li:hover{
    text-shadow: 0 0 10px rgba(0,0,0,.2);
  list-style-type: circle;
  color: rgba(0,0,0,1);
  font-size: 1.5em;
  
}

a{
  color: inherit;
  text-decoration:none;
}

ul{
  text-decoration:underline;
  float: left;
  margin-bottom: 20px;
  margin-right: 40px;
 color: rgba(238,110,76,1);
  padding: 10px;
  width: 220px;
}

.dribbble:hover{
 color: #ea4c89;
}

.skype:hover{
 color: #12A5F4;
}

.twitter:hover{
 color: #4099FF;
}

.email:hover{
 color: #ea9323;
}


.avatar{
  opacity: .6;
  float:left;
  margin-top: 20px;
  margin-right: 10px;
  border-radius: 3em;
  box-shadow: 
    0 0 0 3px rgba(238,110,76,1);
}

.avatar:hover{
  -webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
transition: opacity .5s;
  opacity:1;
}

p{
  color: rgba(255,255,255,.5);
  font-weight: 100;
  
}


#port{
  float:right;
  box-shadow: 
    inset 2em 0 3em rgba(172,49,16,.7);
  border-left: .1em solid rgba(255,255,255,.8);
 margin-top: -10px;
  background-color: #EE6E4C;
  width: 50%;
  height: 100%;
  
}

#welcometomycode:hover{
  color: #ddbeb1;
}

.images{
border: .3em solid rgba(255,255,255,1);
  margin: 12px 44px;
   float:left;
  border-radius: .3em;
  float:left;
  -webkit-transition: -webkit-transform .3s; 
   -moz-transition: -moz-transform .3s; 
   -o-transition: -o-transform .3s; 
    transition: transform .3s; 
}

 .images:hover{
  border: .3em solid rgba(255,255,255,1);
   -moz-transform: scale(1.5);
   -webkit-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
  box-shadow:
    0 0 2em rgba(0,0,0,.2);
}

#gallery{
  padding: 40px;
  width: 100%;
}