A modern, responsive portfolio website with custom animations, GitHub integration, and interactive UI elements.
portfolio/
│
├── index.html # Main HTML file
├── README.md # Documentation
│
├── assets/
│ ├── css/
│ │ ├── main.css # Core styles and components
│ │ ├── animations.css # Animation keyframes
│ │ └── responsive.css # Media queries
│ │
│ ├── js/
│ │ ├── main.js # General functionality
│ │ ├── cursor.js # Custom cursor
│ │ └── github.js # GitHub API integration
│ │
│ └── images/
│ └── Smita.jpg # Profile image
│
└── files/
└── RESUME_SMITA_PRAJAPATI.pdf
- Custom Cursor: Smooth, animated cursor with follower effect
- Grain Texture: Subtle animated grain overlay
- GitHub Integration: Live stats, commits, and contribution graph
- Smooth Animations: Intersection Observer for scroll-triggered animations
- Responsive Design: Optimized for all devices
- Modern UI: Glassmorphism, gradients, and hover effects
git clone <repository-url>
cd portfolio- Place your image in
assets/images/Smita.jpg - Recommended size: 600x800px (3:4 aspect ratio)
- Add your resume to
files/RESUME_SMITA_PRAJAPATI.pdf
Edit assets/js/github.js (line 8):
const GITHUB_TOKEN = 'your_github_token_here';
const USERNAME = 'your_github_username';To get a GitHub token:
- Go to GitHub Settings → Developer settings → Personal access tokens
- Generate new token (classic)
- Select scopes:
public_repo,read:user - Copy and paste the token
Edit index.html to update:
- Personal information
- Projects
- Skills
- Experience
- Achievements
- Contact links
Simply open index.html in your browser. No build process required!
# Or use a local server
python -m http.server 8000
# Then visit http://localhost:8000Edit CSS variables in assets/css/main.css:
:root {
--bg: #050505; /* Background */
--text: #ffffff; /* Text color */
--text-dim: #888888; /* Dimmed text */
--accent: #00ff88; /* Primary accent */
--accent2: #0088ff; /* Secondary accent */
--accent3: #ff0088; /* Tertiary accent */
}Change fonts in index.html (in the <head> section):
<link href="https://fonts.googleapis.com/css2?family=YOUR_FONT&display=swap" rel="stylesheet">Then update in assets/css/main.css:
body {
font-family: 'YOUR_FONT', sans-serif;
}- Desktop: 1600px+
- Laptop: 968px - 1600px
- Tablet: 768px - 968px
- Mobile: < 768px
- Small Mobile: < 480px
-
Optimize Images:
- Compress images before uploading
- Use WebP format for better compression
- Keep profile image under 500KB
-
GitHub API:
- Use a token to avoid rate limits (60 req/hr without, 5000 with)
- Consider caching GitHub data locally
-
Lazy Loading:
- Already implemented for images
- Add
loading="lazy"to additional images
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- Animated title with gradient
- Status badge
- CTA buttons
- Scroll indicator
- Profile image with hover effect
- Bio text with highlighted keywords
- Educational background cards
- Hover animations
- Featured projects with tags
- External links
- Hover effects
- Skill cards with icons
- Hover animations
- Timeline layout
- Work history with impact points
- Achievement cards with icons
- Live stats (repos, PRs)
- Latest commits
- Contribution graph
- Activity chart
- Social links
- Email contact
- Check if token is valid
- Verify username is correct
- Check browser console for errors
- Ensure you have internet connection
- Check if JavaScript is enabled
- Verify cursor.js is loaded properly
- Some browsers may block custom cursors
- Ensure animations.css is loaded
- Check if Intersection Observer is supported
- Verify JavaScript is enabled
This project is open source and available under the MIT License.
Feel free to fork, modify, and use this template for your own portfolio!
For questions or issues, please open an issue on GitHub or contact via email.
Made with ❤️ by Smita Prajapati