feat(infra): optimize Docker for cold-starts & add design rationale

• Refactored Dockerfile into 3 stages (deps, builder, runner) to maximize layer caching and minimize cold-start latency.
• Integrated 'Engineering Decision Audit' modal for HLD/LLD pages.
• Added architectural FAQs covering multi-cloud strategy, error logging, and the Workerd portability plan.

Author: version-cv

Dockerfile

@@ -1,18 +1,31 @@
-FROM node:20-slim
-
+# Stage 1: Install dependencies
+FROM node:20-slim AS deps
 WORKDIR /app
-
-ENV PORT=8080
-ENV NEXT_TELEMETRY_DISABLED=1
-
 COPY package.json package-lock.json* ./
-RUN npm install
+RUN npm ci
 
+# Stage 2: Build the app
+FROM node:20-slim AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-
+ENV NEXT_TELEMETRY_DISABLED 1
 RUN npm run build
 
+# Stage 3: Runner
+FROM node:20-slim AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV PORT 8080
+
+# Standalone mode only needs these files
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
 
 EXPOSE 8080
 
-CMD ["npm", "run", "start"]
+
+CMD ["node", "server.js"]

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output:'standalone'
 };
 
 export default nextConfig;

src/app/versioncv/page.tsx

@@ -2,8 +2,9 @@
 
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Layers, Activity, ShieldCheck, Zap, Database, ArrowRight } from 'lucide-react';
+import { Layers, Activity, ShieldCheck, Zap, Database, ArrowRight, Terminal } from 'lucide-react';
 import HomeButton from '@/components/HomeButton';
+import ArchitectureFAQ from '@/components/ArchitectureFAQ';
 
 /* ======================================================
     ARCHITECTURE DATA
@@ -104,6 +105,7 @@ const HLD: Layer[] = [
 ====================================================== */
 
 export default function VersionCVPage() {
+  const [isFAQOpen, setFAQOpen] = React.useState(false);
   return (
     <main className="relative min-h-screen bg-[#05080c] text-slate-200 overflow-x-hidden font-sans">
 
@@ -156,6 +158,18 @@ export default function VersionCVPage() {
               View Interactive Pipelines
               <ArrowRight size={18} />
             </motion.a>
+            <motion.button 
+  onClick={() =>setFAQOpen(true)}
+  whileHover={{ scale: 1.02 }}
+  whileTap={{ scale: 0.98 }}
+  className="cursor-pointer inline-flex items-center gap-3 px-6 py-3 rounded-xl 
+             bg-blue-500/10 border border-blue-500/20 hover:border-blue-500/50 
+             text-blue-400 hover:text-blue-300 font-mono text-xs font-black
+             uppercase tracking-widest transition-all backdrop-blur-md group"
+>
+  <Terminal size={16} className="group-hover:rotate-12 transition-transform" />
+  See Engineering Decisions // FAQ
+</motion.button>
             <span className="text-slate-500 text-sm font-mono tracking-tighter">
               (HLD overview below)
             </span>
@@ -237,6 +251,12 @@ export default function VersionCVPage() {
           ))}
         </div>
       </div>
+      <ArchitectureFAQ
+        isOpen={isFAQOpen}
+        onClose={() => setFAQOpen(false)}
+      />
+
+    
 
       {/* Footer Branding */}
       <footer className="py-20 text-center border-t border-white/5 mt-20">

src/app/versioncv/pipelines/page.tsx

@@ -16,9 +16,11 @@ import {
   X, Cpu, Database, Globe, Shield, Lock, Zap, Server, 
   Code, Activity, Search, FileEdit, MessageSquare, 
   ListChecks, 
-  BarChart3, Home
+  BarChart3, Home,
+  Terminal
 } from 'lucide-react';
 import HomeButton from '@/components/HomeButton';
+import EngineeringAuditModal from '@/components/ArchitectureFAQ';
 
 /* ======================================================
    1. MASTER DATA DEFINITIONS (NON-TRUNCATED)
@@ -430,6 +432,7 @@ function TestMetricsView() {
   const [selectedTest, setSelectedTest] = useState<typeof TEST_PROOFS[0] | null>(
     TEST_PROOFS[0]
   );
+ 
   const [zoomImg, setZoomImg] = useState<string | null>(null);
   const isMobile =
   typeof window !== 'undefined' && window.innerWidth < 768;
@@ -600,6 +603,7 @@ function TestMetricsView() {
 
 export default function PipelineVisualizer() {
   const [selectedNode, setSelectedNode] = useState<any>(null);
+   const [isFAQOpen, setFAQOpen] = React.useState(false);
   const [activeTab, setActiveTab] = useState('ats-scan');
 
   const tabs = [
@@ -639,11 +643,25 @@ export default function PipelineVisualizer() {
       : 'bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/20'
     }`}
 >
+
   <BarChart3 size={16} />
   View Test Metrics & Latencies
 </button>
         </div>
+                             <motion.button 
+  onClick={() =>setFAQOpen(true)}
+  whileHover={{ scale: 1.02 }}
+  whileTap={{ scale: 0.98 }}
+  className="cursor-pointer inline-flex items-center gap-1 px-4 py-1.5 rounded-xl 
+             bg-blue-500/10 border border-blue-500/20 hover:border-blue-500/50 
+             text-blue-400 hover:text-blue-300 font-mono text-xs font-black
+             uppercase tracking-widest transition-all backdrop-blur-md group"
+>
+  <Terminal size={16} className="group-hover:rotate-12 transition-transform" />
+  See Engineering Decisions // FAQ
+</motion.button>
           <HomeButton/>
+ 
         <div className="text-center md:text-right">
             <h1 className="text-white text-lg md:text-xl font-black tracking-tighter italic">VERSION-CV ARCHITECTURE</h1>
             <p className="text-blue-500 font-mono text-[8px] md:text-[9px] tracking-[0.4em] uppercase font-bold">Serverless Orchestration</p>
@@ -775,6 +793,8 @@ export default function PipelineVisualizer() {
         Storage/DB: D1 / KV / R2 bucket
     </div>    
       </footer>
+      {/* FAQ Modal */}
+      < EngineeringAuditModal  isOpen={isFAQOpen} onClose={() => setFAQOpen(false)} />
 
     </div>
   );

