// chapters.jsx — Cover + all 7 chapters + Coda + ChapterRail + Footer. const { useState: useS, useEffect: useE, useRef: useR } = React; // ---------- CHAPTER SHELL ---------- function ChapterShell({ id, number, heading, sub, children, tall = true }) { return (
Ch. {number}

{heading}

 {sub && (

{sub}

 )}
{children}
); } // ---------- INTRO (HERO + ABOUT, MERGED) ---------- const INTRO_STATS = [ { num: '5+', label: 'Years Experience' }, { num: '20+', label: 'Projects' }, ]; const INTRO_SOCIALS = [ { label: 'GitHub', href: 'https://github.com/chintan-diwakar', bg: '#1a1614', shadow: 'rgba(26,22,20,0.38)', icon: ( ), }, { label: 'LinkedIn', href: 'https://www.linkedin.com/in/chintandiwakar/', bg: '#0A66C2', shadow: 'rgba(10,102,194,0.40)', icon: ( ), }, ]; // Stat counters — used in the "Things I've built" section. function StatsRow({ isMobile = false }) { return (
{INTRO_STATS.map(s => { const plus = s.num.endsWith('+'); const base = plus ? s.num.slice(0, -1) : s.num; return (
{base}{plus && +}
{s.label}
); })}
); } function Intro() { const isMobile = useIsMobile(); const scrollToWork = () => { const el = document.getElementById('ch-02'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; const EYEBROW = ( Full-Stack Developer · AI Engineer · Mumbai ); const HEADING = (

Hi, I'm{' '} Chintan.

); const DESC = (

For the past 5 years I've been building{' '} SaaS platforms,{' '} AI agents, and{' '} automation systems{' '} that solve real business problems. I don't just build CRUD apps —{' '} I build systems that think.

); const SOCIALS = (
{INTRO_SOCIALS.map(s => ( { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = `0 18px 34px -12px ${s.shadow}`; e.currentTarget.style.filter = 'brightness(1.08)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = `0 10px 24px -10px ${s.shadow}`; e.currentTarget.style.filter = 'none'; }}> {s.icon} {s.label} ))}
); const PHOTO = ( ); const SCROLL = ( ); const BG = ` radial-gradient(1100px 700px at 80% 6%, rgba(201,100,66,0.13), transparent 60%), radial-gradient(900px 700px at 6% 96%, rgba(160,154,146,0.14), transparent 60%), var(--bg) `; if (isMobile) { return (
{EYEBROW}{HEADING} {PHOTO} {SOCIALS} {DESC}
); } // ----- desktop ----- return (
{EYEBROW}{HEADING} {DESC}
{SOCIALS}
{SCROLL}
{PHOTO}
); } // ---------- CH.02 — BUILT (CARD SWIPER WITH FLIP) ---------- // A horizontal carousel of 8 project cards. Each card flips on click to // reveal a longer description. Nav: prev/next arrows + dot pagination. // Front shows: visual glyph, name, when, short description, tags, links. // Back shows: same chrome + the longer back copy. function ShowcaseGlyph({ kind }) { if (kind === 'matrix') { return ( {[...Array(6)].map((_,r) => [...Array(11)].map((_,c) => { const on = (r * 7 + c * 3) % 11 < 4; const dead = (r + c) % 8 === 0; return ; }))} ); } if (kind === 'terminal') { return ( {[80,110,60,90,40].map((w, i) => ( ))} ); } if (kind === 'brew') { return ( ); } if (kind === 'lock') { return ( ); } if (kind === 'agents') { return ( {[ { cx: 60, cy: 50, c: '#c96442' }, { cx: 100, cy: 32, c: '#1a1614' }, { cx: 140, cy: 50, c: '#5b6b4d' }, { cx: 100, cy: 70, c: '#a04527' }, { cx: 100, cy: 50, c: '#1a1614' }, ].map((n, i) => ( ))} ); } if (kind === 'chart') { return ( {[15, 25, 18, 35, 28, 45, 38, 55, 48, 62, 58, 70].map((h, i) => ( ))} ); } if (kind === 'md') { return ( # Hello ); } if (kind === 'cloud') { return ( ); } return null; } // Product Hunt logomark — orange disc with the "P". function PHLogo({ size = 20 }) { return ( ); } // One project card — flips on click. function FlipCard({ p, flipped, onFlip }) { return (
{/* FRONT */}
{p.links.ph && ( e.stopPropagation()} aria-label="Launched on Product Hunt" style={{ position: 'absolute', top: 10, right: 10, display: 'flex', alignItems: 'center', gap: 7, background: '#ffffff', borderRadius: 8, padding: '5px 10px 5px 7px', border: '1px solid rgba(20,15,10,0.08)', boxShadow: '0 4px 14px -4px rgba(31,27,22,0.30)', }}> Launched on Product Hunt )}

{p.name}

{p.when}

{p.tagline}

{p.front}

{/* footer group, pinned to the bottom of the card */}
{/* BACK */}

{p.name}

{p.when}
How it works

{p.back}

Stack
{p.tags.map(t => ( {t} ))}
{p.metric} flip back
); } function Ch02_Built() { const items = ALL_PROJECTS; const [flipped, setFlipped] = useState({}); // id -> bool const sectionRef = useRef(null); const scrollerRef = useRef(null); const isMobile = useIsMobile(); // Duplicate the list so the loop wraps seamlessly: the second half is an // exact copy of the first, so when scrollLeft crosses one half-width we can // teleport back by that amount with no visible jump. const loop = [...items, ...items]; // Carousel control — kept in a ref so pointer moves don't trigger re-renders. const drag = useRef({ paused: false, // hover pause (desktop) down: false, // pointer is pressed (may become a drag or a click) dragging: false, // movement crossed the threshold → it's a real drag startX: 0, startScroll: 0, moved: false, // crossed the drag threshold → suppress the click-to-flip pointerId: null, userUntil: 0, // auto-scroll stays off until this timestamp (post-interaction settle) }); // Auto-scroll loop. Runs on both desktop and mobile; pauses on hover and // during/just-after any manual drag or swipe. Manual scrolling (mouse drag // or native touch) moves scrollLeft directly; this just nudges it onward. useEffect(() => { const el = scrollerRef.current; if (!el) return; const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const SPEED = 45; // px per second let raf, prev; const tick = (t) => { const s = drag.current; if (prev == null) prev = t; const dt = Math.min(0.05, (t - prev) / 1000); prev = t; const half = el.scrollWidth / 2; if (half > 0) { if (!reduce && !s.paused && !s.down && t > s.userUntil) { el.scrollLeft += SPEED * dt; } // seamless wrap in both directions if (el.scrollLeft >= half) el.scrollLeft -= half; else if (el.scrollLeft <= 0) el.scrollLeft += half; } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); // Mouse drag-to-scroll (desktop). Touch devices use native overflow scroll. // We DON'T capture the pointer on press — that would make a plain click // dispatch to the slider instead of the card, killing the flip. Capture only // starts once movement crosses the threshold, i.e. once it's really a drag. const onPointerDown = (e) => { const s = drag.current; if (e.pointerType === 'mouse' && e.button !== 0) return; // left button only s.down = true; s.dragging = false; s.moved = false; s.startX = e.clientX; s.startScroll = scrollerRef.current.scrollLeft; s.pointerId = e.pointerId; }; const onPointerMove = (e) => { const s = drag.current; if (!s.down || e.pointerType !== 'mouse') return; // touch = native scroll const dx = e.clientX - s.startX; if (!s.dragging) { if (Math.abs(dx) <= 5) return; // still could be a click s.dragging = true; s.moved = true; const el = scrollerRef.current; el.style.cursor = 'grabbing'; el.setPointerCapture && el.setPointerCapture(s.pointerId); } scrollerRef.current.scrollLeft = s.startScroll - dx; e.preventDefault(); }; const endDrag = () => { const s = drag.current; if (!s.down) return; const el = scrollerRef.current; if (s.dragging) { el.style.cursor = 'grab'; if (s.pointerId != null && el.releasePointerCapture) { try { el.releasePointerCapture(s.pointerId); } catch (_) {} } } s.userUntil = performance.now() + 700; // let things settle before auto resumes s.down = false; s.dragging = false; s.pointerId = null; }; // Swallow the click that follows a drag so it doesn't flip a card. const onClickCapture = (e) => { const s = drag.current; if (s.moved) { e.stopPropagation(); e.preventDefault(); s.moved = false; } }; return (
Ch. 02

.

Side projects, built outside of my day job — tools I needed myself, then realised others could use too. {isMobile ? ' — swipe through them; tap a card to flip.' : ' — it scrolls on its own; drag to explore, hover to pause, click to flip.'}

{/* CARD CAROUSEL — auto-scrolls, drag (mouse) or swipe (touch) to move, hover pauses */}
{ drag.current.paused = true; }} onMouseLeave={() => { drag.current.paused = false; endDrag(); }} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={endDrag} onPointerCancel={endDrag} onClickCapture={onClickCapture}>
{loop.map((p, i) => (
setFlipped(f => ({ ...f, [p.id]: !f[p.id] }))} />
))}
{/* Hint */}
auto-scrolling {isMobile ? 'swipe to explore' : 'drag to explore'} {isMobile ? 'tap a card to flip' : 'hover to pause · click to flip'}
); } // ---------- CH.03 — WHERE I WORK ---------- function Ch04_Where() { const isMobile = useIsMobile(); return ( Work experience.} sub="Five years of taking ambiguous briefs and turning them into shipped product — across e-commerce, fintech, and prop-tech.">
{/* timeline spine */}
{ROLES.map((r, i) => (
{/* node */}
{/* header */}

{r.company}

{r.current && ( Current )} {r.range}
{r.title}

{r.summary}

{/* project highlights — grid on desktop, swipe carousel on mobile */}
{r.highlights.map((h, j) => (
{ e.currentTarget.style.borderColor = 'rgba(201,100,66,0.45)'; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 14px 30px -22px rgba(31,27,22,0.45)'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
{h.tag}

{h.text}

))}
))}
); } // ---------- CH.04 — POSTCARDS ---------- function Ch06_Postcards() { const isMobile = useIsMobile(); // Deterministic positions for the scrapbook scatter const slots = [ { top: 20, left: 4, tilt: -6 }, { top: 70, left: 32, tilt: 4 }, { top: 0, left: 56, tilt: -3 }, { top: 100, left: 64, tilt: 5 }, ]; return (
Ch. 05

