My-Portfolio

index.html

<div class="section group">
  <div class="col span_3_of_3 nav">
    <nav>
      <a class="pull-left" href="/#">Velmurugan V</a>
      <div class="nav-item-right">
        <a class="pull-left " href="#about">About Me </a>
        <a class="pull-left" href="#certifications">Certifications</a>
        <a class="pull-left" href="#portfolio">Portfolio</a>
        <a class="pull-left" href="#about">Hire</a>
      </div>
    </nav>

  </div>
</div>

<!-- about me image section--> 
<div id="about" class="section group gap">

  <div class="col span_3_of_3">
    <img class="img img-circle" src="https://s3-ap-southeast-1.amazonaws.com/vel-images-portfolio/portfolio-image.jpg" align:middle>
  </div>

</div>

<!-- about me buton section--> 
<div class="section group">
  <div class="col span_3_of_3 project">
    <h1> Velmurugan Velayudham</h1>
    <h4>Full Stack Web Developer</h4>

    <div class="social-buttons">
      <a class="btn" href="https://github.com/velmuruganvelayutham" target="blank"> <span class="fa fa-github"></span> Github </a>

      <a class="btn" href="https://facebook.com/863047390443402" target="blank"> <span class="fa fa-facebook"></span> Facebook </a>

      <a class="btn"> <span class="fa fa-linkedin" href="https://www.linkedin.com/in/velmuruganv" target="blank"></span> LinkedIn </a>
      <a class="btn" href="http://www.freecodecamp.com/velmuruganvelayutham" target="blank"> <span class="fa fa-fire"></span> Freecodecamp </a>
      <a class="btn" href="http://velmuruganv.wordpress.com" target="blank"> <span class="fa fa-wordpress"></span> Wordpress </a>
      <a class="btn" href="http://stackoverflow.com/users/1840774/vel" target="blank"> <span class="fa fa-stack-overflow"></span> Stackoverflow </a>
      <a class="btn" href="http://codepen.io/velmuruganv/" target="blank"> <span class="fa fa-codepen"></span> Codepen </a>

    </div>
    <hr>
  </div>
</div>

