Portfolio (v5.0.0)

Production-ready portfolio built with Next.js 16, React 19, TypeScript, Panda CSS, and a retro-modern UI system.

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Runtime / Package Manager: Bun
• Styling: Tailwind CSS 4 + Panda CSS + custom utility layer
• State Management: Zustand
• Data Fetching: TanStack Query
• Motion: Framer Motion + animejs

Getting Started

1. Install dependencies

bun install

2. Configure environment

Create .env.local and set the required keys.

Suggested keys:

• GITHUB_TOKEN (recommended for accurate contribution calendar data)
• GITHUB_USER (optional override for default username)
• NEXT_PUBLIC_SITE_URL
• HACKATIME_API_KEY (required for Hack Club coding insights)
• HACKATIME_API_BASE_URL (optional, defaults to https://hackatime.hackclub.com)
• NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY (contact form)
• NEXT_PUBLIC_GTM_ID and NEXT_PUBLIC_GA_ID (optional overrides, defaults are already configured)

Highlights

• GitHub stats section includes the live contribution snake SVG from the profile output branch.
• Hack Club coding insights are powered by Hackatime data and heatmap visuals.

3. Run development server

bun run dev

4. Quality checks

bun run lint
bunx tsc --noEmit

Contributing

Please read CONTRIBUTING.md and CODE_OF_CONDUCT.md before opening issues or pull requests.

Support

If this project helped you, please star the repository:

https://github.com/muhammad-fiaz/portfolio