Add dark mode, logo, proper website layout, and Firebase deploy

- Add SVG document logo mark (black/white, used as favicon + inline component)
- Add dark/light mode toggle with localStorage persistence and system preference detection
- Add engine field to AnalyzeResponse (gemini | heuristic) surfaced in result UI
- Redesign header: sticky nav with logo, GitHub link, theme toggle, health badge
- Add hero section with CTA, tech stack pills, and staggered load animations
- Add "How it works" 3-step section
- Add proper footer with brand, links, and copyright
- Rebuild AnalysisForm with tab-based text/file input switcher
- Add loading skeleton and empty state preview cards to ResultPanel
- Dynamic score ring colour (green/amber/red) based on score band
- Per-section icons (missing skills, strengths, recommendations)
- Full dark mode coverage across all components and CSS utilities
- Add CLAUDE.md codebase guide
- Wire Firebase Hosting to ml-ops-42f07 project

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ppradyoth

CLAUDE.md

@@ -0,0 +1,100 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+AI Resume Analyzer — a fullstack app that accepts a resume (PDF/TXT/text) and target role, calls the Gemini API for structured ATS scoring, and returns `{ ats_score, missing_skills, strengths, recommendations }`. The AI layer has a heuristic fallback so the app works without a Gemini key (used in CI and local demos).
+
+## Commands
+
+### Backend
+
+```bash
+cd backend
+python3.11 -m venv .venv && source .venv/bin/activate
+pip install -r requirements.txt
+uvicorn app.main:app --reload --host 127.0.0.1 --port 8000
+```
+
+Run tests (from `backend/` with venv active):
+```bash
+pytest                          # all tests
+pytest tests/test_analyze.py    # single file
+```
+
+Or from the repo root (no venv needed if installed globally):
+```bash
+npm run backend:test
+```
+
+### Frontend
+
+```bash
+cd frontend
+npm install
+npm run dev    # http://localhost:5173
+npm run build
+```
+
+### Docker
+
+```bash
+docker compose up --build backend   # backend only at :8000
+```
+
+### Environment setup
+
+```bash
+cp .env.example .env
+cp frontend/.env.example frontend/.env
+```
+
+Set `GEMINI_API_KEY` in `.env` for live AI; leave `ENABLE_AI_FALLBACK=true` to use heuristics instead.
+
+## Architecture
+
+```
+Request → FastAPI (routers/analyze.py)
+            → ResumeAnalyzerService (services/resume_service.py)
+                → input extraction (utils/pdf.py)
+                → Pydantic validation (schemas/resume.py: AnalyzePayload)
+                → GeminiResumeService (services/gemini_service.py)
+                     → retry_async (utils/retry.py, exponential backoff + jitter)
+                     → Gemini API with response_json_schema enforcement
+                [on failure or no key]
+                → HeuristicResumeService (services/heuristic_service.py)
+            → AnalyzeResponse (Pydantic, validated on the way out)
+       monitoring_middleware → metrics singleton (services/monitoring_service.py)
+```
+
+### Key architectural rules
+
+- **Strict schema enforcement everywhere.** `AnalyzePayload` validates inputs before any AI call. `AnalyzeResponse` validates Gemini output via `model_validate_json`. `ANALYSIS_JSON_SCHEMA` is passed to Gemini's `response_json_schema` to constrain generation at the API level.
+- **Fallback is controlled by `ENABLE_AI_FALLBACK`.** In production (`render.yaml`) it is `false` so Gemini failures surface as errors. In CI and local dev it defaults to `true`.
+- **All config lives in `app/config.py` (`Settings`).** Access via `get_settings()` (lru_cache). Never read env vars directly in route or service code.
+- **New endpoints** require a router in `app/routers/`, a service in `app/services/`, and Pydantic schemas in `app/schemas/`. Wire the router into `app/main.py`.
+- **Error types** (`AppError`, `BadRequestError`, `AIServiceError`, etc.) are in `app/utils/exceptions.py`. The global handlers in `main.py` convert them to consistent JSON with `request_id`.
+- **Monitoring** is in-memory only — `metrics` singleton in `monitoring_service.py`, recorded by `monitoring_middleware` in `main.py`. Not persistent across restarts.
+
+### Frontend
+
+Single-page React app (`frontend/src/App.jsx`). Components: `AnalysisForm`, `ResultPanel`, `HealthBadge`, `ErrorBanner`, `ErrorBoundary`. API calls are in `frontend/src/lib/api.js`. Backend URL is set via `VITE_API_BASE_URL`.
+
+## Deployment
+
+- **Backend**: Dockerized, deployed to Render via `render.yaml`. Health check on `/health`.
+- **Frontend**: Static Vite build, deployed to Firebase Hosting (`frontend/firebase.json`). Set `VITE_API_BASE_URL` to the Render URL before `npm run build`.
+- **CI**: GitHub Actions (`.github/workflows/ci.yml`) runs `pytest` (backend) and `npm run build` (frontend) on every push/PR to `main`. Tests run with `ENABLE_AI_FALLBACK=true`.
+
+## Environment Variables
+
+| Variable | Default | Purpose |
+|---|---|---|
+| `GEMINI_API_KEY` | — | Required for live AI; omit to use heuristic fallback |
+| `ENABLE_AI_FALLBACK` | `true` | Fall back to heuristics when Gemini fails or is unconfigured |
+| `GEMINI_MODEL` | `gemini-2.5-flash` | Gemini model name |
+| `CORS_ORIGINS` | `http://localhost:5173` | Comma-separated allowed origins |
+| `ENVIRONMENT` | `development` | Surfaced in `/health` response |
+| `MAX_RESUME_CHARS` | `20000` | Resume text is truncated to this before AI call |
+| `MAX_UPLOAD_MB` | `5` | Max file upload size |

