HTML, CSS & JavaScript Se Attractive Portfolio Website Kaise Banaye (Complete Code)

Aaj ke time me portfolio website har web developer ke liye bahut important hoti hai.
Chahe aap student ho, beginner ho, ya freelancing start karna chahte ho – ek strong portfolio aapki pehli pehchaan hoti hai.

Is post me hum HTML, CSS aur JavaScript ka use karke ek modern, animated aur responsive portfolio website banayenge.

Jisme:

  • Profile image (CDN link se)
  • Typing text animation
  • Smooth hover effects
  • Attractive gradient theme
  • Mobile friendly design

Portfolio Website Features

✔️ Modern & Clean UI
✔️ Fully Responsive (Mobile + Desktop)
✔️ Typing Text Effect (JavaScript)
✔️ Gradient Theme
✔️ Skills & Projects Section
✔️ Beginner Friendly Code

Technologies Used

  • HTML5 – Structure ke liye
  • CSS3 – Design, animation & layout
  • JavaScript – Typing effect & interactivity

Koi framework ya library use nahi ki gayi hai, isliye beginners ke liye perfect hai

Website Sections Explained

🔹 1. Navbar

  • Fixed navigation bar
  • Smooth scrolling links
  • Glassmorphism effect

🔹 2. Hero Section

  • Name & introduction
  • Typing animation (Web Developer, Frontend Designer, etc.)
  • Profile image (CDN se load hoti hai)

🔹 3. Skills Section

  • Card based layout
  • Hover animation
  • Grid system

🔹 4. Projects Section

  • Project preview images
  • Simple description
  • Hover shadow effect

🔹 5. Contact Section

  • Simple contact form
  • Clean UI
  • Beginner friendly

Complete Portfolio Website Code

Aap niche diya gaya single HTML file copy karke directly use kar sakte ho:

👉 Tip:
File ka naam index.html rakho aur browser me open karo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yourtitle | Portfolio</title>

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body{
    background:#0f172a;
    color:white;
}

/* ===== Navbar ===== */
nav{
    position:fixed;
    width:100%;
    padding:15px 10%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(15,23,42,0.8);
    backdrop-filter:blur(10px);
    z-index:1000;
}
nav h2{
    color:#38bdf8;
}
nav ul{
    display:flex;
    gap:25px;
}
nav ul li{
    list-style:none;
}
nav ul li a{
    text-decoration:none;
    color:white;
    font-weight:500;
}
nav ul li a:hover{
    color:#38bdf8;
}

