A DevOps-focused portfolio built with Next.js 14, TypeScript, Tailwind CSS, and Framer Motion — featuring a live CI/CD health dashboard, interactive DevOps terminal playground, GitHub contribution heatmap, and a ThoughtWorks-style Tech Radar.
Live: abhay-portfolio.vercel.app · Resume: Download PDF
┌─────────────────────────────────────────────────────────────────────────┐
│ Browser (Client) │
│ │
│ ┌───────────┐ ┌───────────┐ ┌──────────────┐ ┌─────────────────┐ │
│ │ Hero │ │ About │ │ Skills │ │ Experience │ │
│ │ + Resume │ │ + Live PR │ │ 3D TiltCard │ │ Timeline │ │
│ │ Download │ │ Count │ │ Dot Matrix │ │ │ │
│ └───────────┘ └─────┬─────┘ └──────────────┘ └─────────────────┘ │
│ │ │
│ ┌───────────┐ ┌──────▼──────┐ ┌─────────────┐ ┌────────────────┐ │
│ │ Projects │ │ Open Source │ │ DevOps Live │ │DevOps Playground│ │
│ │ 5 cards │ │ Live PRs │ │ CI/CD Health│ │kubectl + devenv│ │
│ │ TiltCard │ │ from API │ │ + Heatmap │ │ Tab switcher │ │
│ └───────────┘ └──────┬──────┘ └──────┬──────┘ └────────────────┘ │
│ │ │ │
│ ┌────────────────┐ ┌──▼─────────┐ │ ┌─────────────────────────┐ │
│ │ Tech Radar │ │ Contact │ │ │ External APIs │ │
│ │ SVG · 30 blips │ │ EmailJS │ │ │ ┌───────────────────┐ │ │
│ │ 4 rings/quads │ │ │ └──┼──│ GitHub REST API │ │ │
│ └────────────────┘ └────────────┘ │ │ /actions/runs │ │ │
│ │ │ /search/issues │ │ │
└────────────────────────────────────────────┼──│ contributions API │ │ │
│ └───────────────────┘ │ │
│ ┌───────────────────┐ │ │
└──│ EmailJS SDK │ │ │
└───────────────────┘ │ │
└─────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│ Deployment │
│ │
│ Next.js 14 ┌─────────────┐ ┌──────────────────┐ │
│ output: 'export' ──────► │ Vercel │ │ Docker + Nginx │ │
│ Static HTML/JS/CSS │ (primary) │ │ (self-hosted) │ │
│ └─────────────┘ └──────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
| # | Section | Highlights |
|---|---|---|
| — | Hero | Animated circuit background, 3D terminal card, rotating roles, resume PDF download |
| 01 | About | Live merged PR count via GitHub API, skill bars, DevOps identity card |
| 02 | Skills | 3D TiltCard, DotMatrix visualization, radar orb, animated badge cloud |
| 03 | Experience | Work timeline with impact metrics |
| 04 | Open Source | Live CNCF PR feed — merged/open badges fetched from GitHub Search API |
| 05 | Projects | 5 TiltCards (K8s, DevEnv, Portfolio, Netflix EKS, AvlokanIAS) with terminal strips |
| 06 | DevOps Live | Real-time CI/CD status (GitHub Actions API) + 52-week contribution heatmap |
| 07 | DevOps Playground | Interactive terminal — K8s tab (kubectl/helm/docker) + DevEnv CLI tab (spin up/list/teardown) |
| 08 | Tech Radar | ThoughtWorks-style SVG radar — 30 blips, 4 rings, 4 quadrants, hover details |
| 09 | Contact | EmailJS-powered contact form |
| Layer | Technology |
|---|---|
| Framework | Next.js 14 (App Router, static export) |
| Language | TypeScript 5 (strict) |
| Styling | Tailwind CSS 3 |
| Animation | Framer Motion 11 |
| Icons | Lucide React |
| Contact | EmailJS |
| Puppeteer-core + system Chrome | |
| Deployment | Vercel / Docker + Nginx |
abhay_portfolio/
├── public/
│ ├── resume.pdf # Generated by scripts/generate-resume-pdf.js
│ ├── resume.html # Resume source served at /resume.html
│ └── profile-picture.svg
├── scripts/
│ └── generate-resume-pdf.js # Puppeteer: resume.html → resume.pdf
├── resume.html # Edit this to update your resume
└── src/
├── app/
│ ├── layout.tsx
│ ├── page.tsx # Section order + imports
│ └── globals.css
└── components/
├── Hero.tsx # Hero + PDF download button
├── About.tsx # Live merged PR count via GitHub API
├── Skills.tsx # 3D TiltCard + DotMatrix + radar orb
├── Experience.tsx # Work experience timeline
├── OpenSource.tsx # Live GitHub PR feed with badges
├── Projects.tsx # 5 TiltCard project cards
├── DevOpsLive.tsx # CI/CD monitor + contribution heatmap
├── DevOpsPlayground.tsx # Interactive kubectl + devenv terminal
├── TechRadar.tsx # Pure SVG Tech Radar (no D3)
└── Contact.tsx # EmailJS contact form
- Node.js 18+
- npm
git clone https://github.com/abhay1999/abhay_portfolio.git
cd abhay_portfolio
npm install
npm run dev
# → http://localhost:3000Create .env.local (see .env.local.example):
NEXT_PUBLIC_EMAILJS_SERVICE_ID=service_xxxxxxx
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=template_xxxxxxx
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=xxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX # optionalnpm run dev # Development server
npm run build # Production build
npm run type-check # TypeScript check
npm run resume:pdf # Regenerate public/resume.pdf from resume.html- Edit
resume.html - Regenerate PDF:
npm run resume:pdf
- Commit and push:
git add resume.html public/resume.pdf public/resume.html git commit -m "chore: update resume" git push
- Push to GitHub
- Import repo on vercel.com
- Add environment variables under Project Settings → Environment Variables
- Vercel auto-detects Next.js — no extra config needed
docker build -t abhay-portfolio .
docker run -p 80:80 abhay-portfolioMIT — feel free to use as a template. A credit link is appreciated.
Built by Abhay Chaurasiya — DevOps · Go · CNCF Open Source