+ Problem-solving
+ Technical writing
+ Systems thinking
+ Research & analysis
+ Teamwork · open-source
+
+
+
+
+
+
+
Languages
+
+
+ Deutsch
+ C1
+
+
+
+ English
+ C1
+
+
+
+ Hindi
+ Native
+
+
+
+ Gujarati
+ Native
+
+
+
+
+
+
+
+
Interests
+
+
+
+
+
Programming
+
Coding since 10th grade — now building production systems.
+
+
+
+
+
+
Artificial Intelligence
+
Fine-tuning LLMs and running inference on edge NPUs.
+
+
+
+
+
+
Cricket
+
Played since childhood — strategy, patience, team dynamics.
+
+
+
+
+
+
Entrepreneurship
+
Studying how companies scale — building toward orlon.
+
+
+
+
+
+
+
+
+
+
+
+
+
Education
+
Hochschule Darmstadt · Germany
+
+
B.Sc. Computer Science
+
currently enrolled
+
+
Oct 2024 – Expected 2028
+
Modules completed
+
+ Algorithms & Data Structures
+ Object-Oriented Programming
+ Mathematics for CS
+ Computer Architecture
+ Database Systems
+ Operating Systems
+ Software Engineering
+ Computer Networks
+
+
+
+
+
+
Projects
+
+
+
+
+
Finance Buddy
+
+
Self-hosted 7-tab finance tracker built from 993 real transactions across 44 months. Waste audit identified €3,656 in avoidable spend across 13 categories; savings plan runs 3 projection scenarios — status quo, budget, and aggressive.
+
+ Stack
+
+ SvelteKitFastify
+ PostgreSQLDrizzleChart.js
+
+
+
+
+
+
+
Homelab Dashboard
+
+
Real-time ops dashboard for a 2-node Proxmox cluster (48GB RAM, ARM64 + x86_64) with live CPU/RAM/network metrics via WebSocket. Debugged Docker bridge network isolation — replaced localhost with host.docker.internal to restore reachability.
+
+ Stack
+
+ FastifyWebSocket
+ DockerTailscaleProxmox VE
+
+
+
+
+
+
+
orlon-bot
+
+
Telegram bot powered by a custom QLoRA fine-tuned LLM (Llama 3.2 3B). Built a privacy-aware Discord→JSONL data pipeline with PII scrubbing, trained on Kaggle T4 via Unsloth, and deployed to an ARM NPU for on-device inference.
+
+ Stack
+
+ PythonQLoRA
+ UnslothTelegramrkllama
+
+
+
+
+
+
+
Portfolio Website
+
+
Hybrid-hosted SPA — public routes on Vercel's CDN edge, private /me/* routes behind Tailscale + Caddy IP allowlist on a self-hosted ARM64 node. Multi-stage GitHub Actions CI runs HTML lint and Playwright E2E before every deploy.
+
+ Stack
+
+ SvelteKitVercel
+ TailscaleCaddyPlaywright
+
+
+
+
+
+
+
Hermes One OAuth Fork
+
+
Patch project adding Nous Portal OAuth and single-use WebSocket ticket minting to a community Electron client. Diagnosed a cross-process cookie isolation bug causing silent auth failures; shipped across 13 merged PRs with 38/38 tests passing.
+ Problem-solving
+ Technical writing
+ Systems thinking
+ Research & analysis
+ Teamwork · open-source
+
+
+
+
+
+
+
Projects
+
+
+ 💰
+
+
Finance Buddy
+
Self-hosted 7-tab finance tracker built from 993 real transactions across 44 months. Waste audit identified €3,656 in avoidable spend; savings plan runs 3 projection scenarios.
+
+ SvelteKitFastify
+ PostgreSQLDrizzleChart.js
+
+
+
complete
+
+
+ 📊
+
+
Homelab Dashboard
+
Real-time ops dashboard for a 2-node Proxmox cluster (48GB RAM, ARM64 + x86_64). Live CPU/RAM/network via WebSocket; debugged Docker bridge network isolation.
+
+ FastifyWebSocket
+ DockerTailscaleProxmox VE
+
+
+
complete
+
+
+ 🤖
+
+
orlon-bot
+
Telegram bot powered by a custom QLoRA fine-tuned LLM (Llama 3.2 3B). Full train-to-inference pipeline: Discord data pipeline → Kaggle T4 training → ARM NPU deployment.
+
+ PythonQLoRA
+ UnslothTelegramrkllama
+
+
+
in progress
+
+
+ 🌐
+
+
Portfolio Website
+
Hybrid-hosted SPA — public routes on Vercel CDN edge, private /me/* routes behind Tailscale + Caddy IP allowlist. Multi-stage GitHub Actions CI with Playwright E2E.
+
+ SvelteKitVercel
+ TailscaleCaddyPlaywright
+
+
+
live
+
+
+ 🔐
+
+
Hermes One OAuth Fork
+
Patch project adding Nous Portal OAuth + single-use WebSocket ticket minting to a community Electron client. Diagnosed cross-process cookie isolation bug; 13 PRs merged, 38/38 tests passing.
+ Problem-solving
+ Technical writing
+ Systems thinking
+ Research & analysis
+ Teamwork · open-source
+
+
+
+
+
+
+
Languages
+
+
+ Deutsch
+ C1
+
+
+
+ English
+ C1
+
+
+
+ Hindi
+ Native
+
+
+
+ Gujarati
+ Native
+
+
+
+
+
+
+
+
Interests
+
+
+
+
+
Programming
+
Started coding in 10th grade — before I knew it was a career path. Now building production systems, self-hosted infrastructure, and ML pipelines across whatever stack fits the problem.
+
+
+
+
+
+
Artificial Intelligence
+
Not just using AI tools — understanding how they work under the hood. Fine-tuning LLMs with QLoRA, running inference on edge NPUs, building multi-agent systems on self-hosted hardware.
+
+
+
+
+
+
Cricket
+
Played since childhood — always been a big part of life. The strategy, the patience, the team dynamics. Grew up watching and playing in India and still follow it closely.
+
+
+
+
+
+
Entrepreneurship
+
Reading business books and studying how companies are built — not just the tech, but the strategy, the product thinking, and what makes a system scale. Building toward something called orlon.
+
+
+
+
+
+
+
+
+
+
+
+
+
Education
+
Hochschule Darmstadt · Germany
+
+
B.Sc. Computer Science
+
currently enrolled
+
+
Oct 2024 – Expected 2028
+
Modules completed
+
+ Algorithms & DS
+ OOP
+ Math for CS
+ Architecture
+ Database Systems
+ Operating Systems
+ Software Engineering
+ Networks
+
+
+
+
+
+
Projects
+
+
+
+
+
Finance Buddy
+
+
+
Self-hosted 7-tab finance tracker built from 993 real transactions across 44 months. Waste audit identified €3,656 in avoidable spend; savings plan runs 3 projection scenarios.
+
complete · private
+
+
+ Stack
+
+ SvelteKitFastify
+ PostgreSQLDrizzleChart.js
+
+
+
+
+
+
+
Homelab Dashboard
+
+
+
Real-time ops dashboard for a 2-node Proxmox cluster (48GB RAM, ARM64 + x86_64). Live CPU/RAM/network via WebSocket; debugged Docker bridge network isolation.
+
complete · private
+
+
+ Stack
+
+ FastifyWebSocket
+ DockerTailscaleProxmox VE
+
+
+
+
+
+
+
orlon-bot
+
+
+
Telegram bot powered by a custom QLoRA fine-tuned LLM (Llama 3.2 3B). Full train-to-inference pipeline: Discord data pipeline → Kaggle T4 training → ARM NPU deployment.
+
in progress
+
+
+ Stack
+
+ PythonQLoRA
+ UnslothTelegramrkllama
+
+
+
+
+
+
+
Portfolio Website
+
+
+
Hybrid-hosted SPA — public routes on Vercel CDN edge, private /me/* routes behind Tailscale + Caddy IP allowlist. Multi-stage GitHub Actions CI with Playwright E2E.
+
live · vishal-katariya.com
+
+
+ Stack
+
+ SvelteKitVercel
+ TailscaleCaddyPlaywright
+
+
+
+
+
+
+
Hermes One OAuth Fork
+
+
+
Patch project adding Nous Portal OAuth + single-use WebSocket ticket minting to a community Electron client. Diagnosed cross-process cookie isolation bug; 13 PRs merged, 38/38 tests passing.
+ Problem-solving
+ Technical writing
+ Systems thinking
+ Research & analysis
+ Teamwork · open-source
+
+
+
+
+
+
+
Languages
+
+
+ Deutsch
+ C1
+
+
+
+ English
+ C1
+
+
+
+ Hindi
+ Native
+
+
+
+ Gujarati
+ Native
+
+
+
+
+
+
+
+
Interests
+
+
+
+
+
Programming
+
Started coding in 10th grade — before I knew it was a career path. Now building production systems, self-hosted infrastructure, and ML pipelines across whatever stack fits the problem.
+
+
+
+
+
+
Artificial Intelligence
+
Not just using AI tools — understanding how they work under the hood. Fine-tuning LLMs with QLoRA, running inference on edge NPUs, building multi-agent systems on self-hosted hardware.
+
+
+
+
+
+
Cricket
+
Played since childhood — always been a big part of life. The strategy, the patience, the team dynamics. Grew up watching and playing in India and still follow it closely.
+
+
+
+
+
+
Entrepreneurship
+
Reading business books and studying how companies are built — not just the tech, but the strategy, the product thinking, and what makes a system scale. Building toward something called orlon.
+
+
+
+
+
+
+
+
+
+
+
+
+
Education
+
Hochschule Darmstadt · Germany
+
+
B.Sc. Computer Science
+
currently enrolled
+
+
Oct 2024 – Expected 2028
+
Modules completed
+
+ Algorithms & DS
+ OOP
+ Math for CS
+ Architecture
+ Database Systems
+ Operating Systems
+ Software Engineering
+ Networks
+
+
+
+
+
+
Projects
+
+
+
+
+
Finance Buddy
+
+
+
Self-hosted 7-tab finance tracker built from 993 real transactions across 44 months. Waste audit identified €3,656 in avoidable spend; savings plan runs 3 projection scenarios.
+
complete · private
+
+
+ Stack
+
+ SvelteKitFastify
+ PostgreSQLDrizzleChart.js
+
+
+
+
+
+
+
Homelab Dashboard
+
+
+
Real-time ops dashboard for a 2-node Proxmox cluster (48GB RAM, ARM64 + x86_64). Live CPU/RAM/network via WebSocket; debugged Docker bridge network isolation.
+
complete · private
+
+
+ Stack
+
+ FastifyWebSocket
+ DockerTailscaleProxmox VE
+
+
+
+
+
+
+
orlon-bot
+
+
+
Telegram bot powered by a custom QLoRA fine-tuned LLM (Llama 3.2 3B). Full train-to-inference pipeline: Discord data pipeline → Kaggle T4 training → ARM NPU deployment.
+
in progress
+
+
+ Stack
+
+ PythonQLoRA
+ UnslothTelegramrkllama
+
+
+
+
+
+
+
Portfolio Website
+
+
+
Hybrid-hosted SPA — public routes on Vercel CDN edge, private /me/* routes behind Tailscale + Caddy IP allowlist. Multi-stage GitHub Actions CI with Playwright E2E.
+
live · vishal-katariya.com
+
+
+ Stack
+
+ SvelteKitVercel
+ TailscaleCaddyPlaywright
+
+
+
+
+
+
+
Hermes One OAuth Fork
+
+
+
Patch project adding Nous Portal OAuth + single-use WebSocket ticket minting to a community Electron client. Diagnosed cross-process cookie isolation bug; 13 PRs merged, 38/38 tests passing.
+ Problem-solving
+ Technical writing
+ Systems thinking
+ Research & analysis
+ Teamwork · open-source
+
+
+
+
+
+
+
Languages
+
+
+ Deutsch
+ C1
+
+
+
+ English
+ C1
+
+
+
+ Hindi
+ Native
+
+
+
+ Gujarati
+ Native
+
+
+
+
+
+
+
+
Interests
+
+
+
+
+
Programming
+
Coding since 10th grade — now building production systems.
+
+
+
+
+
+
Artificial Intelligence
+
Fine-tuning LLMs and running inference on edge NPUs.
+
+
+
+
+
+
Cricket
+
Played since childhood — strategy, patience, team dynamics.
+
+
+
+
+
+
Entrepreneurship
+
Studying how companies scale — building toward orlon.
+
+
+
+
+
+
+
+
+
+
+
+
+
Education
+
Hochschule Darmstadt · Germany
+
+
B.Sc. Computer Science
+
currently enrolled
+
+
Oct 2024 – Expected 2028
+
Modules completed
+
+ Algorithms & DS
+ OOP
+ Math for CS
+ Architecture
+ Database Systems
+ Operating Systems
+ Software Engineering
+ Networks
+
+
+
+
+
+
Projects
+
+
+
+
+
Finance Buddy
+
+
Self-hosted 7-tab finance tracker built from 993 real transactions across 44 months. Waste audit identified €3,656 in avoidable spend across 13 categories; savings plan runs 3 projection scenarios — status quo, budget, and aggressive.
+
+ Stack
+
+ SvelteKitFastify
+ PostgreSQLDrizzleChart.js
+
+
+
+
+
+
+
Homelab Dashboard
+
+
Real-time ops dashboard for a 2-node Proxmox cluster (48GB RAM, ARM64 + x86_64) with live CPU/RAM/network metrics via WebSocket. Debugged Docker bridge network isolation — replaced localhost with host.docker.internal to restore reachability.
+
+ Stack
+
+ FastifyWebSocket
+ DockerTailscaleProxmox VE
+
+
+
+
+
+
+
orlon-bot
+
+
Telegram bot powered by a custom QLoRA fine-tuned LLM (Llama 3.2 3B). Built a privacy-aware Discord→JSONL data pipeline with PII scrubbing, trained on Kaggle T4 via Unsloth, and deployed to an ARM NPU for on-device inference.
+
+ Stack
+
+ PythonQLoRA
+ UnslothTelegramrkllama
+
+
+
+
+
+
+
Portfolio Website
+
+
Hybrid-hosted SPA — public routes on Vercel's CDN edge, private /me/* routes behind Tailscale + Caddy IP allowlist on a self-hosted ARM64 node. Multi-stage GitHub Actions CI runs HTML lint and Playwright E2E before every deploy.
+
+ Stack
+
+ SvelteKitVercel
+ TailscaleCaddyPlaywright
+
+
+
+
+
+
+
Hermes One OAuth Fork
+
+
Patch project adding Nous Portal OAuth and single-use WebSocket ticket minting to a community Electron client. Diagnosed a cross-process cookie isolation bug causing silent auth failures; shipped across 13 merged PRs with 38/38 tests passing.
+ Problem-solving
+ Technical writing
+ Systems thinking
+ Research & analysis
+ Teamwork · open-source
+
+
+
+
+
+
+
Languages
+
+
+ Deutsch
+ C1
+
+
+
+ English
+ C1
+
+
+
+ Hindi
+ Native
+
+
+
+ Gujarati
+ Native
+
+
+
+
+
+
+
+
Interests
+
+
+
+
+
Programming
+
Coding since 10th grade — now building production systems.
+
+
+
+
+
+
Artificial Intelligence
+
Fine-tuning LLMs and running inference on edge NPUs.
+
+
+
+
+
+
Cricket
+
Played since childhood — strategy, patience, team dynamics.
+
+
+
+
+
+
Entrepreneurship
+
Studying how companies scale — building toward orlon.
+
+
+
+
+
+
+
+
+
+
+
+
+
Education
+
Hochschule Darmstadt · Germany
+
+
B.Sc. Computer Science
+
currently enrolled
+
+
Oct 2024 – Expected 2028
+
Modules completed
+
+ Algorithms & DS
+ OOP
+ Math for CS
+ Architecture
+ Database Systems
+ Operating Systems
+ Software Engineering
+ Networks
+
+
+
+
+
+
Projects
+
+
+
+
+
Finance Buddy
+
+
Self-hosted 7-tab finance tracker built from 993 real transactions across 44 months. Waste audit identified €3,656 in avoidable spend across 13 categories; savings plan runs 3 projection scenarios — status quo, budget, and aggressive.
+
+ Stack
+
+ SvelteKitFastify
+ PostgreSQLDrizzleChart.js
+
+
+
+
+
+
+
Homelab Dashboard
+
+
Real-time ops dashboard for a 2-node Proxmox cluster (48GB RAM, ARM64 + x86_64) with live CPU/RAM/network metrics via WebSocket. Debugged Docker bridge network isolation — replaced localhost with host.docker.internal to restore reachability.
+
+ Stack
+
+ FastifyWebSocket
+ DockerTailscaleProxmox VE
+
+
+
+
+
+
+
orlon-bot
+
+
Telegram bot powered by a custom QLoRA fine-tuned LLM (Llama 3.2 3B). Built a privacy-aware Discord→JSONL data pipeline with PII scrubbing, trained on Kaggle T4 via Unsloth, and deployed to an ARM NPU for on-device inference.
+
+ Stack
+
+ PythonQLoRA
+ UnslothTelegramrkllama
+
+
+
+
+
+
+
Portfolio Website
+
+
Hybrid-hosted SPA — public routes on Vercel's CDN edge, private /me/* routes behind Tailscale + Caddy IP allowlist on a self-hosted ARM64 node. Multi-stage GitHub Actions CI runs HTML lint and Playwright E2E before every deploy.
+
+ Stack
+
+ SvelteKitVercel
+ TailscaleCaddyPlaywright
+
+
+
+
+
+
+
Hermes One OAuth Fork
+
+
Patch project adding Nous Portal OAuth and single-use WebSocket ticket minting to a community Electron client. Diagnosed a cross-process cookie isolation bug causing silent auth failures; shipped across 13 merged PRs with 38/38 tests passing.
+ Problem-solving
+ Technical writing
+ Systems thinking
+ Research & analysis
+ Teamwork · open-source
+
+
+
+
+
+
+
Languages
+
+
+ Deutsch
+ C1
+
+
+
+ English
+ C1
+
+
+
+ Hindi
+ Native
+
+
+
+ Gujarati
+ Native
+
+
+
+
+
+
+
+
Interests
+
+
+
+
+
Programming
+
Coding since 10th grade — now building production systems.
+
+
+
+
+
+
Artificial Intelligence
+
Fine-tuning LLMs and running inference on edge NPUs.
+
+
+
+
+
+
Cricket
+
Played since childhood — strategy, patience, team dynamics.
+
+
+
+
+
+
Entrepreneurship
+
Studying how companies scale — building toward orlon.
+
+
+
+
+
+
+
+
Education
+
Hochschule Darmstadt · Germany
+
+
B.Sc. Computer Science
+
currently enrolled
+
+
Oct 2024 – Expected 2028
+
Modules completed
+
+ Algorithms & Data Structures
+ Object-Oriented Programming
+ Mathematics for CS
+ Computer Architecture
+ Database Systems
+ Operating Systems
+ Software Engineering
+ Computer Networks
+
+
+
-
-
Projects
+
+
Projects
-
+
+
Finance Buddy
-
Personal finance tracker built on 993 real transactions. Tailscale-only — never touches the public internet.
+
+
Self-hosted 7-tab finance tracker built from 993 real transactions across 44 months. Waste audit identified €3,656 in avoidable spend across 13 categories; savings plan runs 3 projection scenarios — status quo, budget, and aggressive.
+
+ Stack
SvelteKitFastifyPostgreSQLDrizzleChart.js
-
complete
-
+
+
Homelab Dashboard
-
Realtime ops dashboard for a 2-node Proxmox cluster. Live CPU/RAM/network via WebSocket.
+
+
Real-time ops dashboard for a 2-node Proxmox cluster (48GB RAM, ARM64 + x86_64) with live CPU/RAM/network metrics via WebSocket. Debugged Docker bridge network isolation — replaced localhost with host.docker.internal to restore reachability.
+
+ Stack
FastifyWebSocket
- DockerTailscale
+ DockerTailscaleProxmox VE
-
complete
-
-
TypeShift
-
Cross-platform AI writing assistant with collaborative editing across macOS, Windows, and Android.
+
+
+
orlon-bot
+
+
Telegram bot powered by a custom QLoRA fine-tuned LLM (Llama 3.2 3B). Built a privacy-aware Discord→JSONL data pipeline with PII scrubbing, trained on Kaggle T4 via Unsloth, and deployed to an ARM NPU for on-device inference.
Telegram bot with QLoRA fine-tuned LLM. Trained on Kaggle T4 GPU, deployed to ARM NPU (rkllama).
+
+
+
Portfolio Website
+
+
Hybrid-hosted SPA — public routes on Vercel's CDN edge, private /me/* routes behind Tailscale + Caddy IP allowlist on a self-hosted ARM64 node. Multi-stage GitHub Actions CI runs HTML lint and Playwright E2E before every deploy.
Patch project adding Nous Portal OAuth and single-use WebSocket ticket minting to a community Electron client. Diagnosed a cross-process cookie isolation bug causing silent auth failures; shipped across 13 merged PRs with 38/38 tests passing.
Precise sorting, scanning, and organizing of packages by delivery route for efficient shipping operations.
+
High-throughput logistics operations in a fully German-language environment.
+
Package tracking and inventory management using warehouse systems.
+
Cross-shift coordination; independent fault identification and resolution.
+
@@ -568,7 +666,7 @@
diff --git a/tasks/DEVLOG.md b/tasks/DEVLOG.md
index 44f7aad..300afed 100644
--- a/tasks/DEVLOG.md
+++ b/tasks/DEVLOG.md
@@ -6,6 +6,33 @@
---
+## [2026-07-01] Claude Code (local) — feat/resume-redesign
+
+**Mode:** Builder
+
+**Did:** Full resume redesign, `resume.html` (light, default) + `resume-dark.html` (dark, hardcoded tokens), through several correction rounds — checkpoints frozen along the way as `resume-v1.html` (pre-redesign baseline) → `resume-v2.html`/`resume-v2-dark.html` (round-1 checkpoint) → `resume-v3.html`/`resume-v3-dark.html` (round-2 checkpoint).
+- Rebuilt from scratch: hero (photo top-left 32×38mm, name centered, contacts top-right incl. "open to work" pill), left column (Technical Skills w/ categorized chips Backend/Infra·AI-ML·Frontend·Hosting, Languages, Interests), right column (Education, Projects, Work Experience), all with sourced SVG icons (copied from `portfolio-combined.html`, not hand-rolled).
+- Round 1 fixes: hero resized back down to v1 proportions, restored 4 categorized skill-chip groups, education "currently enrolled" badge moved right (mirrors project-status pattern), added Interests SVG icons, tightened widget spacing.
+- Round 2 fixes: moved "open to work" from a status-pill into a 5th `hc-pill` under the location pill (hero row nudged down via `padding-top`), removed project status text entirely, shortened Interests descriptions to one line each, expanded all 5 project descriptions to fuller 3-line versions sourced from `vishal_resume_library.md`, closed remaining widget gaps.
+- Round 3: stripped the glass-card widget treatment (`background`/`border`/`backdrop-filter`/`box-shadow`/`padding`) from every section including Projects — page is now fully flat, no card boxes anywhere.
+- Bumped font sizes ~10–15% across every section below the hero (s-label, education, languages, interests, skills, projects, work-exp, footer) to fill leftover whitespace at the page bottom — hero left untouched.
+- Added a dashed vertical divider down the middle of the left/right column gap (`.body::before`, positioned via `calc(62mm + 1.5mm)`, no markup change).
+- Added a new first Work Experience bullet (DE→EN translated from user-supplied German source: "Precise sorting, scanning, and organizing of packages by delivery route for efficient shipping operations.").
+- Fixed Education "Modules completed" chips — were abbreviated (`Algorithms & DS`, `OOP`, `Math for CS`, `Architecture`, `Networks`); expanded to full course names.
+- QA: Playwright overlap-detection script (`.hero.section, .col-left > .section, .col-right > .section` pairwise rect-intersection) confirmed zero widget overlaps at every stage; screenshots rendered at A4/1280/1920/380px for both themes and sent for sign-off after each round.
+
+**Decided:**
+- Checkpoint-before-edit pattern: each correction round's starting state gets `cp`'d to `resume-vN.html`/`resume-vN-dark.html` before continuing to edit the live `resume.html`/`resume-dark.html` in place.
+- Two physical files for light/dark (not one file + `prefers-color-scheme`) — established earlier in this branch's history, kept consistent throughout.
+
+**State:** All rounds complete, both theme files verified structurally identical (diff shows only theme-token/meta differences), content fits one A4 page (1128px vs 1123px page height), 0 widget overlaps. Committing this session per explicit go-ahead.
+
+**Next:** Open PR `feat/resume-redesign` → `dev` (not `main`, per branch convention).
+
+**Modified:** `prototypes/resume.html`, `prototypes/resume-dark.html`, `prototypes/resume-v1.html`, `prototypes/resume-v2.html`, `prototypes/resume-v2-dark.html`, `prototypes/resume-v3.html`, `prototypes/resume-v3-dark.html`, `tasks/DEVLOG.md`
+
+---
+
## [2026-06-30] Claude Code (local) — fix/og-banner-margin
**Mode:** Builder
diff --git a/tasks/kickoff-resume-redesign.md b/tasks/kickoff-resume-redesign.md
new file mode 100644
index 0000000..8748541
--- /dev/null
+++ b/tasks/kickoff-resume-redesign.md
@@ -0,0 +1,528 @@
+# Task: Rebuild `prototypes/resume.html` from scratch (aesthetic version, site-grade)
+
+**Branch:** `feat/resume-redesign` (off `dev`)
+**Mode:** Builder
+**Complexity:** Non-trivial full design + implementation (single HTML file, 15 sub-tasks, ~500-700 lines, A4 print + screen + dark/light themes)
+
+---
+
+## Setup
+
+- **Project:** `portfolio-website`
+- **Path on athena:** `~/dev-shared/projects/portfolio-website/`
+- **Working directory:** this repo
+- **Active branch:** `feat/resume-redesign` (off `dev`)
+- **Session name:** `[portfolio-website]-local` (you're the local session, persistent tmux)
+- **No cloud session needed** — this is screen + print design work, no `npm install` / Playwright-heavy operations
+
+## What this is
+
+An **aesthetic version of the resume** for the portfolio site — NOT the job-application CV. It lives at `prototypes/resume.html` and is currently a dark A4 print resume (19350 bytes, 577 lines). You're rebuilding it from scratch to match the portfolio's design system: light grey background, widget-block glass effect, SVG icons, 4-font stack, dark/light themes via `prefers-color-scheme`, A4 print stylesheet.
+
+The current version stays working as a print backup until the new one is visually approved. Do NOT break the existing resume until the new one is confirmed good.
+
+## Decisions confirmed with user (2026-06-30)
+
+- **Font stack:** Outfit (body) + Space Grotesk (display headers, name) + Syne (accent) + JetBrains Mono (contact details, monospaced) + DM Mono (small labels). **Drop Cormorant Garamond.** Name "VISHAL KATARIYA" stays in Space Grotesk 800, no calligraphic initials.
+- **Hero layout:** photo top-left, "VISHAL KATARIYA" name centered, 4 status pills below the name (AI/ML · Full Stack · DevOps/Infra · Open to work with green dot)
+- **Contacts location:** 4 pills (email · github · website · location) in **left column at top** (NOT in hero)
+- **Photo size:** agent picks, balanced with the hero layout (proportional to A4, not literal 170px)
+- **Themes:** single file, `prefers-color-scheme: dark/light` media queries, NO separate HTML files
+- **Print:** A4 stylesheet, white background regardless of theme (saves toner)
+- **Projects:** 5 total — Finance Buddy, Homelab Dashboard, orlon-bot, **Portfolio Website**, **Hermes One OAuth Fork**
+- **Work experience:** 1 entry — Amazon DNW4, Duisburg (Jul 2024 – Dec 2024, 6 months)
+- **Content source:** `~/dev-shared/projects/resume-references/vishal_resume_library.md` (17KB, 387 lines, master source)
+
+## Read these on session start (in order)
+
+1. `~/dev-shared/projects/portfolio-website/CLAUDE.md` — project context, design system, CSS variables
+2. `~/dev-shared/projects/portfolio-website/CONTEXT.md` — stack, infra, design tokens
+3. `~/dev-shared/projects/portfolio-website/tasks/DEVLOG.md` (top 3 entries) — current world state
+4. `~/dev-shared/projects/portfolio-website/tasks/todo.md` line 134-179 — the resume redesign task with 15 sub-tasks
+5. `~/dev-shared/projects/resume-references/vishal_resume_library.md` — **all content for projects, work exp, skills, education, interests, languages** (read FIRST before writing any content)
+6. `~/dev-shared/projects/portfolio-website/prototypes/resume.html` — current resume (19350 bytes, what you're replacing)
+7. `~/dev-shard/projects/portfolio-website/prototypes/portfolio-combined.html:5745-6020` — about page (photo block, education card, interests cards — same patterns to reuse)
+
+## Read also when designing
+
+- The about page's `.photo-frame` (170px × 200px, border-radius 20px, neomorphism shadow) — same dimensions proportionally scaled up for A4
+- The about page's `.edu-card` (line 5790) — education widget pattern to copy
+- The about page's `.int-grid` + `.int-card` (line 5990) — interest card pattern
+- The OG banner (3 contact pills) — reference for the contact pill style (icon + label, glass treatment)
+- The portfolio's CSS variables in `:root` (line 130+): `--bg`, `--bg2`, `--bg3`, `--w`, `--w80`, `--w60`, `--w30`, `--w12`, `--w06`, `--green`, `--amber`, `--blue`, `--acc`
+
+## Tools
+
+- `playwright` for visual QA (render at A4, screen, light, dark)
+- `read_file`, `search_files`, `patch` for HTML/CSS edits
+- `terminal` for `git` operations
+- The local HTTP server (`python3 -m http.server 8765`) on athena for browser preview
+
+## Source files to reference (do NOT create from scratch)
+
+- `prototypes/assets/image.png` (659KB, 680×761) — your photo, reuse for the hero
+- `prototypes/portfolio-combined.html` — 146 inline SVGs, extract the right ones
+- `~/dev-shard/projects/resume-references/vishal_resume_library.md` — all content
+
+## Your role
+
+You are building a single HTML file with embedded CSS. The file is `prototypes/resume.html`. Don't create a new file (rename later if needed). Don't split into multiple files. The 1-file constraint is part of the design.
+
+---
+
+## 15 sub-tasks (in order)
+
+### Sub-task 1: Font stack (5 min)
+
+Update the Google Fonts `` to include all 5 fonts:
+
+```html
+
+```
+
+Update the CSS `:root` font-family declarations:
+- `body`: `'Outfit', sans-serif`
+- `.name`, `.section-title`: `'Space Grotesk', sans-serif` weight 800
+- `.accent`: `'Syne', sans-serif` weight 600 (use sparingly — section kicker labels, the "Open to work" pill)
+- `.contact-pill-text`, `.module-tag`, `.tech-label`: `'JetBrains Mono', monospace`
+- `.small-label`, `.meta-pill`, `.kicker`: `'DM Mono', monospace`
+
+### Sub-task 2: Hero restructure (10 min)
+
+The hero is the top section. Layout:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ [PHOTO] VISHAL KATARIYA │
+│ [170x200] (Space Grotesk 800, 32-36px) │
+│ AI/ML · Full Stack · DevOps/Infra · 🟢 Open │
+└─────────────────────────────────────────────────────────────┘
+```
+
+- Photo: `assets/image.png`, size proportional to A4 (try ~30-35mm wide × ~38-42mm tall — agent picks, balanced with the name height)
+- Name: centered, Space Grotesk 800, large
+- 4 status pills below the name, centered or aligned to the right of the name (whichever looks better)
+
+### Sub-task 3: Remove old role text (1 min)
+
+Delete the line "AI · ML · SWE / CS Student at h_da" (current resume line 382, the `.hdr-role` element). The 4 status pills replace it.
+
+### Sub-task 4: Photo on top-left (5 min)
+
+```html
+
+
+
+```
+
+CSS:
+```css
+.hero-photo {
+ width: 32mm; height: 38mm;
+ border-radius: 5mm; /* 20px proportional to A4 */
+ overflow: hidden;
+ background: var(--bg2);
+ border: 1px solid var(--w12);
+ box-shadow: 4px 4px 16px var(--sd), -1px -1px 5px var(--sl);
+}
+.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
+```
+
+For the light theme, change `box-shadow` to use `rgba(0,0,0,.08)` instead of `var(--sd)` (which is dark shadow).
+
+### Sub-task 5: 4 status pills (5 min)
+
+Below the name, 4 pills in a row:
+
+```html
+
+ AI/ML
+ Full Stack
+ DevOps/Infra
+ Open to work
+
+```
+
+CSS: vertical stack in left column, each pill is a row with SVG icon + text. Glass treatment (`backdrop-filter`, semi-transparent bg, subtle border, rounded corners).
+
+Extract the SVGs from `prototypes/portfolio-combined.html`:
+- Email: search for `mailto:vishalkatariya` in the file, copy the envelope SVG
+- GitHub: search for `github.com/vkkatariya" target` — the file has 1 contact widget that uses octocat SVG, copy it
+- Globe: search for the globe icon (used in languages/interests sections)
+- Pin: search for the location pin icon (used in photo-status widget)
+
+### Sub-task 7: Education in right column (about-page layout) (20 min)
+
+The about page's `.edu-card` pattern is what you want. Look at `portfolio-combined.html:5790` for the exact markup. Copy the pattern, adapt for the resume:
+
+```html
+
+
EDUCATION
+
+
Hochschule Darmstadt · Darmstadt, Germany
+
B.Sc. Computer Science
+
Oct 2024 – Expected 2028
+
currently enrolled
+
MODULES COMPLETED
+
+ Algorithms & Data Structures
+ Object-Oriented Programming
+ Mathematics for CS
+ Computer Architecture
+ Database Systems
+ Operating Systems
+ Software Engineering
+ Computer Networks
+
+
+
+```
+
+The 8 modules come from the library lines 41-48.
+
+### Sub-task 8: Skills split (Technical + Soft) (15 min)
+
+Technical skills — keep the 7-bar layout + add Git as 8th bar:
+
+```html
+
+ Problem-solving
+ Technical writing
+ Systems thinking
+ Research & analysis
+ Teamwork · open-source
+
+
+```
+
+### Sub-task 9: Interests (4 cards from about page) (10 min)
+
+Copy the about page's int-card pattern (line 5990-6022). For each interest, an icon + title + 1-2 sentence description. Use emoji icons (not SVG — simpler):
+
+```html
+
+
+ 💻
+
+
Programming
+
Started coding in 10th grade — before I knew it was a career path. Now building production systems, self-hosted infrastructure, and ML pipelines across whatever stack fits the problem.
+
+
+
+ 🤖
+
+
Artificial Intelligence
+
Not just using AI tools — understanding how they work under the hood. Fine-tuning LLMs with QLoRA, running inference on edge NPUs, building multi-agent systems on self-hosted hardware.
+
+
+
+ 🏏
+
+
Cricket
+
Played since childhood — always been a big part of life. The strategy, the patience, the team dynamics. Grew up watching and playing in India and still follow it closely.
+
+
+
+ 📚
+
+
Entrepreneurship
+
Reading business books and studying how companies are built — not just the tech, but the strategy, the product thinking, and what makes a system scale. Building toward something called orlon.
+
+
+
+```
+
+### Sub-task 10: Languages (no change) (1 min)
+
+Keep the 4-language list with dots + levels exactly as it is. The `.lang-row`, `.lang-name`, `.lang-lvl`, `.lang-dots`, `.ld` classes are already in the existing CSS — reuse them.
+
+### Sub-task 11: Projects (5 total) (25 min)
+
+Layout per project (one row):
+
+```html
+
+
+
+
Finance Buddy
+
Self-hosted 7-tab finance tracker built from 993 real transactions across 44 months. Waste audit identified €3,656 in avoidable spend; savings plan runs 3 projection scenarios.
+```
+
+5 projects from `vishal_resume_library.md` lines 149-303:
+
+| # | Title | Status | Stack (top 5) | Source line |
+|---|---|---|---|---|
+| 1 | Finance Buddy | done | SvelteKit · Fastify · PostgreSQL · Drizzle · Chart.js | 149-168 |
+| 2 | Homelab Dashboard | done | Fastify · WebSocket · Docker · Tailscale · Proxmox | 175-194 |
+| 3 | orlon-bot | wip | Python · QLoRA · Unsloth · Telegram · rkllama | 201-225 |
+| 4 | **Portfolio Website** | done | SvelteKit · Vercel · Tailscale · Caddy · Playwright | 231-247 |
+| 5 | **Hermes One OAuth Fork** | wip | Electron · TypeScript · React · Vitest · better-sqlite3 | 256-279 |
+
+For each project:
+- **2-line description** — pull the most compelling 2 lines from the library's "Core description" or "Discovered bullet"
+- **5 stack chips** — first 5 from the library's stack list
+- **Status** — `done` (green dot) for Live/Complete, `wip` (amber dot) for In progress
+- **SVG icon** — choose from the portfolio's icon set: 💰 for Finance Buddy, 📊 for Homelab, 🤖 for orlon-bot, 🌐 for portfolio, 🔐 for hermes
+
+### Sub-task 12: Work Experience (1 entry) (10 min)
+
+```html
+
+
WORK EXPERIENCE
+
+
+
Fulfillment Associate
+
Jul 2024 – Dec 2024 · 6 months
+
+
Amazon DNW4 · Duisburg, Germany
+
+
High-throughput logistics operations in a fully German-language environment.
+
Package tracking and inventory management using warehouse systems.
+
Cross-shift coordination; independent fault identification and resolution.
+
+
+
+```
+
+Content from `vishal_resume_library.md` lines 60-66.
+
+### Sub-task 13: SVG icons across all sections (10 min)
+
+Each section needs an inline SVG icon next to its label. Extract from `portfolio-combined.html` (146 inline SVGs total). Use these (search for the relevant SVG patterns):
+
+| Section | Icon | Find pattern |
+|---|---|---|
+| Contacts (4 pills) | envelope, github octocat, globe, pin | `mailto:`, `github.com/vkkatariya`, location pin pattern |
+| Status pills (4) | none for first 3, CSS dot for "Open to work" | — |
+| Education | graduation cap (about page) | `path d="M1 6.5L6.5 4L12 6.5L6.5 9L1 6.5Z"` |
+| Projects (5) | per project — choose from existing icons | finance, dashboard, bot, portfolio, oauth |
+| Skills (Technical) | code/cog icon | `path d="M4.5 3L1.5 6.5L4.5 10"` (about page programming) |
+| Skills (Soft) | users/handshake icon | search for handshake SVG |
+| Languages | globe icon | search for circle-with-meridians |
+| Interests (4) | code/AI/cricket/book | from about page's int-title SVGs |
+| Work exp | briefcase icon | search for `M0 4h10v6H0z` patterns |
+
+**Do NOT create new SVGs from scratch.** Copy from portfolio-combined.html.
+
+### Sub-task 14: Light grey background + widget-block + dark/light themes (30 min)
+
+The default theme is **light** (matches vishal-katariya.com default for the new design). Light grey background `#ececec` or `#f0f0f0` (use the same value as the site's `html.light` background). All sections use the widget-block glass treatment:
+
+```css
+.section {
+ background: rgba(255,255,255,.5);
+ backdrop-filter: blur(12px);
+ border: 1px solid rgba(0,0,0,.08);
+ border-radius: 6mm; /* ~24px proportional to A4 */
+ padding: 6mm;
+ box-shadow: 0 4px 20px rgba(0,0,0,.04);
+}
+```
+
+Dark theme via `prefers-color-scheme`:
+
+```css
+@media (prefers-color-scheme: dark) {
+ body { background: #1B1C1D; color: #F1F0F6; }
+ .section {
+ background: rgba(255,255,255,.02);
+ border-color: rgba(255,255,255,.06);
+ }
+ .status-pill, .contact-pill { ... } /* dark variants */
+}
+```
+
+Print stylesheet (A4, white background regardless of theme):
+
+```css
+@media print {
+ @page { size: A4; margin: 0; }
+ body {
+ background: #fff !important;
+ color: #000 !important;
+ }
+ .section {
+ background: #fff !important;
+ border-color: rgba(0,0,0,.15) !important;
+ backdrop-filter: none !important;
+ box-shadow: none !important;
+ }
+ /* print colors */
+ .name, .section-title { color: #000 !important; }
+ /* etc */
+}
+```
+
+### Sub-task 15: Content source (read-only — do this FIRST)
+
+Open `~/dev-shared/projects/resume-references/vishal_resume_library.md` and read it before writing any content. Use these specific sections:
+
+- **Personal info** (lines 7-18) — name, address, phone, email, GitHub, portfolio
+- **Taglines** (lines 22-32) — for the optional tagline
+- **Education** (lines 37-54) — institution, degree, period, modules (EN + DE bullets)
+- **Work experience** (lines 60-73) — Amazon DNW4 EN bullets
+- **Technical skills** (lines 77-122) — 7 categories, full lists
+- **Soft skills** (lines 124-129) — 5 items
+- **Skill bars** (lines 133-145) — for the 7-8 visual bars
+- **Projects** (lines 147-317) — 5 projects, full descriptions + stack + status
+- **Languages** (lines 321-329) — 4 languages
+- **Interests** (lines 332-338) — 4 items
+
+Use the **EN versions** throughout (the user said "just aesthetic resume I wanna add in my site").
+
+### Visual QA (CRITICAL — L-068)
+
+After the design is implemented, you MUST render it at multiple sizes and send screenshots to Vishal before committing. Vision tool returns empty on local paths, so you need Playwright screenshots.
+
+1. **A4 print preview** (210mm × 297mm) — `page.pdf()` or screenshot at A4 size
+2. **Screen 1280px** — viewport 1280×1024
+3. **Screen 1920px** — viewport 1920×1080
+4. **Mobile 380px** — viewport 380×800
+5. **Light mode** — `prefers-color-scheme: light` (default)
+6. **Dark mode** — `prefers-color-scheme: dark` (use Playwright's `emulateMedia`)
+
+Save screenshots to `/tmp/resume-redesign-{name}.png`. Send each one in chat to Vishal with a "1) [Light] [A4] — 2) [Light] [Screen 1280] — 3) [Dark] [Screen 1920] — 4) [Mobile 380]" labeling scheme. **Do NOT auto-commit until Vishal says go.**
+
+### Mandatory: keep the old resume working
+
+The old `resume.html` is the fallback print version. Don't break it. If you need to rename or move it, do it in a way that the URL `/prototypes/resume.html` still serves SOMETHING (preferably the new design once approved, the old design as fallback until then).
+
+If you need to keep the old one safe, save it to `prototypes/resume-OLD.html` and have the new one at `prototypes/resume.html`. Or commit the new one to a separate path and merge later. The user's call.
+
+---
+
+## Visual design constraints (must follow)
+
+1. **Widget-block style for every section** — `.section` class with glass treatment, rounded corners, subtle border, soft shadow. NO naked sections without the glass card treatment.
+2. **A4 print is the primary use case** — design first for A4, then adapt for screen. A4 = 210mm × 297mm.
+3. **The hero is the most important visual moment** — the photo + name + 4 status pills should feel like a unified composition, not 3 separate elements.
+4. **Density is OK for A4** — the resume is a print document, you can pack info tighter than a website. Don't add padding for the sake of it.
+5. **Light is the default theme** (per user confirmation, not yet explicit — but matches the site's evolving light-first direction).
+6. **Print must look professional** — A4 print, white bg, no shadows, no glass effect, all content readable in B&W. The print version is what recruiters might save as PDF.
+
+## Hard constraints (L-068 compliance)
+
+- **No "while I'm at it" fixes** — scope is exactly the 15 sub-tasks above
+- **Visual QA before commit** — render at A4 + 3 screen sizes + 2 themes, send screenshots, wait for Vishal sign-off
+- **No breaking the existing resume** — old version stays as fallback
+- **No inventing content** — all from `vishal_resume_library.md`
+- **No inventing SVG icons** — extract from portfolio-combined.html
+
+## Pre-flight checklist
+
+Before starting:
+- [ ] Read `CLAUDE.md` for portfolio context
+- [ ] Read `vishal_resume_library.md` for ALL content
+- [ ] Skim `portfolio-combined.html:5745-6020` for the patterns you're copying
+- [ ] Verify `git status` is clean on dev
+- [ ] Create branch `feat/resume-redesign` off dev
+- [ ] Push branch to origin
+
+During:
+- [ ] Read the file BEFORE editing (L-069)
+- [ ] Don't commit to main (you're on the feature branch)
+- [ ] Don't merge to dev (Vishal will do that after visual QA)
+- [ ] Send screenshots in chat after each major revision
+
+End:
+- [ ] Visual QA: render at A4 + 3 screen + 2 themes, send to Vishal
+- [ ] Wait for Vishal's go-ahead
+- [ ] Commit to `feat/resume-redesign`
+- [ ] Push to origin
+- [ ] Update DEVLOG with session entry
+
+## First action
+
+Read the 5 files listed in "Read these on session start" in order, then describe back:
+1. What you understand about the project (1 sentence)
+2. What you understand about the 15 sub-tasks (1 sentence)
+3. Any concerns or questions you have BEFORE starting
+4. Your plan for the first 5 sub-tasks (font stack + hero + photo + status pills + contact pills)
+
+Wait for Vishal to confirm your understanding. Then start implementing.
diff --git a/tasks/todo.md b/tasks/todo.md
index 1cb98a0..a1d99a5 100644
--- a/tasks/todo.md
+++ b/tasks/todo.md
@@ -130,6 +130,51 @@ la-Cormorant Bold Italic wordmark redo (all 5 occurrences) and Roadmap title res
- [ ] **Sub-place 6: Resume page header — add logo mark to `resume.html`** — Resume page (`prototypes/resume.html`) has its own header structure. Add the logo mark to the header for visual brand consistency with the main site.
- [ ] **Sub-place 7: `/me` private page — add logo mark to heading area** — The Tailscale-only `/me` private section has its own heading markup. Add the logo mark for branding consistency, matching the rest of the site's identity treatment.
+### Resume redesign (new — 2026-06-30, aesthetic version for the site, NOT the job-application CV)
+
+**Goal:** rebuild `prototypes/resume.html` from scratch using the portfolio's design system (Light Grey + Dark themes, widget-block glass effect, SVG icons, 4-font stack). Hero: photo top-left, VISHAL KATARIYA name centered, 4 status pills below name (AI/ML · Full Stack · DevOps/Infra · Open to work with green dot). Left column: 4 contact pills (email · github · website · location) + Skills (Technical + Soft) + Languages + Interests. Right column: Education (about-page layout, modules completed only) + Projects (5) + Work Experience (1 Amazon DNW4). Single file, light + dark themes via `prefers-color-scheme`. A4 print stylesheet.
+
+- [ ] **Sub-task 1: Font stack** — Drop Cormorant Garamond. Use: **Outfit** (body), **Space Grotesk** (display headers, name), **Syne** (accent fonts), **JetBrains Mono** (contact details, monospaced), **DM Mono** (small labels). Add JetBrains Mono + Syne to the Google Fonts `` (currently only has DM Mono + Space Grotesk + Outfit). Hero name stays in Space Grotesk 800, no calligraphic initials.
+- [ ] **Sub-task 2: Hero restructure** — Remove the small `logo-128.png` from the hero. Move "VISHAL KATARIYA" name to the center. Photo (`assets/image.png`, 680×761) goes top-left, sized to fit inline with the status pills on the right (proportional to A4 — agent picks size that looks balanced, not literal 170px).
+- [ ] **Sub-task 3: Remove old role text** — Delete `.hdr-role` line "AI · ML · SWE / CS Student at h_da" (current `resume.html:382`). Replace with the new 4 status pills (sub-task 5).
+- [ ] **Sub-task 4: Photo on top-left** — Reuse `assets/image.png` (already on disk, 659KB). Same border-radius 20px, same neomorphism shadow as about page's `.photo-frame`. Sized to be balanced with the contact pills in the hero row.
+- [ ] **Sub-task 5: 4 status pills (AI/ML · Full Stack · DevOps/Infra · Open to work with green dot)** — Replace the 3 old meta chips (`DIEBURG · GERMANY`, `AVAILABLE FOR INTERNSHIPS`, `ML ENGINEERING · FULL-STACK · INFRASTRUCTURE`). Pills go in the hero, below the name. "Open to work" gets a green dot (CSS-only, like `.s-done` pattern in the current resume). Location is moved to the contact pills (sub-task 6).
+- [ ] **Sub-task 6: 4 contact pills in left column (email · github · website · location) with SVG icons (OG banner style)** — Remove the top-right `linkedin.com/in/vkkatariya` contact. Each contact is its own pill with inline SVG icon (extract from `portfolio-combined.html` — they have ~146 inline SVGs total, the right ones for email/github/globe/pin). Layout: vertical stack in the left column at the top. Click each = `mailto:` / GitHub / website / `gmaps:` or static link.
+- [ ] **Sub-task 7: Move Education to right column (was left) + use about-page layout** — Remove the current left-column education block. Add a new education widget in the RIGHT column (above projects) using the about-page's `edu-card` pattern (institution with graduation cap SVG icon, degree, period, "currently enrolled" badge, modules list). The label is "MODULES COMPLETED" (drop "/ IN PROGRESS" from the about page's "MODULES COMPLETED / IN PROGRESS").
+- [ ] **Sub-task 8: Split skills into Technical (left column) + Soft (left column)** — Replace the current left-column education slot. Technical skills: keep the 7-bar layout (Python, Docker·Linux, ML/AI, TypeScript, Proxmox·ARM, SvelteKit, C++) + add `Git` as a 8th bar. Add the 4 skill categories from current resume (Backend & Infra, AI & ML, Frontend, [add Git/Footer category]). Soft skills: 5 chips from library (Problem-solving, Technical writing, Systems thinking, Research and analysis, Teamwork).
+- [ ] **Sub-task 9: Interests with details from about page (4 cards with icon + title + 1-2 sentence description)** — Replace current 4-chip list. Each interest is a small card with: icon (emoji or SVG), title, 1-2 sentence description. Copy descriptions from `prototypes/portfolio-combined.html:5990-6022` (Programming, AI, Cricket, Entrepreneurship).
+- [ ] **Sub-task 10: Languages stays the same** — No change to the 4-language list (Deutsch, English, Hindi, Gujarati) with dots + levels.
+- [ ] **Sub-task 11: Add Portfolio Website + Hermes One OAuth Fork to projects (was 3, now 5)** — Current projects (Finance Buddy, Homelab Dashboard, orlon-bot). Add 2 more: Portfolio Website + Hermes One OAuth Fork. Each project: SVG icon + title, >description (2-line, from `resume-references/`), >Stack chips, status badge (live/wip). All content from `~/dev-shared/projects/resume-references/vishal_resume_library.md` lines 147-303.
+- [ ] **Sub-task 12: New Work Experience section below Projects** — Layout: Role + timeline (top row), >company + location, >Description bullets. One entry: **Fulfillment Associate — Amazon DNW4, Duisburg** (Jul 2024 – Dec 2024, 6 months). Use the EN bullets from `resume-references/vishal_resume_library.md` lines 63-66 (3 bullets). SVG briefcase icon.
+- [ ] **Sub-task 13: SVG icons across all sections** — Each section gets appropriate icons. Extract inline SVGs from `prototypes/portfolio-combined.html` (the file has 146 inline SVGs, scan for the right shapes):
+ - **Contact pills:** 📧 email (envelope), 🐙 github (octocat), 🌐 website (globe), 📍 location (pin)
+ - **Status pills:** 🟢 open to work (CSS dot only, no SVG)
+ - **Education:** 🎓 graduation cap
+ - **Projects:** 5 different icons — 💰 finance, 📊 dashboard, 🤖 bot, 🌐 portfolio, 🔐 oauth
+ - **Skills:** 💻 technical, 🤝 soft
+ - **Languages:** 🌐 globe
+ - **Interests:** 4 from about page — 💻 code, 🤖 AI, 🏏 cricket, 📚 book
+ - **Work exp:** 💼 briefcase
+- [ ] **Sub-task 14: Light grey background + widget style + dark/light themes** — Background: light grey matching `html.light` mode on vishal-katariya.com (the `#f0f0f0` or `#ececec` used on the site). All sections use the widget-block glass treatment (`backdrop-filter: blur()`, semi-transparent, rounded corners 16-24px, subtle border). Generate dark + light via `prefers-color-scheme: dark/light` media queries (NO separate HTML files). Theme toggle: optional UI button like the portfolio has. A4 print: white background regardless of theme (saves toner).
+- [ ] **Sub-task 15: Content source** — All project descriptions, work exp bullets, skills, education, interests come from `~/dev-shared/projects/resume-references/vishal_resume_library.md` (17KB, 387 lines, master source for all resume variants). Read this file FIRST before writing any content.
+- [ ] **Visual QA at A4 print + screen** — Per L-068, the agent must render the resume at A4 (210mm×297mm) via Playwright + at screen (1280px) + at print preview before commit. Send screenshots to Vishal for sign-off.
+- [ ] **Mandatory: keep `resume.html` working as the current print version until visual QA passes** — Don't break the existing resume until the new one is approved.
+
+**Decisions confirmed (2026-06-30):**
+- Fonts: Outfit (body) + Space Grotesk (display) + Syne (accent) + JetBrains Mono (contacts) + DM Mono (labels). No Cormorant Garamond.
+- Hero: photo (left) + VISHAL KATARIYA (center) + 4 status pills (AI/ML · Full Stack · DevOps/Infra · Open to work) below name
+- Contacts: 4 pills (email, github, website, location) in **left column at top** (NOT in hero)
+- Photo size: agent picks, balanced with the hero layout
+- Light + dark via `prefers-color-scheme`, single file
+- Projects: 5 (Finance Buddy, Homelab Dashboard, orlon-bot, **Portfolio Website**, **Hermes One OAuth Fork**)
+- Work exp: 1 entry (Amazon DNW4)
+- Content source: `~/dev-shared/projects/resume-references/vishal_resume_library.md`
+- A4 print, single file, no separate HTML
+
+**Kickoff (Hermes-authored 2026-06-30, awaiting dispatch):** `tasks/kickoff-resume-redesign.md`
+
+**Branch:** `feat/resume-redesign` off dev
+
### New widgets
- [x] Add FEATURED: Hermes One OAuth Fork widget on homepage — **completed 2026-06-26 by Claude**. Added `s11` (1×1, 168px) widget between PROJECTS STAT and ABOUT via HTML order auto-placement (col4 row5, no explicit grid needed). Uses Ndot dot-matrix font for title with `var(--green)` glow, stats in blue/neutral/green tier. VIEW → navigates to `showPage('projects')` + `scrollIntoView('hermes-desktop-oauth')`, GITHUB → `https://github.com/vkkatariya/hermes-desktop-oauth`. Also fixed Contact widget `align-self:start` → `align-self:stretch` so Contact bottom flushes with About bottom (both at y=1342). Sub-items below.
- [x] Map exact grid coordinates before touching anything (Playwright DOM audit)
+ 
-