// V2 — "Zine" // Collage / editorial / riso-zine vibe. Same cool & moody palette but composed // as a zine: marquee, taped polaroids, hand-cut stickers, hover-spin shapes. // No emoji. Draggable polaroids in "Now" section. Type "vidya" for confetti. const zinePalette = { bg: 'var(--tw-bg, #0d1530)', // deep navy paper: 'var(--tw-paper, #f2ead7)', // warm cream paper (accent surfaces) ink: '#f4f1e8', // off-white text on dark inkDim: '#8a98be', // dusty blue-gray inkOnPaper: '#1a2142', // dark on cream line: '#1e294a', accent: 'var(--tw-accent, #ed6a5a)', // dusty coral/red — punch color blue: '#4d7fc9', // dusty blue mustard: '#d4a83a', // mustard sage: '#6b9a7f', // dusty sage plum: '#7d5b9f', // dusty plum }; // ---------- Responsive hook ---------- function useIsMobile(bp = 760) { const [m, setM] = React.useState(typeof window !== 'undefined' ? window.innerWidth < bp : false); React.useEffect(() => { const on = () => setM(window.innerWidth < bp); on(); window.addEventListener('resize', on); return () => window.removeEventListener('resize', on); }, [bp]); return m; } // ---------- Glyphs (reuse V1 style) ---------- const ZGlyph = ({ name, size = 16, color = 'currentColor', sw = 1.75 }) => { const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' }; const p = { star: , asterisk: <>, arrow: <>, scissors: <>, eye: <>, tag: <>, circle: , note: <>, cam: <>, flag: <>, }; return {p[name]}; }; // ---------- Shapes for zine ---------- const ZShape = ({ type, size = 80, color, sw = 3, style = {} }) => { const s = size; if (type === 'riso-circle') { return ( ); } if (type === 'cut-star') { return ( ); } if (type === 'cloud') { return ( ); } if (type === 'half') { return ( ); } if (type === 'wave') { return ( ); } if (type === 'arch') { return ( ); } if (type === 'eye') { return ( ); } return null; }; // ---------- Tape strip ---------- const Tape = ({ width = 100, rotation = 0, color = 'rgba(212, 168, 58, 0.5)', style = {} }) => (
); // ---------- Spinny hover wrapper ---------- function HoverSpin({ children, deg = 20, style = {} }) { const [hovered, setHovered] = React.useState(false); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ transition: 'transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)', transform: hovered ? `rotate(${deg}deg) scale(1.1)` : 'rotate(0deg) scale(1)', ...style, }} > {children}
); } // ---------- Draggable (simple, for polaroids) ---------- function ZDraggable({ initX, initY, rot = 0, children, onPick }) { const [pos, setPos] = React.useState({ x: initX, y: initY }); const [dragging, setDragging] = React.useState(false); const [z, setZ] = React.useState(1); const offsetRef = React.useRef({ dx: 0, dy: 0 }); const nodeRef = React.useRef(null); const onMouseDown = (e) => { e.preventDefault(); const rect = nodeRef.current.getBoundingClientRect(); const pRect = nodeRef.current.parentElement.getBoundingClientRect(); offsetRef.current = { dx: e.clientX - rect.left, dy: e.clientY - rect.top, pL: pRect.left, pT: pRect.top }; setDragging(true); setZ(999); onPick && onPick(); }; React.useEffect(() => { if (!dragging) return; const move = (e) => { const { dx, dy, pL, pT } = offsetRef.current; setPos({ x: e.clientX - pL - dx, y: e.clientY - pT - dy }); }; const up = () => setDragging(false); window.addEventListener('mousemove', move); window.addEventListener('mouseup', up); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); }; }, [dragging]); return (
{children}
); } // ---------- Marquee ---------- function Marquee({ items, color, speed = 30 }) { return (
{[...items, ...items, ...items].map((it, i) => ( {it} ))}
); } // ---------- Hero ---------- function ZineHero({ tweaks = {} }) { const containerRef = React.useRef(null); const isMobile = useIsMobile(); return (
{/* grainy noise overlay */} {tweaks.grain !== false &&
} {/* Header band: issue/price */}
VOL.01 · A COLOURFUL LITTLE CORNER OF THE INTERNET {!isMobile && NEW DELHI → EVERYWHERE} PRICE: A SMILE
{/* Cover — giant italic name with collage */}
featuring —

