A modern, responsive personal portfolio website for software engineers. Built with vanilla HTML, CSS, and JavaScript - no frameworks required.
- Modern Design: Clean, professional design with gradient accents and smooth animations
- Fully Responsive: Works seamlessly on desktop, tablet, and mobile devices
- Dark Theme: Easy-on-the-eyes dark color scheme optimized for readability
- Smooth Animations: Fade-in effects, hover transitions, and scroll animations
- Interactive Elements: Mobile menu, smooth scrolling, parallax effects
- Performance Optimized: Lightweight with no external dependencies (except Google Fonts)
- Hero/Landing: Eye-catching introduction with call-to-action buttons
- About: Personal introduction with statistics showcase
- Skills: Organized tech stack display by category (Frontend, Backend, DevOps)
- Projects: Featured projects with descriptions and links
- Contact: Multiple contact methods with hover effects
Replace all placeholders in index.html:
[Your Name]- Your full name[YourName]- Your short name/username[X],[Y],[Z]- Your statistics (years of experience, projects, etc.)[your.email@example.com]- Your email address[yourusername]- Your GitHub username[yourprofile]- Your LinkedIn profile[yourhandle]- Your Twitter handle[hobby/interest placeholder]- Your hobbies or interests
Edit the skill categories and tags in the Skills section to match your tech stack.
Update the three project cards with:
- Project names
- Descriptions
- Technologies used
- Links to live demos and GitHub repos
- Replace placeholder images with actual project screenshots
Customize the color scheme in styles.css by modifying the CSS variables:
:root {
--primary: #6366f1; /* Primary color */
--secondary: #8b5cf6; /* Secondary color */
--background: #0f172a; /* Main background */
--surface: #1e293b; /* Card/section background */
--text: #f1f5f9; /* Primary text color */
--accent: #ec4899; /* Accent color */
}The site uses Inter font from Google Fonts. To change:
- Update the Google Fonts link in
index.html - Modify
font-familyinstyles.css
- Push your code to a GitHub repository
- Go to Settings > Pages
- Select your branch and root folder
- Your site will be available at
https://yourusername.github.io/repo-name
- Sign up at netlify.com
- Connect your Git repository
- Deploy with default settings
- Your site will be live in minutes
- Sign up at vercel.com
- Import your Git repository
- Deploy with zero configuration
- Instant deployment with automatic HTTPS
Simply open index.html in your browser. No build process required!
For a local server (optional):
# Python 3
python -m http.server 8000
# Node.js (with http-server)
npx http-server
# PHP
php -S localhost:8000Then visit http://localhost:8000
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers
Some optional features are included but commented out:
- Dynamic Typing Effect: Uncomment in
script.jsto enable rotating job titles - Easter Egg: Try the Konami code (↑↑↓↓←→←→BA) for a surprise!
.
├── index.html # Main HTML file
├── styles.css # All styles and animations
├── script.js # Interactive functionality
└── README.md # Documentation
- Add actual project images (optimize them first - use WebP format)
- Consider lazy loading images if you add many
- Minify CSS and JS for production
- Add a favicon.ico file
- Set up analytics (Google Analytics, Plausible, etc.)
- Update the meta description in
index.html - Add Open Graph tags for social sharing
- Include a sitemap.xml
- Add robots.txt
- Ensure all images have alt text
Free to use for personal projects. Customize as needed!
Built with ❤️ using vanilla HTML, CSS, and JavaScript.



