<!DOCTYPE html>

<head>

<title>Peter Whelpley</title>

<meta charset="utf-8" />

<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed|Oswald' rel='stylesheet' type='text/css'>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>

    //BACKGROUND SHIFT JQUERY

    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();

        if(scrollTop >= 150){
            $('#background').addClass('shift');
        }

        else
        {
            $('#background').removeClass('shift');
        }
    });

    //END BACKGROUND SHIFT JQUERY

    //----------------------------

    //SIDEBAR STATUS SHIFT

    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();

        if(scrollTop >= 150){
            $('.homebutton').addClass('buttonshift');
        }

        else
        {
            $('.homebutton').removeClass('buttonshift');
        }

        if(scrollTop >= 150 && scrollTop <= 1250){
            $('.biobutton').addClass('buttonshift');
        }

        else
        {
            $('.biobutton').removeClass('buttonshift');
        }

        if(scrollTop >= 1250 && scrollTop <= 2500){
            $('.projectsbutton').addClass('buttonshift');
        }

        else
        {
            $('.projectsbutton').removeClass('buttonshift');
        }

        if(scrollTop >= 2500 && scrollTop <= 3800){
            $('.contactbutton').addClass('buttonshift');
        }

        else
        {
            $('.contactbutton').removeClass('buttonshift');
        }
    });

    //----------------------------

    //END SIDEBAR STATUS SHIFT

    //SIDEBAR SMOOTH SCROLL TO DIV

    jQuery(document).ready(function() {

    jQuery('.homebutton').click(function(event) {
        event.preventDefault();

        jQuery('html, body').animate({scrollTop: 0}, 500);
        return false;
    })

    });

    jQuery(document).ready(function() {

    jQuery('.projectsbutton').click(function(event) {
        event.preventDefault();

        var projOffset = $("#projects").offset().top;

        jQuery('html, body').animate({scrollTop: projOffset - 50}, 500);
        return false;
    })

    });

    jQuery(document).ready(function() {

    jQuery('.biobutton').click(function(event) {
        event.preventDefault();

        var bioOffset = $("#bio").offset().top;

        jQuery('html, body').animate({scrollTop: bioOffset - 100}, 500);
        return false;
    })

    });

    jQuery(document).ready(function() {

    jQuery('.contactbutton').click(function(event) {
        event.preventDefault();

        var conOffset = $("#contact").offset().top;

        jQuery('html, body').animate({scrollTop: conOffset - 200}, 500);
        return false;
    })

    });

    //BEGIN PROJECTS SCRIPT//


    //BEGIN SCHOOLWORK

    jQuery(document).ready(function() {

    $('.school').css('background', 'url(images/splash1.png)');

    $('#header1').hide();

    var count = 0;

    jQuery('.school').click(function(event) {
        event.preventDefault();

        $('#header1').show('slow');

        if(count == 0)
        {
            $('.school').css('background', 'url(images/projects/design1.png)');
            count++;
        }

        else if (count == 1)
        {
            ++count;
            $('.school').css('background', 'url(images/projects/design2.png)');

        }

        else if (count == 2)
        {
            ++count;
            $('.school').css('background', 'url(images/projects/design3.png)');
        }

        else if (count == 3)
        {
            ++count;
            $('.school').css('background', 'url(images/projects/design4.png)');
        }

        else if (count == 4)
        {
            ++count;
            $('.school').css('background', 'url(images/projects/type1.png)');
        }

        else if (count == 5)
        {
            ++count;
            $('.school').css('background', 'url(images/projects/type2.png)');
        }

        else if (count == 6)
        {
            ++count;
            $('.school').css('background', 'url(images/projects/type3.png)');
        }

        else
        {
            $('.school').css('background', 'url(images/projects/type4.png');
            count = 0;
        }

    })

    });

    //END SCHOOLWORK

    //BEGIN INTERNSHIP

        jQuery(document).ready(function() {

    $('.internship').css('background', 'url(images/splash2.png)');

    $('#header2').hide();

    var count = 0;

    jQuery('.internship').click(function(event) {
        event.preventDefault();

        $('#header2').show('slow');

        if(count == 0)
        {
            $('.internship').css('background', 'url(images/internship/mcd1.png)');
            count++;
        }

        else if (count == 1)
        {
            ++count;
            $('.internship').css('background', 'url(images/internship/mcd2.png)');

        }

        else if (count == 2)
        {
            ++count;
            $('.internship').css('background', 'url(images/internship/mcd3.png)');
        }

        else if (count == 3)
        {
            ++count;
            $('.internship').css('background', 'url(images/internship/uwm1.png)');
        }

        else if (count == 4)
        {
            ++count;
            $('.internship').css('background', 'url(images/internship/uwm2.png)');
        }

        else
        {

            $('.internship').css('background', 'url(images/internship/uwm3.png)');
            count=0;
        }


    })

    });

</script>

<link rel="stylesheet" href="style/style.css">

</head>

<body>

    <img id="background" src="images/background-blue.jpg" />

    <div id="nav">

            <a class="homebutton" href="#"><span>home</span></a>
            <a class="biobutton" href="#"><span>bio</span></a>
            <a class="projectsbutton" href="#"><span>home</span></a>
            <a class="contactbutton" href="#"><span>content</span></a>
    </div>

    <!-- START BIO -->

    <div id="bio">

        <div id="bioimage">

            <span>Peter Whelpley</span>

        </div>

        <div id="biocontent">

            <h1 id="header">About Me</h1>

            <p>&nbsp&nbsp&nbsp&nbspCurrently attending the University of Wisconsin - Milwaukee for Design & Visual Communication with a minor in Computer Science. In the past I have worked on Application UI & UX design, as well as marketing, presentation and web design for Tali Payments. Beyond web design my interests include sculpture.  Wood and plaster are my favorite mediums to work in, and to push myself I try to work in a larger scale for my work.  Pushing myself to make work, whether it's sculpture or design, is more important than focusing on the end goal. To me, a succesful artist is one who always makes, not one who ends up in a gallery setting.</p>

            <p>&nbsp&nbsp&nbsp&nbsp My previous work experience includes developing a web page for Tali Payments, designing Application UI's using Illustrator, Photoshop, and AfterAffects (for the more convincing mock-ups).  At my previous job the expectations of me were to design an easy to use, clean, and modern application that could be easily translated to code since the team was so small.  If I wasn't working on UI design, I was doing advertisements and marketing design for the business students that were interning with the company.  I also helped my boss design presentation pitch-decks that were presented to prospective investors, such as McDonalds, Burger King, UWM, and others.</p>


        </div>

    </div>

    <!-- START PROJECTS -->

    <div id="projects">

        <h1 id="header1">Schoolwork</h1>

        <h1 id="header2">Internships</h1>

        <a class="school"><span>school</span></a>

        <a class="internship"><span>internship</span></a>

        <div id="web">

        <p>Working example of web developement work can be found at <a href="http://www.talipayments.com" target="blank">Tali Payments</a>.</p>

        </div>

    </div>

    <div id="contact">

        <div id="behancecontainer">

            <a id="behance" href="http://behance.com/peterwhelpley" target=blank><span>Behance</span></a>

            <p>http://www.behance.com/peterwhelpley</p>

        </div>

        <div id="emailcontainer">

            <a id="email"><span>Email</span></a>

            <p>whelpley@uwm.edu</p>

        </div>


    </div>


</body>