vidya

— a student, a builder, a smiler. —
{/* Floating collage elements — hidden on mobile to keep the cover clean */} {!isMobile &&
} {/* On mobile, a single playful row of stickers under the cover */} {isMobile &&
} {/* CTAs */}
P.01 · COVER TIP: TYPE “VIDYA” SCROLL ↓
); } // ---------- About ---------- function ZineAbout() { const isMobile = useIsMobile(); return (
{/* Page number header */}
P.02 · ABOUT {!isMobile && — nice to meet you —} 2026
so, about me —

hi, I’m Vidya.

my name means knowledge in Sanskrit.

I’m a comp-sci student who collects small obsessions: old graphic design books, extremely specific spotify playlists, focaccia recipes. this site is one of them.

I made everything you see here by hand — HTML, CSS, and JavaScript. it’s a little messy in places, which feels honest.

{/* Signature line */}
— v.
{/* Portrait collage */}
{isMobile ? ( /* Mobile: clean stacked layout, no absolute overlaps */
[ PORTRAIT ]
“smiling all the time”
— mom, probably
studies → comp-sci
currently → year 2
vibe → ✦ unbothered
superpower → focaccia
) : ( {/* Big portrait */}
[ PORTRAIT ]
{/* Taped note */}
“smiling all the time”
— mom, probably
{/* Sticker */}
{/* Hand-written quick facts */}
studies → comp-sci
currently → year 2
vibe → ✦ unbothered
superpower → focaccia
 )}
); } // ---------- Marquee band ---------- function ZineMarquee() { return (
); } // ---------- Projects ---------- function ZineProjects() { const isMobile = useIsMobile(); const projects = [ { n: '01', title: 'tiny library', tag: 'web app · 2025', desc: 'a catalogue of every book I’ve ever loved, built from scratch with vanilla JS. searchable, taggable, way over-engineered.', color: zinePalette.accent, shape: 'arch' }, { n: '02', title: 'daily doodle', tag: 'art practice · ongoing', desc: 'one procreate doodle every day for 100 days. currently on day 43. some are good. most are not.', color: zinePalette.mustard, shape: 'riso-circle' }, { n: '03', title: 'hostel cookbook', tag: 'zine · 2025', desc: 'recipes my friends and I actually cook at 11pm in a tiny kitchen. hand-lettered, risograph printed.', color: zinePalette.sage, shape: 'cut-star' }, { n: '04', title: 'starry.css', tag: 'open source · 2024', desc: 'a tiny CSS library for making constellation backgrounds using only box-shadows. 47 stars on github.', color: zinePalette.plum, shape: 'cloud' }, ]; return (
P.03 · PORTFOLIO {!isMobile && — things made with care —} 04 ENTRIES
in this issue —

some things I made.

{projects.map((p, i) => (
{ e.currentTarget.style.transform = 'rotate(0deg) translateY(-6px)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = i % 2 === 0 ? 'rotate(-0.8deg)' : 'rotate(0.6deg)'; }}> {/* Header row */}
№ {p.n} {p.tag}

{p.title}

read more → CUT HERE ✂
))}
); } // ---------- Now section (draggable polaroids) ---------- function ZineNow() { const isMobile = useIsMobile(); const polaroids = [ { label: 'reading', text: '"Pachinko" by\nMin Jin Lee', x: 60, y: 60, rot: -5, color: zinePalette.blue }, { label: 'listening', text: 'mitski\non repeat', x: 300, y: 40, rot: 4, color: zinePalette.mustard }, { label: 'learning', text: 'how to make\ndecent focaccia', x: 540, y: 80, rot: -3, color: zinePalette.sage }, { label: 'making', text: 'this site\n(hi!)', x: 780, y: 50, rot: 6, color: zinePalette.accent }, { label: 'wanting', text: 'a quiet\nweekend', x: 180, y: 300, rot: 3, color: zinePalette.plum }, { label: 'watching', text: 'studio ghibli,\nagain', x: 440, y: 320, rot: -6, color: zinePalette.blue }, { label: 'craving', text: 'cold coffee\n& mangoes', x: 680, y: 310, rot: 5, color: zinePalette.accent }, ]; const [order, setOrder] = React.useState(polaroids.map((_, i) => i)); const pick = (i) => setOrder((prev) => [...prev.filter((x) => x !== i), i]); return (
P.04 · THE NOW PAGE {!isMobile && — drag the polaroids —} UPDATED APR 22, 2026
what I’m up to —