Travel.

Places that taught me things — pinned to the page.

 {/* paper-plane doodle — desktop only, it overlaps the heading on mobile */} {!isMobile && ( )}
{POSTCARDS.map((p, i) => (

{p.note}

))}
); } // ---------- CH.05 — WORDS ---------- // Bespoke flat-vector article thumbnails — site palette: cream/beige base, // ink line work, one coral accent each. viewBox 240x120, cover-cropped. function PostThumb({ kind }) { const svg = { width: '100%', height: '100%', display: 'block' }; if (kind === 'matrix') { // react-xray — a page→component dependency graph with one coral "dead" node. return ( {/* page cards */} {/* component nodes */} {/* coral highlighted node */} ); } if (kind === 'terminal') { // remote-terminal — generated illustration. return ( Terminal linked to a phone and a browser ); } // brew — CopyBrewery: a mug brewing, with text fragments rising as "copy". return ( {/* steam */} {/* mug */} {/* brewed copy, rising to the right */} ); } function Ch07_Words() { const isMobile = useIsMobile(); return ( Articles.} sub="Build logs and the occasional reflection.">
{POSTS.map((p, i) => ( { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.borderColor = 'rgba(201,100,66,0.45)'; e.currentTarget.style.boxShadow = '0 16px 36px -20px rgba(31,27,22,0.4)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.boxShadow = '0 1px 2px rgba(31,27,22,0.04), 0 20px 44px -30px rgba(31,27,22,0.22)'; }}>
{p.meta}

{p.title}

{p.preview}

Read
))}
View all articles →
); } // ---------- CONTACT (CODA) ---------- const CONTACTS = [ { label: 'Email', value: 'chintan.diwakar012@gmail.com', href: 'mailto:chintan.diwakar012@gmail.com', tint: '#c96442', icon: ( ), }, { label: 'LinkedIn', value: '/in/chintandiwakar', href: 'https://www.linkedin.com/in/chintandiwakar/', tint: '#0A66C2', icon: ( ), }, { label: 'GitHub', value: '@chintan-diwakar', href: 'https://github.com/chintan-diwakar', tint: '#1a1614', icon: ( ), }, { label: 'X', value: '@ChintanDiwakar1', href: 'https://x.com/ChintanDiwakar1', tint: '#1a1614', icon: ( ), }, { label: 'Medium', value: '@chintandiwakar', href: 'https://medium.com/@chintandiwakar', tint: '#1a1614', icon: ( ), }, ]; function Coda() { const isMobile = useIsMobile(); return (
{/* Dotted divider */} {[...Array(20)].map((_, i) => ( ))}
How to reach me

