My personal portfolio website, built with Next.js, Tailwind CSS and deployed to Vercel. Based on chronark's site. Some ideas borrowed from leerob/leerob.io.

It is supposed to be used as a template for other GitHub users' portfolios. Data about user and projects are gathered via GitHub and Vercel API.

• Framework: Next.js 16.0.1
• Deployment: Vercel
• Styling: Tailwind CSS 4.1.12
• UI: React 19.2.0

The portfolio automatically displays comprehensive information for each repository in the /projects page. Here's what visitors can expect to see for each project:

• Project name with gradient styling and clickable links
• Description from GitHub repository
• Creation date showing when the project was started
• Star count with compact number formatting
• GitHub repository link for easy access to source code

• Visitor statistics: Unique repository visitors in the last 14 days and today
• Security alerts: Dependabot alerts categorized by severity (critical, high, medium, low)
• AI assistance: Count of merged Copilot pull requests in the last 2 weeks

• Vercel integration: Shows deployment status, Node.js version, and framework info
• Framework detection:
  • Next.js projects with Pages Router, App Router, or hybrid detection
  • Turbopack usage indicator
  • Next.js version upgrade recommendations
• UI library detection: Automatically identifies Tailwind CSS, React Bootstrap, Primer, and other libraries from package.json

• GitHub API: Repository information, traffic data, security alerts, pull requests
• Vercel API: Deployment information and project details
• GraphQL queries: Pinned repositories and organization data

All data is cached and refreshed automatically to ensure good performance while providing up-to-date information.

git clone https://github.com/jirihofman/portfolio.git
cd portfolio

Create a .env.local file similar to .env.example.

cp .env.example .env.local

Add your tokens to the .env.local file:

GH_TOKEN=YOUR_GH_TOKEN
# Optional: If you have Vercel projects, create a token here https://vercel.com/account/tokens to get more info.
VC_TOKEN=YOUR_VERCEL_TOKEN
# Optional: Set to false when using your own data
IS_TEMPLATE=true

Then install dependencies and run the development server:

# Install dependencies.
npm install
# Replace jirihofman's personal info with octocat's.
npm run setup
# Start hacking.
npm run dev

Edit data.json to put your personal information there.

Please remove all of my personal information in data.json before deploying your own version of this site by running npm run setup. Once you are happy with your data.json, set IS_TEMPLATE=false in your .env.local file to prevent npm run build from reverting data.json back to Octocat's data.

• data.json: githubUsername, description, heroNames. Handled by setup.mjs.
• README.md: link at the top
• app/layout.jsx: metadata - title, description, favicon. Handled by setup.mjs.
• public/favicon.ico. Handled by setup.mjs.