GitGrid

Turn your GitHub repos into a clean portfolio. Log in with GitHub, and your repos appear as a card grid at gitgrid.app/username.

gitgrid.app

Features

• Auto-sync — Pulls your repos and profile from GitHub (public + private)
• Drag & drop — Reorder cards visually
• Screenshots — Upload images or auto-capture from homepage URLs (Cloudflare Browser Rendering)
• Screenshot frames — Portrait (phone) and landscape (browser) frames with customizable colors; per-card toggle for browser chrome (address bar + dots) and phone border
• Card dropdown menu — Per-card settings menu (frame type, colors, chrome toggle) accessible via a top-left dropdown in edit mode
• Settings — Title, bio, social links, footer, alignment — all editable in-app
• Hidden repos — Hide any repo from your public portfolio
• Public pages — Visitors see your portfolio with zero GitHub API calls (served from cache)
• OG meta tags — Dynamic Open Graph tags for link previews
• Landing page — Marketing page with hero image and CTA for unauthenticated visitors
• Visit stats — Daily/weekly visit counter shown to the portfolio owner
• Social links — GitHub, Twitter, blog, email, and Buy Me a Coffee
• Show/hide card titles — Toggle card titles from settings
• Show/hide link badge — Toggle the external link badge on cards from settings
• Privacy policy — Accessible directly from the settings modal
• SEO — robots.txt, dynamic sitemap (/sitemap.xml), and JSON-LD structured data per portfolio

Tech stack

• Frontend — Vanilla JS, no framework, no bundler runtime
• Backend — Cloudflare Workers + D1 (SQLite) + R2 (images) + Browser Rendering
• Auth — GitHub App OAuth with HMAC-SHA256 sessions
• Icons — Lucide
• Font — Geist

Project structure

├── main.js # App entry
├── dev-config.js # Edit-mode features (owner only)
├── style.css # CSS imports hub
├── styles/ # Modular stylesheets
│ ├── variables.css # Custom properties, reset, keyframes
│ ├── layout.css # Page title, grid, footer
│ ├── card.css # Cards, screenshot frames
│ ├── components.css # Shared UI (buttons, overlays, panels)
│ ├── modal.css # Settings modal
│ ├── editor.css # Edit mode, image picker
│ ├── landing.css # Landing page
│ └── responsive.css # Breakpoints
├── index.html # SPA shell
└── gitgrid-worker/ # Cloudflare Worker
└── src/
├── index.ts # Router
├── auth.ts # GitHub OAuth
├── config.ts # User config
├── sync.ts # GitHub sync
├── images.ts # R2 image handling
├── portfolio.ts # Public portfolio API
└── screenshot.ts # Auto-screenshot capture

Development

npm install
npm run dev # Vite dev server (localhost:5173)

In a separate terminal:

cd gitgrid-worker
npm install
npm run dev # Wrangler dev (localhost:8787)

The Vite dev server proxies /api and /img to the Worker.

Deploy

npm run deploy # Build + wrangler deploy

Requires a Cloudflare account with D1 and R2 configured. Secrets (GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, HMAC_KEY) are set via wrangler secret put.

License

MIT