Portfolio

adMNWz.markdown

adMNWz

A Pen by Sumit Roy on CodePen.

License.

index.html

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Sumit's Portfolio</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home" class="fa fa-home">  Home</a></li>
        <li><a href="#about" class="fa fa-heartbeat">  About</a></li>
        <li><a href="#portfolio" class="fa fa-paw">  Portfolio</a></li>
        <li><a href="#contact" class="fa fa-connectdevelop">  Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="home">
  <div class="container">
    <h1>Sumit Roy</h1>
    <p>I'm <span class='typed'></span></p>
    <hr>
    <div class="row">
      <div class="col-md-12">
        <a type="button" href="https://in.linkedin.com/in/sumit-roy-15a287aa" class="fa fa-linkedin-square btn btn-lg" id="button1"> Linkedin</a>

        <a type="button" href="https://github.com/sroy8091" class="btn btn-lg fa fa-github-alt" id="button2"> Github</a>

        <a type="button" href="https://twitter.com/sroy8091" class="btn btn-lg fa fa-twitter-square" id="button3"> Twitter</a>

        <a type="button" href="https://www.facebook.com/sumit.roy.925059" class="btn btn-lg fa fa-facebook-square" id="button4"> Facebook</a>
      </div>
    </div>
  </div>
</div>
<div id="about">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1 class="text-center">About Me</h1>
        <p>I am a student of Kalyani Govt. Engineering College of CSE department. I am a full stack <span>web developer</span> and have done python scripting.</p>
      </div>
      <div class="col-md-12">
        <img src="https://s28.postimg.org/fzuv4p6p9/WP_20160216_23_10_44_Pro_3_2.png" alt="Sumit Roy">
      </div>
    </div>
  </div>
</div>
<div id="portfolio">
  <div class="container">
    <h1>Portfolio</h1>
    <h3> Here are some of my recent work</h3>
    <div class="row">
      <div class="col-md-12">
        <div id="image1">
          <a href="www.kgec.ac.in"><img src="https://s8.postimg.org/jv8v8sllx/Screenshot_43.png" style="width:350px;"></a>
        </div>
        <div id="2">
          <h4>My college website</h4>
        </div>
        <div id="image3">
          <a href="www.preseed.in/team.html"><img src="https://s27.postimg.org/7bmbu9yyr/Screenshot_38.png"></a>
        </div>
        <div id="4">
          <h4>Intern website</h4>
        </div>
        <div id="image5">
          <a href="https://codepen.io/sroy8091/pen/JGzXJG"><img src="https://s22.postimg.org/6xohdmdr5/Screenshot_44.png"></a>
        </div>
        <div id="6">
          <h4>Tribute Page</h4>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="contact" class='footer'>
  <a title="sroy8091@gmail.com" class="text-info" id="con">
    <p>Contact</p>
  </a>
  <p>Copyright © Sumit Roy</p>
</div>

portfolio.markdown

Portfolio

A Pen by Sumit Roy on CodePen.

License.

script.js

$(document).ready(function() {
  $("#button1").click(function() {
    window.open("https://in.linkedin.com/in/sumit-roy-15a287aa");
  });
  $("#button2").click(function() {
    window.open("https://github.com/sroy8091");
  });
  $("#button3").click(function() {
    window.open("https://twitter.com/sroy8091");
  });
  $("#button4").click(function() {
    window.open("https://www.facebook.com/sumit.roy.925059");
  });

  $("body").scrollspy({ target: ".navbar", offset: 50 });

  $("#myNavbar a").on("click", function(event) {
    event.preventDefault();

    var hash = this.hash;

    $("html, body").animate(
      {
        scrollTop: $(hash).offset().top
      },
      500,
      function() {
        window.location.hash = hash;
      }
    );
  });
  $("#image1").click(function() {
    window.open("www.kgec.ac.in");
  });
  $("#image3").click(function() {
    window.open("www.preseed.in/team.html");
  });
  $("#image5").click(function() {
    window.open("https://codepen.io/sroy8091/full/JGzXJG");
  });
  
  //typed.js javascript
  $(function(){
	$(".typed").typed({
		strings: ["developer.", "designer.", "enthusaist."],
		// Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
		stringsElement: null,
		// typing speed
		typeSpeed: 100,
		// time before typing starts
		startDelay: 1200,
		// backspacing speed
		backSpeed: 50,
		// time before backspacing
		backDelay: 800,
		// loop
		loop: true,
		// show cursor
		showCursor: false,
		// character for cursor
		cursorChar: "|",
		// attribute to type (null == text)
		attr: null,
		// either html or text
		contentType: 'html',
		// call when done callback function
		callback: function() {},
		// starting callback function before each string
		preStringTyped: function() {},
		//callback for every typed string
		onStringTyped: function() {},
		// callback for reset
		resetCallback: function() {}
	});
});
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>

style.css

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #0E2F44;
  color: #EEEEEE;
}
#home h1 {
  postion: absolute;
  color: #240f0f;
  font-family: 'Poiret One', 'sans-serif';
  font-size: 100px;
  text-shadow: 4px 4px 4px #5a2626;
  margin-top: 30px;
  margin-bottom: 150px;
}
#home {
  text-align: center;
  background: url("http://www.orphicpixel.com/wp-content/uploads/2013/08/minimal-wallpaper-01.png")fixed;
  background-position: fixed;
  background-size: contain;
  height: 700px;
  margin-top: 50px;
}
#home p {
  color: #ffff80;
  font-size: 30px;
  font-family: Robotto;
}

.typed::after {
	content: '|';
	display: inline;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}

.btn {
  background: white;
  color: black;
  padding: 10px 28px;
  text-align: center;
  font-size: 20px;
}
.btn:hover {
  background: #00000;
  color: #999900;
  transition: 0.5s;
}
#about {
  text-align: center;
  background: url("http://p1.pichost.me/i/74/1990192.jpg") center center fixed;
  background-position: fixed;
  background-size: contain;
  height: 620px;
  margin: -50px;
  color: #fff;
}
#about h1 {
  margin-top: 70px;
}
#about p {
  font-size: 30px;
  margin-top: 90px;
  text-align: center;
  color: #ffffff;
}
#about span {
  color: #b36b00;
}
#about h1 {
  text-align: center;
  color: #b30000;
  text-shadow: 4px 2px 4px black;
}
#about img {
  border-radius: 50%;
  align: middle;
  height: 300px;
  width: 300px;
  padding: 30px;
  margin-top: 40px;
}
#portfolio {
  background: url("http://p1.pichost.me/i/28/1514076.jpg") center center fixed;
  height: 1100px;
  margin: -50px;
  background-size: contain;
  text-align: center;
}
#portfolio h1 {
  margin-top: 250px;
  color: white;
  text-shadow: 4px 2px 4px black;
}
#portfolio h4 {
  color: red;
}
#portfolio img {
  height: 200px;
  border-radius: 20px;
}
#portfolio h3 {
  color: #737373;
}

.footer {
  height: 80px;
  background-color: #999999;
  padding-top: 10px;
}

.footer ul li {
  text-color: white;
  font-size: 14px;
  display: inline;
  margin: 10px 10px 10px 10px;
}

.footer p {
  font-size: 14px;
  margin: 10px 10px 10px 50px;
}
#con {
  text-align: left;
  font-size: 17px;
  font-family: Sans-serif;
}
#con:hover {
  color: green;
  text-display: "sroy8091@gmail.com";
}

styles

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