{ if (e.target === e.currentTarget) setOpen(false); }}>
,
document.body
);
}
function smoothJump(e, anchor) {
e.preventDefault();
const el = document.querySelector(anchor);
if (el) {
window.scrollTo({ top: el.offsetTop - 20, behavior: "smooth" });
history.replaceState(null, "", anchor);
}
}
/* Page-turn divider used between major sections.
When label === "INTERMISSION" it becomes a clickable easter egg that opens
the Bali photo modal. Other labels render as before. */
function PageTurn({ label = "TURN THE PAGE" }) {
const [baliOpen, setBaliOpen] = useState(false);
const isIntermission = label === "INTERMISSION";
useEffect(() => {
if (!baliOpen) return;
const onKey = (e) => { if (e.key === "Escape") setBaliOpen(false); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [baliOpen]);
if (!isIntermission) {
return (
);
}
return (
<>
{baliOpen &&
hello world
)}
This is a digital zine.
The visual concept winks at where my career began: a branding firm with a real comping room and cutting room floor. Wireframes pinned next to four-color comps. That’s where I fell in love with design, craft, and intention. This zine brings my whole creative practice together—artist, designer, builder—using the same layered, intentional thinking that started there.
This is a side project, hand-built by Anastasia with Claude — an experiment in Claude Design and Claude Code, and a love letter to the format and my creative roots.
— AV
{/* Volume toggle — two volumes of the zine. The current page's volume is selected (defaults to "A Working Life" on the main landing); the other links across. */} {/* Theme toggle (Creative / Vanilla) + "your choice" divider — TEMPORARILY removed; the modal now ends at "— AV". Restore by removing `false &&`. */} {false && ( { if (e.target === e.currentTarget) onClose(); }}>
{photos.length > 0 && (
)}
{photos.length > 1 && (
,
document.body
);
}
/* ============================================================
BRAIN SKETCH — faint pencil-style anatomical drawing that sits
behind the "right brain / left brain" toggle. Two hemispheres,
curving gyri, low opacity so it reads as a margin annotation.
============================================================ */
function BrainSketch() {
return (
);
}
/* ============================================================
GRAB TARGET — easter egg. Click the registration crosshair to
enter "grab mode": cursor becomes a closed-fist emoji, every
click drops a flower 🌸 wherever you click. Press Escape (or
click the target again) to release.
============================================================ */
const GRAB_FLOWERS = ["🌸", "🌺", "🌷", "🌼", "🌻", "💐", "🪷", "🪻", "🌹", "🏵️", "🌾"];
const GRAB_WEATHER = ["⚡", "🌬️", "🌈", "💧", "❄️", "☁️", "☀️", "⛈️", "🌤️", "🌨️", "🌧️"];
const GRAB_ANIMALS = ["🐶", "🐱", "🐰", "🐻", "🐼", "🦊", "🐨", "🐯", "🦁", "🐮", "🐷", "🐸", "🐵", "🦄", "🐙", "🦋", "🐢", "🦉", "🐧", "🦔", "🦦", "🐝"];
function GrabTarget({ color = "var(--ink)", size = 30, emojis = GRAB_FLOWERS, cursorClass = "is-grabbing" }) {
const [grabbing, setGrabbing] = useState(false);
const [flowers, setFlowers] = useState([]);
const idRef = React.useRef(`grab-${Math.random().toString(36).slice(2)}`);
/* Only one grab target can be active site-wide. When a new one starts,
others listen for this event and release themselves. */
useEffect(() => {
function onOtherGrabStart(e) {
if (e.detail !== idRef.current) setGrabbing(false);
}
window.addEventListener("vastola.grab.start", onOtherGrabStart);
return () => window.removeEventListener("vastola.grab.start", onOtherGrabStart);
}, []);
useEffect(() => {
if (!grabbing) return;
document.body.classList.add(cursorClass);
/* Announce so any other active grab target steps down */
window.dispatchEvent(new CustomEvent("vastola.grab.start", { detail: idRef.current }));
function onKey(e) {
if (e.key === "Escape") setGrabbing(false);
}
function onClick(e) {
/* Skip clicks on interactive elements so links/buttons keep working */
if (e.target.closest("a, button, input, textarea, select, [role='button'], [contenteditable]")) return;
const id = Date.now() + Math.random();
const rot = (Math.random() - 0.5) * 120;
const scale = 0.85 + Math.random() * 0.5;
const emoji = emojis[Math.floor(Math.random() * emojis.length)];
setFlowers((prev) => [...prev, { id, x: e.clientX, y: e.clientY, rot, scale, emoji }]);
setTimeout(() => {
setFlowers((prev) => prev.filter((f) => f.id !== id));
}, 6000);
}
window.addEventListener("keydown", onKey);
window.addEventListener("click", onClick);
return () => {
document.body.classList.remove(cursorClass);
window.removeEventListener("keydown", onKey);
window.removeEventListener("click", onClick);
};
}, [grabbing, cursorClass, emojis]);
function handleTargetClick(e) {
e.stopPropagation();
setGrabbing((g) => !g);
}
return (
<>
{grabbing && (
)}
{flowers.length > 0 && ReactDOM.createPortal(
,
document.body
)}
);
}
/* ============================================================
LINKEDIN STAMP — postage-stamp styled link in the cover footer.
Inline SVG with scalloped edges (computed path), greyscale
LinkedIn logo inside, and a cancellation postmark overlay that
gives it the "went through the post office" look.
============================================================ */
function LinkedInStamp() {
/* Build a rectangular path with semicircular indents along each edge */
const W = 100, H = 120, R = 5;
const period = 2 * R;
const top = W / period; // 10 notches across top/bottom
const side = H / period; // 12 notches down each side
let d = `M 0 0 `;
for (let i = 0; i < top; i++) d += `a ${R} ${R} 0 0 1 ${period} 0 `;
for (let i = 0; i < side; i++) d += `a ${R} ${R} 0 0 1 0 ${period} `;
for (let i = 0; i < top; i++) d += `a ${R} ${R} 0 0 1 -${period} 0 `;
for (let i = 0; i < side; i++) d += `a ${R} ${R} 0 0 1 0 -${period} `;
d += `Z`;
return (
);
}
Object.assign(window, {
Cover, AboutZineModal, PageTurn, smoothJump, BaliModal, BrainSketch, GrabTarget,
GRAB_FLOWERS, GRAB_WEATHER, GRAB_ANIMALS, LinkedInStamp,
});
rest & recharge.
Girls trip to explore Bali
The space between roles is where perspective happens. Travel and exploration fill the creative well, sharpen how you see problems, and return you with energy and ideas. Balance isn’t a luxury—it’s how you sustain excellence. It’s how you show up as your best self.
{photos.map((_, i) =>
)}