\n \n\n\n",[],[67,115],"5cf5f486-3e8d-11f1-92dd-42b51c65c3df","components","9e925967-2aa8-4a6b-b140-78ea72c109ab",7,["D",1776891229596],[128,129],[67,122],{"_35":138,"_13":139,"_38":140,"_40":123,"_41":42,"_43":124,"_45":46,"_47":141,"_17":63,"_50":89,"_52":142,"_54":55,"_56":-5,"_76":143,"_18":144},{"_35":130,"_13":131,"_38":132,"_40":123,"_41":42,"_43":133,"_45":46,"_47":134,"_17":63,"_50":89,"_52":135,"_54":55,"_56":-5,"_76":136,"_18":137},"641bf68e-3e8d-11f1-92dd-42b51c65c3df","Lightbox.tsx","641bf792-3e8d-11f1-92dd-42b51c65c3df",8,["D",1776891241593],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface Piece {\n id: string;\n title: string;\n year: number;\n medium: string;\n dimensions?: string;\n description?: string;\n imageUrl: string;\n}\n\nexport function Lightbox({\n pieces, index, onClose, onChange,\n}: {\n pieces: Piece[];\n index: number;\n onClose: () => void;\n onChange: (idx: number) => void;\n}) {\n const piece = pieces[index];\n\n useEffect(() => {\n const handler = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") onClose();\n if (e.key === \"ArrowRight\") onChange((index + 1) % pieces.length);\n if (e.key === \"ArrowLeft\") onChange((index - 1 + pieces.length) % pieces.length);\n };\n document.addEventListener(\"keydown\", handler);\n document.body.style.overflow = \"hidden\";\n return () => {\n document.removeEventListener(\"keydown\", handler);\n document.body.style.overflow = \"\";\n };\n }, [index, pieces.length, onClose, onChange]);\n\n return (\n \n {/* Top bar */}\n

\n {String(index + 1).padStart(2, \"0\")} /{\" \"}\n {String(pieces.length).padStart(2, \"0\")}\n

\n { e.stopPropagation(); onClose(); }}\n className=\"hover:text-stone-200 transition tracking-widest\"\n >\n Close\n \n

\n\n {/* Image area */}\n e.stopPropagation()}\n >\n \n \n\n {/* Caption */}\n e.stopPropagation()}\n >\n

\n {piece.title}\n

\n {piece.description && (\n

\n {piece.description}\n

\n )}\n

Year · {piece.year}

Medium · {piece.medium}

\n {piece.dimensions &&

Size · {piece.dimensions}

}\n

\n\n {/* Nav */}\n

\n onChange((index - 1 + pieces.length) % pieces.length)}\n className=\"hover:text-stone-200 transition\"\n >\n ← Previous\n \n onChange((index + 1) % pieces.length)}\n className=\"hover:text-stone-200 transition\"\n >\n Next →\n \n

\n \n \n );\n}\n",[],[67,122,131],"5cf5cf92-3e8d-11f1-92dd-42b51c65c3df","App.tsx","5cf5d05a-3e8d-11f1-92dd-42b51c65c3df",["D",1776891229596],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Lightbox } from \"./Lightbox.tsx\";\n\ninterface Piece {\n id: string;\n title: string;\n year: number;\n medium: string;\n dimensions?: string;\n description?: string;\n aspect: \"tall\" | \"square\" | \"wide\";\n imageUrl: string;\n}\n\ninterface Artist {\n name: string;\n bio: string;\n location: string;\n}\n\nexport function App() {\n const [pieces, setPieces] = useState([]);\n const [artist, setArtist] = useState(null);\n const [openIdx, setOpenIdx] = useState(null);\n\n useEffect(() => {\n fetch(\"/api/pieces\")\n .then((r) => r.json())\n .then((d) => {\n setPieces(d.pieces);\n setArtist(d.artist);\n });\n }, []);\n\n if (!artist) {\n return

· · ·

