GitHub Developer Dashboard

A polished, modern GitHub Developer Dashboard that automatically pulls real data from the GitHub API and presents it in a premium developer-focused UI.

🎯 Features

• Real-time GitHub Data: Automatically fetches profile, repositories, and activity
• Repository Management: Search and sort repositories by various criteria
• Language Statistics: Visual breakdown of top programming languages
• Activity Timeline: Recent GitHub events and contributions
• Interactive Terminal: Fun command-line interface component
• Fully Responsive: Works seamlessly on mobile, tablet, and desktop
• Dark Theme: Modern developer-focused aesthetic inspired by GitHub/Vercel/Linear
• Zero Dependencies: Pure vanilla JavaScript, HTML, and CSS

🚀 Quick Start

Local Development

1. Clone or download this repository
2. Open index.html in your browser, or serve it with any static server:

# Using Python
python3 -m http.server 8000

# Using Node.js
npx serve

# Using PHP
php -S localhost:8000

3. Visit http://localhost:8000 in your browser

Deployment to GitHub Pages

1. Create a new repository on GitHub
2. Push this code to the repository:

git init
git add .
git commit -m "Initial commit: GitHub Developer Dashboard"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git push -u origin main

3. Go to repository Settings → Pages
4. Select "main" branch as the source
5. Your dashboard will be live at https://YOUR_USERNAME.github.io/YOUR_REPO/

📁 Project Structure

github-dashboard/
├── index.html    # Clean semantic HTML structure
├── style.css     # Dark theme styling with responsive design
├── script.js     # GitHub API integration and interactivity
└── README.md     # Documentation

🎨 Design Philosophy

The dashboard follows a developer command center aesthetic:

• Near-black background (#09090b) with zinc color palette
• Off-white typography (#fafafa) with monospace for technical data
• Subtle borders and shadows for depth without distraction
• Generous whitespace for readability
• Minimal animations for smooth interactions
• No excessive gradients or glows – clean and professional

🔧 Customization

Change GitHub Username

Edit script.js line 12:

const CONFIG = {
  username: 'YOUR_GITHUB_USERNAME', // Change this
  apiBase: 'https://api.github.com',
  cacheTimeout: 300000,
};

Customize Colors

Edit CSS variables in style.css (lines 16-26):

:root {
  --bg:           #09090b;  /* Background */
  --bg-card:      #111113;  /* Card background */
  --text-primary: #fafafa;  /* Primary text */
  --text-secondary: #a1a1aa; /* Secondary text */
  --accent:       #f4f4f5;  /* Accent color */
  /* ... */
}

Update Developer Identity

Edit index.html lines 73-101 to customize your tech stack and interests.

Modify Terminal Commands

Edit script.js starting at line 350 to add/modify terminal commands:

const commands = {
  help: () => 'Available commands: ...',
  whoami: () => CONFIG.username,
  // Add your custom commands here
};

🌐 API Information

This dashboard uses the GitHub REST API v3:

• Profile: /users/{username}
• Repositories: /users/{username}/repos
• Activity: /users/{username}/events/public

Rate Limits: 60 requests/hour for unauthenticated requests. The dashboard caches responses for 5 minutes to minimize API calls.

Note on Contribution Calendar

The GitHub public REST API does not provide contribution calendar data without authentication. The dashboard displays a representative visualization instead. For real contribution data, you would need:

• GitHub GraphQL API with authentication
• Or web scraping (not recommended)

✨ Features Breakdown

Statistics Cards

• Public repositories count
• Followers count
• Total stars across all repos
• Total forks across all repos

Repository Grid

• Displays up to 12 repositories
• Real-time search filtering
• Sort by: recently updated, stars, or alphabetically
• Shows: name, description, language, stars, forks, last updated

Top Languages

• Calculates language usage from repositories
• Visual bars with percentages
• Top 5 languages displayed
• Uses GitHub's language color palette

Recent Activity

• Last 10 relevant public events
• Supported: Push, Create, Issues, PRs, Stars, Releases, Forks
• Relative timestamps ("2 hours ago")
• Direct links to repositories

Interactive Terminal

• Type help to see available commands
• Commands: whoami, projects, github, interests, clear
• Command history support
• Fun Easter egg component

🎯 Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

📱 Responsive Breakpoints

• Desktop: > 1024px (full layout)
• Tablet: 768px - 1024px (adjusted grid)
• Mobile: < 768px (single column)
• Small Mobile: < 480px (optimized spacing)

🔒 Privacy & Security

• No tracking or analytics
• No cookies
• No external dependencies (except GitHub API)
• All data fetched client-side
• No server-side processing

🐛 Troubleshooting

"Rate limit exceeded" error

• Wait an hour for the GitHub API rate limit to reset
• Or authenticate your requests (requires code modification)

Dashboard not loading data

• Check browser console for errors
• Verify the GitHub username is correct
• Check your internet connection
• Ensure GitHub API is accessible

Styles not loading

• Verify style.css is in the same directory as index.html
• Check browser console for 404 errors
• Clear browser cache and reload

🤝 Contributing

This is a personal project, but feel free to:

• Fork and customize for your own use
• Report bugs or issues
• Suggest improvements

📄 License

MIT License - feel free to use this project for your own portfolio!

👤 Author

Samaksh Kamboj

• GitHub: @samakshkambxj
• Dashboard: Live Demo

🙏 Acknowledgments

• Design inspiration: GitHub, Vercel, Linear
• GitHub REST API for data
• Color palette: Tailwind CSS zinc scale

---

Built with ❤️ using vanilla JavaScript, HTML, and CSS