Redesign

index.html

<div class="page">
<header>
        <img src="http://bennettfeely.com/me.jpg" width="200px" height="200px" />
        <h1>Bennett Feely</h1>
        <h3>I make websites so you don't have to.</h3>
    </header>
    
    <section>
        <article class="gallery site">
            <h2><a href="http://bennettfeely.com/flexplorer">Placeplace</a></h2>
            <h3><span class="filter">Gallery</span><time>June 2013</time></h3>
        </article>
        <article class="demo">
            <h2><a href="http://codepen.io/bennettfeely/pen/LKjmA">Toggles</a></h2>
            <h3><span class="filter">Demo</span><time>April 2013</time></h3>
        </article>
        <article class="site">
            <h2><a href="http://bennettfeely.com/csscreatures">CSS Creatures</a></h2>
            <h3><span class="filter">Gallery</span><time>March 2013</time></h3>
        </article>
        <article class="gallery site demo">
            <h2><a href="http://bennettfeely.com/filters-gallery/">Filters Gallery</a></h2>
            <h3><span class="filter">Gallery</span><time>February 2013</time></h3>
        </article>
        <article class="tool site demo">
            <h2><a href="http://bennettfeely.com/filters/">Filters Playground</a></h2>
            <h3><span class="filter">Tool</span><time>February 2013</time></h3>
        </article>
        <article class="demo">
            <h2><a href="http://codepen.io/bennettfeely/pen/esrtc">Type Snowflakes</a></h2>
            <h3><span class="filter">Demo</span><time>December 2012</time></h3>
        </article>
        <article class="demo">
            <h2><a href="http://codepen.io/bennettfeely/full/unqEB">Mega Shadow Text</a></h2>
            <h3><span class="filter">Demo</span><time>December 2012</time></h3>
        </article>
        <article class="site">
            <h2><a href="http://bennettfeely.com/flexplorer">The CSS Quiz</a></h2>
            <h3><span class="filter">Site</span><time>November 2012</time></h3>
        </article>
        <article class="site tool">
            <h2><a href="http://bennettfeely/define">Define</a></h2>
            <h3><span class="filter">Tool</span><time>October 2012</time></h3>
        </article>
        <article class="demo">
            <h2><a href="http://codepen.io/bennettfeely/pen/nrbiK">Blurry Passwords</a></h2>
            <h3><span class="filter">Demo</span><time>July 2012</time></h3>
        </article>
        <article class="demo">
            <h2><a href="http://codepen.io/bennettfeely/details/tKDAp">Sticky Notes</a></h2>
            <h3><span class="filter">Site</span><time>January 2012</time></h3>
        </article>
        <article class="site">
            <h2><a href="http://bennettfeely.com/labs/hoagieopen/">Hoagie Open</a></h2>
            <h3><span class="filter">Site</span><time>September 2011</time></h3>
        </article>
    </section>
    
    <footer><a href="http://twitter.com/bennettfeely"><span><i>t</i>@bennettfeely</span></a><a href="http://codepen.io/bennettfeely/"><span><i>c</i><span class="collapse">Codepen</span></span></a><a href="http://dribbble.com/bennettfeely"><span><i>d</i><span class="collapse">Dribbble</span></span></i></a><a href="https://plus.google.com/102233754358513450834/posts"><span><i>g</i><span class="collapse">Google+</span></span></a></footer>
</div>

Redesign.markdown

Redesign

Finally got around to redesigning my website.

A Pen by Bennett Feely on CodePen.

License.

script.js

var $section = $("section");
var projects = $("article").length;
var pallete = Math.floor(Math.random() * 210);

$("article").each(function(i) {
    var hue = pallete + (i * 15);
    var css = 'animation-delay:' + ((i + 4) / 5) + 's;';
    $(this).attr("style", css);
});

$("section h2").each(function(i) {
    var hue = pallete + (i * 15);
    var css = 'background:hsl(' + hue + ',85%,70%); color:hsl(' + hue + ',45%,55%);';
    $(this).attr("style", css);
});

$(function() {
    $(window).load(function() {

        $("html").addClass("go");

        $(".filter").click(function() {
            var filter = $(this).text();

            $(".filter").removeClass("active-filter");

            $(".filter:contains(" + filter + ")").addClass("active-filter");

            if ($section.hasClass("filter-" + filter)) {
                console.log("match!");
                $(".filter").removeClass("active-filter");
                $section.removeClass();
            }
            else {
                $section.removeClass().addClass("filtering filter-" + filter);
            }
        });
    });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

/* Fonts ====================================== */
    @font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 200; src: local('Source Code Pro ExtraLight'), local('SourceCodePro-ExtraLight'), url(http://themes.googleusercontent.com/static/fonts/sourcecodepro/v3/leqv3v-yTsJNC7nFznSMqca9awK0IKUjIWABZIchFI8.woff) format('woff'); }
    @font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 300; src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcecodepro/v3/leqv3v-yTsJNC7nFznSMqdbE_oMaV8t2eFeISPpzbdE.woff) format('woff'); }
    @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/M2Jd71oPJhLKp0zdtTvoMzNrcjQuD0pTu1za2FULaMs.woff) format('woff'); }
    @font-face { font-family: "icon"; src: url('http://bennettfeely.com/fonts/icons.woff'); }

/* Reset ====================================== */
    * { box-sizing:border-box; margin:0; padding:0; vertical-align:baseline; }


