const { useState, useEffect, useRef } = React; // -------------------- DATA -------------------- const NAV = [ { id: "home", label: "home" }, { id: "work", label: "work" }, { id: "companies", label: "companies" }, { id: "contact", label: "contact" }]; const PROJECTS = [ { id: "lumen", // QuadTravel name: "Travel Management", bg: "#FF5A52", glow: "rgba(255,90,82,0.45)", description: "A B2B travel management platform redesigned end-to-end. Cut booking time by 45% and accelerated adoption among travel agencies and corporate clients.", tags: ["B2B SaaS", "Travel", "2025"], mock: "lumen", duration: "1.5 years (ongoing)", sector: "B2B SaaS · Travel & Expense", role: "Senior UX/UI Designer", year: "2024 — Now" }, { id: "atlas", // Sentinel — Govt dashboards name: "Sentinel", bg: "#7C5CFF", glow: "rgba(124,92,255,0.45)", description: "State government dashboards for Assam & Andhra Pradesh. Restructured complex civic data into a usable command surface for officials and field staff.", tags: ["GovTech", "Dashboards", "2022"], mock: "atlas", duration: "1 year 2 months", sector: "GovTech · Data dashboards", role: "Senior UI Designer", year: "2021 — 2022" }, { id: "fern", // Summit — G20 name: "Summit G20", bg: "#1F8A5B", glow: "rgba(31,138,91,0.45)", description: "High-visibility event websites for G20-affiliated programmes. Built to WCAG 2.0 / 2.1 from the ground up and consumed by a global press audience.", tags: ["Accessibility", "Web", "2023"], mock: "fern", duration: "6 months", sector: "Public sector · Accessibility", role: "Senior UX Designer", year: "2023" }, { id: "kiln", // Excise — Liquor tracking SaaS name: "Excise", bg: "#FFB13C", glow: "rgba(255,177,60,0.45)", description: "A multi-state liquor tracking SaaS used by excise departments. Replaced paper trails with a compliant, audit-ready workflow that field officers actually use.", tags: ["GovTech", "SaaS", "2022"], mock: "kiln", duration: "9 months", sector: "Vertical SaaS · Compliance", role: "UX/UI Designer", year: "2021 — 2022" }]; const COMPANIES = [ { name: "QuadLabs", role: "Senior UX/UI Designer", period: "Dec 2024 — Now", note: "B2B travel SaaS" }, { name: "ANTS Digital", role: "Senior UX Designer", period: "Jun 2022 — Dec 2024", note: "G20 sites · B2B SaaS" }, { name: "C-Tel Infosystems", role: "Senior UI Designer", period: "May 2021 — Jun 2022", note: "Govt dashboards" }, { name: "Visionary-art", role: "UI Designer (Freelance)", period: "Nov 2020 — Apr 2021", note: "Web design" }, { name: "PROPERTYYY.com", role: "Graphic Design Intern", period: "Jul — Oct 2020", note: "Brand & social" }]; // -------------------- NAV -------------------- function TopNav({ active, theme, toggleTheme }) { return (
); } function ThemeToggle({ theme, toggleTheme }) { const isDark = theme === "dark"; return ( ); } function Logo() { return ( ); } function scrollToId(id) { const el = document.getElementById(id); if (!el) return; window.scrollTo({ top: el.offsetTop - 20, behavior: "smooth" }); } // -------------------- HERO -------------------- function Hero() { return (
{/* ambient blob */}
{/* Eyebrow */}
Open for work
{/* Headline */}

I design products, not just screens.

I'm Khushboo Kumari — a Senior Product Designer based in Delhi. 5+ years shaping B2B SaaS, AI-first UX, and complex data-driven systems. Currently designing the travel management platform at QuadLabs.

); } function PerfectChip({ children }) { return ( {children || "perfect"}); } function FloatingBadge({ text, color, textColor = "#fff", style, rotate = 0 }) { return ( {text} ); } function ScrollHint() { return (
scroll
); } // -------------------- PROJECTS -------------------- function Projects() { return (
{PROJECTS.map((p, i) => )}
); } function ProjectCard({ project, index }) { const [hover, setHover] = useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: "relative", display: "block", background: project.bg, borderRadius: 28, padding: "44px 48px 0", overflow: "hidden", minHeight: 520, boxShadow: hover ? `0 40px 100px ${project.glow}, 0 0 0 1px rgba(255,255,255,0.12), inset 0 0 60px rgba(255,255,255,0.05)` : `0 10px 40px ${project.glow}`, transform: hover ? "translateY(-8px) scale(1.005)" : "translateY(0) scale(1)", transition: "transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s", cursor: "pointer", color: "inherit", textDecoration: "none" }} className="project-card"> {/* Animated shine sweep */}
{/* Top row: index + arrow badge */}
PROJECT / 0{index + 1}
{/* Title */}

{project.name}

{/* Description */}

{project.description}