src/components/ArchitectureFAQ.tsx

@@ -0,0 +1,110 @@
+'use client';
+import { AnimatePresence, motion } from 'framer-motion';
+import { HelpCircle, Terminal, Zap, Cpu, Database, Activity, Server, Layers, X } from 'lucide-react';
+
+/* ======================================================
+    ARCHITECTURAL AUDIT / FAQ DATA
+====================================================== */
+const ARCHITECT_FAQS = [
+  {
+    q: "Why decompose logic into independent services instead of a single Monolith?",
+    a: "To control the 'Blast Radius.' By isolating related logic into independent services, a failure in the ATS Parser won't bring down the Auth or Payment gateways. This 'Selective Maintenance' allows me to update the Scoring Engine without any downtime for the rest of the system, keeping everything organized and easy to manage.",
+    icon: <Cpu size={14} className="text-blue-400" />
+  },
+  {
+    q: "Why Cloudflare Workers over AWS Lambda or GCP Cloud Run for core logic?",
+    a: "In my initial AWS/GCP prototypes, cold starts were killing the UX. Cloudflare uses V8 Isolates, providing <5ms cold starts. Additionally, the restricted NPM support forced me to write 'Pure TS' with minimal dependencies, resulting in a lean, hardened codebase that isn't bloated by external package vulnerabilities.",
+    icon: <Zap size={14} className="text-yellow-400" />
+  },
+  {
+    q: "What was the motivation for a Multi-Cloud strategy?",
+    a: "Operating System constraints. While Cloudflare handles the 'Speed-Layer,' heavy tasks like PDF rendering with Puppeteer require a full OS environment and state persistence. I offloaded these to GCP Cloud Run, creating a hybrid mesh that leverages Edge speed for logic and Containerized power for heavy lifting without compromising quality or security.",
+    icon: <Activity size={14} className="text-purple-400" />
+  },
+  {
+    q: "Why implement a Producer-Consumer pattern with SSE for long-running tasks?",
+    a: "UX Decoupling. Resume optimization can take ~30s. If run synchronously, the CPU spikes and the connection times out. I send the request to a queue and open an SSE connection to track progress. This allows for async batch processing, keeping the frontend snappy and the backend efficient under high request volume.",
+    icon: <Terminal size={14} className="text-orange-400" />
+  },
+  {
+    q: "Why choose a Relational DB combined with KV Caching?",
+    a: "Relational integrity with Edge performance. We need JOINs for complex user data, but DB latencies can be 10x slower than the Edge. I use Cloudflare KV as a cache with ~9ms latency to store hot metadata, ensuring the UI feels 'instant' while maintaining an organized, normalized data structure in D1/PostgreSQL.",
+    icon: <Database size={14} className="text-green-400" />
+  },
+{
+  q: "What is the 'Hard Exit' strategy if Cloudflare ceases to be viable?",
+  a: "The architecture is strictly built against the 'workerd' open-source runtime—the same V8 Isolate engine that powers Cloudflare under the hood. This ensures 100% environment parity. If we need to migrate, we can deploy the same code into a workerd-based container mesh on any VPS (AWS/GCP/DigitalOcean). The data layer follows: Metadata migrates from D1 to Neon PostgreSQL (or self-hosted MinIO for storage). Zero code rewrites, just a runtime shift.",
+  icon: <Server size={14} className="text-red-500" />
+},
+{
+  q: "How do you handle debugging when something breaks in this distributed setup?",
+  a: "I built a custom error-catching mechanism into every service. Each time an error occurs, it calls a central 'Error Logger' function that writes directly to a single database table. This table stores the error message, the specific route, the service name, and the exact function where it failed. Instead of wasting hours or days hunting through different cloud logs, I just check this one central DB table. It tells me exactly where to go to fix the problem in minutes.",
+  icon: <Activity size={14} className="text-red-400" />
+},
+{
+  q: "Is Serverless always better than a traditional Monolith or Pod-based setup?",
+  a: "Not at all. Heavy, CPU-intensive workloads that require constant uptime are often cheaper and more stable on dedicated instances. My approach is to analyze a Monolith top-to-bottom: I evaluate each component's cost, risk, and resource utilization. If a service has spiky load or remains idle >50% of the time, I decouple it to Serverless to save costs. If it’s a mission-critical, high-utilization service, I keep it on dedicated infrastructure. It’s about matching the deployment model to the actual workload requirements.",
+  icon: <Layers size={14} className="text-slate-400" />
+}
+];
+
+
+export default function EngineeringAuditModal({ isOpen, onClose }: { isOpen: boolean, onClose: () => void }) {
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-6 md:p-10">
+          {/* Backdrop */}
+          <motion.div 
+            initial={{ opacity: 0 }} 
+            animate={{ opacity: 1 }} 
+            exit={{ opacity: 0 }}
+            onClick={onClose}
+            className="absolute inset-0 bg-[#05080c]/90 backdrop-blur-md"
+          />
+
+          {/* Modal Card */}
+          <motion.div 
+            initial={{ opacity: 0, scale: 0.95, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 20 }}
+            className="relative w-full max-w-4xl max-h-[85vh] bg-[#0a0f18] border border-white/10 rounded-[2.5rem] shadow-2xl overflow-hidden flex flex-col"
+          >
+            {/* Header */}
+            <div className="p-8 border-b border-white/5 flex items-center justify-between bg-white/[0.02]">
+              <div className="flex items-center gap-4">
+                <div className="p-3 bg-blue-500/10 rounded-2xl border border-blue-500/20">
+                  <Terminal size={20} className="text-blue-400" />
+                </div>
+                <div>
+                  <h2 className="text-xl font-black text-white italic uppercase tracking-tighter">Engineering Decision Audit</h2>
+                  <p className="text-[10px] font-mono text-slate-500 uppercase tracking-widest">versionCV</p>
+                </div>
+              </div>
+              <button onClick={onClose} className="cursor-pointer p-3 hover:bg-white/5 rounded-full transition-colors text-slate-500 hover:text-white">
+                <X size={24} />
+              </button>
+            </div>
+
+            {/* Content (Scrollable) */}
+            <div className="flex-1 overflow-y-auto p-8 md:p-12 space-y-12">
+              {ARCHITECT_FAQS.map((faq, index) => (
+                <div key={index} className="group relative pl-8 border-l border-slate-800 hover:border-blue-500/30 transition-colors">
+                  <div className="absolute -left-1 top-1 h-2 w-2 rounded-full bg-slate-800 group-hover:bg-blue-500 transition-colors" />
+                  <h3 className="text-lg font-bold text-white mb-3 tracking-tight flex items-center gap-3">
+                    <span className="text-blue-500 font-mono text-sm">Q:</span> {faq.q}
+                  </h3>
+                  <p className="text-slate-400 text-sm leading-relaxed italic font-medium">
+                    <span className="text-slate-600 font-mono text-sm mr-2">A:</span> {faq.a}
+                  </p>
+                </div>
+              ))}
+            </div>
+
+          
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+}