Portfolio

Portfolio Prototype

by azizasiri

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.web.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
<!-- http://css.dzone.com/articles/css3-responsive-menu -->
<!-- http://css-tricks.com/perfect-full-page-background-image/ -->
<!-- http://webplayer.yahoo.com/docs/how-to-set-up/ -->
<img id="bg" src="" />
<div id="Header" class="container">
    <div class="row">
        <div class="span12 ">
            <div class="header-title">CARTERA <small><br class="visible-tiny" />by KidSysco (Ryan Segura)</div>

            
            <div class="nav-wrapper">
                <ul id="Nav">
                    <li><a id="Home" href="#"><i class="icon-home"></i><br />Home</a>

                    </li>
                    <li><a id="Graphics" href="#"><i class="icon-picture"></i><br />Graphics</a>

                    </li>
                    <li class="active"><a id="WebDev" href="#s2"><i class="icon-globe"></i><br />Web Dev</a>

                    </li>
                    <li><a id="Music" href="#"><i class="icon-volume-up"></i><br />Music</a>

                    </li>
                    <li><a id="Video" href="#"><i class="icon-film"></i><br />Video</a>

                    </li>
                    <li><a id="Blog" href="#"><i class="icon-rss"></i><br />Blogs</a>

                    </li>
                    <li><a id="Contact" href="#"><i class="icon-phone"></i><br />Contact</a>

                    </li>
  ...

CSS

/* Silly JSFiddle hack needed to insert meta tags into the DOM */
 </style> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--[if IE 7]> <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css" rel="stylesheet"> <![endif]--> <style> 
@import url('http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css');
@import url('http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css');

/******* Typography *******/

 .container {
    position: relative;
}
 a.white-link, a.white-link:visited {
    color: #fff;
    text-decoration: none;
}
a.white-link:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/******* Layout *******/

/* common and top level styles */
 #Nav, #Nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.nav-wrapper {
    overflow: hidden;
    background-color: #F5F5F5;
    border-bottom: 5px solid #333333;
}
#Nav {
}
#Nav > li {
    float: left;
    text-align: center;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
.header-title {
    font-size: 2.5em;
    font-weight: bold;
    padding-left: 12px;
    margin: 12px 0;
    background-color: #fff;
}
.header-title small {
    font-size: .5em;
    line-height: normal;
    color: gray;
    font-weight: normal;
}
#Nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out...

JavaScript

$(document).ready(function () {
    $('#Home, #Graphics, #WebDev, #Music, #Video, #Blog, #Contact').on('click', function () {
        if(!$(this).parent().hasClass('active')){
            _resetActiveTab();
            _setActiveTab(this);
        }
        return false;
    });

    function _resetActiveTab() {
        if ($('body').css('backgroundColor') === 'rgb(0, 0, 0)') {
            $('body').animate({
                backgroundColor: '#fff'
            });
        }
        $('#bg').fadeOut(1000);
        $('#Nav').children().removeClass('active');
        $('#ImageMenu').slideUp();
    }

    function _setActiveTab(element) {
        $(element).parent().addClass('active');
    }

    $('#Graphics').on('click', function () {
        if(!$('#Graphics').hasClass('active')){
            $('#ImageMenu').slideDown();
        }
        return false;
    });

    $('.image-tile').on('click', function () {
        var _image = $(this).data('image');
        if ($('body').css('backgroundColor') === 'rgb(255, 255, 255)') {
            $('body').animate({
                backgroundColor: '#000'
            });
        }

        $('#bg').fadeOut(1000, function () {
            $(this).attr('src', _image);

            $('#bg').fadeIn(1000, function () {

            });
        });
        return false;
    });

    $('#ImageFullScreenToggle').on('click', function () {
        var _headerHeight = $('#Header').height();
        console.log(_headerHeight);
        if ($('#Header').css('top') === '0px') {
            $('#Header').animate({
                top: '-' + (_headerHeight - 27) + 'px'
            }, 1000, 'swing', function () {
                $('.image-nav-full-screen-toggle i').removeClass().addClass('icon-double-angle-down');
            });
        } else {
            $('#Header').animate({
                top: '0px'
            }, 1000, 'swing', function () {
                $('.image-nav-full-screen-toggle...