backend/app/schemas/resume.py

@@ -1,3 +1,5 @@
+from typing import Literal
+
 from pydantic import BaseModel, Field, field_validator
 
 
@@ -19,6 +21,7 @@ class AnalyzeResponse(BaseModel):
     missing_skills: list[str] = Field(default_factory=list)
     strengths: list[str] = Field(default_factory=list)
     recommendations: list[str] = Field(default_factory=list)
+    engine: Literal["gemini", "heuristic"] = "heuristic"
 
     @field_validator("missing_skills", "strengths", "recommendations")
     @classmethod

backend/app/services/gemini_service.py

@@ -74,7 +74,8 @@ def _parse_response(self, response) -> AnalyzeResponse:
             raise AIOutputError("Gemini returned an empty response.")
 
         try:
-            return AnalyzeResponse.model_validate_json(raw_text)
+            result = AnalyzeResponse.model_validate_json(raw_text)
+            return result.model_copy(update={"engine": "gemini"})
         except json.JSONDecodeError as exc:
             logger.warning("malformed_ai_json", extra={"raw_output": raw_text[:1000]})
             raise AIOutputError("Gemini returned malformed JSON.") from exc

backend/app/services/heuristic_service.py

@@ -56,6 +56,7 @@ async def analyze(self, payload: AnalyzePayload) -> AnalyzeResponse:
             missing_skills=missing_skills,
             strengths=strengths,
             recommendations=recommendations,
+            engine="heuristic",
         )
 
     def _strengths(self, text: str, resume_skills: set[str]) -> list[str]:

frontend/.firebaserc

@@ -0,0 +1,6 @@
+{
+  "projects": {
+    "default": "ml-ops-42f07"
+  }
+}
+

frontend/index.html

@@ -5,9 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="AI Resume Analyzer and Career Assistant for ATS scoring and recommendations."
+      content="Get an ATS score, skill gap breakdown, and targeted recommendations for your resume — powered by Gemini."
+    />
+    <title>Resume Analyzer — ATS Scoring by Gemini</title>
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none'%3E%3Cpath d='M8 5C8 3.34315 9.34315 2 11 2H27L37 12V40C37 41.6569 35.6569 43 34 43H11C9.34315 43 8 41.6569 8 40V5Z' stroke='black' stroke-width='2.5'/%3E%3Cpath d='M27 2.5V11C27 11.5523 27.4477 12 28 12H36.5' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='14' y1='20' x2='31' y2='20' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='14' y1='26' x2='26' y2='26' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='14' y1='32' x2='29' y2='32' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"
     />
-    <title>AI Resume Analyzer</title>
   </head>
   <body>
     <div id="root"></div>