Simple Responsive Fullpage Portfolio

Simple Responsive Fullpage Portfolio

HTML

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bgGradient sidebarNavigation">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse align-self-lg-start" id="navbarSupportedContent">
    <ul class="navbar-nav flex-lg-column mt-lg-5 w-100 justify-content-around text-center">
      <li class="nav-item active">
        <a class="nav-link h4" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link h4" href="#skills">Skills</a>
      </li>
      <li class="nav-item">
        <a class="nav-link h4" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="mainWrapper mt-lg-0  mt-5 pt-lg-0 pt-2">

  <section class="section bg-light" id="about" data-section-name="about">
    <div class="container">
     
      <div class="row">
        <div class="col-md-6 order-lg-2 order-md-2">
          <div class="imgContainer mx-auto p-2 rounded-circle border shadow">
            <img src="images/2.png" class="img-fluid rounded-circle bg-white p-2" alt="">
          </div>
        </div>
        <div class="col-md-6 order-lg-1 order-md-1">
          <div class="jumbotron bg-transparent">
            <h1>Hi There...! <br> I'm John Doe
            </h1>
            <div class="h6 text-muted text-justify my-4">I'm a freelance UI Developer, based in Toronto, Canada. I have worked with startups and established companies. <br>
            </div>
            <h4>I'm Passionate about my Work</h4>
            <button class="bgGradient btn btn-lg text-white px-5 py-2 mt-4 border-0 rounded-pill">Hire Me</button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="skills" data-section-name="skills">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1 class="text-left mb-2 text-muted text-center">Skills and Tools</h1>
        </div>
        <div class="col-md-12">
          <div class="skill my-5">
            <div class="title">HTML</div>
            <div class="progressBar" data-percentage="90">
              <span class="progress">
                <div class="percentage"></div>
              </span>
            </div>
          </div>
          <div class="skill my-5">
            <div class="title">CSS</div>
            <div class="progressBar" data-percentage="85">
              <span class="progress">
                <div class="percentage"></div>
              </span>
            </div>
          </div>
          <div class="skill my-5">
            <div class="title">Javascript</div>
            <div class="progressBar" data-percentage="70">
              <span class="progress">
                <div class="percentage"></div>
              </span>
            </div>
          </div>

          <div class="skill my-5">
            <div class="title">Jquery</div>
            <div class="progressBar" data-percentage="80">
              <span class="progress">
                <div class="percentage"></div>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="contact" data-section-name="contact">
    <div class="container">
       <div class="row">
        <div class="col-md-12">
          <h3 class="ff-russo text-center my-5 text-muted">Intrested In Hiring Me For Your Project ?</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <h1 class="text-center text-center text-muted mb-5">Get In Touch</h1>
        </div>
        <div class="col-md-12">
          <form>
            
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
                
              </div>
              <div class="col-md-12">
                <textarea name="message" cols="30" rows="10" class="form-control" palceholder="Enter Message"></textarea>
              </div>
              <div class="col-md-12">
                <div class="text-center">
                  <button class="bgGradient btn btn-lg text-white px-5 py-2 mt-4 border-0 rounded-pill" type="submit">Send</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Russo+One');
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}
$color1:#df3284;
$color2:#784ff4;
$color3:#9192a4;
$bg1:#f1eff9;
$white:#ffffff;
*{
  font-family: 'Montserrat', sans-serif;
}
.ff-russo{
  font-family: 'Russo One', sans-serif;
}
.bgGradient{
  background-image:linear-gradient($color1,$color2);
}
@media (min-width:992px){
  .sidebarNavigation{
    position:fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    margin:auto;
    min-width:rem(250px);
  }
  .mainWrapper{
    margin-left:rem(250px);
  }
}

.form-control{
  border-color:$color2;
  color:$color2;
  &:focus{
    box-shadow:none;
    border-color:$color2;
  }
  &::placeholder{
    color:$color2;
  }
}

.section{
  display: flex;
  align-items: center;
}

.imgContainer{
  max-width:300px;
}


.skill{
  .title{
    @extend .ff-russo;
  }
  .progressBar{
    height:rem(4px);
    position:relative;
    overflow:hidden;
    background-color: darken($white,10%);
    overflow:visible;
    .progress{
      position:absolute;
      background-image:linear-gradient(90deg,$color1,$color2);
      width:0;
      top: 0;
      bottom: 0;
      left: 0;
      display: inline-flex;
      height: 100%;
      transition:all ease 1s;
      overflow:visible;
      .percentage{
        position:absolute;
        bottom:100%;
        padding:2px 4px;
        color:$color2;
        right: 0;
        margin:auto;
        width: rem(30px);
        height: rem(20px);
        text-align:center;
        @extend .ff-russo;
      }
    }
  }
}

CSS

@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://fonts.googleapis.com/css?family=Russo+One");
* {
  font-family: "Montserrat", sans-serif;
}

.ff-russo, .skill .progressBar .progress .percentage, .skill .title {
  font-family: "Russo One", sans-serif;
}

.bgGradient {
  background-image: linear-gradient(#df3284, #784ff4);
}

@media (min-width: 992px) {
  .sidebarNavigation {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    margin: auto;
    min-width: 15.625rem;
  }

  .mainWrapper {
    margin-left: 15.625rem;
  }
}
.form-control {
  border-color: #784ff4;
  color: #784ff4;
}
.form-control:focus {
  box-shadow: none;
  border-color: #784ff4;
}
.form-control::placeholder {
  color: #784ff4;
}

.section {
  display: flex;
  align-items: center;
}

.imgContainer {
  max-width: 300px;
}

.skill .progressBar {
  height: 0.25rem;
  position: relative;
  overflow: hidden;
  background-color: #e6e6e6;
  overflow: visible;
}
.skill .progressBar .progress {
  position: absolute;
  background-image: linear-gradient(90deg, #df3284, #784ff4);
  width: 0;
  top: 0;
  bottom: 0;
  left: 0;
  display: inline-flex;
  height: 100%;
  transition: all ease 1s;
  overflow: visible;
}
.skill .progressBar .progress .percentage {
  position: absolute;
  bottom: 100%;
  padding: 2px 4px;
  color: #784ff4;
  right: 0;
  margin: auto;
  width: 1.875rem;
  height: 1.25rem;
  text-align: center;
}

JAVASCRIPT

$(document).ready(function() {
  $(function() {
    $.scrollify({
      section: ".section",
      before:function(index,section){
        $(".sidebarNavigation .nav-item").on("click",function(){
          $(".sidebarNavigation .nav-item").removeClass("active");
          $(this).addClass("active");
        });
      },
      after:function(index,section){
        $(".sidebarNavigation .nav-item").each(function(i,navItem){
          i==index?$(navItem).addClass("active"):$(navItem).removeClass("active");
        });
    }
    });
  });
  $(".sidebarNavigation a").on("click", $.scrollify.move);
  $(".progressBar").each(function(index, progressBar) {
    let value = $(progressBar).attr("data-percentage");
    $(progressBar)
      .find(".progress")
      .css("width", value + "%");
    $(progressBar)
      .find(".progress .percentage")
      .text(value + "%");
  });
});

 

Add a Comment

Your email address will not be published. Required fields are marked *