/* ===== Hero Section ===== */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:120px 10%;
}
.hero-content{
    display:flex;
    gap:60px;
    align-items:center;
    flex-wrap:wrap;
}
.hero-text{
    max-width:550px;
}
.hero-text h1{
    font-size:48px;
}
.hero-text span{
    color:#38bdf8;
}
.hero-text p{
    margin:20px 0;
    line-height:1.6;
    color:#cbd5f5;
}
.hero-text button{
    padding:12px 28px;
    background:linear-gradient(135deg,#38bdf8,#6366f1);
    border:none;
    border-radius:30px;
    color:white;
    font-size:16px;
    cursor:pointer;
}
.hero-text button:hover{
    transform:scale(1.05);
}

/* Profile Image */
.hero-img{
    width:260px;
    height:260px;
    border-radius:50%;
    padding:6px;
    background:linear-gradient(135deg,#38bdf8,#6366f1);
}
.hero-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    transition: 0.3s;
}
.hero-img:hover{
    transform: translateY(-2px);
}

/* ===== Sections ===== */
section{
    padding:80px 10%;
}
.section-title{
    text-align:center;
    font-size:36px;
    margin-bottom:50px;
    color:#38bdf8;
}

/* ===== Skills ===== */
.skills{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:25px;
}
.skill-card{
    background:#020617;
    padding:30px;
    border-radius:20px;
    text-align:center;
    transition:0.4s;
}
.skill-card:hover{
    transform:translateY(-10px);
    background:#020617;
    box-shadow:0 0 25px rgba(56,189,248,0.3);
}

/* ===== Projects ===== */
.projects{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}
.project{
    background:#020617;
    border-radius:20px;
    overflow:hidden;
    transition:0.4s;
}
.project img{
    width:100%;
    height:180px;
    object-fit:cover;
}
.project div{
    padding:20px;
}
.project:hover{
    transform:translateY(-10px);
    box-shadow:0 0 30px rgba(99,102,241,0.3);
}

/* ===== Contact ===== */
.contact{
    text-align:center;
}
.contact input, .contact textarea{
    width:100%;
    max-width:500px;
    padding:12px;
    margin:10px 0;
    border-radius:10px;
    border:none;
}
.contact button{
    margin-top:10px;
    padding:12px 30px;
    border:none;
    border-radius:30px;
    background:linear-gradient(135deg,#38bdf8,#6366f1);
    color:white;
    cursor:pointer;
}

/* ===== Footer ===== */
footer{
    text-align:center;
    padding:20px;
    background:#020617;
    color:#94a3b8;
}

/* ===== Responsive ===== */
@media(max-width:768px){
    .hero-text h1{font-size:36px;}
}
</style>
</head>
<body>

<!-- Navbar -->
<nav>
    <h2>Yourlogo</h2>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

<!-- Hero -->
<section class="hero" id="home">
    <div class="hero-content">
        <div class="hero-text">
            <h1>Hi, I'm <span>Yourname</span></h1>
            <h2 id="typing"></h2>
            <p>I design and build modern, interactive, and user-friendly websites using HTML, CSS & JavaScript.</p>
            <button>Hire Me</button>
        </div>

        <div class="hero-img">
            <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12" alt="profile">
        </div>
    </div>
</section>

<!-- Skills -->
<section id="skills">
    <h2 class="section-title">Skills</h2>
    <div class="skills">
        <div class="skill-card">HTML5</div>
        <div class="skill-card">CSS3</div>
        <div class="skill-card">JavaScript</div>
        <div class="skill-card">Responsive Design</div>
        <div class="skill-card">UI/UX</div>
        <div class="skill-card">Animations</div>
    </div>
</section>

<!-- Projects -->
<section id="projects">
    <h2 class="section-title">Projects</h2>
    <div class="projects">
        <div class="project">
            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085">
            <div>
                <h3>Portfolio Website</h3>
                <p>Modern animated portfolio design.</p>
            </div>
        </div>

        <div class="project">
            <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3">
            <div>
                <h3>Todo App</h3>
                <p>JavaScript based task manager.</p>
            </div>
        </div>

        <div class="project">
            <img src="https://images.unsplash.com/photo-1518770660439-4636190af475">
            <div>
                <h3>Landing Page</h3>
                <p>High-conversion UI design.</p>
            </div>
        </div>
    </div>
</section>

<!-- Contact -->
<section id="contact" class="contact">
    <h2 class="section-title">Contact Me</h2>
    <input type="text" placeholder="Your Name">
    <input type="email" placeholder="Your Email">
    <textarea rows="4" placeholder="Your Message"></textarea><br>
    <button>Send Message</button>
</section>

<footer>
    © 2025 yourwebsite.com | All Rights Reserved
</footer>

<script>
/* Typing Effect */
const texts = ["Web Developer", "Front-End Designer", "JavaScript Learner"];
let index = 0;
let char = 0;
let typing = document.getElementById("typing");

function typeEffect(){
    if(char < texts[index].length){
        typing.innerHTML += texts[index].charAt(char);
        char++;
        setTimeout(typeEffect,120);
    } else {
        setTimeout(eraseEffect,2000);
    }
}
function eraseEffect(){
    if(char > 0){
        typing.innerHTML = texts[index].substring(0,char-1);
        char--;
        setTimeout(eraseEffect,80);
    } else {
        index = (index+1) % texts.length;
        setTimeout(typeEffect,200);
    }
}
typeEffect();
</script>

</body>
</html>

Live Demo

Profile Image CDN

Is project me hum Unsplash CDN image ka use kar rahe hain:

CDN Aap apni pasand ki image Unsplash se le sakte ho ya apni image ka URL laga sakte ho.

Beginners Ke Liye Tips

✅ Code ko samajhne ke liye:

  • Pehle HTML padho
  • Fir CSS sections dekho
  • Last me JavaScript typing logic samjho

✅ Agar aap naya seekh rahe ho:

  • Pehle typing effect samjho
  • Fir hover & transition properties explore karo

Next Level Upgrade Ideas

Agar aap is portfolio ko aur powerful banana chahte ho to:

  • 🌙 Dark / Light Mode Toggle
  • 📄 Download CV Button
  • 🎯 Scroll Reveal Animation
  • 📱 Convert into PWA
  • ⚛️ React Version

In sab par main future posts me detailed tutorials launga 😉

Conclusion

Is project ke through aap:

  • Real-world portfolio banana seekhoge
  • HTML, CSS & JavaScript ka practical use samjhoge
  • Freelancing ke liye ready ho jaoge

Agar aap web development seekh rahe ho, to ye project aapke liye must try hai 💯

Aapka Feedback?

Agar aapko ye post pasand aayi:

  • Comment karke batao
  • Code ko modify karo
  • Apna portfolio bana kar share karo

TechGyaan.in par aise hi aur beginner-friendly projects aate rahenge.
Stay connected 🚀

Leave a Comment

© 2025  Techgyaan.in All rights reserved.