A simple, beginner-friendly personal website with Home, About, Portfolio, and Contact pages.
index.html- Home pageabout.html- About Me pageportfolio.html- Portfolio pagecontact.html- Contact pagestyles.css- Stylesheet for all pages
Replace the following placeholder text in each HTML file:
- Your Name - Replace everywhere with your actual name
- [Your interests/field] - Add your professional interests
- [hobbies/activities] - Add your hobbies
- Email, LinkedIn, GitHub, Twitter - Update with your actual links
- Replace "Project Title 1, 2, 3, 4" with your actual project names
- Update project descriptions
- Link the "View Project" buttons to your actual projects
- You can add project images by replacing the placeholder divs
At the top of styles.css, you'll find color variables you can easily change:
--primary-color: #4a90e2; /* Main blue color */
--secondary-color: #2c3e50; /* Dark gray for headers */
--text-color: #333; /* Main text color */Just change these hex codes to your preferred colors!
If you don't have one, sign up at github.com
- Click the "+" icon in the top right corner
- Select "New repository"
- Name it:
your-username.github.io(replaceyour-usernamewith your actual GitHub username) - Make it Public
- Click "Create repository"
Option A: Upload via GitHub Website (Easiest for beginners)
- On your new repository page, click "uploading an existing file"
- Drag and drop ALL your HTML and CSS files
- Scroll down and click "Commit changes"
Option B: Using Git (if you're comfortable with command line)
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/your-username.github.io.git
git push -u origin main- Go to your repository settings
- Scroll down to "Pages" section
- Under "Source", select "Deploy from a branch"
- Choose "main" branch and "/ (root)" folder
- Click "Save"
Your website will be live at: https://your-username.github.io
It may take a few minutes to deploy for the first time.
The contact form on the contact page won't work by default on GitHub Pages. To make it work, you have two options:
-
Use Formspree (Recommended for beginners)
- Sign up at formspree.io
- Get your form endpoint
- Replace
<form action="#"with<form action="https://formspree.io/f/YOUR_FORM_ID"
-
Use Netlify Forms (requires hosting on Netlify instead)
- Add
netlifyattribute to your form - Deploy to Netlify instead of GitHub Pages
- Add
To add your own images:
- Create an
imagesfolder in your repository - Upload your images to this folder
- Reference them in HTML like:
<img src="images/your-photo.jpg" alt="Your Name">
- Add your own professional photo to the About page
- Include screenshots of your actual projects in the Portfolio
- Link to your real social media profiles
- Customize the colors to match your personal brand
- Add more pages if needed (just copy an existing HTML file and modify it)
- Always test your changes locally by opening the HTML files in your browser
- Make small changes one at a time
- Use GitHub's edit feature to make quick changes online
- Don't be afraid to experiment - you can always undo changes!
- GitHub Pages Documentation
- HTML & CSS Tutorial
- Markdown Guide (for editing this README)
Good luck with your website! 🎉