Skip to main content

Archive

Show more

Portfolio Landing Page With Animation And Responsiveness | HTML, CSS, jQuery And GSAP

by Rustcode
Responsive-Portfolio-Landing-Page-Design-With-Animation-HTML-CSS-JQUERY-And-GSAP

Responsive Portfolio Landing Page Design With Animation | HTML, CSS, jQuery And GSAP

"Responsive Portfolio Landing Page" is designed using HTML CSS jQuery and gsap. You will understand all the technologies used in this article further. This portfolio is fully responsive and also has animation.

Let's take an overview of this portfolio design and animation. This portfolio has a menu with a logo. Plus the navigation bar (menu) is fully responsive. We have used jQuery to make it robust and responsive. Next, we have an image and a title, and a description in the landing page content. In addition, we have social media icons. All elements have gsap animation with responsiveness.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Portfolio Landing Page With Animation | Rustcode</title>    
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


02. HTML

To make this portfolio, we have included some external files inside the HTML document, so let us discuss them one by one and include them in the HTML document.

In this portfolio we have implemented animation, so for this, we have used GSAP library, you can copy and paste this link in the document. For complete details of GSAP visit the official website. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>


We've also added developer's social media links to the portfolio, so used Font-Awesome to show social media icons. Please include the link given below in the HTML head section 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


We have also used Jquery in this HTML document to make the navigation bar of the website more perfect and responsive. The link to the jquery is given below and paste it just above the </body> in the bottom section of the HTML document. By the way, you can check our responsive navigation bar playlist. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


After including everything in the document, it will look like this even though we haven't written anything about the developer portfolio yet. 

<html lang="en">
<head>
 <title>Portfolio Landing Page Design | Rustcode</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="style.css">
</head>
<body>

  main content.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>


Now let's write the body content of the developer portfolio. you can download the developer image from the Github link. 

<body>
<div id="nav-container">
  <div class="navbar">
    <div class="logo">
      <h1><i>ZB.</i></h1>
    </div>
    <div class="nav-link">
      <a href="#">Home</a>
      <a href="#">Work</a>
      <a href="#">Experince</a>
      <a href="#">Price</a>
      <a href="#">Blog</a>
    </div>
    <div class="menu-btn-container">
      <span id="menu-btn" class="fa fa-bars"></span>
    </div>
  </div>
</div>

<div class="content-container">
  <div class="portfolio-text-container">
    <h1>HEY, MY NAME IS ZUCKERBERG</h1>
    <h3>I AM AN <span style="color: #E9ECF5;">WEBSITE DEVELOPER</span></h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo magna at dignissim accumsan. Duis ultricies pretium porta. Etiam eget sagittis arcu. Quisque at orci sed odio ullamcorper pellentesque.
    </p>
    <div class="social-media-container">
      <i class="fa fa-youtube-play"></i>
      <i class="fa fa-instagram"></i>
      <i class="fa fa-linkedin-square"></i>
      <i class="fa fa-facebook-square"></i>
    </div>
  </div>
  <div class="portfolio-image-container">
    <img src="profile.png">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="script.js"></script>
</body>


03. CSS

Now let's write the CSS code, first import the font-family with google font API and the font-family name is "Poppins". You can also use the given link. 

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


This is a simple CSS of the portfolio landing page. Now the portfolio is not responsive. 

*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

