Rajeev Gade — Portfolio

Personal portfolio website for Rajeev Gade, Lead Software Engineer. Built with Next.js, TypeScript, Tailwind CSS, and shadcn/ui.

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui
• Icons: Lucide React
• Theming: next-themes (light/dark mode)
• Deployment: Vercel-ready

Getting Started

Prerequisites

• Node.js 18+
• npm

Install dependencies

npm install

Run development server

npm run dev

Open http://localhost:3000 in your browser.

Build for production

npm run build
npm start

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── layout.tsx          # Root layout, SEO metadata, theme
│   ├── page.tsx            # Home page (all sections)
│   ├── projects/
│   │   ├── page.tsx        # Projects listing
│   │   └── [slug]/         # Dynamic project detail pages
│   └── not-found.tsx       # 404 page
├── components/
│   ├── layout/             # Header, footer, theme provider
│   ├── sections/           # Home page sections
│   ├── projects/           # Project cards and detail views
│   └── ui/                 # Reusable UI components (shadcn + custom)
├── data/                   # Static content (projects, skills, site config)
├── lib/                    # Utility functions
└── types/                  # TypeScript type definitions

Customization

Site configuration

Edit src/data/site.ts to update:

• Name, title, bio
• Email, GitHub, LinkedIn links
• Resume URL
• Site URL for SEO/Open Graph

Projects

Edit src/data/projects.ts to add or update projects. Each project needs a unique slug for dynamic routing at /projects/[slug].

Skills & Experience

• Skills: src/data/skills.ts
• Experience: src/data/experience.ts

Resume

Place your resume PDF at public/resume.pdf. The site links to /resume.pdf from the hero and contact sections.

Open Graph image

Add a 1200×630 image at public/og-image.png for social sharing previews.

Deployment to Vercel

1. Push the repository to GitHub
2. Import the project in Vercel
3. Vercel auto-detects Next.js — no extra configuration needed
4. Set the production domain in src/data/site.ts (siteConfig.url)

Or deploy via CLI:

npm i -g vercel
vercel

Features

• Responsive design (mobile-first)
• Light and dark mode
• SEO metadata and Open Graph tags
• Dynamic project detail pages with slug-based routing
• 404 handling for missing projects and pages
• Accessible color contrast
• Minimal, professional animations

License

Private — all rights reserved.