A CodePen by Xanmia. Website mockup - Really simple personal website mock up using the twitter bootstap css, jquery and jquery UI.

index.html

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner"> 
        <div class="container"> 
          <a class="brand" href="#">Holy Crap My Name Is Long</a>
        </div> 
      </div> 
</div> 
<div class="container"> 
           <div class="row">
             <div class="block a-block span12"><h1>Twitter</h1><div class="text-center lead" id="twitter"></div><p class="text-right"><button type="button" onclick="http://www.twitter.com/Xanmia" class="btn btn-primary btn-large">Follow Me</button></p></div>
             
              <div class="block b-block span12"><h1>A Really Crappy Ship Game</h1><h4>A Browser 2D Side Scroller</h4><p>Fully written in Javascript using the createjs library.  Endless waves of enemies, non stop levels of action. Don't get hit too many times or face the rath of my crappiness. How long can you live through this terribly crappy game? Better yet, do you really want to play this crappy game?</p><img src=http://baconmockup.com/1000/300></img><p class="text-right"><button type="button" class="btn btn-primary btn-large">Suggestions</button> <button type="button" class="btn btn-primary btn-large">Code</button> <button type="button" class="btn btn-primary btn-large">Go Play</button></p></div>
                

             <div class="block c-block span6"><h1>Contact</h1><p class="lead">Email: [email protected]<Br>twitter: @Xanmia </p></div> 
              
              <div class="block d-block span6"><h1>Code!</h1><p class="lead">github: <a href="http://github.com/Xanmia">github.com/Xanmia</a><br>codepen:<a href="http://codepen.io/Xanmia">codepen.io/Xanmia</a></p></div>
           
                <div class="block e-block span12"><div class="span5"><h1>Interplanetary Domination</h1><h4>A Browser 2D Side Scroller</h4><p>Fully written in Javascript using the createjs library.  Endless waves of enemies, non stop levels of action. Don't get hit too many times or face the rath of my crappiness. How long can you live through this terribly crappy game? Better yet, do you really want to play this crappy game?</p><p><button type="button" class="btn btn-primary btn-large">Suggestions</button> <button type="button" class="btn btn-primary btn-large">Code</button> <button type="button" class="btn btn-primary btn-large">Go Play</button></p></div><div class="span6 offset-1"><img class="rounding" src=http://baconmockup.com/600/450></img></div></div>
                
                
                  <div class="block f-block span12"><h1>Tennis Scoring</h1><h4>In many diferrent languages</h4>
                   <img class="offset-2"src=http://baconmockup.com/910/200></img><p>Follow me as I attempt to write the tennis kata in as many different programming languages possible. Stress, frustration, and fun rolled all up into one really simple class object...</p><p class="text-right"><button type="button" class="btn btn-primary btn-large">Code</button></p></div>
     
              <div class="block e-block span12">12</div>
   
                  </div>
                </div>

script.js

  $.getJSON("https://api.twitter.com/1/statuses/user_timeline/xanmia.json?count=2&include_rts=1&callback=?", function(data) {
     $("#twitter").html('"<em> ' + data[0].text +' </em>"');
});

$(document).ready(function() {
  $( ".block" ).hide(); 
  $( ".a-block" ).show( "drop",{"direction" : "right"}, 700,
                      function () { $( ".c-block" ).show( "drop",{"direction" : "left"}, 1000,
                                                           function () {  $( ".e-block" ).show( "drop",{"direction" : "right"}, 800)}
                       ) } 
                    
   );
  
  $( ".b-block" ).show( "drop",{"direction" : "left"}, 900, 
                       function () {  $( ".d-block" ).show( "drop",{"direction" : "right"}, 750,
                                                           function () {  $( ".f-block" ).show( "drop",{"direction" : "left"}, 600)}
                       ) } 
                      
   );
    $( ".g-block" ).show( "slide",{"direction" : "left"}, 900)
});

style.css

</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<style> 

.block{
  text-align: left; 
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
min-height: 10px;
line-height: 20px;
margin-bottom: 10px; 
} 
h1{ 
  padding-left: 30px;
}
h4{
  padding-left: 30px;
}
h5{
  padding-left: 30px;
}
p{
  padding-top:10px;
  padding-bottom:0px;
  padding-left:30px;
  padding-right:10px;
}

.rounding{
  -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
}

.offset-1{
  margin-left: 80px; 
}

.offset-2{
  margin-left: 30px; 
}

#twitter{
  min-height:60px;
  padding-left:150px;
  padding-right:150px;
}

.f-block{
background-color: #C2BB8E;
}
.g-block{
background-color: #877D7D;
}
.a-block{
background-color: #9E0056;
}
.b-block{
background-color: #AA31BF;

}
.c-block{
background-color: #D0DE63;
}
.d-block{
background-color: #747E2B;
}
.e-block{
background-color: #77B600;
}

body{
  background-color: #3A0044;
  padding-top: 60px;
}