/* Base ======================================= */
    html { font-size:150%; }
        
    body {
        font:300 100% "Source Code Pro", monospace;
        background:whitesmoke;
        -webkit-overflow-scrolling:touch;
        user-select:none; /* Not sure if this is a great idea... */
    }

    h1, h2 {
        font-size:1.1rem;
        text-transform:uppercase;
    }

    a {
        text-decoration:none;
        color:black;
        -ms-touch-action:none!important;
     }


    section { opacity:0; }
    .go section { opacity:1; }


/* Header ===================================== */
    header {
        padding:1rem;
        opacity:0;
    }
    
    .go header {
        opacity:1;
        animation:header-slide-up .6s backwards; 
    }
        @keyframes header-slide-up {
            from { transform:translate3d(0,50%,0); opacity:0; }
        }

    header:after { display:block; clear:both; content:""; } /* Clearfix */

    h1 {
        font-weight:300;
        color:#444;
        text-align:center;
        line-height:3rem;
        text-align:left;
    }
        h1:active { color:black; }
    
    img {
        float:left;
        width:3rem;
        height:3rem;
        border-radius:50%;
        margin-right:1rem;
    }

article { position:relative; transition:.4s; }

.filtering article {
    -webkit-filter:saturate(0);
    transform:translate3d(0,5px,0);
}

.filter-demo .demo,
.filter-gallery .gallery,
.filter-tool .tool,
.filter-site .site {
    -webkit-filter:none;
    transform:translate3d(0,0,0);
}

h2 {
    display:inline-block;
    font-weight:300;
    margin-left:-5px;
    box-shadow: -1px 1px, -2px 2px, -3px 3px, -4px 4px, -5px 5px, -6px 6px, -7px 7px, -8px 8px, -9px 9px, -10px 10px;   
    transition:.4s;
}

h2:hover {
    transform:translate3d(5px,-5px,0);
    transition:.15s;
}
h2:active {
    transition:0;
    transform:translate3d(-5px,5px,0);
    -webkit-filter:brightness(.7);
}

article:hover + article {
    z-index:0;
}

h2 a {
    display:block;
    padding:1rem 1rem 1rem 1.3125rem;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

article {
    white-space:nowrap;
    animation:slide-in .5s backwards;
}
.go article {
}
    @keyframes slide-in { from { transform:translate3d(-100%,0,0); } }


footer {
    margin-top:1.5rem;
    background:linear-gradient(0deg,#222,#1a1a1a) #222 repeat-x;
    background-position:center top;
    background-size:100% 1rem;
    background:#333;
    color:#111;
    text-align:left;
    padding:.5rem 0;
}

footer a {
    display:block;
    transition:.3s;
    font:italic 1rem/1 "Source Sans Pro";
    padding:.75rem 1rem;
    transform-origin:center bottom;
    color:#222;
}
    
footer a:hover { background:#1a1a1a; }

footer a span { color:gray; }


footer i {
    display:inline-block;
    font:normal 1.5rem/1.5rem "icon";
    vertical-align:middle;
    margin:0 .5rem;
}


h3 {
    display:none;
    line-height:2rem;
    color:#555;
    font:italic 400 .8rem/1 "Source Sans Pro";   
}

.filter {
        display:inline-block;
        border:thin solid gainsboro;
        padding:.25rem .5rem;
        border-radius:.25rem;
        margin-right:.5rem;
        cursor:pointer;
        transition:.2s;
    }
        .filter:hover { box-shadow:0 0 0 .125rem gainsboro; color:black; }
        .filter:active { color:black; border-color:black; box-shadow:0 0 0 .125rem black; }
        

    .active-filter:before {
        font-weight:bold;
        content:"×";
        padding-right:.25rem;
    }
    
time { display:none; }


::-webkit-scrollbar { width:.5rem; }
::-webkit-scrollbar-track { border-left:thin solid lightgray; background:whitesmoke; }
::-webkit-scrollbar-thumb { background:lightgray; transition:background .2s; }
::-webkit-scrollbar-thumb:hover { background:gray; }

@media (min-width:30em){    
    h1 {
        line-height:1.25rem;
        padding-top:.5rem;
    }
    
    h2 {
        font-size:1.25rem;
        font-weight:300;
    }
    
    h3 { display:inline-block; }
    
    footer {
        padding:0;
    }
    
    footer a {
        display:inline-block;
        width:50%;
        padding:1rem;
    }
    
}

@media (min-width:42em){    
    header, h2, footer a:first-child {
        padding-left:5%;        
    }
    
    img {
        width:5rem;
        height:5rem;
    }
    h1 { font-size:1.7rem; padding-top:.75rem; line-height:2.5rem; }
    
    h2 a {
        padding-left:1.5rem;
    }
    
    
    time {
        display:inline-block;
    }
    
    footer {
        display:flex;
        margin-left:-10px;
    }
    
    footer a {
        flex:auto;
        text-align:center;
        display:inline-block;
        width:auto;
        padding:1.25rem;
    } 
    
    footer a:hover {
        background:#222;
    }
    footer a:hover span { color:whitesmoke; }
    
    .collapse {
        outline:thin solid orange;
        display:none;
    }
}

@media (min-width:55em){
    header, h2, footer {
        padding-left:15%;        
    }
        
    h2 {
        font-size:1.5rem;
    }
    
    footer { display:block; }
    footer a:first-child { font-size:1.2rem; }
    
}

    @keyframes wave {
        50%{ transform:translate3d(-.5rem,0,0); } 
    }