Responsive Personal Portfolio Website Using HTML, CSS & JavaScript

Beginner 6 views Jul 10, 2026
Modern responsive personal portfolio website built with HTML, CSS, and JavaScript featuring animated hero section, skills, projects, and contact form.

Want to build a stunning personal portfolio website that showcases your skills, projects, and professional experience? In this comprehensive tutorial, you'll learn how to create a fully responsive portfolio website from scratch using HTML, CSS, and JavaScript.

This project is perfect for beginners learning web development, students building their first portfolio, job seekers wanting to impress employers, and developers looking to create their professional online presence.

By the end of this guide, you'll have a modern, interactive portfolio website with smooth animations, responsive design, and all the essential sections to showcase your work effectively.

What You'll Learn

In this tutorial, you'll learn:

  • How to structure a professional portfolio using HTML5 semantic elements

  • How to create responsive layouts using CSS Flexbox and Grid

  • How to implement interactive features with JavaScript

  • How to create smooth scrolling navigation

  • How to build animated typing effects

  • How to design skill progress bars with animation

  • How to make a mobile-friendly hamburger menu

  • How to create a working contact form

Features of This Portfolio Website

✔ Fully responsive design for all devices

✔ Smooth scrolling navigation with active states

✔ Animated typing effect with multiple roles

✔ Skill bars with scroll-triggered animation

✔ Project showcase with tags and links

✔ Working contact form with validation

✔ Social media integration

✔ Modern gradient hero background

✔ Professional about section with stats

✔ Mobile-friendly hamburger menu

Prerequisites

Before starting, you should know the basics of:

  • HTML

  • CSS

  • JavaScript

You will also need:

  • Visual Studio Code (or any code editor)

  • A modern web browser

  • Basic understanding of Git (optional, for deployment)

Project Structure

Create the following files and folders:

TEXT 
portfolio-website/
├── index.html
├── style.css
├── script.js
└── assets/
    ├── profile.jpg
    ├── project1.jpg
    ├── project2.jpg
    └── project3.jpg

Step 1: Create the HTML Structure

