Skip to content

README.md

Latest commit

 

History

History
196 lines (157 loc) · 9.29 KB

README.md

File metadata and controls

196 lines (157 loc) · 9.29 KB

Abhay Chaurasiya — Developer Portfolio

A DevOps-focused portfolio built with Next.js 14, TypeScript, Tailwind CSS, and GSAP + CSS motion — featuring a recruiter-friendly hero, 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

Architecture

┌─────────────────────────────────────────────────────────────────────────┐
│                         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)    │   │
│                             └─────────────┘     └──────────────────┘   │
└─────────────────────────────────────────────────────────────────────────┘

Sections

# Section Highlights
— Hero Recruiter-focused terminal hero, hiring status panel, open-source proof strip, project CTA
01 About Live merged PR count via GitHub API, skill bars, DevOps identity card
03 Experience Work timeline with impact metrics
04 Projects Recruiter-first project cards with impact framing and live proof
05 Open Source Live CNCF and golang/tools contribution feed with cached fallbacks
06 Skills Technical capability map, radar orb, and systems/tooling overview
07 DevOps Live Real-time CI/CD status (GitHub Actions API) + 52-week contribution heatmap
08 DevOps Playground Interactive terminal — K8s tab (kubectl/helm/docker) + DevEnv CLI tab (spin up/list/teardown)
09 Tech Radar ThoughtWorks-style SVG radar — 30 blips, 4 rings, 4 quadrants, hover details
10 Contact EmailJS-powered contact form

Tech Stack

Layer Technology
Framework Next.js 14 (App Router, static export)
Language TypeScript 5 (strict)
Styling Tailwind CSS 3
Animation GSAP + CSS motion primitives
Icons Lucide React
Contact EmailJS
PDF Puppeteer-core + system Chrome
Deployment Vercel / Docker + Nginx

Project Structure

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             # Recruiter-first terminal hero + proof strip
        ├── About.tsx            # Live merged PR count via GitHub API + cached fallback
        ├── Experience.tsx       # Work experience timeline
        ├── Projects.tsx         # Recruiter-friendly project case studies
        ├── OpenSource.tsx       # Live GitHub PR feed with cached/static fallback
        ├── Skills.tsx           # Capability map + systems tooling
        ├── DevOpsLive.tsx       # CI/CD monitor + contribution heatmap with cache
        ├── DevOpsPlayground.tsx # Interactive kubectl + devenv terminal
        ├── TechRadar.tsx        # Pure SVG Tech Radar (no D3)
        └── Contact.tsx          # EmailJS contact form

Getting Started

Prerequisites

  • Node.js 18+
  • npm

Install & Run

git clone https://github.com/abhay1999/abhay_portfolio.git
cd abhay_portfolio
npm install
npm run dev
# → http://localhost:3000

Environment Variables

Create .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   # optional

Scripts

npm run dev          # Development server
npm run build        # Production build
npm run type-check   # TypeScript check
npm run smoke        # Build + smoke test exported homepage
npm run resume:pdf   # Regenerate public/resume.pdf from resume.html

Updating the Resume

  1. Edit resume.html
  2. Regenerate PDF: 
    npm run resume:pdf
  3. Commit and push: 
    git add resume.html public/resume.pdf public/resume.html
git commit -m "chore: update resume"
git push

Deployment

Vercel (Recommended)

  1. Push to GitHub
  2. Import repo on vercel.com
  3. Add environment variables under Project Settings → Environment Variables
  4. Vercel auto-detects Next.js — no extra config needed

Docker

docker build -t abhay-portfolio .
docker run -p 80:80 abhay-portfolio

License

MIT — feel free to use as a template. A credit link is appreciated.

Built by Abhay Chaurasiya — DevOps · Go · CNCF Open Source