A personal portfolio is your digital resume, your project gallery, and your professional brand all in one. For any web developer, it's the most important project you'll ever build. This tutorial will guide you through creating a stunning, modern, and fully responsive portfolio website from absolute scratch using only the fundamental web technologies: HTML, CSS, and a touch of JavaScript.
We'll use modern CSS techniques like **Flexbox** and **Grid** to build a layout that looks great on any device, from a large desktop monitor to a small mobile phone.
Step 1: Project Structure & Setup
Create a new folder for your project. Inside it, create the following files and folders:
index.html- The main HTML file.style.css- Our stylesheet.script.js- For interactivity.images/- A folder to store your profile picture and project images.
Step 2: The HTML Skeleton
We'll structure our portfolio with semantic HTML5 tags. This is great for accessibility and SEO. Open `index.html` and paste the following structure. This will be our entire HTML for the single-page site.
Your Name - Web Developer
Hi, I'm Rohit Patil
A passionate Web Developer creating modern and responsive web applications.
View My Work
About Me
I'm a self-taught developer specializing in the MERN stack. I love solving complex problems and learning new technologies. My goal is to build fast, scalable, and user-friendly web applications that make a difference.
My Projects
Serverless DNS Tool
A free online DNS lookup tool built with Cloudflare Workers. Zero server costs.
View Project
AI Chatbot
A real-time AI chatbot using Cloudflare Workers AI and serverless streaming.
View Project
AI Regex Generator
An AI tool to generate regular expressions from natural language prompts.
View Project
Get In Touch
I'm currently open to new opportunities. Feel free to reach out!
Email Me
Step 3: Styling with Modern CSS
Now, let's bring our portfolio to life. We'll use CSS custom properties (variables) for easy theme management, Flexbox for alignment, and Grid for the project layout. Paste this into `style.css`.
/* Basic Reset and Setup */
:root {
--primary-color: #00C9FF;
--bg-dark: #1a202c;
--bg-light: #1f2937;
--text-color: #e2e8f0;
--text-muted: #a0aec0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-dark);
color: var(--text-color);
}
section {
padding: 6rem 2rem;
text-align: center;
}
h2 {
font-family: 'Orbitron', sans-serif;
color: var(--primary-color);
margin-bottom: 2rem;
font-size: 2.5rem;
}
/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: rgba(10, 10, 10, 0.8);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.logo {
color: var(--primary-color);
font-family: 'Orbitron', sans-serif;
font-size: 1.5rem;
text-decoration: none;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-menu a {
color: var(--text-color);
text-decoration: none;
font-weight: 600;
transition: color 0.3s;
}
.nav-menu a:hover {
color: var(--primary-color);
}
/* Hamburger Menu (for mobile) */
.hamburger { display: none; cursor: pointer; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--text-color); }
/* Hero Section */
#hero {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.hero-content h1 { font-size: 4rem; }
.hero-content h1 span { color: var(--primary-color); }
.hero-content p { font-size: 1.2rem; margin: 1rem 0 2rem; }
.cta-button {
background: var(--primary-color);
color: var(--bg-dark);
padding: 1rem 2rem;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s;
}
.cta-button:hover { background-color: #00a8d6; }
/* About Section */
.about-content {
display: flex;
align-items: center;
gap: 2rem;
max-width: 800px;
margin: 0 auto;
text-align: left;
}
.profile-pic { width: 200px; height: 200px; border-radius: 50%; border: 3px solid var(--primary-color); }
/* Projects Section - Using CSS Grid */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.project-card {
background: var(--bg-light);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
text-align: left;
}
.project-card img { width: 100%; height: 200px; object-fit: cover; }
.project-card h3, .project-card p, .project-card a { padding: 0 1.5rem; }
.project-card h3 { margin-top: 1rem; color: var(--primary-color); }
.project-card p { color: var(--text-muted); margin: 0.5rem 0 1.5rem; }
.project-card a { color: var(--primary-color); text-decoration: none; font-weight: bold; display: inline-block; margin-bottom: 1.5rem;}
/* Footer */
footer { text-align: center; padding: 2rem; background: var(--bg-light); }
Step 4: Adding Responsiveness with Media Queries
This is where the magic happens. We'll add CSS rules that only apply on smaller screens (less than 768px wide). This will stack our content, increase font sizes, and enable the hamburger menu. Add this to the bottom of `style.css`.
/* Media Queries for Responsiveness */
@media (max-width: 768px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) { opacity: 0; }
.hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-menu {
position: fixed;
left: -100%;
top: 60px; /* Height of navbar */
flex-direction: column;
background-color: #1a202c;
width: 100%;
text-align: center;
transition: 0.3s;
gap: 0;
}
.nav-menu.active {
left: 0;
}
.nav-menu li {
padding: 1rem 0;
}
.hero-content h1 { font-size: 2.5rem; }
.about-content { flex-direction: column; }
}
Step 5: JavaScript for the Mobile Menu
Our final step is to make the hamburger menu actually work. The JavaScript will listen for a click on the hamburger icon and toggle an `active` class on both the hamburger and the navigation menu. This `active` class corresponds to the CSS we just wrote. Paste this into `script.js`.
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
});
// Close menu when a link is clicked
document.querySelectorAll('.nav-menu a').forEach(link => {
link.addEventListener('click', () => {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
});
});
Conclusion
And that's it! You've just built a complete, responsive, single-page portfolio website from scratch. You've used semantic HTML, styled it with modern CSS Flexbox and Grid, and added a touch of JavaScript for a professional mobile experience. Now, the fun part begins: replace the placeholder text and images with your own content to make it uniquely yours. From here, you can easily deploy it for free using services like GitHub Pages or Netlify.