https://github.com/simplearyan/repos
🚀 Automated GitHub Portfolio Dashboard
https://github.com/simplearyan/repos
repos-page
Last synced: 5 days ago
JSON representation
🚀 Automated GitHub Portfolio Dashboard
- Host: GitHub
- URL: https://github.com/simplearyan/repos
- Owner: simplearyan
- Created: 2026-03-28T01:29:06.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-06-16T06:23:36.000Z (25 days ago)
- Last Synced: 2026-06-16T08:18:43.947Z (25 days ago)
- Topics: repos-page
- Language: HTML
- Homepage: https://simplearyan.github.io/repos/
- Size: 178 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GitHub Portfolio Dashboard
A fast, minimalist, and dynamic portfolio dashboard that automatically fetches and displays your public GitHub repositories. Built with performance in mind, it uses a multi-layered caching strategy to ensure fast load times and avoid GitHub API rate limits.
## ✨ Features
- **Multi-layered Data Fetching**:
- **Level 1**: Instant load from `localStorage` cache.
- **Level 2**: Fast load from a static `repos.json` file (generated by GitHub Actions).
- **Level 3**: Fallback to live GitHub API fetching if needed.
- **Automated Updates**: Uses GitHub Actions to fetch your latest repos every hour and commit them to a `repos.json` file.
- **Search & Filter**: Instantly search through your repositories by name, description, or language.
- **Responsive Design**: Clean and modern styling using Tailwind CSS, optimized for all screen sizes.
- **Multiple Versions**: Includes both a vanilla HTML/JS version and a React component version.
## 📂 Project Structure
- `index.html` - The vanilla HTML, Tailwind CSS, and JavaScript implementation. Ready to be hosted directly on GitHub Pages.
- `design/dashboard.jsx` - A React implementation of the dashboard using modern hooks and components.
- `.github/workflows/update-repos.yml` - The GitHub Action that automatically updates the repository data.
## 🚀 Getting Started
To use this portfolio for your own GitHub profile, follow these steps:
### 1. Update your Username
Open `index.html` (or `design/dashboard.jsx` if using React) and replace the default GitHub username with your own:
```javascript
const GITHUB_USERNAME = "your_username";
```
### 2. Update GitHub Actions Workflow
Open `.github/workflows/update-repos.yml` and replace the username in the `curl` URL to fetch your repositories:
```yaml
curl -H "Accept: application/vnd.github.v3+json" \
"https://api.github.com/users/your_username/repos?sort=updated&per_page=100" > repos.json
```
### 3. Configure GitHub Actions Permissions
The automated workflow needs permission to commit the `repos.json` file back to your repository.
1. Go to your repository **Settings**.
2. Navigate to **Actions** > **General**.
3. Under **Workflow permissions**, select **"Read and write permissions"** and click **Save**.
### 4. Enable GitHub Pages
1. Go to your repository **Settings**.
2. Navigate to **Pages**.
3. Under **Source**, select `Deploy from a branch`.
4. Choose the `main` branch and the `/` (root) folder, then **Save**.
Your portfolio will soon be available at `https://your_username.github.io/repository_name/`.
## 🛠️ Built With
- **HTML5 & Vanilla JavaScript**
- **React.js** (Alternative version available in `design/`)
- **Tailwind CSS**
- **Lucide Icons**
- **GitHub API & GitHub Actions**