<!-- portfolio  section--> 
<div class="section group" id="portfolio">
  <h1> My Portfolio </h1>
  <div class="col span_1_of_3 project">
    <h3> Calculator </h3>

    <p data-height="268" data-theme-id="0" data-slug-hash="XXJLzm" data-default-tab="result" data-user="velmuruganv" class='codepen'>See the Pen <a href='http://codepen.io/velmuruganv/pen/XXJLzm/'>build-a-calculator</a> by Velmurugan Velayutham (<a href='http://codepen.io/velmuruganv'>@velmuruganv</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
    <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
    <hr>
    <h3> Bootstrap & Jquery </h3>
  </div>
  <div class="col span_1_of_3 project">
    <h3> Wikipedia Viewer </h3>
    <p data-height="268" data-theme-id="0" data-slug-hash="VevKLr" data-default-tab="result" data-user="velmuruganv" class='codepen'>See the Pen <a href='http://codepen.io/velmuruganv/pen/VevKLr/'>FreeCodeCamp Wikipedia Viewer</a> by Velmurugan Velayutham (<a href='http://codepen.io/velmuruganv'>@velmuruganv</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
    <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
    <hr>
    <h3> Bootstrap & AngularJS </h3>
  </div>
  <div class="col span_1_of_3 project">
    <h3> Random Quote Machine </h3>
    <p data-height="268" data-theme-id="0" data-slug-hash="dGYoqb" data-default-tab="result" data-user="velmuruganv" class='codepen'>See the Pen <a href='http://codepen.io/velmuruganv/pen/dGYoqb/'>Random Quote Machine</a> by Velmurugan Velayutham (<a href='http://codepen.io/velmuruganv'>@velmuruganv</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
    <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
    <hr>
    <h3> Bootstrap & Jquery </h3>
  </div>
  <div class="col span_1_of_3 project gap">
    <h3> Camper News </h3>
    <p data-height="268" data-theme-id="0" data-slug-hash="YwyXOP" data-default-tab="result" data-user="velmuruganv" class='codepen'>See the Pen <a href='http://codepen.io/velmuruganv/pen/YwyXOP/'>FreeCodeCamp Camper News</a> by Velmurugan Velayutham (<a href='http://codepen.io/velmuruganv'>@velmuruganv</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
    <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
    <hr>
    <h3> Bootstrap & AngularJS </h3>
  </div>
  <div class="col span_1_of_3 project gap">
    <h3> Pomodoro Clock </h3>
    <p data-height="268" data-theme-id="0" data-slug-hash="LGEpNW" data-default-tab="result" data-user="velmuruganv" class='codepen'>See the Pen <a href='http://codepen.io/velmuruganv/pen/LGEpNW/'>build-a-pomodoro-clock</a> by Velmurugan Velayutham (<a href='http://codepen.io/velmuruganv'>@velmuruganv</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
    <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
    <hr>
    <h3> Bootstrap & Jquery </h3>
  </div>

</div>

<!-- certifications section--> 
<div class="section group gap" id="certifications">
  <h1> My Certifications !</h1>
  <div class="col span_1_of_3 project">
    <h3> OCJP - Oracle Certified Java Developer </h3>
    <img src="https://velmuruganv.files.wordpress.com/2014/02/ocp_javase6programmer_clr.gif" class="img img-square" />
  </div>
  <div class="col span_1_of_3 project">
    <h3> OCEWCD - Oracle Certified Expert Web Component Developer </h3>
    <img src="https://velmuruganv.files.wordpress.com/2014/02/oce_javaee6webcompdev_clr.gif" class="img img-square" />
  </div>
  <div class="col span_1_of_3 project">
    <h3> OCEJPA - Oracle Certified Expert Java Persistence API Developer </h3>
    <img src="https://velmuruganv.files.wordpress.com/2014/02/oce_javaee6javapersistapidev_clr.gif" class="img img-square" />
  </div>
  <div class="col span_1_of_3 project">
    <h3> Openbravo - Certified Openbravo Developer </h3>
    <img src="https://velmuruganv.files.wordpress.com/2014/02/tfc-erp-3.png" class="img img-square" />
  </div>
  <div class="col span_1_of_3 project">
    <h3> C100DEV: MongoDB Certified Developer Associate Exam </h3>
    <img src="https://s3-ap-southeast-1.amazonaws.com/vel-images-portfolio/Certificate-page-001.jpg" class="img img-square" />
  </div>
</div>

<!-- footer section -->
<div class="footer-wrap">
  <footer class="footer">
    <p> Designed by Velmurugan , Senior Software Engineer </p>
    <p> Infinite Computer Solutions Pvt Ltd. Chennai, Tamilnadu </p>
  </footer>
</div>

My-Portfolio.markdown

My-Portfolio

Build a Personal Portfolio Webpage for FreeCodeCamp.com ziplines

A Pen by Velmurugan Velayutham on CodePen.

License.

style.css

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px 1%;
	margin:0px 1%;
}

/*  COLUMN SETUP  */
.col {
  box-sizing: border-box;
	display: block;
	float:left;
}
/* Navbar floating */
.nav-item-right {
  float:right;
}
nav{
  font-size:18px;
  font-weight:bold;
  line-height:50px;
}
.pull-left{
  float:left;
}
.pull-right{
  float:right;  
}
body{ 
   background-color:#FFF;
  
}
.nav{  
   background-color:#F2F2F2;
   background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/confectionary.png);
}
h1{
  text-align:center;
  font-size:50px;
  font-weight:700;
  font-family: 'Kanit', sans-serif;
  text-decoration:overline;
}
h4{
  text-align:center;
  font-size:25px;
}
nav > a,nav >.nav-item-right>a{  
  padding-left:15px;
  padding-right:15px;
  padding-top:10px;
  padding-bottom:10px;
  text-decoration:none;
  text-align:center;
}
nav > a:visited,nav >.nav-item-right>a:visited,nav > a:link,nav >.nav-item-right>a:link{
  color:#454545;
}
nav > a:hover,nav >.nav-item-right>a:hover,nav > a:active,nav >.nav-item-right>a:active{  
  color:#000;  
   font-size:25px;
  font-family:Tangerine;
  background-color:#969696;  
  text-decoration:underline;
}
.gap{
  margin-top:40px;
}
.img{
  display:block;
  width:200px;
  height:200px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease; 
}
.img-circle{
    border-radius:50%;
}
.img-square{
    border-radius:0%;
}
.img:hover{
   width:400px;
   height:400px;
}

.social-buttons{
   text-align:center;
}
.btn{
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer; 
  background-image: none;
  border: 3px solid transparent;
  border-radius: 50px;
  font-size:25px;
  color: #333;
  background-color: #fff;
  border-color: #ccc;
  text-decoration:none;
}
.btn:hover{
  font-size:26px;
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.project{
  
  border-color:#eee;
  border-top-width:1px;
  border-right-width:1px;
  border-left-width:1px;
  border-bottom-width:1px;
  border-style:solid;
  text-align:center;
}

.footer{
  margin:10px;
  border:1px solid #ccc;
  text-align:center;
  padding:1px;
  font-family:'Kanit', sans-serif;
}
/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table; 
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.67%;
}
.span_1_of_3 {
	width: 33.33%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

styles

<link href="https://fonts.googleapis.com/css?family=Kanit:400,700italic,700" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet" />