Creating a personal portfolio website is a great way to showcase your skills, projects, and experience. Whether you’re a developer, designer, or any other professional, a portfolio site can help you stand out. In this tutorial, we will build a simple, modern portfolio website using HTML, CSS, and JavaScript.

Project Overview

Features:

  1. A homepage with a brief introduction and a navigation menu.
  2. A “Projects” section to display your work.
  3. An “About” section with information about yourself.
  4. A “Contact” section with a contact form.
  5. Smooth scrolling for navigation.

Tools and Technologies Used

  • HTML: For structuring the web pages.
  • CSS: For styling the website.
  • JavaScript: For adding interactivity and smooth scrolling.

Step 1: Setting Up the Project

Create a directory for your project and create the following files inside it:

  • index.html – The HTML file for the structure of the portfolio.
  • styles.css – The CSS file for styling the website.
  • script.js – The JavaScript file for adding interactivity.

Step 2: Building the HTML Structure

Open the index.html file and set up the basic structure for our portfolio website.

				
					<!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="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="home" class="section">
        <h1>Welcome to My Portfolio</h1>
        <p>Hi, I'm [Your Name]. A passionate developer.</p>
    </section>

    <section id="projects" class="section">
        <h2>My Projects</h2>
        <div class="projects-container">
            <!-- Project 1 -->
            <div class="project">
                <h3>Project Title 1</h3>
                <p>Description of project 1.</p>
            </div>
            <!-- Project 2 -->
            <div class="project">
                <h3>Project Title 2</h3>
                <p>Description of project 2.</p>
            </div>
            <!-- Add more projects as needed -->
        </div>
    </section>

    <section id="about" class="section">
        <h2>About Me</h2>
        <p>This is where you can add information about yourself, your skills, and your experience.</p>
    </section>

    <section id="contact" class="section">
        <h2>Contact Me</h2>
        <form id="contact-form">
            <input type="text" placeholder="Your Name" required>
            <input type="email" placeholder="Your Email" required>
            <textarea placeholder="Your Message" required></textarea>
            <button type="submit">Send</button>
        </form>
    </section>

    <footer>
        <p>&copy; 2024 [Your Name]. All rights reserved.</p>
    </footer>

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

Step 3: Styling the Website with CSS

Next, let’s add some CSS to style our portfolio website. Open the styles.css file and add the following styles:

				
					/* styles.css */

/* Reset some default styles */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

nav ul {
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.section {
    padding: 20px;
    text-align: center;
    margin-top: 50px;
}

#home {
    background: #555;
    color: white;
    padding: 50px 0;
}

#projects {
    background: #e2e2e2;
}

.projects-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.project {
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px;
    width: 200px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#about {
    background: #f9f9f9;
}

#contact {
    background: #ddd;
}

form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    border: none;
    background: #333;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background: #555;
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

Step 4: Adding Interactivity with JavaScript

We will add smooth scrolling to our navigation menu using JavaScript. Open the script.js file and add the following code:

				
					// script.js

// Smooth scrolling for navigation links
document.querySelectorAll('nav ul li a').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const targetId = this.getAttribute('href').substring(1);
        const targetElement = document.getElementById(targetId);

        window.scrollTo({
            top: targetElement.offsetTop,
            behavior: 'smooth'
        });
    });
});

Explanation of the Code

  • HTML Structure: We created a basic structure with a header, multiple sections (home, projects, about, and contact), and a footer. Each section has an ID that corresponds to the navigation links, enabling smooth scrolling.
  • CSS Styling: We used CSS to style the header, sections, buttons, and the footer, giving the website a clean and modern look. The nav ul uses Flexbox for horizontal alignment, and the .projects-container uses Flexbox to align projects side-by-side.
  • JavaScript: We added an event listener to all navigation links to prevent the default action and enable smooth scrolling to the respective sections.

Step 5: Running the Portfolio Website

  • Save all the files: index.html, styles.css, and script.js.
  • Open the index.html file in your browser.
  • You should see a complete portfolio website with navigation, project display, an about section, and a contact form.

Conclusion

Congratulations! You’ve successfully built a simple portfolio website using HTML, CSS, and JavaScript. This project is a great starting point for creating a personal website to showcase your skills and projects. You can further enhance this site by:

  • Adding a back-end to handle form submissions (e.g., using PHP or a serverless function).
  • Implementing a responsive design to make it mobile-friendly.
  • Adding more interactive features using JavaScript or integrating third-party libraries.

Happy coding, and good luck with your portfolio!