myPortfolio

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>myPortfolio</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:400,300'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css'>

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

  
</head>

<body>

  
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"><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="#">myPortfolio</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container main-container" id="about">
  <div class="col-md-9 header h4 text-justify">
    <p class="lead">I'm a passionate programmer and product developer and have been programming professionally since 2013, I bring expertise in both front-end and back-end development.</p>
  </div>
  <div class="col-md-3"><img class="img-responsive img-circle photo" src="https://pbs.twimg.com/profile_images/725483147274506240/ZC5MLk0y.jpg"/></div>
  <div class="col-xs-12">
    <div class="col-xs-11">
      <hr class="hr"/>
    </div>
    <div class="col-xs-1">
      <p class="breaker-name">{rob}</p>
    </div>
  </div>
  <div class="col-xs-12 expertise">
    <div class="container">
      <p class="lead"><strong>Web Developer - Graphic Artist - User Experience Designer</strong></p>
    </div>
  </div>
</div>
<div class="container main-container" id="portfolio">
  <h1 class="text-center">PORTFOLIO</h1>
  <h4 class="text-center">I graduated with a BS in Information Technology from The National College of Sciend and Technology. After graduation I have been working full-time for Telford Svc. Phils., Inc. as Management System Officer which I promotes continuous improvement through system enhancement. My best friend is PHP sometimes I handle front-end too, Most of the time to solve complex problem into simple solutions using JavaScipt and CSS. Below are my work:</h4>
  <div class="col-xs-12 col-md-6 dcc wow fadeInUp"><img class="img-responsive" src="https://res.cloudinary.com/dwq8odxme/image/upload/v1470363641/dcc_jl3l7u.png"/></div>
  <div class="col-xs-12 col-md-6 rh-temp wow fadeInUp"><img class="img-responsive" src="https://res.cloudinary.com/dwq8odxme/image/upload/v1470363640/rhtemp_zh7kg2.png"/></div>
  <div class="col-xs-12 col-md-6 output wow fadeInUp"><img class="img-responsive" src="https://res.cloudinary.com/dwq8odxme/image/upload/v1470363639/output_ywsbcd.png"/></div>
  <div class="col-xs-12 col-md-6 qdn wow fadeInUp"><img class="img-responsive" src="https://res.cloudinary.com/dwq8odxme/image/upload/v1470363640/qdn_myaqyx.png"/></div>
</div>
<div class="container main-container" id="contact">
  <h1 class="lead contact text-center">CONTACT ME</h1>
  <div class="col-xs-6">
    <form>
      <div class="form-group">
        <input class="form-control" placeholder="Name" type="text"/>
      </div>
      <div class="form-group">
        <input class="form-control" placeholder="Email" type="text"/>
      </div>
      <div class="form-group">
        <input class="form-control" placeholder="Phone no." type="text"/>
      </div>
      <textarea class="form-control text-message" rows="5" placeholder="Message..."></textarea>
      <div class="form-group"><br/>
        <button class="pull-right btn btn-lg btn-default" type="submit">Send</button>
      </div>
    </form>
  </div>
  <div class="col-xs-6">
    <p class="lead">If you interested to hire me or if you have any ideas would like to implement with me. Feel free to contact me. Fill this form and submit, I will catch you soon.</p>
  </div>
</div>
<footer class="footer">
  <div class="col-xs-8">
    <h4 class="about">About this page</h4>
    <p>This page is originally created by Robinson L. Legaspi with the intension to grow and to showcase her knowledge with regards to web development.</p>
  </div>
  <div class="col-xs-4">
    <h4 class="social-media">Around the web</h4><a class="link" target="_blank" href="https://github.com/rob1121"><i class="fa fa-github-square fa-3x"></i></a><a class="link" target="_blank" href="https://www.facebook.com/rooooooooooooooooooooooooooooooooooooooooooooooob"><i class="fa fa-facebook-square fa-3x"></i></a><a class="link" target="_blank" href="https://twitter.com/venson_legaspi"><i class="fa fa-twitter-square fa-3x"></i></a><a class="link" target="_blank" href="https://www.linkedin.com/in/robinson-legaspi-528089b4"><i class="fa fa-linkedin-square fa-3x"></i></a>
  </div>
  <p class="text-left reserve">myPortfolio © 2016. All Rights Reversed</p>
</footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/roblegaspi/myportfolio-wWEOqr */
* {
  font-family: "Lato", sans-serif;
}

body {
  background-color: #79a8a9;
}

.main-container {
  overflow: hidden;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}

#about {
  margin-top: 150px;
  background: #f4f7f7;
}

.header {
  color: #252c41;
  padding: 40px 30px 0 30px;
}

.photo {
  margin-top: 40px;
  width: 140px;
  height: 140px;
  border: 5px solid #aacfd0;
}

.hr {
  border-color: #aacfd0;
}

.breaker-name {
  color: #aacfd0;
  position: relative;
  bottom: -10px;
  left: -30px;
}

#portfolio {
  margin-top: 0;
  background: #e5ecec;
  color: #1f4e5f;
  font-weight: bold;
}
#portfolio h4 {
  color: #79a8a9;
}

.dcc,
.qdn,
.rh-temp,
.output {
  overflow: hidden;
}
.dcc img,
.qdn img,
.rh-temp img,
.output img {
  box-shadow: 2px 1px 5px 0 rgba(0, 0, 0, 0.5);
  position: relative;
  left: 0;
  right: 0;
  margin: 30px 50%;
  transform: translateX(-50%);
}

#contact {
  margin-top: 0;
  padding-bottom: 40px;
  margin-bottom: 80px;
  background: #1f4e5f;
  color: #aacfd0;
}
#contact .lead {
  color: #aacfd0;
}

.expertise {
  padding-bottom: 40px;
}

.text-message {
  resize: none;
  overflow: hidden;
}

.contact {
  font-weight: bold;
}

.footer {
  color: #1f4e5f;
  position: relative;
  display: inline-block;
  background: #f4f7f7;
  width: 100%;
  padding-top: 20px;
  margin: 0;
}
.footer .about {
  font-weight: bold;
}
.footer .about p {
  color: #388dac;
}
.footer .social-media {
  font-weight: bold;
}
.footer .reserve {
  font-weight: bold;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
}

.link {
  text-decoration-style: none;
  color: #1f4e5f;
  padding: 3px;
  transition: color 0.3s ease-in-out;
}
.link:hover {
  color: #51a7c6;
}


/*Downloaded from https://www.codeseek.co/roblegaspi/myportfolio-wWEOqr */
$(document).ready(function() {
  new WOW().init();
  
  
  $("ul li a[href^='#']").on('click', function(e) {
   e.preventDefault();
    
   var hash = this.hash;
    
   $('html, body').animate({
       scrollTop: $(hash).offset().top - 79
     }, 1000,"easeOutExpo", function(){
       window.location.hash = hash;
     });

});
  
  $(window).scroll(function(){
    var scrollTop = $(document).scrollTop();
    var anchors = $('body').find('.main-container');
    for (var i = 0; i < anchors.length; i++){
        if (scrollTop > $(anchors[i]).offset().top - 80 && scrollTop < $(anchors[i]).offset().top + $(anchors[i]).height() - 80) {
            $('ul li a[href="#' + $(anchors[i]).attr('id') + '"]').parent().addClass('active');
        } else {
            $('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').parent().removeClass('active');
        }
    }
});
});

Comments