this week, actually.

{isMobile ? ( /* Mobile: static wrapped grid of polaroids — no dragging */
{polaroids.map((p, i) => (
[ IMG ]
{p.label}
{p.text}
))}
) : ( /* Draggable polaroid field */
✦ DRAG ME ✦
{polaroids.map((p, i) => ( pick(i)}>
[ IMG ]
{p.label}
{p.text}
))}
)}
); } // ---------- Interests ---------- function ZineInterests() { const isMobile = useIsMobile(); const items = [ { n: 'i.', title: 'writing', desc: 'putting small thoughts into words. mostly lists. sometimes letters.', color: zinePalette.accent, icon: 'note' }, { n: 'ii.', title: 'reading', desc: 'a good book on a quiet afternoon. or a loud one, honestly.', color: zinePalette.mustard, icon: 'eye' }, { n: 'iii.', title: 'learning', desc: 'picking up something new each day. today: the word \u201cpetrichor\u201d.', color: zinePalette.sage, icon: 'star' }, { n: 'iv.', title: 'creating', desc: 'making small things with big care. this site, for instance.', color: zinePalette.plum, icon: 'scissors' }, ]; return (
P.05 · A FEW FAVOURITE THINGS {!isMobile && — in no particular order —} 04 OF THEM
∗ what I love ∗

little obsessions.

{items.map((it, i) => { const cols = isMobile ? 2 : 4; const hasRight = (i % cols) !== (cols - 1); const hasBottom = isMobile && i < items.length - cols; return (
{ e.currentTarget.style.background = it.color; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
{it.n}

{it.title}

{it.desc}

); })}
); } // ---------- Footer ---------- function ZineFooter() { const isMobile = useIsMobile(); return ( ); } // ---------- Easter egg — same shape-burst as V1 but with zine shapes ---------- function ZEasterEgg({ containerRef }) { const [bursts, setBursts] = React.useState([]); const bufRef = React.useRef(''); React.useEffect(() => { const onKey = (e) => { const t = e.target; if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) return; bufRef.current = (bufRef.current + (e.key || '')).slice(-10).toLowerCase(); if (bufRef.current.includes('vidya')) { bufRef.current = ''; trigger(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); const trigger = () => { const cont = containerRef.current; if (!cont) return; const rect = cont.getBoundingClientRect(); const cx = rect.width / 2; const cy = (cont.scrollTop || 0) + rect.height / 2; const colors = [zinePalette.accent, zinePalette.mustard, zinePalette.sage, zinePalette.plum, zinePalette.blue]; const shapes = ['cut-star', 'riso-circle', 'cloud', 'half', 'arch']; const items = Array.from({ length: 28 }).map(() => ({ id: Math.random(), x: cx, y: cy, dx: (Math.random() - 0.5) * 900, dy: (Math.random() - 0.5) * 700 - 100, rot: Math.random() * 720 - 360, shape: shapes[Math.floor(Math.random() * shapes.length)], color: colors[Math.floor(Math.random() * colors.length)], size: 30 + Math.random() * 70, })); setBursts((prev) => [...prev, ...items]); setTimeout(() => setBursts((prev) => prev.filter((b) => !items.find((n) => n.id === b.id))), 2400); }; return (
{bursts.map((b) => (
))}
); } // ---------- Root ---------- function ZineHomepage({ tweaks = {} }) { const containerRef = React.useRef(null); return (
{tweaks.showMarquee !== false && }
); } window.ZineHomepage = ZineHomepage;