Contact{' '} me.

Got a project, a role, or just want to say hi? Pick whichever's easiest — I read everything and reply to most.

{CONTACTS.map(c => ( {c.icon} {c.label} {c.value} ))}
Built in Mumbai. Backed by chai.
); } // ---------- CHAPTER RAIL ---------- function ChapterRail() { const active = useActiveChapter(); return ( ); } // ---------- TOP NAV ---------- function TopNav() { const [open, setOpen] = useS(false); const go = (id) => (e) => { e.preventDefault(); setOpen(false); const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; const LINKS = [ { id: 'ch-02', label: 'Projects' }, { id: 'ch-04', label: 'Experience' }, { id: 'ch-07', label: 'Articles' }, { id: 'ch-06', label: 'Travel' }, ]; return (
Chintan.
{open && (
{LINKS.map(l => ( {l.label} ))} Contact
)}
); } // ---------- MOBILE FLOATING NEXT-SECTION BUTTON ---------- function MobileNextFab() { const active = useActiveChapter(); const ids = CHAPTERS.map(c => c.id); const idx = Math.max(0, ids.indexOf(active)); const isLast = idx >= ids.length - 1; const targetId = isLast ? ids[0] : ids[idx + 1]; const onClick = () => { const el = document.getElementById(targetId); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; return ( ); } // ---------- ROOT ---------- function Portfolio() { return (
); } window.Portfolio = Portfolio;