FreeCodeCamp Portfolio

In this example below you will see how to do a FreeCodeCamp Portfolio with some HTML / CSS and Javascript

This pen was made for the Build a Personal Portfolio Webpage section of the Basic Front-End Development Projects course of FreeCodeCamp.

Thumbnail
This awesome code was written by r3b311i0n, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright r3b311i0n ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>FreeCodeCamp Portfolio</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>

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

  
</head>

<body>

  <header id="top">
    <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top navbar-static-top" role="navigation">
            <div class="row top">
                <div class="col-xs-4">
                    <img src="https://github.com/r3b311i0n/Portfolio/raw/master/logo.png" class="logo img-responsive" alt="logo" onclick="scrollToAbout()">
                </div>
                <div class="col-xs-8">
                    <ul class="navhead nav navbar-nav collapse navbar-collapse">
                        <li>
                            <p class="navbar-btn animated infinite pulse" onclick="_aboutClick(this)" id="aboutButton">
                                <!--suppress HtmlUnknownAnchorTarget -->
                                <a class="btn flash" href="#about" role="button" onmouseover="_startAnim(this)"
                                   onmouseout="_stopAnim(this)">About</a>
                            </p>
                        </li>
                        <li>
                            <p class="navbar-btn" onclick="_portfolioClick(this)" id="portButton">
                                <!--suppress HtmlUnknownAnchorTarget -->
                                <a class="btn flash" href="#portfolio" role="button" onmouseover="_startAnim(this)"
                                   onmouseout="_stopAnim(this)">Portfolio</a>
                            </p>
                        </li>
                        <li>
                            <p class="navbar-btn" onclick="_contactClick(this)" id="contactButton">
                                <!--suppress HtmlUnknownAnchorTarget -->
                                <a class="btn flash" href="#contact" role="button" onmouseover="_startAnim(this)"
                                   onmouseout="_stopAnim(this)">Contact</a>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</header>
<div class="padder">
    <div class="container-fluid about">
        <div class="row">
            <div class="col-xs-7">
                <p>
                    Greetings!<br><br>

                    My name is Amal, and I am a designer/developer hopeful with a deep interest in all things technology
                    related, and many things that are not technology related. I am disciplined in multiple programming
                    languages and am an avid Linux advocate. I have a particular interest in envisioning future
                    technologies. My non-technology related interests include anime, football, music, reading, and video
                    games.
                    <br><br>
                    And yes, I am a cat.
                </p>
            </div>
            <div class="col-xs-5">
                <img src="https://github.com/r3b311i0n/Portfolio/raw/master/me.jpg" alt="me" class="me img-responsive img-circle">
            </div>
        </div>
    </div>
    <hr class="break">
    <div class="container-fluid portfolio flex">
        <h1 class="h1 portfolioHeading">
            Portfolio
        </h1>
        <div class="row">
            <div class="col-xs-6 portLeft">
                <div class="thumbRow1">
                    <a href="#" class="thumbnail">
                        <img src="https://github.com/r3b311i0n/Portfolio/raw/master/place1.jpg" alt="Placeholder1">
                    </a>
                </div>
                <div class="thumbRow2">
                    <a href="https://codepen.io/r3b311i0n/full/ORPjJJ/" class="thumbnail" target="_blank">
                        <img src="https://github.com/r3b311i0n/Portfolio/raw/master/place3.jpg" alt="Placeholder3">
                    </a>
                </div>
                <div class="thumbRow3">
                    <a href="#" class="thumbnail">
                        <img src="https://github.com/r3b311i0n/Portfolio/raw/master/place5.jpg" alt="Placeholder5">
                    </a>
                </div>
            </div>
            <div class="col-xs-6 portRight">
                <div class="thumbRow1">
                    <a href="#" class="thumbnail thumbRow1">
                        <img src="https://github.com/r3b311i0n/Portfolio/raw/master/place2.jpg" alt="Placeholder2">
                    </a>
                </div>
                <div class="thumbRow2">
                    <a href="#" class="thumbnail">
                        <img src="https://github.com/r3b311i0n/Portfolio/raw/master/place4.jpg" alt="Placeholder4">
                    </a>
                </div>
                <div class="thumbRow3">
                    <a href="#" class="thumbnail">
                        <img src="https://github.com/r3b311i0n/Portfolio/raw/master/place6.jpg" alt="Placeholder6">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <hr class="break">
    <div class="container-fluid contact">
        <div class="row">
            <div class="col-xs-8">
                <h3 class="h3 contactHeading">
                    Contact Me:
                </h3>
            </div>
            <div class="col-xs-4">
                <div class="social">
                    <a href="https://www.github.com/r3b311i0n" target="_blank">
                        <img src="http://svgur.com/i/A3.svg" alt="github" class="socIcon flash" onmouseover="_startAnim(this)"
                             onmouseleave="_stopAnim(this)"/>
                    </a>
                    <a href="https://www.linkedin.com/in/amal-karunarathna-59196a85" target="_blank">
                        <img src="http://svgur.com/i/Bw.svg" alt="linkedin" class="socIcon flash" onmouseover="_startAnim(this)"
                             onmouseleave="_stopAnim(this)"/>
                    </a>
                    <a href="https://www.twitter.com/r3b311i0n" target="_blank">
                        <img src="http://svgur.com/i/BK.svg" alt="twitter" class="socIcon flash" onmouseover="_startAnim(this)"
                             onmouseleave="_stopAnim(this)"/>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="copyright">
    <small class="small">
        r3b311i0n &copy; 2016. All Rights Reserved
    </small>
</footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/r3b311i0n/freecodecamp-portfolio-yaVVam */
/* github: https://github.com/r3b311i0n/Portfolio */

body {
    font-family: Avenir Next LT Pro, "Helvetica Neue", serif;
}

.logo {
    max-height: 9em;
    max-width: 12em;
    padding-left: 10%;
}

.logo:hover {
    cursor: pointer;
}

.break {
    border-color: red;
}

.top {
    background-color: white;
}

.me {
    height: 30em;
    width: 40em;
    margin-top: 3rem;
}

.navhead {
    float: right;
}

.navhead li a {
    display: inline-block;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 1.2rem;
    background-color: white;
    border: none;
    color: black;
}

.navhead li a:hover {
    color: red;
}

.navhead li a:active {
    background-color: white;
}

.navhead li a:focus {
    outline: 0;
}

.about p {
    font-size: 2em;
}

.portfolio {
    padding-top: 4%;
}

.portfolioHeading {
    font-size: 5em;
    text-align: center;
    text-decoration: underline;
    padding-bottom: 3%;
    cursor: default;
    opacity: 0;
}

.portfolioHeading:hover {
    color: red;
}

.thumbRow1 {
    opacity: 0;
}

.thumbRow2 {
    opacity: 0;
}

.thumbRow3 {
    opacity: 0;
}

.contactHeading {
    font-size: 3em;
    text-decoration: underline;
    cursor: default;
    opacity: 0;
}

.contactHeading:hover {
    color: red;
}

.padder {
    padding-left: 3%;
    padding-right: 3%;
    margin-top: 8rem;
}

.social {
    opacity: 0;
}

.socIcon {
    height: 4em;
    width: 4em;
    float: right;
    padding-right: 1%;
    padding-left: 1%;
}

.copyright {
    text-align: center;
    padding-top: 3%;
}

/*Downloaded from https://www.codeseek.co/r3b311i0n/freecodecamp-portfolio-yaVVam */
var main = function () {
    $(".navhead>li").addClass("animated bounceInDown");

    $(".logo").addClass("animated fadeIn");

    $(".about p").addClass("animated bounceInLeft");
    $(".about img").addClass("animated bounceInRight");

    waypoints();
};

var _startAnim = function (obj) {
    $(obj).addClass("animated infinite");
};

var _stopAnim = function (obj) {
    $(obj).removeClass("animated infinite");
};

var _aboutClick = function (obj) {
    $(".navhead p").removeClass("animated infinite pulse");
    $(obj).addClass("animated infinite pulse");

    scrollToAbout();
};

var _portfolioClick = function (obj) {
    $(".navhead p").removeClass("animated infinite pulse");
    $(obj).addClass("animated infinite pulse");

    scrollToPortfolio();
};

var _contactClick = function (obj) {
    $(".navhead p").removeClass("animated infinite pulse");
    $(obj).addClass("animated infinite pulse");

    scrollToContact();
};

var scrollToAbout = function () {
    $("html, body").animate({
        scrollTop: $("#top").offset().top
    }, 300);
};

var scrollToPortfolio = function () {
    $("html, body").animate({
        scrollTop: $(".portfolio").offset().top
    }, 300);
};

var scrollToContact = function () {
    $("html, body").animate({
        scrollTop: $(".contact").offset().top
    }, 300);
};

var waypoints = function () {
    var _wayAbout = new Waypoint({
        element: $(".about"),
        handler: function () {
            $(".navhead p").removeClass("animated infinite pulse");
            $("#aboutButton").addClass("animated infinite pulse");
        },
        offset: -50
    });

    var _wayPortHeader = new Waypoint({
        element: $(".portfolioHeading"),
        handler: function () {
            $(".portfolioHeading").addClass("animated fadeIn").css("opacity: 100;");
            $(".navhead p").removeClass("animated infinite pulse");
            $("#portButton").addClass("animated infinite pulse");
        },
        offset: "bottom-in-view"
    });

    var _wayThumbRow1 = new Waypoint({
        element: $(".thumbRow1"),
        handler: function () {
            $(".thumbRow1").addClass("animated fadeIn").css("opacity: 100;");
        },
        offset: 400
    });

    var _wayThumbRow2 = new Waypoint({
        element: $(".thumbRow2"),
        handler: function () {
            $(".thumbRow2").addClass("animated fadeIn").css("opacity: 100;");
        },
        offset: 400
    });

    var _wayThumbRow3 = new Waypoint({
        element: $(".thumbRow3"),
        handler: function () {
            $(".thumbRow3").addClass("animated fadeIn").css("opacity: 100;");
            $(".navhead p").removeClass("animated infinite pulse");
            $("#portButton").addClass("animated infinite pulse");
        },
        offset: 400
    });

    var _wayContactHeader = new Waypoint({
        element: $(".contactHeading"),
        handler: function () {
            $(".contactHeading").addClass("animated fadeIn").css("opacity: 100;");
            $(".navhead p").removeClass("animated infinite pulse");
            $("#contactButton").addClass("animated infinite pulse");
        },
        offset: "bottom-in-view"
    });

    var _waySocialButtons = new Waypoint({
        element: $(".social"),
        handler: function () {
            $(".social").addClass("animated rotateIn").css("opacity: 100;");
        },
        offset: "bottom-in-view"
    });
};

$(document).ready(main);

Comments