Portfolio

Portfolio (v5.0.0) is an open-source, production-ready portfolio template built on Next.js 16, React 19, TypeScript, and Panda CSS that turns a developer's GitHub profile and coding activity into a retro-modern personal website.

What is Portfolio?

Portfolio is a production-ready personal website template created by GitHub user muhammad-fiaz that accepts configuration via a .env.local file with keys like GITHUB_TOKEN, HACKATIME_API_KEY, and NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY, and produces a developer portfolio page with live GitHub statistics, Hack Club coding insights, a contact form, and analytics. It runs on Next.js 16's App Router and is written entirely in TypeScript, using Bun as the package manager and runtime.

The repository is released as open source under a license file at the root of the project. The readme includes badges for stars, forks, issues, license, and last commit, indicating active maintenance.

What makes Portfolio stand out?

The template combines a modern Next.js 16 stack with rare integrations that go beyond static portfolio themes.

• Modern framework stack — Built with Next.js 16 (App Router), React 19, and TypeScript, giving you server components, routing, and type safety out of the box.
• Dual styling system — Uses Tailwind CSS 4 combined with Panda CSS and a custom utility layer, offering both utility-first speed and design-system control.
• Live GitHub contribution snake — The GitHub stats section includes an animated contribution snake SVG pulled from the profile output branch, refreshed with your real contribution data.
• Hack Club coding insights — Integrates with Hackatime to display coding stats and heatmap visuals, driven by your HACKATIME_API_KEY and an optional HACKATIME_API_BASE_URL that defaults to https://hackatime.hackclub.com.
• Contact form without a backend — Wired to Web3Forms through NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY, so form submissions reach your inbox without maintaining a server.
• State and data management — Uses Zustand for client state and TanStack Query for data fetching, along with Framer Motion and animejs for animations.
• Configured analytics — Google Tag Manager and Google Analytics IDs can be overridden with NEXT_PUBLIC_GTM_ID and NEXT_PUBLIC_GA_ID; defaults are already set in the template.
• Quality tooling — Includes linting via bun run lint and TypeScript checking via bunx tsc --noEmit, and installs dependencies with a single bun install.

Who should use Portfolio?

Portfolio is aimed at developers and creators who want a live, data-driven personal site without building from scratch.

• Software developers — Set up a polished personal portfolio that displays your GitHub contribution activity, repositories, and skills without writing a site from scratch.
• Open-source contributors — Use the repository as a learning reference for combining Next.js 16, React 19, TypeScript, Panda CSS, Zustand, and TanStack Query in one project.
• Hack Club members — Connect your Hackatime account to show live coding stats and heatmaps on your personal site.
• Job seekers — Launch a retro-modern portfolio quickly by editing environment variables and content, then deploy it to any platform that supports Next.js.

What can you do with Portfolio?

With Portfolio, you can publish a functional developer site tied to real GitHub and Hack Club data.

• Showcase your GitHub activity: The site renders a live contribution snake SVG and GitHub statistics driven by a GITHUB_TOKEN, giving visitors a dynamic view of your coding history.
• Display Hack Club coding metrics: With Hackatime integration, you can present your coding time and heatmap visuals directly on your portfolio.
• Receive contact form submissions: Configure Web3Forms with your access key and let visitors message you directly from the site.
• Track site analytics: Google Tag Manager and Google Analytics identifiers are pre-configured, so you can start measuring traffic after setting the optional overrides.

How does Portfolio work?

Set up follows the readme instructions: install dependencies with bun install, create a .env.local file with the required keys (GITHUB_TOKEN, NEXT_PUBLIC_SITE_URL, HACKATIME_API_KEY, and NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY are the core ones), then start development with bun run dev. The template includes lint and type-check commands, bun run lint and bunx tsc --noEmit, to verify code quality before deploying.

FAQ

Is Portfolio free?

Yes. The repository is open source, and you can use, modify, and deploy it for your personal portfolio. There is no paid tier mentioned in the readme.

Do I need a GitHub token for the portfolio to work?

A GITHUB_TOKEN is recommended to get accurate contribution calendar data. A GITHUB_USER variable can optionally override the default username, but without a token the GitHub statistics section may not display complete data.

How do I connect the Hack Club coding stats?

Set HACKATIME_API_KEY in your .env.local file. The optional HACKATIME_API_BASE_URL defaults to https://hackatime.hackclub.com if you don't provide it.

Can I use a different package manager instead of Bun?

The readme only documents Bun commands (bun install, bun run dev). While the project may work with npm or pnpm, Bun is the specified runtime and package manager.