Personal Portfolio Website: A Step-by-Step Guide with HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to create a stunning personal portfolio website with this step-by-step guide using HTML, CSS, and JavaScript. Perfect for showcasing your skills and work.

Join us on Telegram
creating a personal portfolio website a step-by-step guide with html, css, and javascript.jpg
Read Alsocreating a stunning portfolio website from scratch using html, css, and javascript.jpgCreating a Stunning Portfolio Website from Scratch using HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Preview
  6. Conclusion

A personal portfolio landing page is a website that showcases your work, skills, and experience in a professional manner. It's a digital portfolio that allows potential clients or employers to learn more about you and your work. Personal portfolio landing pages typically include examples of your work, your professional background, and your contact information.

Personal portfolio landing pages are important because they can help you stand out in a crowded job market. They provide an opportunity to showcase your skills and experience in a way that is tailored to your personal brand. Having a personal portfolio landing page can also help you demonstrate your skills to potential clients or employers, even if you don't have a lot of work experience.

In addition, personal portfolio landing pages can be accessed from anywhere at any time, which means that potential clients or employers can view your work and contact information at their convenience. This makes it easier for them to learn more about you and potentially reach out for further discussion or opportunities.

Benefits of having a personal portfolio landing page

Having a personal portfolio landing page offers a number of benefits, including:

  1. Showcasing your work: A personal portfolio landing page allows you to showcase your work in a way that highlights your skills and experience. You can display your best work, explain your creative process, and highlight your achievements.
  2. Standing out in a crowded job market: In today's competitive job market, having a personal portfolio landing page can help you stand out from other candidates. It can demonstrate your skills and experience in a way that sets you apart from other applicants.
  3. Demonstrating your skills: A personal portfolio landing page can demonstrate your skills to potential clients or employers, even if you don't have a lot of work experience. It can showcase your ability to create visually appealing designs, write compelling content, or develop complex applications.
  4. Providing a central location for your work: A personal portfolio landing page provides a central location for your work, making it easy for potential clients or employers to access your work and contact information.
  5. Improving your online presence: Having a personal portfolio landing page can help improve your online presence by showcasing your work and providing a professional image. This can be particularly helpful if you are freelancing or looking for new job opportunities.

Overall, a personal portfolio landing page is an effective way to showcase your work, stand out in a crowded job market, and demonstrate your skills to potential clients or employers.

Creating a personal portfolio landing page may seem like a daunting task, but it doesn't have to be. With the right tools and resources, anyone can create a stunning website that showcases their work in the best possible light. In this step-by-step guide, we will walk you through the process of creating a personal portfolio landing page using HTML, CSS, and JavaScript. We will cover everything from choosing a design and layout to adding interactivity with JavaScript. Whether you are a seasoned web developer or a beginner, this guide will provide you with the knowledge and skills you need to create a professional-looking personal portfolio landing page.

Let's start making an amazing responsive personal portfolio website using HTML, CSS, and JavaScript step by step.

Join My Telegram Channel to Download the Projects Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Code by: Akash Mahapatra

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our portfolio website.

After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

The code starts with the <!DOCTYPE html> declaration, which specifies the HTML version being used. This is followed by the html tag, which contains the rest of the document.

Inside the html tag, there is the head section, which includes metadata such as the page title, character encoding, and stylesheets. The meta tag defines the character encoding and the viewport, which adjusts the page layout to fit different device sizes. The link tags load external stylesheets, including Font Awesome and Owl Carousel, which provide icon fonts and a responsive carousel.

The body section contains the page content, including the navigation bar (nav), several sections (section), and a scroll-to-top button (div).

Each section has a unique identifier (id) that can be used to link to that section from the navigation bar. The content of each section is defined by HTML tags such as h2, p, and a, which specify headings, paragraphs, and links, respectively. The sections also include classes (class) to apply CSS styles.

The script tags load external JavaScript, including Font Awesome icon library, jQuery JavaScript library, Typed.js library which provides typing animations, Waypoints library which allows you to trigger functions when an element in the page is scrolled to, and Owl Carousel library which provides a carousel slider

This is the basic structure of our portfolio website using HTML, and now we can move on to styling it using CSS.

