A modern, responsive personal website built with HTML, CSS, and JavaScript. Features include a hero section, about me, projects showcase, skills display, and contact form.
- Responsive Design: Works perfectly on desktop, tablet, and mobile devices
- Modern UI: Clean and professional design with smooth animations
- Interactive Elements: Smooth scrolling, mobile navigation, hover effects
- Contact Form: Functional contact form with validation
- Performance Optimized: Fast loading and optimized for SEO
Replace the placeholder content with your own information:
- Replace "Your Name" with your actual name
- Update the job title/subtitle in the hero section
- Add your own description and bio in the about section
- Update the statistics (years of experience, projects, clients)
- Replace project information with your actual projects
- Update skills to match your expertise
- Add your contact information (email, phone, location)
- Update social media links in the footer
- Customize colors by changing the CSS custom properties
- Adjust fonts, spacing, or layout as needed
- Modify the hero background gradient
Replace the placeholder images:
- Add your profile photo (300x300px recommended)
- Add project screenshots (400x250px recommended)
- Update image paths in the HTML
The contact form currently shows an alert. To make it functional:
-
Using a Form Service (Recommended for beginners):
- Sign up for services like Formspree, Netlify Forms, or Getform
- Update the form action attribute
- Remove the JavaScript preventDefault
-
Using Your Own Backend:
- Set up a server with Node.js, PHP, or Python
- Create an endpoint to handle form submissions
- Update the fetch request in
script.js
- Push your code to a GitHub repository
- Go to repository Settings > Pages
- Select source branch (usually
main) - Your site will be available at
username.github.io/repository-name
- Create an account at netlify.com
- Drag and drop your project folder
- Your site will be live instantly with a custom URL
- Create an account at vercel.com
- Import your GitHub repository
- Deploy automatically with each push
- Purchase hosting from providers like Bluehost, HostGator, etc.
- Upload files via FTP to the public_html folder
- Your site will be live at your domain
If you want a custom domain (yourname.com):
- Purchase a domain from registrars like Namecheap, GoDaddy, or Google Domains
- Update DNS settings to point to your hosting provider
- Configure SSL certificate for HTTPS
The website uses a blue color scheme. To change colors:
- Find the CSS color values (like
#3498db) instyles.css - Replace them with your preferred colors
- Maintain consistency across the site
To use different fonts:
- Import Google Fonts in the
<head>section - Update the
font-familyproperty in CSS
The site includes several animations:
- Fade-in effects for sections
- Hover effects on cards and buttons
- Smooth scrolling navigation
- Typing animation for the hero title
To modify or disable animations, edit the CSS and JavaScript files.
To add new sections:
- Add the HTML structure in
index.html - Add corresponding styles in
styles.css - Update navigation links
- Add smooth scrolling support in
script.js
personal-website/
│
├── index.html # Main HTML file
├── styles.css # CSS styles
├── script.js # JavaScript functionality
└── README.md # This file
- Chrome 60+
- Firefox 55+
- Safari 10+
- Edge 16+
- Mobile browsers (iOS Safari, Chrome Mobile)
To improve search engine ranking:
- Add meta descriptions and keywords
- Use semantic HTML tags
- Optimize images (compress and add alt text)
- Create a sitemap.xml file
- Add Google Analytics tracking
- Compress images before uploading
- Minify CSS and JavaScript for production
- Use a Content Delivery Network (CDN) for faster loading
- Enable GZIP compression on your server
- Images not loading: Check file paths and ensure images are in the correct directory
- Form not working: Verify form action URL and server configuration
- Mobile menu not working: Check JavaScript console for errors
- Animations not working: Ensure JavaScript is enabled and files are properly linked
This project is open source and available under the MIT License.
If you need help customizing your website:
- Check the browser console for error messages
- Validate your HTML and CSS
- Test on different devices and browsers
- Consider hiring a web developer for complex customizations
Happy coding! 🚀
Make sure to test your website thoroughly before deploying and keep your content updated regularly.