A modern, responsive portfolio website that automatically fetches and displays your GitHub repositories. Built with HTML, CSS (Tailwind), and vanilla JavaScript.
- 🎨 Modern dark theme with gradient accents
- 📱 Fully responsive design
- 🔄 Automatic GitHub repository integration
- 🔍 Project search functionality
- 🎯 Smooth scrolling navigation
- ⭐ Repository stats (stars, forks, languages)
- 🖼️ Optional profile photo
- 🚀 No build process required - just one HTML file!
- Download the
index.htmlfile - Open it in any text editor
- Update the configuration section (see below)
- Open the file in your browser or deploy to any hosting service
All configuration is located at the very top of the index.html file, right after the <head> tag. Look for the section marked:
<!-- CONFIGURATION SECTION - UPDATE YOUR INFORMATION HERE -->
Open index.html and update the CONFIG object with your information:
var CONFIG = {
name: "Your Name", // Your full name
title: "Full Stack Developer", // Your job title
tagline: "Building innovative...", // Your headline/tagline
bio: "Passionate developer...", // About you description
photo: "", // Your photo URL (optional)
github: "yourusername", // Your GitHub username (REQUIRED)
email: "your.email@example.com", // Your email address
linkedin: "yourprofile", // Your LinkedIn profile name
skills: [ // Array of your skills
"JavaScript",
"React",
"Node.js",
// Add more skills...
]
};| Field | Description | Example | Required |
|---|---|---|---|
name |
Your full name | "John Doe" |
✅ Yes |
title |
Your professional title | "Full Stack Developer" |
✅ Yes |
tagline |
Brief description/headline | "Building web apps..." |
✅ Yes |
bio |
Longer about you text | "I'm a developer..." |
✅ Yes |
photo |
Direct URL to your photo | "https://..." |
❌ Optional |
github |
Your GitHub username | "octocat" |
✅ Required |
email |
Your email address | "hello@example.com" |
✅ Yes |
linkedin |
LinkedIn profile name | "johndoe" |
✅ Yes |
skills |
Array of skill strings | ["React", "Node"] |
✅ Yes |
-
Upload your photo to an image hosting service:
- GitHub: Upload to a repo and use the raw URL
- Imgur: Upload and copy direct link
- Cloudinary: Free tier available
- Any other image hosting service
-
Copy the direct image URL (must end in
.jpg,.png, etc.) -
Paste into the
photofield:photo: "https://example.com/your-photo.jpg",
-
Leave it empty (
"") if you don't want to show a photo
Add or remove skills from the array:
skills: [
"JavaScript",
"React",
"Node.js",
"Python",
"TypeScript",
"Next.js",
"MongoDB",
"PostgreSQL",
"Git",
"Docker",
"AWS",
"Tailwind CSS"
]- Create a new repository on GitHub
- Upload your
index.htmlfile - Go to Settings → Pages
- Select branch and save
- Your site will be live at
https://yourusername.github.io/repo-name
- Go to netlify.com
- Drag and drop your
index.htmlfile - Your site is live instantly!
- Go to vercel.com
- Import your project
- Deploy with one click
Upload the index.html file to any web hosting service. It's just a single HTML file with no dependencies!
The portfolio uses a purple/pink gradient theme. To change colors, search for these Tailwind classes in the HTML:
purple-400/purple-500- Primary purple colorspink-400/pink-500- Accent pink colorsgray-900/gray-800- Dark background colors
Replace them with any Tailwind color class (e.g., blue-400, green-500, etc.)
The portfolio has 5 main sections:
- Home - Hero section with name and photo
- About - Bio section
- Skills - Skills grid
- Projects - GitHub repositories
- Contact - Social links
You can reorder, remove, or modify these sections in the HTML.
- The portfolio fetches repositories from the GitHub API
- No API key required for public repos
- Rate limit: 60 requests per hour for unauthenticated requests
- Only non-forked repositories are displayed
- Repos are sorted by star count
- Check your GitHub username in the CONFIG section
- Make sure it's spelled correctly
- Open browser console (F12) to see any errors
- Verify your GitHub profile is public
- Make sure you're using a direct image URL
- URL should end with
.jpg,.png,.gif, etc. - Test the URL by pasting it directly in a browser
- Check that the image host allows embedding
- Make sure you have an internet connection (Tailwind CSS loads from CDN)
- Clear your browser cache
- Try a different browser
Free to use for personal and commercial projects. No attribution required.
If you encounter any issues:
- Check the troubleshooting section above
- Verify your configuration is correct
- Check browser console for errors (F12)
You're all set! Update the config, add your photo, and deploy your portfolio. Good luck! 🚀