Build a Personal Portfolio Website (Step-by-Step)

In today’s digital world, having a personal portfolio website is one of the best ways to showcase your skills, projects, and experience — whether you’re a web developer, designer, student, or freelancer.

In this blog, you’ll learn how to create your own professional portfolio website using just HTML, CSS, and a bit of JavaScript — no frameworks or complex tools required.

🎯 What You’ll Learn:

How to set up a project structure
Creating sections: Home, About, Projects, Contact
Making it responsive
Hosting it online for free

📁 Step 1: Setup Your Project Files

Create a folder called portfolio and inside it, create:

index.html
style.css
script.js (optional for interactivity)
images/ (store your profile photo or project images)

🧱 Step 2: Basic HTML Structure

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>My Portfolio</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <h1>Hi, I'm Dhairya</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <section id="about">
    <h2>About Me</h2>
    <p>I’m a passionate web developer who loves to build websites and apps using HTML, CSS, JavaScript, and more!</p>
  </section>

  <section id="projects">
    <h2>My Projects</h2>
    <ul>
      <li>💻 Typing Speed Test</li>
      <li>🛒 E-Commerce Website</li>
      <li>📓 To-Do App</li>
    </ul>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>Email me at: <a href="mailto:example@email.com">example@email.com</a></p>
  </section>

  <footer>
    <p>© 2025 Dhairya | Expert Snippet</p>
  </footer>
</body>
</html>

🎨 Step 3: Add Styling with CSS

css
body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
}

header {
  background: #111;
  color: #fff;
  padding: 20px;
  text-align: center;
}

nav a {
  margin: 0 10px;
  color: #00d9ff;
  text-decoration: none;
}

section {
  padding: 40px;
}

footer {
  background: #222;
  color: white;
  text-align: center;
  padding: 10px;
}

📱 Step 4: Make It Responsive

Add this inside your style.css:

css
@media (max-width: 600px) {
  nav a {
    display: block;
    margin: 10px 0;
  }

  section {
    padding: 20px;
  }
}

🌍 Step 5: Host It Online for Free

You can publish your portfolio using GitHub Pages:

Create a GitHub repo
Upload your files
Go to Settings > Pages
Choose the branch (main) and root
Your website is live at: https://yourusername.github.io/portfolio/

🚀 Bonus Tips

Add animations with AOS or CSS transitions
Use Google Fonts for better typography
Add a contact form using Formspree or Netlify Forms

✅ Conclusion

You just built a clean and professional portfolio website from scratch! Keep adding projects, skills, and blog posts to make it even better. A strong portfolio boosts your chances in job applications and freelancing gigs.

💬 Got stuck or want an advanced version with themes and project filters? Comment below and I’ll help you out!