Production-ready personal portfolio for a Full-Stack AI/ML engineer. Built with Next.js 14 App Router + TypeScript + Tailwind CSS + Framer Motion.
# Requires Node 20+
nvm use 20 # or: node --version (must be >=20)
npm install
npm run dev # http://localhost:3000All content lives in typed files under src/data/. You never need to touch components.
| File | What it controls |
|---|---|
src/data/experience.ts |
Work experience timeline entries |
src/data/projects.ts |
Project cards, bullets, lessons learned |
src/data/skills.ts |
Skill groups, certifications, education |
src/data/publications.ts |
Research publications |
src/data/videos.ts |
YouTube video IDs and metadata |
src/data/agentSessions.ts |
Agent coding session cards |
src/data/awards.ts |
Certifications, hackathons, recognitions |
src/data/tweets.ts |
Static fallback tweets + X handle |
src/data/hobbies.ts |
Beyond the Keyboard hobby cards |
- Drop your PDF at
public/resume.pdf. - The PDF viewer and download button pick it up automatically — no code changes needed.
Create .env.local at the root:
# Required for production (used to build Medium/API URLs)
NEXT_PUBLIC_BASE_URL=https://your-domain.vercel.app
# Optional — increases GitHub API rate limit from 60 to 5000 req/hour
GITHUB_TOKEN=ghp_your_token_hereUpdate the Formspree ID in src/components/Contact.tsx (search for FORMSPREE_ID).
- Push this repo to GitHub.
- Go to vercel.com/new and import the repo.
- Add environment variables in the Vercel dashboard.
- Deploy — Vercel auto-detects Next.js.
| # | Section | Component | Data file |
|---|---|---|---|
| 1 | Hero | Hero.tsx |
hardcoded in component |
| 2 | Resume | Resume.tsx |
skills.ts + public/resume.pdf |
| 3 | Experience | Experience.tsx |
experience.ts |
| 4 | Projects | Projects.tsx |
projects.ts |
| 5 | Blog & Publications | Blog.tsx |
Medium RSS + publications.ts |
| 6 | GitHub Activity | GitHubActivity.tsx |
GitHub REST API |
| 7 | YouTube Videos | Videos.tsx |
videos.ts |
| 8 | Agent Sessions | AgentSessions.tsx |
agentSessions.ts |
| 9 | Beyond the Keyboard | BeyondKeyboard.tsx |
hobbies.ts |
| 10 | Awards | Awards.tsx |
awards.ts |
| 11 | X Feed | XFeed.tsx |
tweets.ts |
| 12 | Contact + Footer | Contact.tsx |
hardcoded |
Next.js 14 · TypeScript · Tailwind CSS · Framer Motion · Lucide React · react-github-calendar · Formspree · Inter + JetBrains Mono · Vercel