;\n }\n\n return (\n

\n {/* Hero */}\n

\n Selected Works · 2022 — 2024\n

\n {artist.name.split(\" \").map((word, i) => (\n {word}\n ))}\n

\n {artist.bio}\n

\n\n {/* Gallery */}\n

\n {pieces.map((p, idx) => (\n setOpenIdx(idx)} />\n ))}\n

\n\n {/* Info section */}\n

Studio

\n Currently working from a north-facing studio.\n New works added as they dry.\n

\n \n \n \n

\n\n {/* Footer */}\n \n\n {openIdx !== null && (\n setOpenIdx(null)}\n onChange={setOpenIdx}\n />\n )}\n

\n );\n}\n\nfunction PieceTile({\n piece, index, onClick,\n}: { piece: Piece; index: number; onClick: () => void }) {\n // Asymmetric layout: alternate widths and column spans to create an editorial feel\n const layouts = [\n \"md:col-span-7 md:col-start-2\",\n \"md:col-span-4 md:col-start-9\",\n \"md:col-span-6 md:col-start-1\",\n \"md:col-span-5 md:col-start-8\",\n \"md:col-span-8 md:col-start-3\",\n \"md:col-span-4 md:col-start-1\",\n \"md:col-span-5 md:col-start-7\",\n \"md:col-span-6 md:col-start-2\",\n \"md:col-span-4 md:col-start-9\",\n \"md:col-span-7 md:col-start-3\",\n ];\n const layoutClass = layouts[index % layouts.length];\n\n return (\n 0 ? `${(index % 3) * 2}rem` : 0 }}\n onClick={onClick}\n >\n

\n \n

\n {piece.title}\n

\n {piece.medium}\n

\n {piece.year}\n

\n \n );\n}\n\nfunction InfoRow({ label, value }: { label: string; value: string }) {\n return (\n

{label}

{value}

\n );\n}\n",[],[67,122,139],"8105e6a2-3e8c-11f1-8498-42b51c65c3df",["D",1776890860615],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A minimal moody art portfolio","imageUrl","userId","4bd2cae1-acd4-4949-a41a-c29c19fb964d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019d5969-aad7-7319-bc6a-364c0e94949a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_198":19},"org",{"_11":12,"_192":193,"_194":19,"_155":-5,"_195":196,"_197":46},"branch",{"_17":133,"_13":16,"_35":42,"_184":145,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":-5,"_190":14,"_191":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Casual Collab","avatar","tier","business","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":145,"_13":14,"_47":262,"_147":-5,"_148":55,"_149":150,"_151":150,"_152":153,"_154":-5,"_155":156,"_157":-5,"_158":55,"_159":-5,"_160":-5,"_161":63,"_162":163,"_164":-5,"_165":-5,"_166":-5,"_167":-5,"_168":169,"_170":169,"_171":172,"_173":172,"_174":172,"_175":169,"_176":169,"_177":263,"_179":264,"_181":265,"_183":55},[232,238,241],"files",[232,233,234,235,236,237,238,239,240,241],"counts",{"_223":63,"_224":49,"_225":63,"_31":226,"_227":228},[217,218,219],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":70,"_17":63,"_50":64,"_52":-5,"_54":55,"_56":-5,"_18":222},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":62,"_17":63,"_50":64,"_52":-5,"_54":55,"_56":-5,"_18":221},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":220},[37],[59],[67],"pulls","branches","forks",{"_229":63,"_231":63},"connections",{"_229":63,"_230":63},"count","unfilledCount","emptyCount",{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":100,"_17":63,"_50":64,"_52":-5,"_54":55,"_56":-5,"_76":260,"_18":261},{"_35":121,"_13":122,"_38":123,"_40":68,"_41":42,"_43":124,"_45":46,"_47":125,"_17":63,"_50":64,"_52":-5,"_54":55,"_56":-5,"_76":258,"_18":259},{"_35":138,"_13":139,"_38":140,"_40":123,"_41":42,"_43":124,"_45":46,"_47":141,"_17":63,"_50":89,"_52":142,"_54":55,"_56":-5,"_76":256,"_18":257},{"_35":130,"_13":131,"_38":132,"_40":123,"_41":42,"_43":133,"_45":46,"_47":134,"_17":63,"_50":89,"_52":135,"_54":55,"_56":-5,"_76":254,"_18":255},{"_35":114,"_13":115,"_38":116,"_40":68,"_41":42,"_43":69,"_45":46,"_47":117,"_17":63,"_50":24,"_52":118,"_54":55,"_56":-5,"_76":252,"_18":253},{"_35":106,"_13":107,"_38":108,"_40":68,"_41":42,"_43":109,"_45":46,"_47":110,"_17":63,"_50":89,"_52":111,"_54":55,"_56":-5,"_76":250,"_18":251},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":79,"_17":63,"_50":64,"_52":-5,"_54":55,"_56":-5,"_76":248,"_18":249},{"_35":93,"_13":94,"_38":95,"_40":60,"_41":42,"_43":61,"_45":46,"_47":96,"_17":63,"_50":89,"_52":97,"_54":55,"_56":-5,"_76":246,"_18":247},{"_35":84,"_13":85,"_38":86,"_40":60,"_41":42,"_43":87,"_45":46,"_47":88,"_17":63,"_50":89,"_52":90,"_54":55,"_56":-5,"_76":244,"_18":245},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":75,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_76":242,"_18":243},[],[37],[],[59,85],[],[59,94],[239,240],[59],[],[67,107],[],[67,115],[],[67,122,131],[],[67,122,139],[234,235],[67,122],[233,236,237],[67],["D",1776890860615],{"_11":12,"_198":19},{"_11":12,"_192":193,"_194":19,"_155":-5,"_195":196,"_197":46},{"_17":133,"_13":16,"_35":42,"_184":145,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":-5,"_190":14,"_191":12},"ctx",{"_177":-5,"_214":299,"_300":301,"_302":303,"_304":55,"_305":55,"_306":55,"_307":46,"_308":-5,"_309":-7,"_310":-7,"_311":63,"_312":55,"_313":55,"_314":-5,"_315":55,"_316":55,"_317":55,"_318":-5},"ENV",{"_270":271,"_272":273,"_274":16,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code