In today’s digital world, every professional needs a portfolio website to showcase their skills, achievements, and experience. Beyond a resume and LinkedIn profile, a personal portfolio can take your career to the next level.
If you’re a web developer, designer, blogger, or freelancer, a portfolio website is a great way to build a strong personal brand. You can impress recruiters and clients by adding your skills, projects, certifications, and contact information.
In this article, we’ve provided the code for a Modern Portfolio Website Project so you can review and practice, and you can also copy-paste the ready-to-use HTML full code, which includes features like a Dark/Light Mode toggle, social links, and responsive design. This project is perfect for beginners, as it teaches you HTML structure, CSS styling, and the basic functionality of JavaScript all at once.
Features
- Dark/Light Mode Toggle
- Responsive Layout (Mobile Friendly)
- Social Media Links (LinkedIn, GitHub, Twitter)
- Animated Project Cards
Benefits
- Helps beginners learn HTML, CSS, and JavaScript basics.
- Perfect for showcasing resumes and freelancing portfolios.
- Real-world projects.
Project Code
You can create your own modern portfolio by using the source code given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Portfolio</title>
<style>
:root {
--bg-color: #f8f9fa;
--text-color: #2c3e50;
--card-color: #fff;
}
body.dark {
--bg-color: #1e272e;
--text-color: #f5f6fa;
--card-color: #2f3640;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: var(--bg-color); color: var(--text-color); transition: 0.3s; }
header { padding: 60px 20px; text-align: center; background: linear-gradient(135deg, #1abc9c, #16a085); color: #fff; }
header h1 { font-size: 2.8rem; margin-bottom: 10px; }
header p { font-size: 1.2rem; }
nav { background: #16a085; padding: 10px; text-align: center; }
nav a { color: white; margin: 0 15px; text-decoration: none; font-weight: 500; }
nav a:hover { text-decoration: underline; }
section { max-width: 1000px; margin: 40px auto; padding: 20px; }
.card { background: var(--card-color); padding: 20px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 20px; transition: 0.3s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
footer { background: #16a085; color: white; text-align: center; padding: 15px; }
.toggle-btn { position: fixed; top: 20px; right: 20px; padding: 10px; border: none; border-radius: 8px; cursor: pointer; background: #2c3e50; color: #fff; }
.social { margin-top: 15px; }
.social a { margin: 0 10px; color: #1abc9c; font-weight: bold; }
</style>
</head>
<body>
<button class="toggle-btn" onclick="toggleMode()">🌙 Dark Mode</button>
<header>
<h1>Dharmesh Portfolio</h1>
<p>Web Developer | Blogger | Designer</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">Contact</a>
</nav>
<section>
<div class="card">
<h2>About Me</h2>
<p>I am Dharmesh, a passionate Web Developer & Blogger skilled in HTML, CSS, and JavaScript. I build modern and creative websites.</p>
</div>
<div class="card">
<h2>Projects</h2>
<p>✔ Modern Portfolio Website<br>✔ Interactive Calculator<br>✔ Restaurant Menu</p>
</div>
<div class="card">
<h2>Connect With Me</h2>
<div class="social">
<a href="#">LinkedIn</a> |
<a href="#">GitHub</a> |
<a href="#">Twitter</a>
</div>
</div>
</section>
<footer>
<p>© 2025 Dharmesh | Designed with ❤️</p>
</footer>
<script>
function toggleMode(){ document.body.classList.toggle("dark"); }
</script>
</body>
</html>The design of this card will look like the image given below,
In this, you can make it more attractive by adding your stylish additions and a single page website will also be created which people actually create for backlinks or add a separate link to their website.
Conclusion
A professional portfolio isn’t just a project, it’s your digital identity. With this project, you can create an attractive and responsive portfolio using a powerful combination of HTML, CSS, and JavaScript.
Features like Dark/Light Mode highlight your creativity and coding skills. If you’re going for a job interview or want to attract freelancing clients, a portfolio website can be your biggest weapon.
So if you are a beginner then definitely create this project and show your portfolio to the world by hosting it on GitHub Pages or personal domain.