Personal Portfolio

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Personal Portfolio</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

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

  
</head>

<body>

  <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="https://i.imgur.com/MQi9rPh.png">
                </a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#contact">Contact</a></li>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </nav>
    <div id="home" class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <img class="img-responsive img-circle" src="https://i.imgur.com/XlB9lzY.jpg" alt="Tony Freelancer">
                <br>
                <h1 class="text-center">Hi, my name is Tony,</h1>
                <h3 class="text-center">I am a freelance web developer & gym lover</h3>
            </div>
        </div>
    </div>
    <div id="about" class="container-fluid">
        <div class="row">
            <div class="col-xs-6 col-xs-offset-2">
                <h1 class="text-center">What I do...</h1>
                <p>I’m a senior WordPress developer with extensive experience in building high quality sites on Ecommerce and Affiliate fields.</p>
                <p>My experiences range from building responsive WordPress sites that focus on Affiliate marketing (support SEO, convert sales well, etc.) to Ecommerce stores which are easy to manage and make customers impressed.</p>
                <p>I’m still working and learning hard and I will be sharing my progress through <a href="#portfolio">Portfolio</a>.</p>
            </div>
            <div class="col-xs-4">
                <div class="aboutButtons text-center">
                    <a href="#" role="button" class="btn btn-danger btn-lg">Home</a>
                    <a href="#portfolio" role="button" class="btn btn-danger btn-lg">Portfolio</a>
                    <a href="#contact" role="button" class="btn btn-danger btn-lg">Contact</a>
                </div>
            </div>
        </div>
    </div>
    <div id="portfolio" class="container">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="text-center">What I've Done</h1>
            </div>
            <div class="col-xs-4">
                <img class="img-responsive center-block" src="http://placehold.it/250x250">
                <!-- <img src="http://placehold.it/250x250"> -->
            </div>
            <div class="col-xs-4">
                <img class="img-responsive center-block" src="http://placehold.it/250x250">
                <!-- <img src="http://placehold.it/250x250"> -->
            </div>
            <div class="col-xs-4">
                <img class="img-responsive center-block" src="http://placehold.it/250x250">
                <!-- <img src="http://placehold.it/250x250"> -->
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4">
                <img class="img-responsive center-block" src="http://placehold.it/250x250">
                <!-- <img src="http://placehold.it/250x250"> -->
            </div>
            <div class="col-xs-4">
                <img class="img-responsive center-block" src="http://placehold.it/250x250">
                <!-- <img src="http://placehold.it/250x250"> -->
            </div>
            <div class="col-xs-4">
                <img class="img-responsive center-block" src="http://placehold.it/250x250">
                <!-- <img src="http://placehold.it/250x250"> -->
            </div>
        </div>
    </div>
    <div id="contact" class="container-fluid">
        <div class="row">
            <div class="col-xs-5 col-xs-offset-1 text-center">
                <h1>It was nice to meet you! See you soon?</h1>
                <p><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> tony@tonyfreelance.com</p>
                <p><span class="glyphicon glyphicon-home" aria-hidden="true"> <a href="http://www.tonyfreelance.com">http://www.tonyfreelance.com</a></p>
                <p><span class="glyphicon glyphicon-globe" aria-hidden="true"> Hanoi,Vietnam</p>
            </div>
            <div class="col-xs-5">
                <img class="img-responsive center-block" src="https://i.imgur.com/MQi9rPh.png" alt="TonyFreelance logo">
            </div>
        </div>
    </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/tonyfreelance/personal-portfolio-jAQqJg */
html,
body {
    height: 100%;
    font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif;
}

.navbar-brand {
    margin-bottom: 10px;
}

.navbar-brand img {
    width: 70px;
}

#navbar {
    margin-top: 5px;
}

.navbar-default {
    background-color: #6dbdc4;
    border-color: #25b5c1;
}

.navbar-default .navbar-brand {
    color: #ffffff;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #000000;
}

.navbar-default .navbar-text {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #ffffff;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #25b5c1;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #ffffff;
    background-color: #25b5c1;
}

.navbar-default .navbar-toggle {
    border-color: #25b5c1;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #25b5c1;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #ffffff;
}

.navbar-default .navbar-link {
    color: #ffffff;
}

.navbar-default .navbar-link:hover {
    color: #ffffff;
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #25b5c1;
    }
}

#home {
    height: 100%;
}

#home img {
    width: 20%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
}

#home h1 {
    font-size: 6em;
    font-weight: bold;
}

#about {
    background-color: #6DBDC4;
    color: white;
    width: 100%;
    padding: 50px 0px;
}

#about h1 {
    font-weight: bold;
    font-size: 4em;
}

#about p {
    font-size: 16px;
    font-weight: normal;
    text-align: justify;
    margin-bottom: 1.5em;
}

#about a {
    color: white;
}

.aboutButtons {
    margin-top: 100px;
}

.aboutButtons a {
    display: inline-block;
    margin-bottom: 20px;
    width: 170px;
    color: #ffffff;
    border-color: #ac1100;
    background-color: #e26a5c;
    text-shadow: 0 0.075em 0.075em rgba(0, 0, 0, 0.5);
    box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
    border-radius: 0.25em;
    margin-right: 60px;
}

#portfolio {
    margin-bottom: 60px;
}

#portfolio h1 {
    font-weight: bold;
    font-size: 86px;
    color: #444444;
    margin-top: 100px;
}

#portfolio img {
    margin-top: 50px;
}

#contact {
    background-color: #6DBDC4;
    color: white;
    padding-bottom: 50px;
}

#contact h1 {
    font-weight: bold;
    font-size: 50px;
    margin-bottom: 50px;
}

#contact p {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

#contact img {
    margin-top: 50px;
}

#contact a {
    color: white;
}

Comments