A cyberpunk-themed dashboard for discovering today's hottest GitHub repositories.
A static website that displays GitHub trending repositories in real-time. Data is fetched live from the GitHub Trending API and presented in a filterable, searchable grid with a neon-green cyberpunk aesthetic. Zero build tools, zero frameworks — just HTML, CSS, and vanilla JS deployed on GitHub Pages.
dadadadas111.github.io/github-trending-repos
- Trending repos — Daily, weekly, and monthly time ranges
- Interactive hero — Canvas particle network animation with mouse interaction and parallax scroll
- Glitch title — Scrambled typing effect + RGB-split CSS glitch animation
- Filter & search — Filter by programming language, search by repo name or description
- Glassmorphism cards — Responsive grid (1/2/3 columns) with hover glow effects and staggered entrance animations
- Smart caching — In-memory cache per time range, no redundant API calls
- Skeleton loading — Shimmer placeholders while data loads
- Accessibility —
prefers-reduced-motiondisables all animations, semantic HTML, ARIA labels - SEO-ready — Open Graph, Twitter Cards, JSON-LD structured data, sitemap, robots.txt
- Zero dependencies — No frameworks, no build step, pure web fundamentals
| Layer | Tech |
|---|---|
| Markup | HTML5 (semantic) |
| Styling | CSS3 — custom properties, glassmorphism, @keyframes, responsive grid |
| Logic | Vanilla JavaScript — Canvas 2D API, Fetch API, debounced search |
| Icons | Phosphor Icons |
| Fonts | Rajdhani + Chakra Petch |
| Hosting | GitHub Pages via GitHub Actions |
git clone https://github.com/dadadadas111/github-trending-repos.git
cd github-trending-repos
# Open directly
open index.html
# Or use a local server
python3 -m http.server 8080
# → http://localhost:8080Push to main → GitHub Actions automatically deploys to GitHub Pages.
First-time setup:
- Go to repo Settings → Pages
- Set Source to GitHub Actions
- Push to
main— the workflow handles the rest
Uses githubtrending.lessx.xyz — a free, no-auth API for GitHub trending data.
GET https://githubtrending.lessx.xyz/trending?since=daily
GET https://githubtrending.lessx.xyz/trending?since=weekly
GET https://githubtrending.lessx.xyz/trending?since=monthly
Returns an array of repos with name, description, repository, language, stars, forks, increased, and builders.
MIT