Read Alsousing tailwind css to build accessible and responsive card component.jpgUsing Tailwind CSS to Build Accessible and Responsive Card Component

Step 2 (CSS Code):

Once the basic HTML structure of the portfolio website is in place, the next step is to add styling to the portfolio website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our portfolio website.

The below code is CSS code that defines the styling for a web page. Let's go through it section by section:

The first section sets default values for all elements on the page. It sets the margin and padding to 0, makes the box-sizing border-box, and removes text decoration.

The second section sets the scroll-behavior to smooth for the HTML element, which will enable smooth scrolling for the page.

The next few sections define the styles for the scroll bar on the page, including its width, background color, and appearance when hovered over.

The .loader_bg and .loader classes define styles for a loading screen that covers the entire page.

The .navbar class defines the styles for the navigation bar at the top of the page, including its position, z-index, padding, and font. It also defines the styles for the logo and menu items in the navbar.

The .menu-btn and .scroll-up-btn classes define styles for a menu button and a scroll-up button that appear on the page.

The .home class defines styles for the homepage of the website, including the background image and font.

The owl-dot.active style sets the width and border radius of active owl dots, while contact sets a radial gradient background for the contact section, and social-menu styles the appearance of social media icons in the footer.

The stylesheet also includes a media query, which adjusts the styling of certain elements when the screen size is below a certain width.

This will give our portfolio website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.loader_bg {
  position: fixed;
  z-index: 9999999;
  background: #fff;
  width: 100%;
  height: 100%;
}

