dev-dashboard

Dev Dashboard

A clean, responsive GitHub profile dashboard built with vanilla HTML, CSS, and JavaScript. Fetches real data from the GitHub API and displays your repos, stats, and profile — with dark/light mode.

Live Demo

View Live on GitHub Pages

Features

• Real GitHub API — fetches your actual repos and profile data
• Dark / Light mode toggle
• Search bar to filter repositories instantly
• Shows stars, forks, and language for each repo
• Fully responsive — works on mobile and desktop
• No frameworks — pure HTML, CSS, JavaScript

Tech Stack

• HTML5 — Page structure
• CSS3 — Styling, CSS variables for theming
• JavaScript ES6+ — API calls, DOM manipulation, search filter
• GitHub REST API — Fetching real user and repo data

Getting Started

1. Clone the repo: git clone https://github.com/YOUR_USERNAME/dev-dashboard.git
2. Open app.js and replace YOUR_GITHUB_USERNAME with your real username
3. Open index.html in your browser — no build step needed!

Deploy to GitHub Pages

1. Push to GitHub
2. Go to Settings → Pages → Source → main / root
3. Live at: https://YOUR_USERNAME.github.io/dev-dashboard

What I Learned

• How to use the GitHub REST API with fetch() and async/await
• Managing UI state without a framework
• Using CSS custom properties to switch themes instantly
• Handling API errors gracefully with try/catch
• Making layouts responsive with CSS Grid

Future Improvements

• Add a language breakdown chart
• Show pinned repositories at the top
• Add pagination for users with many repos

Author

Mahsa

• GitHub: @forurmah