# Technology Stack & Tooling Specification
## Personal & Agency Portfolio Platform: Er. Sujeet Pandit & TechoMaster

---

## 1. Core Technology Choices & Rationale

```mermaid
graph TD
    subgraph Frontend ["Frontend Core Technologies"]
        HTML5[HTML5 Semantic Markup]
        CSS3[Vanilla CSS3 + Custom Properties]
        JS[Vanilla ES6+ Modern JavaScript]
        ThreeJS[Three.js r128 3D Canvas Engine]
    end

    subgraph DesignSystem ["Design System & Assets"]
        Fonts[Google WebFonts: Outfit & Plus Jakarta Sans & JetBrains Mono]
        SVGIcons[Modern Vector SVG Iconography]
        GlassUI[Hardware-Accelerated Glassmorphism Engine]
    end

    subgraph BuildAndOps ["Tooling, Build & Infrastructure"]
        NodeJS[Node.js Runtime & Development Server]
        Git[Git & GitHub Version Control]
        Docker[Docker Multi-Stage Containerization]
        VercelNetlify[Vercel / Netlify / Cloudflare Pages Edge CDN]
    end

    Frontend --> DesignSystem
    Frontend --> BuildAndOps
```

---

## 2. Technology Breakdown

### 2.1 Frontend Tier

| Layer | Technology | Version | Rationale |
|---|---|---|---|
| **Structure** | **HTML5** | Living Standard | Fully semantic document outline (`<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`), optimal SEO indexing, rich JSON-LD microdata integration. |
| **Styling** | **Vanilla CSS3** | Modern Specification | Zero runtime overhead, 100% control over design tokens, CSS variables (`--bg-primary`, `--accent-cyan`), CSS Grid & Flexbox, hardware-accelerated animations, and responsive fluid typography via `clamp()`. |
| **Logic & Interactivity** | **Vanilla JavaScript** | ES6+ (ES2022) | High-performance modular architecture without bulky framework overhead. Native DOM manipulation, async/await fetch calls, event delegation, and sub-millisecond execution times. |
| **3D Visual Engine** | **Three.js** | r128 | Lightweight, hardware-accelerated WebGL rendering for the ambient 3D geometric particle constellation on the Hero section with dynamic cursor physics. |
| **Typography** | **Google Fonts** | Latest | **Outfit** (Primary Display/Headings), **Plus Jakarta Sans** (Body & UI text), and **JetBrains Mono** (Developer CLI Terminal & Code Badges). |
| **Iconography** | **Native SVG** | Vector 24x24 / 48x48 | Crisp on all DPI screens, zero HTTP payload bloat, accessible via `aria-hidden` and clean currentColor cascading. |

---

## 3. CSS Token System & Theme Design System

### 3.1 Color Palette & Token Definitions

```css
:root {
    /* Primary Background & Surface Tokens */
    --bg-primary: #07090e;
    --bg-secondary: #0d121f;
    --bg-card: rgba(18, 24, 38, 0.75);
    --bg-card-hover: rgba(26, 35, 54, 0.85);
    --bg-glass: rgba(15, 23, 42, 0.65);
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-glass-hover: rgba(0, 242, 254, 0.3);

    /* Radiant Accent Color Tokens */
    --accent-cyan: #00f2fe;
    --accent-blue: #4facfe;
    --accent-violet: #8b5cf6;
    --accent-purple: #7928ca;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-rose: #f43f5e;

    /* Gradient Tokens */
    --gradient-primary: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    --gradient-accent: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    --gradient-dark: linear-gradient(180deg, rgba(7, 9, 14, 0.8) 0%, #07090e 100%);
    --gradient-glow: radial-gradient(circle at 50% 50%, rgba(0, 242, 254, 0.15), transparent 70%);

    /* Typography & Hierarchy */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-code: 'JetBrains Mono', monospace;

    /* Spacing & Layout */
    --container-max-width: 1280px;
    --section-padding-y: clamp(4rem, 8vw, 7.5rem);
    --section-padding-x: clamp(1.25rem, 4vw, 2.5rem);

    /* Elevation & Shadows */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-cyan-glow: 0 0 25px rgba(0, 242, 254, 0.35);
    --shadow-violet-glow: 0 0 25px rgba(139, 92, 246, 0.35);

    /* Transitions & Physics */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
```

---

## 4. Backend & API Services Tier (Microservices Architecture)

When deployed with serverless backends or containerized APIs, the following technology options are supported:

| Role | Technology Choice | Supported Alternatives | Rationale |
|---|---|---|---|
| **Serverless API Runtime** | **Node.js 20 LTS (Edge Functions)** | Python 3.11 / Go 1.22 | Sub-10ms cold start, native JSON support, ideal for form handling and rate-limiting. |
| **Email & Lead Delivery** | **Resend / SendGrid API** | Nodemailer (SMTP) | High deliverability rate, instant webhook status tracking, secure TLS. |
| **Real-time Notifications** | **Telegram Bot API / Slack Webhook** | Discord Webhook | Instant real-time alerts dispatched to Sujeet Pandit's mobile device upon quote request. |
| **Database Tier (Optional)** | **PostgreSQL (Supabase / Neon)** | MongoDB Atlas | Relational data integrity for structured inquiries, client accounts, and analytics. |
| **Caching & Security** | **Cloudflare Workers & Turnstile** | Google reCAPTCHA v3 | Zero-friction bot protection and edge-level response caching. |

---

## 5. Development & DevOps Tooling

```
Development & DevOps Ecosystem
├── Runtime & Package Management: Node.js v20+, NPM
├── Version Control: Git, GitHub (Repositories: sujeet21git, sujeet3)
├── Code Quality & Formatting: ESLint, Prettier, Stylelint, HTMLHint
├── Testing Suite: Jest / Playwright for E2E user flow tests
├── Containerization: Docker (Alpine Nginx base image), Docker Compose
├── CI/CD Automation: GitHub Actions (.github/workflows/deploy.yml)
└── Edge Hosting Platforms: Vercel, Netlify, Cloudflare Pages, AWS S3 + CloudFront
```

---

## 6. Framework Comparison & Architecture Justification

| Parameter | Vanilla Modern Web (Selected) | React / Next.js | WordPress / CMS |
|---|---|---|---|
| **Initial Bundle Size** | **< 85 KB (Gzipped)** | ~250 KB - 500 KB | ~1.5 MB - 4 MB |
| **Time to Interactive (TTI)** | **< 0.4s** | ~1.2s - 2.0s | ~2.5s - 4.5s |
| **Lighthouse Score** | **98 - 100** | 85 - 95 | 60 - 80 |
| **Runtime Dependency Vulnerabilities** | **Zero (0)** | High (Transitive deps) | High (Plugins/Themes) |
| **Hosting & Maintenance Cost** | **$0 / Serverless Static Edge** | $20+/mo for SSR Edge | $15 - $50/mo VM Hosting |
| **Custom 3D & Animation Control** | **Direct DOM & WebGL access** | React reconciliation overhead | Heavy plugin conflicts |