# Implementation & Deployment Guide
## Personal & Agency Portfolio Platform: Er. Sujeet Pandit & TechoMaster

---

## 1. Local Development Quickstart

### 1.1 Prerequisites
- **Node.js**: v18.0.0 or higher (v20+ recommended)
- **Modern Web Browser**: Chrome, Edge, Safari, or Firefox
- **Git**: Installed and configured

### 1.2 Setup & Execution Commands

```bash
# 1. Clone the repository
git clone https://github.com/sujeet3/sujeet-portfolio.git
cd sujeet-portfolio

# 2. Run with standard lightweight HTTP dev server
# Option A: Python 3 built-in server (instant zero-install)
python3 -m http.server 3000

# Option B: Node.js npx serve
npx serve -l 3000 .

# Option C: Live Server (with auto-reload)
npx live-server --port=3000 --open
```

Once started, navigate to: `http://localhost:3000`

---

## 2. Directory Structure

```
sujeet-portfolio/
├── docs/                                   # Full Engineering Documentation Suite
│   ├── 01_PRD.md                           # Product Requirements Document
│   ├── 02_ARCHITECTURE.md                  # System & UI/UX Architecture
│   ├── 03_TECH_STACK.md                    # Tech Stack & Design Token System
│   ├── 04_DATABASE_SCHEMA.md               # SQL & NoSQL Database Schemas
│   ├── 05_API_SPECIFICATION.md             # REST API & Webhook Specifications
│   ├── 06_IMPLEMENTATION_AND_DEPLOYMENT_GUIDE.md # Setup & DevOps Deployment
│   └── README.md                           # Documentation Index & Master Hub
├── assets/                                 # Static Assets & Icons
│   ├── favicon.svg                         # Vector branding favicon
│   ├── og-cover.png                        # Open Graph social banner
│   └── icons/                              # Custom SVG icons
├── index.html                              # High-Performance Semantic Web App
├── styles.css                              # Production Glassmorphic CSS Engine
├── main.js                                 # Three.js Canvas & Interactive Logic
├── Dockerfile                              # Multi-stage production container
├── docker-compose.yml                      # Container orchestration config
├── vercel.json                             # Vercel Edge deployment config
└── netlify.toml                            # Netlify Edge headers & redirect rules
```

---

## 3. Docker Containerization

### 3.1 `Dockerfile` (Production Alpine Nginx)

```dockerfile
# Stage 1: Alpine Nginx Production Image
FROM nginx:alpine

# Remove default nginx static assets
RUN rm -rf /usr/share/nginx/html/*

# Copy web application assets
COPY index.html /usr/share/nginx/html/
COPY styles.css /usr/share/nginx/html/
COPY main.js /usr/share/nginx/html/
COPY assets/ /usr/share/nginx/html/assets/
COPY docs/ /usr/share/nginx/html/docs/

# Custom Nginx configuration with gzip and security headers
RUN cat <<EOF > /etc/nginx/conf.d/default.conf
server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # Gzip Compression
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml application/javascript application/json image/svg+xml;

    # Security Headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;

    # Cache static assets
    location ~* \.(css|js|svg|webp|png|jpg|ico)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }

    location / {
        try_files \$uri \$uri/ /index.html;
    }
}
EOF

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

### 3.2 `docker-compose.yml`

```yaml
version: '3.8'

services:
  sujeet-portfolio:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: sujeet_portfolio_app
    ports:
      - "8080:80"
    restart: unless-stopped
    environment:
      - NODE_ENV=production
```

Run container locally with:
```bash
docker-compose up -d --build
```
Access at: `http://localhost:8080`

---

## 4. Production CI/CD Pipeline (GitHub Actions)

Create `.github/workflows/deploy.yml`:

```yaml
name: Deploy Portfolio to Production

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  audit-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v4

      - name: Setup Node.js Environment
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: HTML / CSS Quality Check
        run: |
          npx htmlhint index.html
          echo "HTML Lint Passed!"

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'
```

---

## 5. Deployment Guides

### 5.1 Vercel Edge Deployment (Zero-Config)
1. Push repository to GitHub (`github.com/sujeet3/sujeet-portfolio`).
2. Log into [vercel.com](https://vercel.com) and click **"Add New Project"**.
3. Select the repository and keep standard static settings.
4. Add custom domain: `sujeet.techomaster.in` or `techomaster.in`.

### 5.2 Netlify Deployment
1. Connect repository in Netlify Dashboard.
2. Build command: *(leave blank)*.
3. Publish directory: `.`
4. Click **Deploy Site**.

### 5.3 Cloudflare Pages Deployment
1. Navigate to **Workers & Pages** in Cloudflare.
2. Connect GitHub repo `sujeet-portfolio`.
3. Set Framework Preset to `None`.
4. Deploy immediately to Cloudflare's ultra-fast global 300+ city edge network.

---

## 6. Performance & Lighthouse Optimization Checklist

- [x] **Zero Render-Blocking CSS/JS**: CSS loaded in `<head>`, JS loaded with `defer`.
- [x] **Preconnected Web Fonts**: `preconnect` enabled for `fonts.googleapis.com` & `fonts.gstatic.com`.
- [x] **Vector SVG Media**: Zero heavy raster assets, 100% vector scalability.
- [x] **Passive Event Listeners**: Non-blocking scroll and touch physics for Three.js.
- [x] **OpenGraph & Schema.org Metadata**: Instant high-fidelity cards on LinkedIn, Twitter/X, WhatsApp, and Facebook.