Create an index.html file and add the following code:

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>John Doe | Full-Stack Developer Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>

    <!-- ========== NAVIGATION ========== -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="logo">JD<span>.</span></a>
            <ul class="nav-links" id="navLinks">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <button class="hamburger" id="hamburger" aria-label="Toggle navigation">
                <i class="fa-solid fa-bars"></i>
            </button>
        </div>
    </nav>

    <!-- ========== HERO SECTION ========== -->
    <section id="home" class="hero">
        <div class="hero-container">
            <div class="hero-content">
                <span class="greeting">👋 Hello, I'm</span>
                <h1>John Doe</h1>
                <h2 class="typing-text"></h2>
                <p>Building beautiful, responsive, and user-friendly web experiences.</p>
                <div class="hero-buttons">
                    <a href="#projects" class="btn-primary">View My Work</a>
                    <a href="#contact" class="btn-secondary">Contact Me</a>
                </div>
                <div class="social-links">
                    <a href="#" aria-label="GitHub"><i class="fa-brands fa-github"></i></a>
                    <a href="#" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
                    <a href="#" aria-label="Twitter"><i class="fa-brands fa-twitter"></i></a>
                </div>
            </div>
            <div class="hero-image">
                <img src="assets/profile.jpg" alt="John Doe - Developer Profile Photo">
            </div>
        </div>
    </section>

    <!-- ========== ABOUT SECTION ========== -->
    <section id="about" class="about">
        <div class="container">
            <h2 class="section-title">About Me</h2>
            <div class="about-grid">
                <div class="about-text">
                    <p>I'm a passionate Full-Stack Developer with 3+ years of experience building web applications. I love creating clean, efficient, and user-centric digital solutions.</p>
                    <p>My journey in tech started when I built my first website in high school. Today, I specialize in the MERN stack and cloud deployment.</p>
                    <div class="info-grid">
                        <div><strong>📧 Email:</strong> john@example.com</div>
                        <div><strong>📍 Location:</strong> San Francisco, CA</div>
                        <div><strong>🎓 Education:</strong> B.S. Computer Science</div>
                        <div><strong>💼 Experience:</strong> 3+ Years</div>
                    </div>
                </div>
                <div class="about-stats">
                    <div class="stat-card">
                        <span class="stat-number">50+</span>
                        <span class="stat-label">Projects Completed</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-number">30+</span>
                        <span class="stat-label">Happy Clients</span>
                    </div>
                    <div class="stat-card">
                        <span class="stat-number">5+</span>
                        <span class="stat-label">Years Coding</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ========== SKILLS SECTION ========== -->
    <section id="skills" class="skills">
        <div class="container">
            <h2 class="section-title">My Skills</h2>
            <div class="skills-grid">
                <div class="skill-category">
                    <h3>Frontend</h3>
                    <div class="skill-bar">
                        <span>HTML5</span>
                        <div class="bar"><div class="progress" style="width: 95%;"></div></div>
                    </div>
                    <div class="skill-bar">
                        <span>CSS3</span>
                        <div class="bar"><div class="progress" style="width: 90%;"></div></div>
                    </div>
                    <div class="skill-bar">
                        <span>JavaScript</span>
                        <div class="bar"><div class="progress" style="width: 85%;"></div></div>
                    </div>
                    <div class="skill-bar">
                        <span>React</span>
                        <div class="bar"><div class="progress" style="width: 80%;"></div></div>
                    </div>
                </div>
                <div class="skill-category">
                    <h3>Backend</h3>
                    <div class="skill-bar">
                        <span>Node.js</span>
                        <div class="bar"><div class="progress" style="width: 80%;"></div></div>
                    </div>
                    <div class="skill-bar">
                        <span>Python</span>
                        <div class="bar"><div class="progress" style="width: 75%;"></div></div>
                    </div>
                    <div class="skill-bar">
                        <span>MongoDB</span>
                        <div class="bar"><div class="progress" style="width: 70%;"></div></div>
                    </div>
                    <div class="skill-bar">
                        <span>SQL</span>
                        <div class="bar"><div class="progress" style="width: 75%;"></div></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ========== PROJECTS SECTION ========== -->
    <section id="projects" class="projects">
        <div class="container">
            <h2 class="section-title">Featured Projects</h2>
            <div class="project-grid">
                <div class="project-card">
                    <img src="assets/project1.jpg" alt="E-commerce Store Project" loading="lazy">
                    <div class="project-info">
                        <h3>E-commerce Store</h3>
                        <p>Full-stack shopping platform with cart, payments, and admin dashboard.</p>
                        <div class="project-tags">
                            <span>React</span><span>Node.js</span><span>MongoDB</span>
                        </div>
                        <a href="#" class="project-link">View Project →</a>
                    </div>
                </div>
                <div class="project-card">
                    <img src="assets/project2.jpg" alt="Weather Dashboard Project" loading="lazy">
                    <div class="project-info">
                        <h3>Weather Dashboard</h3>
                        <p>Real-time weather app with API integration and 5-day forecast.</p>
                        <div class="project-tags">
                            <span>JavaScript</span><span>API</span><span>CSS</span>
                        </div>
                        <a href="#" class="project-link">View Project →</a>
                    </div>
                </div>
                <div class="project-card">
                    <img src="assets/project3.jpg" alt="Task Manager Project" loading="lazy">
                    <div class="project-info">
                        <h3>Task Manager</h3>
                        <p>Kanban-style productivity app with drag-and-drop functionality.</p>
                        <div class="project-tags">
                            <span>Vue.js</span><span>Firebase</span><span>Tailwind</span>
                        </div>
                        <a href="#" class="project-link">View Project →</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ========== CONTACT SECTION ========== -->
    <section id="contact" class="contact">
        <div class="container">
            <h2 class="section-title">Get In Touch</h2>
            <div class="contact-container">
                <form id="contactForm" class="contact-form">
                    <input type="text" placeholder="Your Name" required>
                    <input type="email" placeholder="Your Email" required>
                    <input type="text" placeholder="Subject">
                    <textarea rows="5" placeholder="Your Message" required></textarea>
                    <button type="submit" class="btn-primary">Send Message ✉️</button>
                </form>
                <div class="contact-info">
                    <div><i class="fa-solid fa-envelope"></i> john@example.com</div>
                    <div><i class="fa-solid fa-phone"></i> +1 (555) 123-4567</div>
                    <div><i class="fa-solid fa-location-dot"></i> San Francisco, CA</div>
                    <div><i class="fa-solid fa-clock"></i> Available Mon-Fri 9AM-6PM</div>
                </div>
            </div>
        </div>
    </section>

    <!-- ========== FOOTER ========== -->
    <footer>
        <div class="container">
            <p>© 2026 John Doe. Built with ❤️ from scratch.</p>
        </div>
    </footer>

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