{/* Tags */}
{project.tags.map((t, i) => {t} )}
{/* Mockup area */}
{/* View pill */}
👀 View case study →
); } function StarBadge({ hover }) { // 16-point sunburst path const points = 16,cx = 32,cy = 32,rOuter = 30,rInner = 23; let path = ""; for (let i = 0; i < points * 2; i++) { const angle = i / (points * 2) * Math.PI * 2 - Math.PI / 2; const r = i % 2 === 0 ? rOuter : rInner; const x = cx + Math.cos(angle) * r; const y = cy + Math.sin(angle) * r; path += (i === 0 ? "M " : " L ") + x.toFixed(2) + " " + y.toFixed(2); } path += " Z"; return (
{/* arrow stays upright while badge spins */}
); } // -------------------- PROJECT MOCKS (placeholders shaped like product screenshots) -------------------- function ProjectMock({ kind, hover }) { const tilt = hover ? "perspective(1200px) rotateX(8deg) rotateY(-6deg) translateY(-8px)" : "perspective(1200px) rotateX(12deg) rotateY(-8deg)"; const common = { position: "absolute", borderRadius: 14, background: "#fff", boxShadow: "0 30px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.04)", transition: "transform 0.5s cubic-bezier(.2,.8,.2,1)", overflow: "hidden" }; if (kind === "lumen") { return ( <>
); } if (kind === "atlas") { return ( <>
); } if (kind === "fern") { return ( <>
); } if (kind === "kiln") { return ( <>
); } return null; } function PhoneMock({ theme }) { if (theme === "lumen") { return (
9:41●●●
Tonight
7h 12m
); } if (theme === "fern") { return (
Balance
$4,218.40
▲ $124.80 this week
Round-up jar
$38.42
Allocation
); } if (theme === "fern2") { return (
This month
+ $312.18
); } return null; } function DashboardMock({ theme }) { if (theme === "atlas") { return (
{Array.from({ length: 5 }).map((_, i) =>
)}
Workspace · Atlas
Engineering Ops
RECENT
{["payments-api", "ledger-svc", "checkout-web", "fraud-mlx"].map((r, i) =>
{r} {["12s", "1m", "4m", "11m"][i]} ago
)}
); } if (theme === "lumen") { return (
Weekly summary
Sleep is trending up
{[0, 1, 2, 3, 4, 5, 6].map((i) => )}
); } if (theme === "kiln") { return (
Kiln 3 · Cone 6
Bisque firing — 04:18 left
); } return null; } function Stat({ label, val, dark }) { return (
{label}
{val}
); } function Bar({ v, c }) {return
;} function Pill({ t, c }) { return {t}; } function Card({ t, v, trend, light, dark }) { const bg = light ? "#fff" : dark ? "#2a1f0d" : "#13141c"; const border = light ? "1px solid #ffe4df" : dark ? "1px solid #3d2f15" : "1px solid #1c1d26"; return (
{t}
{v}
{trend &&
{trend}
}
); } // -------------------- SECTION HEADER -------------------- function SectionHeader({ eyebrow, title, subtitle }) { return (
{eyebrow}

{title}

{subtitle &&

{subtitle}

}
); } // -------------------- COMPANIES -------------------- function Companies() { const [hovered, setHovered] = useState(null); return (
{COMPANIES.map((c, i) =>
setHovered(i)} onMouseLeave={() => setHovered(null)} className="company-row" style={{ display: "grid", gridTemplateColumns: "1.2fr 2fr 1.2fr auto", gap: 24, padding: "32px 8px", borderBottom: "1px solid var(--line)", alignItems: "center", position: "relative", transition: "padding 0.3s", paddingLeft: hovered === i ? 24 : 8 }}>
{c.name}
{c.role}
{c.period}
{c.note}
)}
{/* Logo strip */}
{["QuadLabs", "ANTS Digital", "C-Tel", "Visionary-art", "PROPERTYYY", "Vardhan"].map((l) => {l} )}
); } // -------------------- CONTACT -------------------- function Contact() { const [copied, setCopied] = useState(false); const email = "khushboo31k@gmail.com"; const copy = () => { navigator.clipboard?.writeText(email).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1600); }); }; return (
{/* deco */}
04 — Get in touch

Have an idea? Let's make it real.

I take on two engagements a quarter. If you're shaping something early and need a designer who codes, I'd love to hear about it.

Book a 20-min intro →
{[ { l: "Email", v: "khushboo31k@gmail.com" }, { l: "Portfolio", v: "khush31.github.io" }, { l: "LinkedIn", v: "in/khushboo-kumari-" }, { l: "Based in", v: "West Delhi, India · GMT+5:30" }]. map((s) =>
{s.l}
{s.v}
)}
{/* Footer */}
© 2026 Khushboo Kumari · All bytes reserved
Built by hand · v3.2.0
); } // -------------------- APP -------------------- function App() { const [active, setActive] = useState("home"); const [theme, setTheme] = useState(() => { try {return localStorage.getItem("theme") || "dark";} catch (e) {return "dark";} }); useEffect(() => { document.documentElement.setAttribute("data-theme", theme); try {localStorage.setItem("theme", theme);} catch (e) {} }, [theme]); const toggleTheme = () => setTheme((t) => t === "dark" ? "light" : "dark"); useEffect(() => { const sections = ["home", "work", "companies", "contact"]; const onScroll = () => { const y = window.scrollY + 120; let cur = sections[0]; for (const s of sections) { const el = document.getElementById(s); if (el && el.offsetTop <= y) cur = s; } setActive(cur); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); return (
); } ReactDOM.createRoot(document.getElementById("root")).render();