# Portfolio — Senior Fullstack Engineer

A modern, production-grade portfolio website built with Next.js 15, TailwindCSS, Framer Motion, and Prisma.

## Tech Stack

- **Frontend**: Next.js 15 (App Router), React 19, TypeScript
- **Styling**: TailwindCSS + custom design tokens
- **Animations**: Framer Motion
- **ORM**: Prisma (PostgreSQL)
- **Validation**: Zod + React Hook Form
- **Icons**: Lucide React + React Icons

## Project Structure

```
src/
├── app/
│   ├── api/
│   │   └── contact/         # Contact form API route
│   ├── globals.css
│   ├── layout.tsx            # Root layout with SEO metadata
│   └── page.tsx              # Home page (Server Component)
├── components/
│   ├── sections/             # Full-page section components
│   │   ├── Navbar.tsx
│   │   ├── HeroSection.tsx
│   │   ├── AboutSection.tsx
│   │   ├── TechStackSection.tsx
│   │   ├── ProjectsSection.tsx
│   │   ├── ExperienceSection.tsx
│   │   ├── ArchitectureSection.tsx
│   │   ├── ContactSection.tsx
│   │   └── Footer.tsx
│   └── ui/                   # Reusable UI components
│       └── ProjectCard.tsx
├── lib/
│   ├── prisma.ts             # Prisma client singleton
│   └── utils.ts              # cn() utility
└── types/
    └── index.ts              # TypeScript types
prisma/
├── schema.prisma             # Database schema
└── seed.ts                   # Seed data
```

## Getting Started

### 1. Install dependencies
```bash
npm install
# Also install react-icons for tech stack icons
npm install react-icons
```

### 2. Setup environment
```bash
cp .env.example .env
# Edit .env with your DATABASE_URL
```

### 3. Setup database
```bash
npm run db:generate   # Generate Prisma client
npm run db:push       # Push schema to database
npx ts-node prisma/seed.ts  # Seed with sample data
```

### 4. Run development server
```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000)

## Customization

### Personal Information
Update these files with your information:
- `src/app/layout.tsx` — SEO metadata (name, description, URL)
- `src/components/sections/HeroSection.tsx` — Hero text & social links
- `src/components/sections/AboutSection.tsx` — Bio, stats, skills
- `src/components/sections/Footer.tsx` — Social links, email
- `src/components/sections/ContactSection.tsx` — Contact info

### Database Content
After running seed, use Prisma Studio to manage content:
```bash
npm run db:studio
```

Or update `prisma/seed.ts` with your actual projects and experience data.

## Architecture Philosophy

This portfolio demonstrates the same architectural principles I apply in all projects:
- **Clean folder structure** — scalable and maintainable
- **Server Components** — data fetching at the server level with graceful fallbacks
- **Type safety** — full TypeScript throughout
- **Separation of concerns** — UI components separate from data fetching
- **Graceful degradation** — fallback data when DB is not connected

## Deployment

Deploy to Vercel (recommended):

1. Push to GitHub
2. Import to Vercel
3. Add `DATABASE_URL` environment variable
4. Deploy

For PostgreSQL, use [Supabase](https://supabase.com) or [Neon](https://neon.tech) for free hosted PostgreSQL.