Step 2: Add CSS Styling

Create a style.css file and paste the following code:

CSS 
/* ===== RESET & VARIABLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

:root {
    --primary: #4A90D9;
    --primary-dark: #2C5F8A;
    --secondary: #2D3436;
    --light: #F8F9FA;
    --gray: #DFE6E9;
    --text: #2D3436;
    --white: #FFFFFF;
    --shadow: 0 10px 30px rgba(0,0,0,0.1);
    --radius: 12px;
    --transition: all 0.3s ease;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--primary);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* ===== NAVBAR ===== */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 15px 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--secondary);
    text-decoration: none;
}

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

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--secondary);
    font-weight: 500;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--primary);
}

.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--secondary);
}

/* ===== HERO ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-content .greeting {
    display: inline-block;
    background: var(--primary);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--secondary);
}

.hero-content .typing-text {
    font-size: 1.8rem;
    color: var(--primary);
    margin: 10px 0 20px;
    min-height: 50px;
}

.hero-content p {
    font-size: 1.2rem;
    color: #555;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin: 25px 0;
    flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
    padding: 12px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    display: inline-block;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    border: 2px solid var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.btn-secondary {
    background: transparent;
    color: var(--secondary);
    border: 2px solid var(--secondary);
}

.btn-secondary:hover {
    background: var(--secondary);
    color: var(--white);
    transform: translateY(-3px);
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.social-links a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--white);
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: var(--transition);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    text-decoration: none;
}

.social-links a:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
}

.hero-image img {
    width: 100%;
    max-width: 400px;
    border-radius: 50%;
    box-shadow: var(--shadow);
    border: 5px solid var(--white);
    margin: 0 auto;
    display: block;
}

/* ===== ABOUT ===== */
.about {
    padding: 100px 0;
    background: var(--light);
}

.about-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
}

