Create a Personal Portfolio Website Using HTML CSS & JavaScript - For Beginners

Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials. 

Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.

You can also visit my GitHub where I upload all the code I have.

In this tutorial topic "Create a Personal Portfolio Website Using HTML CSS & JavaScript - For Beginners", we will learn how to create it following these simple easy steps.

Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments. 

Get Source Code.

If interested in watching the video before running the code below, you can click the play button to get started.

Code Begins

1. First, create a folder with any name you like. Then, make the necessary files inside it.
2. Create a file called index.html to serve as the main file.
3. Create a file called style.css for the CSS code.
4. Create a file called script.js for the JavaScript code.

To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout. 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alex | Script Writer Portfolio</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <script
      type="module"
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
    ></script>
  </head>
  <body>
    <header>
      <nav class="navbar">
        <a href="" class="logo">John <span>Doe</span></a>

        <ul class="nav-menu">
          <li class="nav-item">
            <a href="#home" class="nav-link active">Home</a>
          </li>
          <li class="nav-item">
            <a href="#services" class="nav-link">Services</a>
          </li>
          <li class="nav-item">
            <a href="#skills" class="nav-link">Skills</a>
          </li>
          <li class="nav-item">
            <a href="#education" class="nav-link">Education</a>
          </li>
          <li class="nav-item">
            <a href="#experience" class="nav-link">Experience</a>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">Contact</a>
          </li>
        </ul>

        <div class="hamburger">
          <ion-icon name="menu-outline"></ion-icon>
        </div>
      </nav>
    </header>

    <section class="hero">
      <div class="container hero-container">
        <div class="hero-image">
          <div class="img-glow"></div>
          <img src="./hero-image.jpg" alt="John Doe" />
        </div>

        <div class="hero-content">
          <h1>Hi, It's John <span>Doe</span></h1>
          <h3 class="typing-text">
            I'm a <span class="accent-text">Frontend Developer</span
            ><span class="cursor">|</span>
          </h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus
            labore-khaso eos. Odit similique doloribus tenetur doloremque sunt
            commodi in ipsa repudiandae debitis exercitationem quibusdam.
          </p>

          <div class="social-icons">
            <a href="#"><ion-icon name="logo-linkedin"></ion-icon></a>
            <a href="#"><ion-icon name="logo-github"></ion-icon></a>
            <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
            <a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
          </div>

          <a href="#contact" class="btn">Hire me</a>
        </div>
      </div>
    </section>

    <script src="script.js"></script>
  </body>
</html>

Next, add the following CSS codes to your style.css file to make website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website. 

CSS

/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
  --bg-color: #000000; 
  --text-color: #ffffff;
  --main-color: #ff0033; 
  --gray-text: #b3b3b3;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 10%;
  background: transparent;
  z-index: 100;
  backdrop-filter: blur(20px);
}

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

.logo {
  font-size: 25px;
  color: var(--text-color);
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}

.logo span {
  color: var(--main-color);
}

.logo:hover {
  color: var(--main-color);
}

.nav-menu {
  display: flex;
}

.nav-menu a {
  font-size: 16px;
  color: var(--text-color);
  margin-left: 35px;
  font-weight: 500;
  transition: 0.3s;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--main-color);
}

.hamburger {
  display: none;
  cursor: pointer;
}

.hamburger ion-icon {
  font-size: 35px;
}


.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5% 10%;
  position: relative;
}

.hero-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 50px;
}

.hero-image {
  position: relative;
  width: 450px;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image img {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;
}

.img-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--main-color);
  border-radius: 50%;
  z-index: 1;
  filter: blur(20px); 
  opacity: 0.6;
}

.hero-content {
  max-width: 600px;
}

.hero-content h1 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
}

.hero-content h1 span {
  color: var(--main-color);
}

.hero-content h3 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

.accent-text {
  color: var(--main-color);
}

.cursor {
  display: inline-block;
  color: var(--main-color);
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.hero-content p {
  font-size: 16px;
  margin-bottom: 30px;
  line-height: 1.8;
  color: var(--gray-text);
}

.social-icons {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}

.social-icons a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 2px solid var(--main-color);
  border-radius: 50%;
  font-size: 20px;
  color: var(--main-color);
  transition: 0.5s ease;
}

.social-icons a:hover {
  background: var(--main-color);
  color: var(--text-color);
  box-shadow: 0 0 20px var(--main-color);
}

.btn {
  display: inline-block;
  padding: 12px 28px;
  background: transparent; 
  border-radius: 40px;
  border: 2px solid var(--main-color);
  color: var(--main-color);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: 0.5s ease;
}

.btn:hover {
  background: var(--main-color);
  color: var(--text-color);
  box-shadow: 0 0 20px var(--main-color);
}

@media (max-width: 992px) {
  .hero-container {
    flex-direction: column;
    text-align: center;
    margin-top: 80px; 
  }

  .hero-image {
    width: 350px;
    height: 350px;
    margin-bottom: 30px;
  }

  .hero-content h1 {
    font-size: 40px;
  }

  .social-icons {
    justify-content: center;
  }

  /* Mobile Menu */
  .hamburger {
    display: block;
    z-index: 101;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: #111;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
  }

  .nav-menu.active {
    left: 0;
  }

  .nav-menu a {
    font-size: 24px;
    margin: 20px 0;
    margin-left: 0;
  }
}

Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.

JavaScript

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

// Toggle Mobile Menu
hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
});

// Close menu when a link is clicked
document.querySelectorAll(".nav-link").forEach((n) =>
  n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
  })
);


const textElement = document.querySelector(".accent-text");
const texts = ["Web Developer", "Full Stack Developer", "Frontend Developer"];
let count = 0;
let index = 0;
let currentText = "";
let letter = "";


(function type() {
    if (count === texts.length) {
        count = 0;
    }
    currentText = texts[count];
    letter = currentText.slice(0, ++index);
    
    textElement.textContent = letter;
    
    if (letter.length === currentText.length) {
        count++;
        index = 0;
        setTimeout(type, 2000); 
    } else {
        setTimeout(type, 150); 
    }
}());

Conclusion and Final word

Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create "a Personal Portfolio Website Using HTML CSS & JavaScript - For Beginners". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.

Happy Coding Journey 🚀