interactive resume

index.html

<header>
  <a href="http://codepen.io/mikemang/#hireme" id="logo">
    <h1 class="animated slideInLeft">michael mangialardi</h1>
  </a>
  <nav>
    <ul class="animated slideInRight">
      <li><a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/mike_mangialardi_resume.pdf" download>resume</a></li>
      <li><a href="http://codepen.io/mikemang/#hireme">hire</a></li>
    </ul>
  </nav>
</header>

<div id="layout">

<div id="ai"> <img id="aiimg" class="animated fadeInLeft" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/3-layers.png"> </div>

<div id="computer"> <img id="computerimg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/computer.png">  </div>

<div id="screen"> <img id="screenimg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/screen.png"> </div>


<div id="base"> <img id="baseimg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/base.png"> </img> </div>


<div id="bucket"> <img id="bucketimg" class="animated fadeInUp" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/bucket.png"> </div>

<div id="pencil"> <img id="pencilimg" class="animated fadeInRight" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/pencil.png"> </div>

<div id="ruler"> <img id="rulerimg" class="animated fadeInRight" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/ruler.png"> </div>

<div id="codebox">
<a href="http://codepen.io/mikemang/live/YGkjAL"><img id="codeboximg" class="animated fadeInDown"src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/codebox.png"> </a> </div>

<div id="pipe">
  <a href="http://codepen.io/mikemang/live/dpVvNz">
 <img id="pipeimg" class="animated fadeInDown" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/pipe_copy.png"> </a> </div>


<div id="sticky">
<a href="  http://codepen.io/mikemang/live/wzdykm"> 
  <img id="stickyimg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/sticky.png"> </a> </div>

<div id="clock">
<img id="clockimg" class="animated rotateInDownLeft" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/clock.png"> </div>

<div id="phone">
<a href="http://codepen.io/mikemang/live/QKpBER"> <img id="phoneimg" class="animated infinite tada" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/phone.png"></a> </div>



<div id="calc">
 <a href="http://codepen.io/mikemang/live/xEdYyb"> 
<img id="calcimg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/calc.png"> </a>                                 </div> 

</div>

<div id="desk">
<img id="deskimg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/desk.png">
</div>

interactive-resume.markdown

interactive resume

interactive resume for applications

A Pen by Mike Mangialardi on CodePen.

License.

script.js

var pen = document.getElementById("pencilimg");

$(document).ready(function(){
    $(pen).click(function(){
        $(pen).addClass("animated rollIn");
    });
});

var pipe = document.getElementById("pipeimg");

$(document).ready(function(){
    $(pipe).click(function(){
        $(pipe).addClass("animated rollIn");
    });
});

var bucket = document.getElementById("bucketimg");

$(document).ready(function(){
    $(bucket).click(function(){
        $(bucket).addClass("animated rollIn");
    });
});

style.css

/**********************************
GENERAL
***********************************/
#layout{
  
  max-width: 940px;
  margin: auto;
  padding: 0 15%;
  display: block;
  position: relative;
  
}

body {
  font-family: 'Lato', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;

}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}

/**********************************
HEADING
***********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Lato', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

#aiimg{
  
  width: 160px;
  height: 160px;
  position: absolute;
  top: 335px;
  left: 345px;
  z-index: 3; /* integer */
}

#computerimg{
  
  width: 650px;
  height: 460px;
  z-index: 3; /* integer */
  position: absolute;
  top: 100px;
  left: 300px;

}

#baseimg{
  
  width: 250px;
  height: 100px;
  position: absolute;
  top: 560px;
  left: 500px;
  z-index: 3; /* integer */
}



#screenimg{
  
  width: 650px;
  height: 300px;
  position: absolute;
  top: 260px;
  left: 300px;
  z-index: 2; /* integer */
}


#bucketimg{
  
  width: 190px;
  height: 190px;
  position: absolute;
  top: 361px;
  left: 550px;
  z-index: 3; /* integer */
}


#pencilimg{
  
  width: 50px;
  height: 205px;
  position: absolute;
  top: 346px;
  left: 830px;
  z-index: 3; /* integer */
}

#rulerimg{
  
  width: 300px;
  height: 44px;
  position: absolute;
  top: 270px;
  left: 630px;
  z-index: 3; /* integer */
}

#codeboximg{
  
  width: 225px;
  height: 175px;
  position: absolute;
  top: 126px;
  left: 371px;
  z-index: 3; /* integer */
}

#pipeimg{
  
  width: 130px;
  height: 135px;
  position: absolute;
  top: 109px;
  left: 730px;
  z-index: 3; /* integer */
}

#stickyimg{
  
  width: 130px;
  height: 135px;
  position: absolute;
  top: 569px;
  left: 60px;
  z-index: 3; /* integer */
}

#clockimg{
  
  width: 120px;
  height: 115px;
  position: absolute;
  top: 639px;
  left: 300px;
  z-index: 3; /* integer */
}

#phoneimg{
  
  width: 110px;
  height: 115px;
  position: absolute;
  top: 655px;
  left: 810px;
  z-index: 3; /* integer */

}

#calcimg{
  
  width: 110px;
  height: 140px;
  position: absolute;
  top: 590px;
  left: 1050px;
  z-index: 3; /* integer */
  
}

#deskimg{
  
  width: 100%;
  height: 390px;
  position: absolute;
  top: 509px;
  left: 0px;
   z-index: 1; /* integer */
}



/**********************************
NAVIGATION
***********************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}




/**********************************
COLORS
***********************************/

/* site body */
body {
background-color: #B5E4F6;
  color: #999;
}

/* header */
header {
  background: #B5E4F6;
}

/* nav background on mobile */
nav {
  background: #B5E4F6;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  
}


/**********************************
MEDIA QUERIES
***********************************/

@media screen and (min-width: 480px) {
  
  /**********************************
  TWO COLUMN LAYOUT
  ***********************************/
  
  #primary {
    width: 50%;
    float: left;
  }
  
  #secondary {
    width: 40%;
    float: right;
  }
  

  
  /**********************************
  PAGE: PORTFOLIO
  ***********************************/
  
  #gallery li {
    width: 28.3333%;
  }
  
  #gallery li:nth-child(4n) {
    clear: left;
  }
  
@media screen and (min-width: 660px) {

  /**********************************
  HEADER
  ***********************************/

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }
  
  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
  }
  
  h1 {
    font-size: 2em;
  }
  
  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }
  
  header {
 
    margin-bottom: 60px;
  }

  
}