[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_236":237,"_238":239},"routes/_app.x.$handle.$name",{"_107":106,"_38":57,"_117":97,"_33":111,"_13":14,"_118":-5,"_11":119,"_120":121,"_122":123,"_124":125,"_126":127,"_27":-5,"_128":-5,"_129":-5,"_130":31,"_131":132,"_133":115,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_55":56,"_38":57,"_43":58,"_59":-5,"_60":31,"_61":62,"_63":62,"_64":65,"_66":-5,"_19":67,"_68":-5,"_69":31,"_70":-5,"_71":-5,"_72":73,"_74":75,"_76":-5,"_77":-5,"_78":-5,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":90,"_91":92,"_93":94,"_95":31},"version",7,"changes",[25,26],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","ad1100ff-c433-4c79-b624-919c341dbab2","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_27":48,"_29":-7,"_30":31,"_32":31,"_33":49,"_35":49},{"_27":28,"_29":-7,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":-5,"_43":44,"_45":14,"_46":47,"_30":31},"previous","deleted",false,"deletedHere","path","frontend/components","latestPath","fileId","9e925967-2aa8-4a6b-b140-78ea72c109ab","name","components","fileType","directory","content","createdAt",["D",1776891229596],"branchVersion","branchId","81066b40-3e8c-11f1-8498-42b51c65c3df",{"_36":50,"_38":51,"_40":52,"_42":53,"_43":54,"_45":14,"_46":47,"_30":31},"frontend/components/App.tsx","5cf5d05a-3e8d-11f1-92dd-42b51c65c3df","App.tsx","script","/** @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",["D",1776891229596],"id","8105e6a2-3e8c-11f1-8498-42b51c65c3df","art-portfolio",["D",1776890860615],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A minimal moody art portfolio","imageUrl","4bd2cae1-acd4-4949-a41a-c29c19fb964d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019d5969-aad7-7319-bc6a-364c0e94949a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_107":106,"_116":111},"org",{"_107":106,"_108":109,"_110":111,"_19":-5,"_112":113,"_114":115},"branch",{"_13":96,"_38":97,"_55":47,"_98":56,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":57,"_105":106},"isOwned",8,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","casual_collab","handle","displayName","Casual Collab","avatar","","tier","business","canRestrictVals",true,"profileImageUrl","branchName","adoptOrgId",{"_55":56,"_38":57,"_43":232,"_59":-5,"_60":31,"_61":62,"_63":62,"_64":65,"_66":-5,"_19":67,"_68":-5,"_69":31,"_70":-5,"_71":-5,"_72":73,"_74":75,"_76":-5,"_77":-5,"_78":-5,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":233,"_91":234,"_93":235,"_95":31},"tree",[175,180,183],"files",[175,176,177,178,179,180,181,182,183],"counts",{"_165":73,"_166":148,"_167":73,"_168":169,"_170":171},"contents",[138,139,140],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_55":159,"_38":160,"_36":161,"_144":-5,"_46":47,"_45":162,"_146":115,"_43":163,"_13":73,"_40":41,"_42":-5,"_30":31,"_151":-5,"_33":164},{"_55":153,"_38":154,"_36":155,"_144":-5,"_46":47,"_45":156,"_146":115,"_43":157,"_13":73,"_40":41,"_42":-5,"_30":31,"_151":-5,"_33":158},{"_55":141,"_38":142,"_36":143,"_144":-5,"_46":47,"_45":145,"_146":115,"_43":147,"_13":148,"_40":149,"_42":150,"_30":31,"_151":-5,"_33":152},"e37c3750-3e8c-11f1-86dd-42b51c65c3df","main.tsx","810a9648-3e8c-11f1-8498-42b51c65c3df","parentId",4,"latest",["D",1776891025786],1,"http","import { Hono } from \"npm:hono@4\";\nimport { serveFile, parseVal, readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { PIECES, getPiece, ARTIST } from \"./shared/pieces.ts\";\nimport { generatePlaceholder } from \"./shared/placeholderSvg.ts\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\n// API: list + detail with pregenerated placeholder data URIs\napp.get(\"/api/pieces\", (c) => {\n const out = PIECES.map((p) => ({\n ...p,\n imageUrl: generatePlaceholder(p),\n }));\n return c.json({ pieces: out, artist: ARTIST });\n});\n\napp.get(\"/api/pieces/:id\", (c) => {\n const p = getPiece(c.req.param(\"id\"));\n if (!p) return c.json({ error: \"Not found\" }, 404);\n return c.json({ ...p, imageUrl: generatePlaceholder(p) });\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;\n","label",[142],"8ed8f0d0-3e8c-11f1-98c1-42b51c65c3df","shared","e031988f-3204-474e-89e2-f090019132a0",2,["D",1776890883797],[154],"3f84038e-3e8d-11f1-acf0-42b51c65c3df","frontend","dbd175e9-9e1c-4cf6-b6b9-955beaf53d3b",5,["D",1776891180195],[160],"pulls","branches","forks","envVars",{"_172":73,"_174":73},"connections",{"_172":73,"_173":73},"count","unfilledCount","emptyCount",{"_55":159,"_38":160,"_36":161,"_144":-5,"_46":47,"_45":162,"_146":115,"_43":229,"_13":73,"_40":41,"_42":-5,"_30":31,"_151":-5,"_185":230,"_33":231},{"_55":225,"_38":39,"_36":37,"_144":161,"_46":47,"_45":14,"_146":115,"_43":226,"_13":73,"_40":41,"_42":-5,"_30":31,"_151":-5,"_185":227,"_33":228},{"_55":221,"_38":51,"_36":50,"_144":37,"_46":47,"_45":14,"_146":115,"_43":222,"_13":73,"_40":52,"_42":53,"_30":31,"_151":-5,"_185":223,"_33":224},{"_55":214,"_38":215,"_36":216,"_144":161,"_46":47,"_45":162,"_146":115,"_43":217,"_13":73,"_40":27,"_42":218,"_30":31,"_151":-5,"_185":219,"_33":220},{"_55":206,"_38":207,"_36":208,"_144":161,"_46":47,"_45":209,"_146":115,"_43":210,"_13":73,"_40":52,"_42":211,"_30":31,"_151":-5,"_185":212,"_33":213},{"_55":153,"_38":154,"_36":155,"_144":-5,"_46":47,"_45":156,"_146":115,"_43":203,"_13":73,"_40":41,"_42":-5,"_30":31,"_151":-5,"_185":204,"_33":205},{"_55":196,"_38":197,"_36":198,"_144":155,"_46":47,"_45":156,"_146":115,"_43":199,"_13":73,"_40":52,"_42":200,"_30":31,"_151":-5,"_185":201,"_33":202},{"_55":188,"_38":189,"_36":190,"_144":155,"_46":47,"_45":191,"_146":115,"_43":192,"_13":73,"_40":52,"_42":193,"_30":31,"_151":-5,"_185":194,"_33":195},{"_55":141,"_38":142,"_36":143,"_144":-5,"_46":47,"_45":145,"_146":115,"_43":184,"_13":148,"_40":149,"_42":150,"_30":31,"_151":-5,"_185":186,"_33":187},["D",1776891025786],"children",[],[142],"9efc56d2-3e8c-11f1-ab5a-42b51c65c3df","placeholderSvg.ts","9efc5790-3e8c-11f1-ab5a-42b51c65c3df",3,["D",1776890910780],"import { ArtPiece } from \"./pieces.ts\";\n\n// Generates abstract moody SVG placeholders for each piece.\n// Swap these out later by replacing the src in the component with a real image URL.\n\nexport function generatePlaceholder(piece: ArtPiece): string {\n const [bg, c1, c2] = piece.palette;\n const { width, height } = aspectDims(piece.aspect);\n const inner = renderPattern(piece.pattern, bg, c1, c2, width, height, piece.id);\n const svg = ``;\n return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;\n}\n\nfunction aspectDims(aspect: ArtPiece[\"aspect\"]): { width: number; height: number } {\n switch (aspect) {\n case \"tall\": return { width: 800, height: 1100 };\n case \"wide\": return { width: 1200, height: 800 };\n case \"square\": return { width: 1000, height: 1000 };\n }\n}\n\nfunction hash(s: string): number {\n let h = 0;\n for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) & 0xffff;\n return h;\n}\n\nfunction renderPattern(\n pattern: ArtPiece[\"pattern\"],\n bg: string, c1: string, c2: string,\n w: number, h: number, id: string,\n): string {\n const cx = w / 2, cy = h / 2;\n switch (pattern) {\n case \"veil\":\n return `\n \n \n `;\n case \"rift\":\n return `\n \n \n `;\n case \"moon\":\n return `\n \n \n `;\n case \"threads\":\n return Array.from({ length: 20 }).map((_, i) => {\n const y = h * (0.1 + (i / 20) * 0.8);\n const offset = Math.sin(i * 1.3 + hash(id)) * 40;\n return ``;\n }).join(\"\");\n case \"tide\":\n return Array.from({ length: 8 }).map((_, i) => {\n const y = h * (0.4 + i * 0.08);\n return ``;\n }).join(\"\") + ``;\n case \"static\":\n return Array.from({ length: 60 }).map((_, i) => {\n const seed = hash(id + i);\n const x = (seed * 7) % w;\n const y = (seed * 13) % h;\n const size = 1 + (seed % 3);\n return ``;\n }).join(\"\");\n case \"bloom\":\n return Array.from({ length: 6 }).map((_, i) => {\n const angle = (i / 6) * Math.PI * 2;\n const x = cx + Math.cos(angle) * 80;\n const y = cy + Math.sin(angle) * 80;\n return ``;\n }).join(\"\") + ``;\n case \"grid\":\n const cols = 6, rows = 6, pad = 40;\n const cellW = (w - pad * 2) / cols, cellH = (h - pad * 2) / rows;\n return Array.from({ length: cols * rows }).map((_, i) => {\n const col = i % cols, row = Math.floor(i / cols);\n const opacity = 0.15 + ((hash(id + i) % 60) / 100);\n return ``;\n }).join(\"\");\n case \"arc\":\n return `\n \n `;\n case \"ember\":\n return `\n \n \n `;\n }\n}\n",[],[154,189],"8ed8b5d4-3e8c-11f1-98c1-42b51c65c3df","pieces.ts","8ed8b66a-3e8c-11f1-98c1-42b51c65c3df",["D",1776890883797],"export interface ArtPiece {\n id: string;\n title: string;\n year: number;\n medium: string;\n dimensions?: string;\n description?: string;\n // Abstract SVG placeholder generator config\n palette: [string, string, string]; // [bg, accent1, accent2]\n pattern: \"veil\" | \"rift\" | \"moon\" | \"threads\" | \"tide\" | \"static\" | \"bloom\" | \"grid\" | \"arc\" | \"ember\";\n aspect: \"tall\" | \"square\" | \"wide\";\n}\n\nexport const ARTIST = {\n name: \"Your Name\",\n bio: \"Works in mixed media — painting, photography, and digital composition. Exploring memory, light, and the quiet distance between things.\",\n location: \"Somewhere · Currently\",\n};\n\nexport const PIECES: ArtPiece[] = [\n {\n id: \"001\",\n title: \"Nocturne in Grey\",\n year: 2024,\n medium: \"Oil on linen\",\n dimensions: \"36 × 48 in\",\n description: \"A study of silence before morning. Painted over three weeks by a single north-facing window.\",\n palette: [\"#1a1a1f\", \"#4a4e5a\", \"#8b8a82\"],\n pattern: \"veil\",\n aspect: \"tall\",\n },\n {\n id: \"002\",\n title: \"Thread, Unspooled\",\n year: 2024,\n medium: \"Mixed media on paper\",\n dimensions: \"18 × 24 in\",\n description: \"Charcoal, wax, and thread. The thread runs the length of the piece, anchored at no point.\",\n palette: [\"#2a2218\", \"#8a6b42\", \"#c9a06a\"],\n pattern: \"threads\",\n aspect: \"wide\",\n },\n {\n id: \"003\",\n title: \"Low Tide (iii)\",\n year: 2023,\n medium: \"Silver gelatin print\",\n dimensions: \"11 × 14 in\",\n description: \"From a series of twelve photographs taken at the same shoreline across one winter.\",\n palette: [\"#0f1419\", \"#2c3440\", \"#6b7280\"],\n pattern: \"tide\",\n aspect: \"square\",\n },\n {\n id: \"004\",\n title: \"Bloom, After Hours\",\n year: 2024,\n medium: \"Acrylic and ink\",\n dimensions: \"24 × 24 in\",\n description: \"Night studio. Petals rendered from memory rather than from life.\",\n palette: [\"#1b1520\", \"#5c3e5c\", \"#b07a9c\"],\n pattern: \"bloom\",\n aspect: \"square\",\n },\n {\n id: \"005\",\n title: \"Static / Static\",\n year: 2023,\n medium: \"Digital composition, archival print\",\n dimensions: \"30 × 40 in\",\n description: \"Generative noise processed through seven passes of analog tape.\",\n palette: [\"#141416\", \"#3d3d42\", \"#a8a29e\"],\n pattern: \"static\",\n aspect: \"wide\",\n },\n {\n id: \"006\",\n title: \"Second Moon\",\n year: 2024,\n medium: \"Oil and cold wax\",\n dimensions: \"20 × 20 in\",\n description: \"A small painting made late at night, in one sitting.\",\n palette: [\"#0d0f1a\", \"#2d3049\", \"#d4c9a8\"],\n pattern: \"moon\",\n aspect: \"square\",\n },\n {\n id: \"007\",\n title: \"Rift\",\n year: 2022,\n medium: \"Charcoal and graphite\",\n dimensions: \"40 × 60 in\",\n description: \"The largest drawing in the current body of work. Built up over four months.\",\n palette: [\"#18181b\", \"#52525b\", \"#a1a1aa\"],\n pattern: \"rift\",\n aspect: \"tall\",\n },\n {\n id: \"008\",\n title: \"Ember, Held\",\n year: 2024,\n medium: \"Oil on panel\",\n dimensions: \"12 × 16 in\",\n description: \"Small painting, warm pigment, cold ground.\",\n palette: [\"#1a0f0a\", \"#6b2a1a\", \"#d97706\"],\n pattern: \"ember\",\n aspect: \"wide\",\n },\n {\n id: \"009\",\n title: \"Field Notes\",\n year: 2023,\n medium: \"Mixed media assemblage\",\n dimensions: \"Variable\",\n description: \"Grid of 36 individual paper works. Each approximately 4 × 6 in.\",\n palette: [\"#1c1b1a\", \"#4a443d\", \"#b8a88a\"],\n pattern: \"grid\",\n aspect: \"square\",\n },\n {\n id: \"010\",\n title: \"Arc (slow)\",\n year: 2024,\n medium: \"Pigment on raw canvas\",\n dimensions: \"48 × 72 in\",\n description: \"A single gesture, diluted and repeated until the canvas held it.\",\n palette: [\"#12131a\", \"#2a3344\", \"#7a8fa6\"],\n pattern: \"arc\",\n aspect: \"tall\",\n },\n];\n\nexport function getPiece(id: string): ArtPiece | undefined {\n return PIECES.find((p) => p.id === id);\n}\n",[],[154,197],["D",1776890883797],[181,182],[154],"4e020fc8-3e8d-11f1-92dd-42b51c65c3df","index.tsx","4e0210a4-3e8d-11f1-92dd-42b51c65c3df",6,["D",1776891204515],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[160,207],"3f83d2d8-3e8d-11f1-acf0-42b51c65c3df","index.html","3f83d3aa-3e8d-11f1-acf0-42b51c65c3df",["D",1776891180195],"\n\n\n \n \n Your Name — Selected Works\n \n \n \n\n\n

\n \n\n\n",[],[160,215],"5cf5cf92-3e8d-11f1-92dd-42b51c65c3df",["D",1776891229596],[],[160,39,51],"5cf5f486-3e8d-11f1-92dd-42b51c65c3df",["D",1776891229596],[177],[160,39],["D",1776891180195],[176,178,179],[160],["D",1776890860615],{"_107":106,"_116":111},{"_107":106,"_108":109,"_110":111,"_19":-5,"_112":113,"_114":115},{"_13":96,"_38":97,"_55":47,"_98":56,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":57,"_105":106},"ctx",{"_89":-5,"_135":269,"_270":271,"_272":273,"_274":31,"_275":31,"_276":31,"_277":115,"_278":-5,"_279":-7,"_280":-7,"_281":73,"_282":31,"_283":31,"_284":-5,"_285":31,"_286":31,"_287":31,"_288":-5},"ENV",{"_240":241,"_242":243,"_244":97,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268},"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"]

Diff · v7