A modern, clean, and responsive portfolio website built with HTML, CSS, and JavaScript.
- Modern Design: Clean and professional layout with smooth animations
- Fully Responsive: Works perfectly on all devices (desktop, tablet, mobile)
- Interactive Elements: Smooth scrolling, typing effect, and hover animations
- Sections Include:
- Hero section with social links
- About me with profile image
- Skills organized by categories
- Experience timeline
- Featured projects showcase
- Contact form
- Responsive navigation
- Clone or download this repository
- Customize the content (see Customization Guide below)
- Open
index.htmlin your browser to view locally - Deploy to your preferred hosting platform
Open index.html and update:
-
Name and Title (lines 42-44):
<h1 class="hero-title">Hi, I'm <span class="highlight">Your Name</span></h1> <p class="hero-subtitle">Your Title</p>
-
About Section (lines 67-85):
- Replace the about text with your own story
- Update location, education, and experience details
-
Profile Image (line 95):
<img src="your-image.jpg" alt="Your Name">
Replace
IMG_20241119_224143_674.jpgwith your own profile picture
Update social media links (lines 50-53 and 240-242):
<a href="https://www.linkedin.com/in/your-profile/" target="_blank">
<a href="https://github.com/your-username" target="_blank">
<a href="mailto:your-email@example.com">Edit the skills section (lines 103-140):
- Add or remove skill tags
- Organize by your technology stack
- Update category names if needed
Update the timeline section (lines 150-191):
- Replace company names and job titles
- Update dates and descriptions
- Add or remove timeline items
Customize projects (lines 199-265):
- Replace project images (use your own screenshots or keep placeholders)
- Update project names and descriptions
- Add GitHub/live demo links
- Update technology tags
Update contact details (lines 279-299):
<a href="mailto:your-email@example.com">your-email@example.com</a>
<a href="tel:+919999999999">+91 99999 99999</a>Edit styles.css (lines 10-18) to change color scheme:
:root {
--primary-color: #4a90e2; /* Main theme color */
--secondary-color: #2c3e50; /* Secondary color */
--accent-color: #e94b3c; /* Accent color */
}Edit script.js (lines 69-76) to customize the typing animation:
const subtitles = [
'Your Title 1',
'Your Title 2',
'Your Title 3'
];- Create a GitHub repository
- Upload all files to the repository
- Go to Settings → Pages
- Select main branch as source
- Your site will be live at
https://yourusername.github.io/repository-name
- Sign up at netlify.com
- Drag and drop your folder
- Your site will be live instantly with a custom URL
- Sign up at vercel.com
- Import your GitHub repository or upload files
- Deploy with one click
Upload all files to your web hosting via FTP:
- Upload to public_html or www folder
- Access via your domain
Portfolio/
├── index.html # Main HTML file
├── styles.css # All styling
├── script.js # Interactive functionality
├── README.md # This file
├── IMG_20241119_224143_674.jpg # Profile image
└── 20230204_093957(1).jpg # Additional image
To add a new section, follow this template in index.html:
<section id="newsection" class="newsection">
<div class="container">
<h2 class="section-title">Section Title</h2>
<!-- Your content here -->
</div>
</section>And add navigation link:
<li><a href="#newsection" class="nav-link">Section</a></li>Add Google Fonts in the <head> of index.html:
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">Then update in styles.css:
body {
font-family: 'Poppins', sans-serif;
}Copy a project card block and modify:
<div class="project-card">
<div class="project-image">
<img src="project-image.jpg" alt="Project Name">
<div class="project-overlay">
<a href="live-link" class="project-link" target="_blank">
<i class="fas fa-external-link-alt"></i>
</a>
<a href="github-link" class="project-link" target="_blank">
<i class="fab fa-github"></i>
</a>
</div>
</div>
<div class="project-info">
<h3>Project Name</h3>
<p>Project description here.</p>
<div class="project-tags">
<span>Tech1</span>
<span>Tech2</span>
</div>
</div>
</div>- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers
- HTML5
- CSS3 (Flexbox, Grid, Animations)
- Vanilla JavaScript (ES6+)
- Font Awesome Icons
- Google Fonts
Feel free to use this template for your personal portfolio. No attribution required!
If you need help customizing your portfolio:
- Check the comments in the code
- Refer to this README
- Search for tutorials on HTML/CSS/JavaScript basics
After customization:
- ✅ Update all personal information
- ✅ Add your own projects
- ✅ Replace placeholder images
- ✅ Update contact information
- ✅ Test on different devices
- ✅ Deploy to hosting platform
- ✅ Share your portfolio!
The portfolio features a full-width hero section with gradient background, followed by well-organized sections for about, skills, experience, projects, and contact.
Fully responsive design with hamburger menu and optimized layouts for smaller screens.
Built with ❤️ by Keshav Goyal
For questions or suggestions, feel free to reach out via the contact form on the website!
I participated in Hacktoberfest 2025, contributing to documentation improvements, bug fixes, and accessibility enhancements across several open-source repositories. Highlights:
- Contributed to 6+ repositories (documentation, tests, small features)
- Fixed accessibility issues in frontend components (aria attributes, keyboard navigation)
- Added unit tests and improved README contribution guides to help future contributors
See my contributions on GitHub: https://github.com/keshav-pec?tab=repositories