Nikhil Rajput — Portfolio (v2)

Personal portfolio website for Nikhil Rajput, rebuilt from scratch on the modern Next.js 16 stack with a database-driven content layer, GitHub OAuth admin panel, and full CI/test suite.

[][repo] [][repo] [][repo] [][repo]

[][repo] [][issues] [][pulls] [][license]

---

Screenshots

An immersive, cursor-reactive hero over a page-wide gradient background, with a first-class light and dark theme.

Dark theme	Light theme

---

Table of Contents

• Nikhil Rajput — Portfolio (v2)
  • Screenshots
  • Table of Contents
  • Stack
  • Architecture overview
  • Prerequisites
  • Local setup
    • 1. Clone and install
    • 2. Environment variables
    • 3. Database setup
    • 4. Git hooks
    • 5. Run the dev server
  • Commands
  • Admin panel
  • Deployment
  • Contributing
  • License
  • Sponsor me
  • Connect with me

---

Stack

Layer	Technology
Framework	Next.js 16 (App Router, Turbopack)
UI library	React 19
Language	TypeScript
Styling	Tailwind CSS v4, Geist font
Animation	Framer Motion
Icons	Lucide React
Database	PostgreSQL via postgres-js
ORM	Drizzle ORM
Auth	Auth.js v5 — GitHub OAuth
File storage	Vercel Blob
Email	Resend
Analytics	Vercel Analytics + Google Analytics
Package manager	Bun
Unit tests	Vitest + Testing Library
E2E tests	Playwright
Deployment	Vercel

---

Architecture overview

• DB-driven content — profile, projects, experiences, skills, services, social links, taglines, and FAQs are stored in PostgreSQL and seeded via bun run db:seed. The admin panel allows live CRUD editing. The profile drives the hero (name, editable role marquee, "Currently" tagline, avatar) and the About section.
• Image uploads — the profile avatar and skill icons are uploaded from the admin panel to Vercel Blob (SVG stored raw for crisp vector icons, raster formats optimized to WebP) and served from the CDN. Each field also accepts a plain URL, and existing static asset paths keep working.
• GitHub cache — project metadata (stars, forks, descriptions) is fetched from the GitHub API at build time and revalidated server-side via GITHUB_TOKEN. Only repos listed in the database are enriched.
• Testimonials — visitors submit testimonials through a validated form (inline per-field errors) with an optional cropped avatar uploaded to Vercel Blob. Submissions land in a moderation queue; the admin approves or rejects them before they appear publicly. Resend emails the admin on new submissions.
• Admin panel — protected by GitHub OAuth (AUTH_GITHUB_ID / AUTH_GITHUB_SECRET). Access is restricted to the GitHub login set in ADMIN_GITHUB_LOGIN (default: nixrajput). The panel exposes CRUD tabs for all content types plus the testimonial moderation queue.
• SEO / GEO — structured metadata, Open Graph, Twitter cards, Google verification, and robots.txt are generated from the database profile row and site config.

---

Prerequisites

• Bun ≥ 1.1 — the only supported package manager and runtime.
• PostgreSQL ≥ 14 — running locally or via a managed service (Neon, Supabase, etc.).
• A GitHub OAuth App for admin login (Settings → Developer settings → OAuth Apps).

---

Local setup

1. Clone and install

git clone https://github.com/nixrajput/portfolio-nextjs.git
cd portfolio-nextjs
bun install

2. Environment variables

Copy .env.example to .env.local and fill in the values:

cp .env.example .env.local

Variable	Required	Description
DATABASE_URL	Yes	PostgreSQL connection string, e.g. postgres://user:pass@localhost:5432/portfolio
AUTH_SECRET	Yes	Random secret for Auth.js session encryption (openssl rand -base64 32)
AUTH_GITHUB_ID	Yes	GitHub OAuth App client ID
AUTH_GITHUB_SECRET	Yes	GitHub OAuth App client secret
ADMIN_GITHUB_LOGIN	Yes	GitHub username allowed to access the admin panel (e.g. nixrajput)
GITHUB_TOKEN	Recommended	GitHub personal access token for project metadata fetching (higher rate limits)
BLOB_READ_WRITE_TOKEN	Yes (prod)	Vercel Blob token for image uploads (avatar, skill icons, testimonial avatars)
RESEND_API_KEY	Yes (prod)	Resend API key for admin notification emails
RESEND_FROM_EMAIL	Yes (prod)	From address for emails, e.g. Portfolio <noreply@nixrajput.com> (verified domain)
CONTACT_EMAIL	Yes (prod)	Email address to receive testimonial submission notifications
REVALIDATE_SECRET	Yes (prod)	Secret for the /api/revalidate on-demand revalidation endpoint
NEXT_PUBLIC_SITE_URL	Yes	Canonical site URL, e.g. https://nixrajput.com
NEXT_PUBLIC_GTAG_ID	Optional	Google Analytics measurement ID (e.g. G-XXXXXXXXXX)
NEXT_PUBLIC_GOOGLE_VERIFICATION_TOKEN	Optional	Google Search Console site verification token

The resume link is stored in the database (profile.resumeUrl) and managed from the admin panel — not via an environment variable.

3. Database setup

Run migrations to create the schema, then seed initial data:

bunx drizzle-kit migrate
bun run db:seed

4. Git hooks

Enable the pre-push lint + format gate once per clone:

git config core.hooksPath .githooks

This runs bun run lint and bun run format:check before every push. Bypass in an emergency with git push --no-verify.

5. Run the dev server

bun run dev

The site is available at http://localhost:4000.

---

Commands

Command	Description
bun run dev	Start dev server (Turbopack, port 4000)
bun run build	Production build (Turbopack)
bun run start	Start production server
bun run lint	Run ESLint
bun run lint:fix	Run ESLint with auto-fix
bun run format	Format source files with Prettier
bun run format:check	Check formatting without writing
bun run typecheck	Run tsc --noEmit
bun run test	Run Vitest unit tests
bun run test:watch	Run Vitest in watch mode
bun run test:e2e	Run Playwright end-to-end tests
bun run db:generate	Generate a new Drizzle migration
bun run db:migrate	Apply pending migrations
bun run db:push	Push schema changes directly (dev only)
bun run db:studio	Open Drizzle Studio
bun run db:seed	Seed the database with initial data

---

Admin panel

The admin panel is at /admin and requires authentication via GitHub OAuth.

• Only the GitHub account set in ADMIN_GITHUB_LOGIN (e.g. nixrajput) can sign in.
• After signing in you have access to CRUD tabs for profile, projects, experiences, skills, services, social links, taglines, FAQs, and funding links.
• The profile editor manages your name, bio, hero role marquee, "Currently" tagline, resume link, and avatar (upload or URL). Skill icons are uploaded or URL-pasted per skill.
• Testimonial submissions appear in a moderation queue. Approve a testimonial to make it visible on the site; reject to discard it.

Image uploads (avatar, skill icons) require BLOB_READ_WRITE_TOKEN to be set.

---

Deployment

The site is deployed on Vercel. The main branch deploys automatically.

1. Import the repository in Vercel.
2. Add all required environment variables in the Vercel project settings.
3. Provision a PostgreSQL database (Vercel Postgres / Neon) and set DATABASE_URL to its pooled connection string.
4. Seed the production database once by hand against the production DATABASE_URL: DATABASE_URL=<prod> bun run db:seed. The seed is guarded (seed-if-empty), so it inserts the initial content only when the database is empty and never overwrites later edits.
5. Push to master — Vercel runs the vercel-build script, which applies pending migrations and then builds. It does not seed; data seeding is the one-time manual step above