.loader {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader img {
  width: 280px;
}

::-webkit-scrollbar-thumb {
  border-radius: 12px;
  background: linear-gradient(135deg, #f57308, #fff, rgb(11, 242, 7));
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #1a6ad2, #fff, rgb(245, 5, 53));
}

/*  Simillar  */

section {
  padding: 100px 0;
}

.max-width {
  max-width: 1300px;
  padding: 0 80px;
  margin: auto;
}

.about,
.services,
.skills,
.projects,
.contact,
footer {
  font-family: "Poppins", sans-serif;
}

.about .about-content,
.services .serv-content,
.skills .skills-content,
.contact .contact-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

section .title {
  position: relative;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 60px;
  padding-bottom: 20px;
  font-family: "Ubuntu", sans-serif;
}

section .title::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 180px;
  height: 3px;
  transform: translateX(-50%);
}

section .title::after {
  position: absolute;
  bottom: -8px;
  left: 50%;
  font-size: 20px;
  color: #1e3551;
  padding: 0 5px;
  transform: translateX(-50%);
}

/*  Navbar  */
.navbar {
  position: fixed;
  width: 100%;
  z-index: 999;
  padding: 30px 0;
  font-family: "Ubuntu", sans-serif;
  transition: all 0.3s ease;
}

.navbar.sticky {
  padding: 15px 0;
  background: #1e3551;
}

.navbar .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo a {
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}

/*  Nav Logo Span Linear-Gradient  */
.navbar .logo a span {
  background: linear-gradient(135deg, #041d3d, #fff, crimson);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease;
}

.navbar.sticky .logo a span {
  color: #fff;
}

.navbar .menu li {
  list-style: none;
  display: inline-block;
}

.navbar .menu li a {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}

.navbar .menu li a:hover {
  color: #1e3551;
}

.navbar.sticky .menu li a:hover {
  color: #fff;
}

/*  Menu Btn  */
.menu-btn {
  color: #fff;
  font-size: 23px;
  cursor: pointer;
  display: none;
}

.scroll-up-btn {
  position: fixed;
  height: 45px;
  width: 42px;
  background: #1e3551;
  right: 30px;
  bottom: 10px;
  text-align: center;
  line-height: 45px;
  color: #fff;
  z-index: 9999;
  font-size: 30px;
  border-radius: 6px;
  border-bottom-width: 2px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.scroll-up-btn.show {
  bottom: 30px;
  opacity: 1;
  pointer-events: auto;
}

.scroll-up-btn:hover {
  filter: brightness(90%);
}

/*  Home  */
.home {
  display: flex;
  background: url("https://source.unsplash.com/720x600/?dark,laptop") no-repeat
    center;
  height: 100vh;
  color: #fff;
  min-height: 500px;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Ubuntu", sans-serif;
}

.home .max-width {
  width: 100%;
  display: flex;
}

.home .max-width .row {
  margin-right: 0;
}

.home .home-content .text-1 {
  font-size: 27px;
}

.home .home-content .text-2 {
  font-size: 75px;
  font-weight: 600;
  margin-left: -3px;
}

.home .home-content .text-3 {
  font-size: 40px;
  margin: 5px 0;
}

/* Linear Gradient */
.home .home-content .text-3 span {
  color: #1e3551;
  background: linear-gradient(135deg, #041d3d, #fff, crimson);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}

.home .home-content a {
  display: inline-block;
  background: #1e3551;
  color: #fff;
  font-size: 25px;
  padding: 12px 36px;
  margin-top: 20px;
  font-weight: 400;
  border-radius: 6px;
  border: 2px solid #1e3551;
  transition: all 0.3s ease;
}

.home .home-content a:hover {
  color: #1e3551;
  background: none;
  animation: pulsate 1s ease-in-out;
}

/*  About  */
.about {
  background: radial-gradient(#e1efff, white);
}
.about .title::after {
  content: "—Who I Am ?—";
  text-overflow: ellipsis;
  display: -webkit-inline-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.about .about-content .left {
  width: 45%;
}

.about .about-content .left img {
  height: 400px;
  width: 400px;
  object-fit: cover;
  border-radius: 6px;
}

.about .about-content .right {
  width: 55%;
}

.about .about-content .right .text {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Linear Gradiant */
.about .about-content .right .text span {
  /* color: #1e3551; */
  background: linear-gradient(135deg, #041d3d, #fff, crimson);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about .about-content .right p {
  text-align: justify;
}

.about .about-content .right a {
  display: inline-block;
  background: #1e3551;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  padding: 10px 30px;
  margin-top: 20px;
  border-radius: 6px;
  border: 2px solid #1e3551;
  transition: all 0.3s ease;
}

.about .about-content .right a:hover {
  color: #1e3551;
  background: none;
  animation: pulsate 1s ease-in-out;
}

/*  Service  */
.services,
.projects {
  color: #fff;
  background: #111;
}

.services .title::before,
.projects .title::before {
  background: #fff;
}

.services .title::after,
.projects .title::after {
  background: #111;
  content: "What I Provide ?";
}

.services .serv-content .card {
  width: calc(33% - 20px);
  background: #222;
  text-align: center;
  border-radius: 10px;
  padding: 50px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.services .serv-content .card:hover {
  background: #1e3551;
}

.services .serv-content .card .box {
  transition: all 0.3s ease;
}

.services .serv-content .card:hover .box {
  transform: scale(1.05);
}

.services .serv-content .card i {
  font-size: 50px;
  color: #888e8d;
  background: linear-gradient(135deg, #041d3d, #fff, crimson);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: color 0.3s ease;
}

.services .serv-content .card:hover i {
  color: #fff;
}

.services .serv-content .card .text {
  font-size: 25px;
  font-weight: 500;
  margin: 10px 0 7px 0;
}

/*  Skills  */
.skills {
  background: radial-gradient(#e1efff, white);
}
.skills .title::after {
  content: "—What I Know ?—";
}

.skills .skills-content .column {
  width: calc(50% - 30px);
}

.skills .skills-content .left .text {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.skills .skills-content .left p {
  text-align: justify;
}

.skills .skills-content .left a {
  display: inline-block;
  background: #1e3551;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 16px;
  margin-top: 20px;
  border-radius: 6px;
  border: 2px solid #1e3551;
  transition: all 0.3s ease;
}

.skills .skills-content .left a:hover {
  color: #1e3551;
  background: none;
  animation: pulsate 1s ease-in-out;
}

.intern,
.project {
  list-style: none;
}

.intern::before,
.project::before {
  content: "✪ ";
  color: #1e3551;
}

.skills .skills-content .right .bars {
  margin-bottom: 15px;
}

.skills .skills-content .right .info {
  display: flex;
  margin-bottom: 5px;
  align-items: center;
  justify-content: space-between;
}

.skills .skills-content .right span {
  font-weight: 500;
  font-size: 18px;
}

.skills .skills-content .right .line {
  height: 5px;
  width: 100%;
  background: lightgrey;
  position: relative;
}

.skills .skills-content .right .line::before {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  background: #1e3551;
}

.skills-content .right .python::before {
  width: 90%;
}

.skills-content .right .html::before {
  width: 80%;
}

.skills-content .right .css::before {
  width: 60%;
}

.skills-content .right .js::before {
  width: 40%;
}

.skills-content .right .bootstraps::before {
  width: 60%;
}

.skills-content .right .django::before {
  width: 70%;
}

/*  Projects  */
.projects .title::after {
  content: "What I did ?";
}

.projects .carousel .card {
  background: #222;
  border-radius: 6px;
  padding: 25px 35px;
  text-align: center;
  overflow: hidden;
  transition: all 0.3s ease;
}

.projects .carousel .card:hover {
  background: #1e3551;
}

.projects .carousel .card .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.projects .carousel .card:hover .box {
  transform: scale(1.05);
}

.projects .carousel .card .text {
  font-size: 25px;
  font-weight: 500;
  margin: 10px 0 7px 0;
}

.projects .carousel .card img {
  height: 150px;
  width: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #888c8d;
  transition: all 0.3s ease;
}

.projects .carousel .card:hover img {
  border-color: #fff;
}

.owl-dots {
  text-align: center;
  margin-top: 20px;
}

.owl-dot {
  height: 13px;
  width: 13px;
  margin: 0 5px;
  outline: none !important;
  border-radius: 50%;
  border: 2px solid #888c8d !important;
  transition: all 0.3s ease;
}

.owl-dot.active {
  width: 35px;
  border-radius: 14px;
}

.owl-dot.active,
.owl-dot:hover {
  background: #18365a !important;
}

/*  Contact  */
.contact {
  background: radial-gradient(#e1efff, white);
}

.contact .title::after {
  content: "—Get in Touch—";
}

.contact .contact-content .column {
  width: calc(50% - 30px);
}

.contact .contact-content .text {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.contact .contact-content .left p {
  text-align: justify;
}

.contact .contact-content .left .icons {
  margin: 10px 0;
}

.contact .contact-content .row {
  display: flex;
  height: 65px;
  align-items: center;
}

.contact .contact-content .row .info {
  margin-left: 30px;
}

.contact .contact-content .row i {
  font-size: 25px;
  color: #1e3551;
}

.contact .contact-content .info .head {
  font-weight: 500;
  color: #000;
}

.contact .contact-content .info .sub-title {
  color: #333;
}

.contact .right form .fields {
  display: flex;
}

.contact .right form .field,
.contact .right form .fields .field {
  height: 45px;
  width: 100%;
  margin-bottom: 15px;
}

.contact .right form .textarea {
  height: 80px;
  width: 100%;
}

.contact .right form .name {
  margin-right: 10px;
}

.contact .right form .field input,
.contact .right form .textarea textarea {
  height: 100%;
  width: 100%;
  border: 1px solid lightgrey;
  border-radius: 6px;
  outline: none;
  padding: 0 15px;
  font-size: 17px;
  font-family: "Poppins", sans-serif;
  transition: all 0.3s ease;
}

.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus {
  border-color: #b3b3b3;
}

.contact .right form .textarea textarea {
  padding-top: 10px;
  resize: none;
}

.contact .right form .button-area {
  display: flex;
  align-items: center;
}

.right form .button-area button {
  color: #fff;
  display: block;
  width: 160px !important;
  height: 45px;
  outline: none;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  flex-wrap: nowrap;
  background: #1e3551;
  border: 2px solid #1e3551;
  transition: all 0.3s ease;
}

.right form .button-area button:hover {
  color: #1e3551;
  background: none;
  animation: pulsate 1s ease-in-out;
}

/*  Social  */
.col-4 {
  background: #d8d8d8;
}

.social-menu ul {
  position: absolute;
  left: 20%;
  padding: 0;
  margin: 0;
  transform: translate(-50%, -50%);
  display: flex;
}

.social-menu ul li {
  list-style: none;
  margin: 0 15px;
}

.social-menu ul li .fa {
  font-size: 30px;
  line-height: 60px;
  transition: 0.6s;
  color: #000;
}

.social-menu ul li .fa:hover {
  color: #fff;
}

.social-menu ul li a {
  left: px;
  right: 12px;
  padding-top: 3px;
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #1e3551;
  text-align: center;
  transition: 0.6s;
  box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);
}

.social-menu ul li a:hover {
  transform: translate(0, -10px);
}

.social-menu ul li:nth-child(1) a:hover {
  background-color: #131418;
}

.social-menu ul li:nth-child(2) a:hover {
  background-color: #0a66c2;
}

.social-menu ul li:nth-child(3) a:hover {
  background-color: #e4405f;
}
.social-menu ul li:nth-child(4) a:hover {
  background-color: #1da1f2;
}

.social-menu ul li:nth-child(5) a:hover {
  background-color: #e33054;
}

.social-menu ul li:nth-child(6) a:hover {
  background-color: #fc4f08;
}

.fa-brands {
  color: #fff;
}

.fa-solid {
  color: #fff;
}

/*  Footer  */
footer {
  background: #111;
  padding: 6px 16px;
  color: #888c8d;
  text-align: center;
}

footer span a {
  color: #1e3551;
  text-decoration: none;
}

footer span a:hover {
  text-decoration: underline;
}

/*  Media Query  */
@keyframes pulsate {
  0% {
    box-shadow: 0 0 25px #888e8d, 0 0 50px #1e3551;
  }
}

@media (max-width: 1104px) {
  .about .about-content .left img {
    height: 350px;
    width: 350px;
  }
  section .title::after {
    bottom: -8px;
    font-size: 16px;
  }
}

@media (max-width: 991px) {
  .social-menu ul li a {
    left: 114px;
  }
}

@media (max-width: 947px) {
  .menu-btn {
    display: block;
    z-index: 999;
  }
  .menu-btn i.active:before {
    content: "\f00d";
  }
  .navbar .menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: -100%;
    top: 0;
    background: #111;
    text-align: center;
    padding-top: 80px;
    transition: all 0.3s ease;
  }
  .navbar .menu.active {
    left: 0;
  }
  .navbar .menu li {
    display: block;
  }
  .navbar .menu li a {
    display: inline-block;
    margin: 20px 0;
    font-size: 25px;
  }
  .home .home-content .text-2 {
    font-size: 70px;
  }
  .home .home-content .text-3 {
    font-size: 35px;
  }
  .home .home-content a {
    font-size: 23px;
    padding: 10px 30px;
  }
  .max-width {
    max-width: 930px;
  }
  .about .about-content .column {
    width: 100%;
  }
  .about .about-content .left {
    display: flex;
    justify-content: center;
    margin: 0 auto 60px;
  }
  .about .about-content .right {
    flex: 100%;
  }
  .services .serv-content .card {
    width: calc(50% - 10px);
    margin-bottom: 20px;
  }
  .skills .skills-content .column,
  .contact .contact-content .column {
    width: 100%;
    margin-bottom: 35px;
  }
}

@media (max-width: 690px) {
  .max-width {
    padding: 0 23px;
  }
  .home .home-content .text-2 {
    font-size: 60px;
  }
  .home .home-content .text-3 {
    font-size: 32px;
  }
  .home .home-content a {
    font-size: 20px;
  }
  .services .serv-content .card {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .home .home-content .text-2 {
    font-size: 50px;
  }
  .home .home-content .text-3 {
    font-size: 27px;
  }
  .about .about-content .right .text,
  .skills .skills-content .left .text {
    font-size: 19px;
  }
  .contact .right form .fields {
    flex-direction: column;
  }
  .contact .right form .name,
  .contact .right form .email {
    margin: 0;
  }
  .right form .error-box {
    width: 150px;
  }
  .scroll-up-btn {
    right: 15px;
    bottom: 15px;
    height: 38px;
    width: 35px;
    font-size: 23px;
    line-height: 38px;
  }
}

Step 3 (JavaScript Code):

Finally, we need to create an interactivity function in JavaScript.

The below code is a JavaScript script that performs several functions on a webpage.

Firstly, it uses jQuery to detect when the page has finished loading and then listens for any scrolling activity on the page. When the user scrolls, it checks if the user has scrolled more than 20 pixels from the top of the page, and if so, it adds a "sticky" class to the navbar to keep it fixed at the top of the page. It also checks if the user has scrolled more than 500 pixels down the page, and if so, it adds a class to a scroll-up button to make it visible.

When the user clicks on the scroll-up button, it animates the page to smoothly scroll back to the top of the page. The script also toggles smooth scrolling behavior on and off depending on whether the user clicks on a menu item or the scroll-up button.

The script also provides a typing animation effect using a JavaScript library called Typed.js. This effect displays a sequence of strings with a typing animation and loops through them continuously.

Finally, the script uses another JavaScript library called Owl Carousel to create a responsive image carousel that displays a set of images with a configurable number of items visible at different screen sizes.

Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

$(document).ready(function () {
  $(window).scroll(function () {
    //  sticky navbar on scroll script  //
    if (this.scrollY > 20) {
      $(".navbar").addClass("sticky");
    } else {
      $(".navbar").removeClass("sticky");
    }

    //  scroll-up button show/hide script  //
    if (this.scrollY > 500) {
      $(".scroll-up-btn").addClass("show");
    } else {
      $(".scroll-up-btn").removeClass("show");
    }
  });

  //  slide-up script  //

  $(".scroll-up-btn").click(function () {
    $("html").animate({ scrollTop: 0 });
    //  removing smooth scroll on slide-up button click  //
    $("html").css("scrollBehavior", "auto");
  });

  $(".navbar .menu li a").click(function () {
    //  Smooth scroll on Menu Items click  //

    $("html").css("scrollBehavior", "smooth");
  });

  //  Toggle Navbar  //

  $(".menu-btn").click(function () {
    $(".navbar .menu").toggleClass("active");
    $(".menu-btn i").toggleClass("active");
  });

  //  Typing Text Animation  //

  var typed = new Typed(".typing", {
    strings: [
      "Fullstack Developer",
      "Software Developer",
      "Python Developer",
      "Founder",
      "Author"
    ],
    typeSpeed: 100,
    backSpeed: 60,
    loop: true
  });

  var typed = new Typed(".typing-2", {
    strings: [
      "Fullstack Developer",
      "Software Developer",
      "Python Developer",
      "Founder",
      "Author"
    ],
    typeSpeed: 100,
    backSpeed: 60,
    loop: true
  });

  //  Owl Carousel  //

  $(".carousel").owlCarousel({
    margin: 20,
    loop: true,
    autoplay: true,
    autoplayTimeOut: 2000,
    autoplayHoverPause: true,
    responsive: {
      0: {
        items: 1,
        nav: false
      },
      600: {
        items: 2,
        nav: false
      },
      1000: {
        items: 3,
        nav: false
      }
    }
  });
});

Final Output:

creating a personal portfolio website a step-by-step guide with html, css, and javascript.gif
Read Alsosquid-game-loader.pngCSS Loaders: Creating Squid Game-Inspired Animations Using HTML and CSS

Conclusion:

In this guide, we have shown you how to create a personal portfolio landing page using HTML, CSS, and JavaScript. We started by choosing a design and layout that reflects your personal brand, and then moved on to creating the HTML structure and styling the website with CSS. We also covered how to add interactivity with JavaScript and how to test and launch your website.

Creating a personal portfolio landing page is a great way to showcase your work, skills, and experience to potential clients or employers. It's a digital resume that can be accessed from anywhere at any time, and it can help you stand out in a crowded job market. By following the steps outlined in this guide, you can create a professional-looking website that showcases your work in the best possible light.

However, this guide is just the beginning. There are always ways to improve your personal portfolio landing page and make it even more effective. Consider adding new projects or updating your existing work to keep your website fresh and relevant. You can also explore new design trends and technologies to keep your website up-to-date.

We hope that this guide has been helpful in getting you started on creating your own personal portfolio landing page. Remember, the key to success is to showcase your work in a clear and concise manner that reflects your personal brand. Good luck!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: personal portfolio, landing page, html, css, javascript, design, personal portfolio landing page design, creating a portfolio website with html;css; and javascript, portfolio website layout, how to create a personal portfolio website, step-by-step guide for personal portfolio landing pages
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post