Personal site

by the wazz

HTML

<!doctype html>
    <body>
        <div class="container">
            <div class="header">
                <nav>
                    <h3 class="title">dantdj</h3>
                    <ul class="nav pull-right">
                        <li role="presentation" class="active" id="index">Home</li>
                        <li role="presentation" id="projects">Projects</li>
                        <li role="presentation" id="contact">Contact</li>
                    </ul>
                </nav>                
            </div>

            <div class="feature-box">
                <div class="main">
                    <div class="heading">
                        Lorem ipsum dolor
                    </div>

                    <p class="bio">

                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in eros massa. Maecenas sit amet ullamcorper ipsum, eu molestie nibh.
                    </p>
                </div>

                <div class="projects">
                    <div class="heading">
                        See what I've been working on!
                    </div>
                </div>

                <div class="contact">
                    <div class="heading">
                        Contact me!
                    </div>
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="scripts/main.js"></script>
    </body>

CSS

@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
        font-family: "Open Sans", sans-serif;
}

a {
    text-decoration: none;
    color: black;
}


.container {
    max-width: 730px;
    margin: auto;
}

.footer {
    padding-right: 15px;
    padding-left: 15px;
    font-size: 0.75em;
    text-align: right;
}

/* NAVIGATION */
footer, nav {
    display: block;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    
}

.pull-right {
    float: right !important;
}

ul {
    margin-top: 0;
    margin-bottom: 10px;
}

.nav > li {
    position: relative;
    display: inline-block;
    padding: 10px;
    border-radius: 5px;
}

.active {
    background-color: #727272;
    color: white;
}

.active > a {
    color: white;
}

.title {
    font-size: 40px;
    font-family: 'Raleway', sans-serif;
    margin: 0 0 10px 0;
    display: inline-block;
}

.bio {
    font-size: 20px;
}

.email-btn {
    background-color: #e28e8e;
    border: none;
    padding: 10px;
    font-size: 20px;
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.feature-box {
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    background-color: #eeeeee;
}

.heading {
    font-size: 50px;
    font-family: "Raleway", sans-serif;
}

.email-btn:hover {
    cursor: pointer;
}

.nav > li:hover {
    cursor: pointer;
}

@media only screen and (max-width: 413px) {
    .title {
        margin-bottom: 10px;
    }
    
    .heading {
        font-size: 33px;
    }
    
    .pull-right {
        float: none !important;
        display: inline-block;,
        margin-bottom: 10px;
    }
    
    .email-btn {
        margin-bottom: 10px;
    }
}

JavaScript

$(document).ready(function() {
    function toggleVisibility(class1, class2, class3) {
        if ($(class1).is(":visible")) {
            $(class1).toggle("show");
        }
        else if($(class2).is(":visible")) {
            $(class2).toggle("show");
        }
        
        $(class3).toggle("swing");
    }
    
    $(".projects").hide();
    $(".contact").hide();
    
    $("#index").click(function() {
        toggleVisibility(".projects", ".contact", ".main");
        
        // Set active navigation link accordingly
        $("#projects").removeClass("active");
        $("#contact").removeClass("active");
        $("#index").addClass("active");
    })
    
    $("#projects").click(function() {
        toggleVisibility(".main", ".contact", ".projects");
        
        // Set active navigation link accordingly
        $("#index").removeClass("active");
        $("#contact").removeClass("active");
        $("#projects").addClass("active");
    })
     
    $("#contact").click(function() {
        toggleVisibility(".main", ".projects", ".contact");
        
        // Set active navigation link accordingly
        $("#index").removeClass("active");
        $("#projects").removeClass("active");
        $("#contact").addClass("active");
    })
});