body{
  padding: 0px;
  margin: 0px;
  font-family: "Poppins", sans-serif;
  background: #11998E;
  background: linear-gradient(to right, #38EF7D, #11998E);
  background: -webkit-linear-gradient(to right, #38EF7D, #11998E);
}

#nav-container{
  position: relative;
  width: 100%;
  background: rgba(0, 0, 0, 0.09);
  height: 100px;
}

.logo h1{
  color: #2F4858;
}

.navbar{
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: row;
  height: 100px;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  padding: 0px 10px 0px 10px;
}

.nav-link > a{
  text-decoration: none;
  margin-left: 50px;
  font-weight: 600;
  color: #EAFFDA;
}

.nav-link a:hover{
  color: #2F4858 !important;
}

.menu-btn-container{
  display: none;
}

.content-container{
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.portfolio-text-container{
  width: 45%;
  color: #111 !important;
}

.portfolio-image-container{
  width: 50%;
}

.portfolio-image-container img{
  width: 100%;
}

.portfolio-text-container h1{
  text-transform: uppercase;
  padding: 10px 0px;
  font-size: 46px;
  line-height: 1.1em;
}

.portfolio-text-container h3{
  text-transform: uppercase;
  padding: 0px 0px;
  font-size: 32px;
  color: #2F4858;
}

.portfolio-text-container p{
  padding: 10px 0px;
  text-align: justify;
  font-weight: 600;
  color: #2F4858;
}

.social-media-container > .fa{
  margin-top: 10px;
  font-size: 20px;
  margin-right: 20px;
  color: #2F4858;
  cursor: pointer;
  transition: transform 0.5s;
}

.social-media-container > .fa:hover{
  transform: translateY(-3px);
}


We wrote code to align web page elements on the big screen but this time we'll write media query code to make it responsive mean align of web page elements for small devices (Like mobile tablet etc). 

@media screen and (max-width: 1050px) {
  .navbar{
    width: 94%
  }
  .content-container{
    width: 94%
  }
}


@media screen and (max-width: 760px) {
  .portfolio-text-container,
  .portfolio-image-container{
    width: 100%;
  }
  .content-container{
    flex-direction: column-reverse;
    margin-bottom: 40px;
  }
  .menu-btn-container{
    display: block;
  }
  .nav-link{
    position: absolute;
    top: 100px;
    left: 0px;
    right: 0px;
    width: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: auto;
    background: #2F4858;
    z-index: 2;
  }
  .nav-link > a{
    padding: 30px;
    margin: 0px;
    width: 100%;
  }
  .nav-link > a:hover{
    background: #38EF7D;
  }
  #menu-btn{
    cursor: pointer;
    font-size: 40px;
    color: #EAFFDA !important
  }

}


04. JAVASCRIPT

We are using two JavaScript plugins to make this portfolio more responsive, robust. The first is jQuery and the second is GSAP. We are using GSAP to create animations. We have already included both scripts in the HTML section.

First, we'll write gsap code for animation. 

gsap.from(".logo > h1", 0.8, {
  delay: 0.2,
  opacity: 0,
  x: -20,
  ease: Expo.easeInOut
});

gsap.from("#menu-btn", 0.8, {
  delay: 0.3,
  opacity: 0,
  x: -20,
  ease: Expo.easeInOut
});

gsap.from(".nav-link > a", 1.2, {
  delay: 0.4,
  opacity: 0,
  stagger: 0.2,
  x: -20,
  ease: Expo.easeInOut
});

gsap.from("img", 2.2, {
  delay: 0.6,
  opacity: 0,
  y: 80,
  ease: Power4.easeInOut
});

gsap.from(".social-media-container > *", 1, {
  delay: 1.2,
  opacity: 0,
  stagger: 0.2,
  x: -20,
  ease: Expo.easeInOut
});

gsap.from(".portfolio-text-container > *", 1.6, {
  delay: .2,
  opacity: 0,
  stagger: 0.2,
  y: 80,
  ease: Power4.easeInOut
});


Now it's time to write the jQuery code. We are using Jquery to make the menu responsive. 

$("#menu-btn").click(function(e){
  e.preventDefault();

  if ($(".nav-link").css("display") === "none") {
    $(".nav-link").css("display", "flex");
    $(this).removeClass("fa-bars").addClass("fa-times");
  }
  else{
    $(".nav-link").css("display", "none");
    $(this).removeClass("fa-times").addClass("fa-bars");
  }
});

$(window).resize(function(){
  winWidth = $(window).width();
  if(winWidth > 760){
    $(".nav-link").css("display", "flex");
  }
  if(winWidth <= 760 && ($("#menu-btn").hasClass("fa-bars"))){
    $(".nav-link").css("display", "none");
  }
});


05. Youtube Video



06. SOURCE CODE



Comments

Post a Comment