React | Next.js | Node.js | JavaScript | TypeScript

github

Utkarsh Singhal • Peerlist

Built to show work, not just list itMy personal site is a single-page portfolio for projects, experience, open source, and writing. It’s designed around a blueprint-style layout — grid lines, corner marks, and a pine-teal accent — so it reads like a crafted product rather than a generic dev template.<h3>What makes it different</h3><ul><li>Live GitHub data&nbsp;— contribution graph and open-source section pull real activity from GitHub, including merged PRs and repo stats</li><li>Keyboard-first navigation&nbsp;—&nbsp;⌘K&nbsp;/&nbsp;/&nbsp;command menu with shortcuts to jump to any section (h,&nbsp;w,&nbsp;e,&nbsp;o,&nbsp;s,&nbsp;a,&nbsp;c)</li><li>Interactive stack section&nbsp;— 40+ tech chips with Matter.js physics; drag, toss, and reset</li><li>Smooth theme switching&nbsp;— light/dark toggle with View Transition API for a polished feel</li><li>Performance-first&nbsp;— Next.js App Router, dynamic OG images, Vercel Analytics &amp; Speed Insights</li></ul><h3>Sections</h3><ul><li>Work&nbsp;— featured projects with live links and stack tags</li><li>Experience&nbsp;— roles at Suraasa, Aardo Solutions, and earlier internships</li><li>Open source&nbsp;— contributions to vue-bits, react-bits, and other repos</li><li>Stack&nbsp;— interactive skill visualization</li><li>Writing&nbsp;— technical articles on TypeScript and backend topics</li></ul>

utkarsh.

Contrib Circles turns a repo’s contributors into a beautiful SVG circle-pack you can embed in a README with one line of markdown. Circle size follows commit count — bigger circles mean more contributions.<h3>Embed in seconds</h3><ol><li>Open the <a target="_blank" rel="noopener noreferrer nofollow ugc" class="break-all link-break text-gray-500 hover:underline" href="https://contrib-circles.vercel.app/">live builder</a></li><li>Enter owner/repo and customize your badge</li><li>Copy the markdown and paste it into your README</li></ol>Example URL: <a target="_blank" rel="noopener noreferrer nofollow ugc" class="break-all link-break text-gray-500 hover:underline" href="http://contrib-circles.vercel.app/tailwindlabs/tailwindcss](https://contrib-circles.vercel.app/tailwindlabs/tailwindcss)">tailwindlabs/tailwindcss</a><h3>What you can customize</h3><ul><li>Layout — pack, grid, or row</li><li>Colors — background, borders, transparent mode</li><li>Sizing — padding, min/max radius, contribution curve</li><li>Avatars — circle, rounded, or square</li><li>Filters — exclude bots or specific logins</li></ul><h3>Public and private repos</h3>Public repos work out of the box. For private repos, install the GitHub App once. Auth stays server-side, with no tokens in the badge URL.<h3>Built for READMEs</h3><ul><li>SVG output with inlined avatars</li><li>CDN caching for fast loads</li><li>Rate limiting per repo</li><li>Live preview before you embed</li></ul><h3>Examples</h3><ul><li><a target="_blank" rel="noopener noreferrer nofollow ugc" class="break-all link-break text-gray-500 hover:underline" href="https://contrib-circles.vercel.app/tailwindlabs/tailwindcss">tailwindlabs/tailwindcss</a></li><li><a target="_blank" rel="noopener noreferrer nofollow ugc" class="break-all link-break text-gray-500 hover:underline" href="https://contrib-circles.vercel.app/microsoft/vscode">microsoft/vscode</a></li><li><a target="_blank" rel="noopener noreferrer nofollow ugc" class="break-all link-break text-gray-500 hover:underline" href="https://contrib-circles.vercel.app/shadcn-ui/ui">shadcn-ui/ui</a></li><li><a target="_blank" rel="noopener noreferrer nofollow ugc" class="break-all link-break text-gray-500 hover:underline" href="https://contrib-circles.vercel.app/denoland/deno">denoland/deno</a></li></ul>Free to use. Built with Next.js, deployed on Vercel.