Minimal PullJosh

A clean, minimalist homepage that I may or may not use.

HTML

<img src="http://i1172.photobucket.com/albums/r574/JoshPullen27/scratch_icon_zps38956a47.png" id="logo"/>
<h1 id="name">PullJosh</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo voluptas quisquam nesciunt perferendis provident iste magni harum aliquid quis consequatur eveniet veniam! Molestiae delectus placeat hic cum nesciunt aliquam tempora sequi similique quas itaque deserunt mollitia nam quia natus quibusdam aut magni quasi! Enim tenetur molestias voluptatem quidem voluptatum ut sapiente impedit excepturi officia reprehenderit dignissimos numquam dolores distinctio molestiae corporis praesentium minima! Ex iure minima accusantium molestiae optio nulla ipsa consequatur consectetur dolorum soluta provident placeat asperiores voluptatum aut magnam ipsam culpa quis eius qui sit consequuntur! Repellendus aliquid earum ea officiis consequatur ab similique error! Quam expedita architecto eius reiciendis at ut non velit nihil quisquam saepe ipsa corporis adipisci dolores consequuntur molestiae repellat ullam nisi laudantium ipsam voluptatum consequatur culpa amet hic suscipit unde commodi necessitatibus doloribus modi dolorem reprehenderit! Similique voluptas placeat neque veniam cum deserunt reiciendis animi nesciunt dolor magnam iure perspiciatis eius numquam mollitia quidem voluptatem ad voluptate cumque deleniti iusto velit ullam quos id nostrum facere inventore non error maiores qui vero eveniet aliquid esse dolorum! Nihil quam recusandae dolor provident in delectus velit facilis accusamus iure debitis voluptas est dignissimos rerum maiores ullam a obcaecati non reprehenderit illo soluta eaque odio quibusdam perferendis assumenda explicabo aut officiis animi mollitia tempora id. Fugit iure aliquid quod repellat incidunt voluptates delectus quisquam laboriosam sed nihil nulla perspiciatis. Ab architecto provident expedita maiores quam nisi beatae aut necessitatibus debitis praesentium repellat repellendus ex fuga modi facere sunt voluptas...

CSS

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

* {
    font-family:'Open Sans';
}
img {
    position:absolute;
    top:50%;
    left:50%;
    border-radius:50%;
    margin-left:-45px;
    margin-top:-45px;
}
h1 {
    text-align:center;
    font-weight:300;
}
body {
    margin-left:100px;
    margin-right:100px;
}

JavaScript

$(window).resize(function () {
    $("body").css("margin-top", String($(window).height()/2 + $("#logo").width()/2) + "px");
    $("#name").css("margin-bottom", String($(window).height()/2) + "px");
});
$("body").css("margin-top", String($(window).height()/2 + $("#logo").width()/2) + "px");
$("#name").css("margin-bottom", String($(window).height()/2) + "px");


$(document).ready(function() {
    $('#logo')
    .css({"opacity":0, "margin-top":"-60px"})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .animate({"opacity":1, "margin-top":"-45px"}, 500);  // Fade it back in. Swap css for animate in legacy browsers if required.
});
$(document).ready(function() {
    $('#name')
    .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .animate({"opacity":1}, 500)
});