{/* Subtle grain to match site texture */}
\")",
}} />
{/* Top-left index marker */}
§ 00 · Welcome
{/* The greeting itself */}
{current.text}
{/* Bottom-right lang tag */}
{current.lang}
{String(idx + 1).padStart(2, "0")} / {String(greetings.length).padStart(2, "0")}
);
}
/* =========================================================== TYPEWRITER INTRO
Letters of "Abhishek Khandelwal" type out, hold, underline animates in,
then the overlay dissolves. ~1.5s. */
function TypewriterIntro() {
const FULL = "Abhishek Khandelwal";
const [chars, setChars] = useState(0);
const [held, setHeld] = useState(false);
const [wipe, setWipe] = useState(false);
const [done, setDone] = useState(false);
useBodyLock(!done);
useEffect(() => {
let i = 0;
const ts = [];
const tick = () => {
i += 1;
setChars(i);
if (i < FULL.length) {
ts.push(setTimeout(tick, 55));
} else {
ts.push(setTimeout(() => setHeld(true), 200));
ts.push(setTimeout(() => setWipe(true), 900));
ts.push(setTimeout(() => setDone(true), 1600));
}
};
ts.push(setTimeout(tick, 120));
return () => ts.forEach(clearTimeout);
}, []);
if (done) return null;
return (
§ 00 · Frontispiece
{FULL.slice(0, chars)}
|
);
}
/* =========================================================== PRELOADER INTRO
Bottom progress bar 0 to 100 with rotating witty Indian-context messages.
~2s. */
function PreloaderIntro() {
const msgs = [
"Brewing chai…",
"Briefing creators…",
"Chasing editor for quote…",
"Reading WhatsApp at midnight…",
"Finalising deck nobody will read…",
"Almost there…",
];
const [pct, setPct] = useState(0);
const [msg, setMsg] = useState(0);
const [wipe, setWipe] = useState(false);
const [done, setDone] = useState(false);
useBodyLock(!done);
useEffect(() => {
let p = 0;
let raf;
const t0 = Date.now();
const tick = () => {
const elapsed = Date.now() - t0;
p = Math.min(100, (elapsed / 1700) * 100);
setPct(Math.round(p));
setMsg(Math.min(msgs.length - 1, Math.floor((p / 100) * msgs.length)));
if (p < 100) {
raf = requestAnimationFrame(tick);
} else {
setTimeout(() => setWipe(true), 300);
setTimeout(() => setDone(true), 1000);
}
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
if (done) return null;
return (
§ 00 · Loading
Loading
{String(pct).padStart(3, "0")}%
);
}
/* =========================================================== MONOGRAM INTRO
Huge italic "AK" centred, holds, then scales + slides into the top-left
nav corner while the backdrop fades. The monogram itself fades out at the
end so the real Nav logo takes over. ~2s. */
function MonogramIntro() {
const [shrunk, setShrunk] = useState(false);
const [fadeAK, setFadeAK] = useState(false);
const [done, setDone] = useState(false);
useBodyLock(!done);
useEffect(() => {
const ts = [];
ts.push(setTimeout(() => setShrunk(true), 750));
ts.push(setTimeout(() => setFadeAK(true), 1500));
ts.push(setTimeout(() => setDone(true), 2050));
return () => ts.forEach(clearTimeout);
}, []);
if (done) return null;
return (
<>
AK
);
}
/* =========================================================== SCRAMBLE INTRO
Hero headline shown scrambled (each char rapidly cycling), resolves
line by line, then the overlay dissolves. ~1.4s. */
function ScrambleIntro() {
const LINES = ["Stories that", "travel far. And", "brands that stick."];
const CHARS = "!<>-_\\/[]{}—=+*^?#________ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const [out, setOut] = useState(LINES.map((l) => " ".repeat(l.length)));
const [wipe, setWipe] = useState(false);
const [done, setDone] = useState(false);
useBodyLock(!done);
useEffect(() => {
const totalMs = 900;
const t0 = Date.now();
let raf;
const tick = () => {
const t = Math.min(1, (Date.now() - t0) / totalMs);
const next = LINES.map((line, li) => {
const lineStart = li * 0.12;
const lp = Math.max(0, Math.min(1, (t - lineStart) / (1 - lineStart)));
return line.split("").map((ch, i) => {
if (ch === " ") return " ";
const cp = lp * (1 + (line.length - i) / line.length);
if (cp >= 1) return ch;
return CHARS[Math.floor(Math.random() * CHARS.length)];
}).join("");
});
setOut(next);
if (t < 1) {
raf = requestAnimationFrame(tick);
} else {
setTimeout(() => setWipe(true), 320);
setTimeout(() => setDone(true), 1100);
}
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
if (done) return null;
return (
§ 00 · Resolving
{out.map((line, i) => (
{line}
))}
);
}
/* =========================================================== NAVIGATION */
function Nav({ motion }) {
const [open, setOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
const { isMobile, isCompact } = useViewport();
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
<>
{ e.preventDefault(); gotoSection("top", "Home"); }}
data-cursor="hover"
style={{
fontFamily: "var(--font-display)",
fontSize: isMobile ? 18 : 22,
color: "var(--fg)",
textDecoration: "none",
letterSpacing: "-0.01em",
display: "flex",
alignItems: "baseline",
gap: 10,
}}>
Abhishek
{!isMobile && (
Khandelwal
)}
{!isCompact && [
["Work", "work"],
["Services", "services"],
["About", "about"],
["Contact", "contact"],
].map(([label, id]) => (
{ e.preventDefault(); gotoSection(id, label); }}
data-cursor="hover"
style={{
color: "var(--fg-dim)",
textDecoration: "none",
position: "relative",
transition: "color .3s",
}}
onMouseEnter={(e) => e.currentTarget.style.color = "var(--fg)"}
onMouseLeave={(e) => e.currentTarget.style.color = "var(--fg-dim)"}
>
{label}
))}
Book ↗
{!isMobile && (
setOpen(true)}
data-cursor="hover"
style={{
background: "transparent",
border: "1px solid var(--line)",
color: "var(--fg)",
padding: "10px 18px",
borderRadius: 999,
fontFamily: "inherit",
fontSize: "inherit",
letterSpacing: "inherit",
textTransform: "inherit",
cursor: "none",
}}
>
Index ↗
)}
{open &&
setOpen(false)} />}
);
}
function IndexOverlay({ onClose }) {
useEffect(() => {
const onKey = (e) => e.key === "Escape" && onClose();
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [onClose]);
return (
Index · Selected Work
Close ✕
{WORK.map((w, i) => (
{ e.preventDefault(); onClose(); gotoSection("work", "Work"); }}
data-cursor="view"
data-cursor-label="View"
style={{
display: "grid",
gridTemplateColumns: "60px 1fr 220px 80px",
alignItems: "baseline",
padding: "28px 0",
borderBottom: "1px solid var(--line)",
color: "var(--fg)",
textDecoration: "none",
gap: 24,
}}
onMouseEnter={(e) => e.currentTarget.style.paddingLeft = "16px"}
onMouseLeave={(e) => e.currentTarget.style.paddingLeft = "0"}
>
{w.idx}
{w.title}
{w.client}
{w.year}
))}
);
}
/* ====================================================================== HERO */
function Hero({ motion }) {
const [mouse, setMouse] = useState({ x: 0, y: 0 });
const { isMobile, isCompact } = useViewport();
useEffect(() => {
if (motion === 0 || isMobile) return;
const onMove = (e) => {
const x = (e.clientX / window.innerWidth - 0.5) * 2;
const y = (e.clientY / window.innerHeight - 0.5) * 2;
setMouse({ x, y });
};
window.addEventListener("mousemove", onMove);
return () => window.removeEventListener("mousemove", onMove);
}, [motion, isMobile]);
const parallax = (depth) => ({
transform: `translate3d(${mouse.x * depth}px, ${mouse.y * depth}px, 0)`,
transition: "transform .8s cubic-bezier(.2,.7,.2,1)",
});
return (
{/* Floating tag, top-right (hidden on mobile to free up nav space) */}
{!isMobile &&
Independent Practice
Est. 2022 · Gwalior, M.P
}
{/* Top-left meta */}
0 ? "pulse 2s ease-in-out infinite" : "none",
}} />
Open for briefs that aren't "make it viral"
{/* The big type */}
Stories that,
<>travel far. And,
<>brands that stick.,
]}
/>
{/* Decorative line + index (hidden on mobile, no room) */}
{!isMobile &&
◇ Index · 01 / Hero
}
{/* Bottom row */}
I'm Abhishek Khandelwal . Three years of finding creators for brands and PR opportunities for founders. Worked with Dabur, Swiggy, Netflix, Hero Motors, MTR, and a steady roster of indie founders.
Currently
Probably briefing a creator
on a call. Or doing PR
for a brand. Often both.
);
}
/* ============================================================ TICKER */
function Ticker({ motion }) {
return (
A small, considered portfolio . Chosen over a Notion page of everything.
{WORK.map((w, i) => {
const layouts = [
{ col: "1 / span 5", off: 0 },
{ col: "7 / span 6", off: 36 },
{ col: "2 / span 5", off: 0 },
{ col: "8 / span 4", off: 28 },
{ col: "1 / span 5", off: 48 },
{ col: "7 / span 5", off: 0 },
];
const L = layouts[i % layouts.length];
const gridStyle = isMobile || isCompact
? { marginTop: 0 }
: { gridColumn: L.col, marginTop: L.off };
return (
);
})}
Showing {WORK.length} of many. The rest is on request, or a Drive link
{ e.preventDefault(); gotoSection("contact", "Contact"); }}
data-cursor="hover"
style={{
fontFamily: "var(--font-display)",
fontStyle: "italic",
fontSize: 28,
color: "var(--fg)",
textDecoration: "none",
display: "inline-flex",
alignItems: "center",
gap: 12,
}}
>
Ask for the full archive
→
);
}
function WorkTile({ work, index, motion }) {
const [hover, setHover] = useState(false);
const brand = work.brand || "var(--accent)";
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
position: "relative",
transition: "transform .8s cubic-bezier(.2,.7,.2,1)",
transform: hover ? "translateY(-6px)" : "translateY(0)",
}}
>
{/* Meta row */}
{work.idx} / {work.tags.join(" · ")}
{work.year}
{/* Card body: brand-tinted, sized to content (no aspect lock) */}
{/* Top: brand wordmark + dot */}
{work.client.split("·")[0].trim()}
{/* Big metric block */}
{work.metric}
{work.unit}
{/* Subtle corner ticks */}
{/* Below card: title + note */}
);
}
/* ============================================================ CAPABILITIES */
function Capabilities({ motion }) {
const [openIdx, setOpenIdx] = useState(0);
const { isMobile } = useViewport();
return (
Four practices , one studio of one.
Most months I'm running creator campaigns and a press push in parallel. The rest of the time, I'm explaining to founders that "going viral" is not a strategy. It's an outcome that mostly belongs to cats.
{SERVICES.map((s, i) => (
setOpenIdx(i)}
data-cursor="hover"
style={{
borderTop: "1px solid var(--line)",
borderBottom: i === SERVICES.length - 1 ? "1px solid var(--line)" : "none",
padding: "32px 0",
cursor: "none",
position: "relative",
}}
>
{s.n}
{openIdx === i && ◇ }
{s.title}
{s.body}
{s.deliverables.map((d) => (
{d}
))}
))}
);
}
/* ============================================================ ABOUT */
function About({ motion }) {
const { isMobile } = useViewport();
return (
§ 04A · Timeline
{[
{
year: "Now",
items: ["Freelance practice", "Founder PR + ongoing retainers"],
},
{
year: "2025",
items: ["Fashion brands and real estate clients", "Founder PR engagements"],
},
{
year: "2024",
items: ["Swiggy Valentine's repost (70+ creators in a day)", "Eastern Condiments campaigns"],
},
{
year: "2023",
items: ["MTR breakfast + masala drops", "Eastern Condiments and early FMCG work"],
},
{
year: "2022",
items: ["Raised my hand on a creator campaign", "(still a UI/UX person back then)"],
},
].map((row, i, arr) => (
{row.year}
{row.items.map((line, j) => (
0 && line.startsWith("(") ? "italic" : "normal",
}}>
{line}
))}
))}
Plate 04A
Honestly, I started as a UI/UX designer. One day a campaign needed someone to find creators for a brand push, I raised my hand, and I haven't really stopped since. Three years later, I run a small practice for brands that want their story
told well , by the right creators, on the right platforms, ideally before Instagram changes its algorithm again next Tuesday.
The truth is, this job has no fixed hours and no clean deadlines. The press call lands at 8pm because the editor wants the quote "by morning, urgent". The creator goes quiet on Sunday and the WhatsApp follow-ups happen anyway. Reports nobody on the brand side will actually read still have to get written. And every brief that starts with "we want it premium but also young but also viral" has to be turned into something a real creator will post without ghosting me. Bonus points if the founder doesn't WhatsApp at midnight to add one more thing.
{/* Stats */}
{[
["2,000+", "Creators activated at scale"],
["300+", "Onboarded directly by me"],
["20+", "Brand campaigns shipped"],
["3+", "Years doing this"],
].map(([n, l], i) => (
))}
{/* Tools / clients strip */}
Tools I've been forced into liking
Instagram ·
YouTube ·
Twitter ·
Notion ·
Google Analytics ·
ChatGPT ·
Claude ·
Google Sheets
);
}
/* ============================================================ CONTACT */
function Contact({ motion }) {
const { isMobile } = useViewport();
return (
);
}
/* ============================================================ BRIEF FORM */
function BookBriefForm({ motion }) {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [project, setProject] = useState("");
const [timeline, setTimeline] = useState("");
const [brief, setBrief] = useState("");
const [sent, setSent] = useState(false);
const { isMobile } = useViewport();
const onSubmit = (e) => {
e.preventDefault();
const subject = `Brief from ${name || "someone"}: ${project || "a project"}`;
const body = [
`Name: ${name}`,
`Email: ${email}`,
`Project type: ${project}`,
`Timeline: ${timeline}`,
``,
`Brief:`,
brief,
``,
`(sent from abhishek's portfolio)`,
].join("\n");
window.location.href = `mailto:abhishekuseitforwork@gmail.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
setSent(true);
};
const label = {
fontFamily: "var(--font-mono)",
fontSize: 10,
letterSpacing: "0.2em",
textTransform: "uppercase",
color: "var(--fg-mute)",
marginBottom: 8,
display: "block",
};
const field = {
width: "100%",
background: "transparent",
border: "none",
borderBottom: "1px solid var(--line)",
color: "var(--fg)",
fontFamily: "var(--font-body)",
fontSize: 16,
padding: "10px 0",
outline: "none",
cursor: "none",
};
const selectField = {
...field,
appearance: "none",
WebkitAppearance: "none",
backgroundImage:
"url(\"data:image/svg+xml;utf8,