.about-text p {
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
    background: var(--white);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.info-grid div {
    padding: 8px 0;
}

.about-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stat-card {
    background: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    display: block;
}

.stat-label {
    color: #666;
    font-weight: 500;
}

/* ===== SKILLS ===== */
.skills {
    padding: 100px 0;
}

.skills-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.skill-category h3 {
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.skill-bar {
    margin-bottom: 18px;
}

.skill-bar span {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}

.bar {
    width: 100%;
    height: 10px;
    background: var(--gray);
    border-radius: 10px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    transition: width 1s ease;
}

/* ===== PROJECTS ===== */
.projects {
    padding: 100px 0;
    background: var(--light);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.project-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.project-card:hover {
    transform: translateY(-10px);
}

.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.project-info {
    padding: 20px;
}

.project-info h3 {
    margin-bottom: 10px;
}

.project-info p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.project-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.project-tags span {
    background: var(--gray);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.project-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.project-link:hover {
    color: var(--primary-dark);
}

/* ===== CONTACT ===== */
.contact {
    padding: 100px 0;
}

.contact-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input,
.contact-form textarea {
    padding: 15px;
    border: 2px solid var(--gray);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: var(--transition);
    font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.2);
}

.contact-form button {
    align-self: flex-start;
    border: none;
    cursor: pointer;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    background: var(--light);
    border-radius: var(--radius);
}

.contact-info div {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.05rem;
}

.contact-info i {
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== FOOTER ===== */
footer {
    background: var(--secondary);
    color: var(--white);
    text-align: center;
    padding: 30px 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content p {
        margin: 0 auto;
    }

    .hero-buttons {
        justify-content: center;
    }

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

    .hero-image img {
        max-width: 300px;
    }

    .about-grid,
    .skills-grid,
    .contact-container {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: var(--white);
        padding: 20px;
        box-shadow: var(--shadow);
        text-align: center;
    }

    .nav-links.active {
        display: flex;
    }

    .hamburger {
        display: block;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .project-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
}

Step 3: Add JavaScript Functionality

Create a script.js file and paste the following code:

JAVASCRIPT 
// ===== TYPING EFFECT =====
const typingText = document.querySelector('.typing-text');
const roles = ['Full-Stack Developer', 'UI/UX Enthusiast', 'Problem Solver', 'Tech Blogger'];
let roleIndex = 0;
let charIndex = 0;
let isDeleting = false;

function typeEffect() {
    const currentRole = roles[roleIndex];

    if (isDeleting) {
        typingText.textContent = currentRole.substring(0, charIndex - 1);
        charIndex--;
    } else {
        typingText.textContent = currentRole.substring(0, charIndex + 1);
        charIndex++;
    }

    if (!isDeleting && charIndex === currentRole.length) {
        isDeleting = true;
        setTimeout(typeEffect, 2000);
        return;
    }

    if (isDeleting && charIndex === 0) {
        isDeleting = false;
        roleIndex = (roleIndex + 1) % roles.length;
        setTimeout(typeEffect, 500);
        return;
    }

    setTimeout(typeEffect, isDeleting ? 50 : 100);
}

// Start typing effect
typeEffect();

// ===== HAMBURGER MENU =====
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('navLinks');

hamburger.addEventListener('click', () => {
    navLinks.classList.toggle('active');
});

// Close menu when clicking a link
document.querySelectorAll('.nav-links a').forEach(link => {
    link.addEventListener('click', () => {
        navLinks.classList.remove('active');
    });
});

// ===== SKILL BAR ANIMATION =====
const skillBars = document.querySelectorAll('.progress');

function animateSkillBars() {
    skillBars.forEach(bar => {
        const width = bar.style.width;
        bar.style.width = '0%';
        setTimeout(() => {
            bar.style.width = width;
        }, 300);
    });
}

// Trigger animation on scroll
const skillsSection = document.querySelector('.skills');
let animated = false;

window.addEventListener('scroll', () => {
    const rect = skillsSection.getBoundingClientRect();
    if (rect.top < window.innerHeight && !animated) {
        animateSkillBars();
        animated = true;
    }
});

// ===== CONTACT FORM =====
const contactForm = document.getElementById('contactForm');

contactForm.addEventListener('submit', (e) => {
    e.preventDefault();
    alert('Thank you for your message! I\'ll get back to you soon. 😊');
    contactForm.reset();
});

// ===== SMOOTH SCROLL =====
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// ===== NAVBAR SCROLL EFFECT =====
let lastScroll = 0;
const navbar = document.querySelector('.navbar');

window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;
    if (currentScroll > 100) {
        navbar.style.boxShadow = '0 4px 20px rgba(0,0,0,0.15)';
    } else {
        navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
    }
    lastScroll = currentScroll;
});

How This Portfolio Works

The JavaScript code powers all the interactive features of the portfolio:

Typing Effect: The typeEffect() function cycles through different professional titles, creating a typewriter animation that adds visual interest to the hero section.

Navigation: The hamburger menu toggles the mobile navigation, while smooth scrolling takes visitors to different sections when they click menu items.

Skill Bars: The progress bars animate when you scroll to the skills section. They start at 0% and fill to their respective values, creating an engaging visual effect.

Contact Form: The form includes basic validation and shows a success message on submission, giving users a positive experience.

Final Output

After completing all three files and adding your images, your portfolio website will:

  • Display a professional hero section with animated typing

  • Showcase your skills with animated progress bars

  • Present your projects in an attractive grid layout

  • Include a working contact form

  • Be fully responsive on all devices

  • Have smooth scrolling and interactive navigation

Customization Guide

1. Update Personal Information

HTML 
<!-- In index.html -->
<h1>Your Name</h1>  <!-- Replace with your name -->
<p>your.email@example.com</p>  <!-- Replace with your email -->

2. Modify Skills

HTML 
<!-- In index.html - Update width percentages -->
<div class="progress" style="width: 95%;"></div>  <!-- Change 95% to your skill level -->

3. Change Colors

CSS 
/* In style.css - Modify root variables */
:root {
    --primary: #4A90D9;  /* Change to your brand color */
    --primary-dark: #2C5F8A;  /* Darker shade */
}

4. Add Your Projects

HTML 
<!-- Duplicate and modify project cards -->
<div class="project-card">
    <img src="assets/your-project.jpg" alt="Project Name">
    <h3>Your Project Title</h3>
    <p>Project description goes here</p>
    <div class="project-tags">Tech1 Tech2</div>
</div>

5. Update Social Links

HTML 
<!-- Replace # with your actual profile URLs -->
<a href="https://github.com/yourusername"><i class="fa-brands fa-github"></i></a>
<a href="https://linkedin.com/in/yourusername"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="https://twitter.com/yourusername"><i class="fa-brands fa-twitter"></i></a>

Deployment Options

Option 1: GitHub Pages (Free)

BASH 
# 1. Push code to GitHub
git init
git add .
git commit -m "Initial portfolio commit"
git remote add origin https://github.com/username/repo.git
git push -u origin main

# 2. Go to Settings > Pages
# 3. Select "main" branch and save
# 4. Visit https://username.github.io/repo

Option 2: Netlify (Free)

1. Drag and drop your project folder to netlify.com/drop

2. Your site is live instantly at site-name.netlify.app

3. Connect GitHub for automatic deployments

Option 3: Vercel (Free)

BASH 
# Install Vercel CLI
npm i -g vercel

# Deploy
vercel
# Follow the prompts

Performance Optimization

This portfolio is optimized for performance with:

  • Lazy Loading: Images load as they scroll into view

  • CSS Variables: Easy theming and maintenance

  • Semantic HTML: Better SEO and accessibility

  • CDN Resources: Font Awesome loaded from CDN for faster loading

  • Minimal Dependencies: No frameworks required

Future Enhancements

You can further improve this project by adding:

  • Dark/Light mode toggle

  • Blog section with CMS integration

  • Portfolio filter by category

  • Newsletter subscription form

  • Analytics tracking

  • PDF resume download

  • Multi-language support

  • Animations with AOS library

Conclusion

In this tutorial, you learned how to create a complete personal portfolio website using HTML, CSS, and JavaScript. This project demonstrates essential web development skills including:

  • Semantic HTML structure

  • Modern CSS with Flexbox and Grid

  • JavaScript DOM manipulation

  • Responsive design principles

  • Interactive user experiences

Your portfolio is now ready to showcase your skills and projects to the world. Keep updating it as you learn new technologies and complete more projects!

Happy Coding! 🚀

Technologies Used

HTML5 CSS3 JavaScript

Live Output

See the project in action below. This is the live preview of the code you just learned.

Output Preview

Similar Projects

Digital Clock Using HTML CSS and JavaScript with Animated Circular Progress Bars
Build a Real-Time Digital Clock using HTML, CSS, and JavaScript
Beginner View Project
A modern calculator interface built with HTML, CSS, and JavaScript showing basic arithmetic operations
How to Create a Simple Calculator Using HTML, CSS, and JavaScript - Complete Tutorial
Beginner View Project
Project Info
Difficulty: Beginner
Tech Stack: HTML5, CSS3, JavaScript
Created: July 10, 2026
Total Views: 6
Tags
portfolio website html portfolio css portfolio javascript portfolio responsive website web development project frontend project personal portfolio html css javascript responsive portfolio template portfolio design beginner web project coding tutorial web design frontend development
Share This Project