This isn't just a static website—it's a self-updating, data-driven portfolio that showcases your work automatically:

🔄 100% Auto-Sync - GitHub Actions automatically updates your portfolio every 6 hours 📊 Real Analytics - 6 advanced analytics cards with live GitHub data 🎨 Zero Maintenance - Push code, portfolio updates itself—no manual editing 🎮 Stunning 3D - Three.js particle animations at 60fps 📱 Fully Responsive - Perfect on any device, optimized for performance ⚡ Lightning Fast - Optimized loading, smooth animations, instant updates

✅ GitHub Actions Auto-Sync - Automatically fetches and updates your repos ✅ Advanced Analytics Dashboard - 6 data-driven cards with real metrics ✅ Real Activity Heatmap - Shows your actual coding activity (last 30 days) ✅ Smart Language Detection - Auto-generates skills from your repos ✅ Dynamic Timeline - Development journey based on real repo dates ✅ Technology Badges - All languages displayed as colorful badges

• A GitHub account
• At least one public repository
• 10 minutes of your time

1. Fork this repository

   • Click the "Fork" button at the top of this page

2. Rename your fork

   • Go to Settings → Repository name
   • Change to: {your-username}.github.io
   • Click "Rename"

1. Enable GitHub Actions

   • Go to Actions tab in your forked repo
   • Click "I understand my workflows, go ahead and enable them"

2. Set up workflow permissions

   • Settings → Actions → General
   • Under "Workflow permissions", select:
     • ✅ "Read and write permissions"
   • Click "Save"

3. Manually run the workflow (first time only)

   • Go to Actions tab
   • Click "Sync GitHub Repos"
   • Click "Run workflow" → "Run workflow"
   • Wait ~30 seconds for it to complete

1. Activate GitHub Pages

   • Settings → Pages
   • Source: "Deploy from a branch"
   • Branch: main | Folder: / (root)
   • Click "Save"

2. Wait 2-3 minutes, then visit:

   https://{your-username}.github.io
   

Edit index.html (only 3 things to change):

<!-- Line 6: Update page title -->
<title>Your Name - Your Title | Advanced Portfolio</title>

<!-- Line 7-8: Update meta description -->
<meta name="description" content="Your custom description here">

<!-- Line 127-130: Update bio text -->
<p class="hero-description">
    Your custom bio here. Describe who you are and what you do.
</p>

Edit app.js (only 1 thing to change):

// Line 13-19: Update typing animation texts
this.typingTexts = [
    'Your Title 1',
    'Your Title 2',
    'Your Title 3',
    'Your Title 4',
    'Your Title 5'
];

Edit index.html contact section (line 420):

<!-- Update your email -->
<p>your-email@example.com</p>

That's it! Everything else updates automatically from your GitHub repos! 🎉

graph LR
    A[GitHub Actions] -->|Every 6 hours| B[Fetch Your Repos]
    B --> C[Generate repos.json]
    C --> D[Calculate Stats]
    D --> E[Update Portfolio]
    E -->|Automatically| F[Live Website]

Want to update immediately? Run the workflow manually:

1. Go to Actions tab
2. Click "Sync GitHub Repos"
3. Click "Run workflow" → "Run workflow"
4. Wait 30 seconds, refresh your portfolio

Edit style.css (lines 23-31):

:root {
    /* Change these colors to match your brand */
    --accent-cyan: #00FFFF;      /* Primary accent */
    --accent-purple: #9D4EDD;    /* Secondary accent */
    --accent-green: #00FF41;     /* Success/Active */

    /* Or use your own colors */
    --accent-cyan: #YOUR_COLOR;
    --accent-purple: #YOUR_COLOR;
    --accent-green: #YOUR_COLOR;
}

Edit app.js particle count for better performance on older devices:

// Find this in setupThreeJS() method
const particleCount = window.innerWidth > 768 ? 1000 : 500;

// Reduce for older devices:
const particleCount = window.innerWidth > 768 ? 500 : 250;

Edit .github/workflows/sync-repos.yml:

schedule:
  - cron: '0 */6 * * *'  # Every 6 hours

# Change to:
  - cron: '0 */12 * * *' # Every 12 hours
  - cron: '0 0 * * *'    # Once daily at midnight
  - cron: '0 9 * * 1'    # Every Monday at 9am

All analytics cards are in index.html starting at line 176. Feel free to:

• Rearrange card order
• Add custom cards
• Modify card content
• Change card styling

• Auto-updates: Repository count, years active, Python %
• Customize: Bio text, typing animation texts
• Data source: repos.json stats

• 6 Cards: All auto-update from repos.json
• Customize: Card titles, add/remove cards
• Data source: GitHub Actions workflow

• Auto-updates: All repository cards
• Customize: Filter buttons, search functionality
• Data source: repos.json repositories array

• Auto-updates: Programming languages from repos
• Customize: Add frameworks/tools manually
• Data source: repos.json languageStats

• Auto-updates: No (manually curated for better storytelling)
• Customize: Edit timeline milestones in app.js
• Why manual: Tells your story better than raw dates

✅ Frontend Developers - Showcase your design and animation skills ✅ Backend Developers - Impress with auto-sync and API integration ✅ Full-Stack Developers - Complete package with both visual appeal and functionality ✅ Students - Stand out in internship/job applications ✅ Freelancers - Attract high-value clients with professional presentation ✅ Open Source Maintainers - Professional hub for your projects

This portfolio is an excellent learning tool for:

• GitHub Actions - CI/CD automation, scheduled workflows
• Three.js - WebGL, particle systems, 3D graphics
• Chart.js - Data visualization, responsive charts
• REST APIs - GitHub API integration, data fetching
• Modern CSS - Grid, Flexbox, animations, custom properties
• Vanilla JavaScript - ES6+, async/await, classes, modules
• Performance - 60fps animations, optimization techniques

Found a bug? Have a feature idea? Contributions are welcome!

1. Fork the repository
2. Create feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

MIT License - Feel free to use this for personal or commercial projects!

What you CAN do:

• ✅ Use commercially
• ✅ Modify freely
• ✅ Distribute
• ✅ Use privately

What you MUST do:

• 📄 Include the original license

If this portfolio helped you:

• ⭐ Star this repo - Helps others discover it
• 🐛 Report issues - Help improve it for everyone
• 💡 Contribute - Add features or fix bugs
• 📢 Share - Tell other developers about it

• 📖 Documentation: You're reading it!
• 🐛 Bug Reports: Open an issue
• 💬 Questions: Start a discussion
• 📧 Contact: ragilmalik@protonmail.com

💡 Tip 1: Add repository topics on GitHub to enable better filtering 💡 Tip 2: Write good repo descriptions—they appear on your portfolio 💡 Tip 3: Star your best projects—sort by stars to highlight them 💡 Tip 4: Keep repos updated—activity heatmap shows recent work 💡 Tip 5: Use GitHub Actions logs to debug auto-sync issues

• ✅ GitHub Actions auto-sync every 6 hours
• ✅ 6 advanced analytics cards
• ✅ Real activity heatmap
• ✅ Auto-generated skills
• ✅ Technology badges
• ✅ Development timeline

• Basic GitHub API integration
• Three.js animations
• Project showcase