Clara Loon — Portfolio

\n \n

About me

\n I'm a partnerships pro with 13+ years of experience. I'm the\n person companies hire to be their first partnerships hire — to\n build the function from zero — or the workhorse brought in to\n tackle the partnerships everyone else has been avoiding.\n

\n I create commercial, product, and brand partnerships that\n deliver trifecta value — for the business, the partners, and\n the customer. I've done it for global firms like American\n Express, Visa, and Citibank, and for startups, with a knack for\n influencing C-level partners, building trust, and driving\n growth across cross-functional teams.\n

Partnerships strategy
Deal structuring & negotiation
0→1 function building
Partner relationship management
Integrated partner marketing
Cross-functional execution

\n \n

\n\n \n

NYC weather

The next 7 days in New York, via the National Weather Service.

Loading forecast…

\n\n \n

Selected work

A few partnerships I've built, led, or untangled.

TLC Marketing

Led strategic partnerships, scoping and procuring partners and running integrated partner marketing across the portfolio.

\n Strategic partnershipsPartner marketing\n

John Paul

As Director of Partnerships & Marketing, built and managed commercial partnerships powering a global concierge and loyalty business.

\n PartnershipsLoyalty\n

GLG (Gerson Lehrman Group)

Council member, advising on partnerships, partner marketing, and go-to-market strategy across financial services and consumer brands.

\n AdvisoryGTM strategy\n

\n\n \n

Guest book

Drop a note and sign your name — everyone's welcome.

\n \n \n

\n\n \n

Get in touch

The best way to reach me.

\n Email\n GitHub\n LinkedIn\n

Hi there!

\n I'm your cool new webpage. Made with Val Town!\n

{\n return fetch(url, {\n headers: { \"User-Agent\": USER_AGENT, Accept: \"application/geo+json\" },\n });\n}\n\nexport async function getNYCForecast(): Promise {\n if (cache && Date.now() - cache.fetchedAt < CACHE_TTL_MS) {\n return cache.days;\n }\n\n // 1) Resolve the forecast endpoint for NYC's coordinates.\n const pointsRes = await nwsFetch(\n `https://api.weather.gov/points/${NYC.lat},${NYC.lon}`,\n );\n if (!pointsRes.ok) {\n throw new Error(`weather.gov /points failed: ${pointsRes.status}`);\n }\n const points = await pointsRes.json();\n const forecastUrl: string | undefined = points?.properties?.forecast;\n if (!forecastUrl) throw new Error(\"No forecast URL in /points response\");\n\n // 2) Fetch the forecast periods (day + night).\n const forecastRes = await nwsFetch(forecastUrl);\n if (!forecastRes.ok) {\n throw new Error(`weather.gov forecast failed: ${forecastRes.status}`);\n }\n const forecast = await forecastRes.json();\n const periods: any[] = forecast?.properties?.periods ?? [];\n\n const days: ForecastDay[] = periods.map((p) => ({\n name: p.name,\n startTime: p.startTime,\n isDaytime: p.isDaytime,\n temperature: p.temperature,\n temperatureUnit: p.temperatureUnit,\n shortForecast: p.shortForecast,\n icon: p.icon,\n }));\n\n cache = { fetchedAt: Date.now(), days };\n return days;\n}\n\n// Route handler for /api/weather\nexport async function handleWeather(_req: Request): Promise {\n try {\n const days = await getNYCForecast();\n return Response.json(\n { location: \"New York, NY\", days },\n { headers: { \"Cache-Control\": \"public, max-age=1800\" } },\n );\n } catch (err) {\n return Response.json(\n { error: \"Couldn't load the forecast right now.\" },\n { status: 502 },\n );\n }\n}\n",[183],"d60c9624af44866f6e849335176d1101b75252dba22111603e6177ffced2f8e4","weather-client.js",{"_32":194,"_13":192,"_81":195,"_83":-5,"_84":58,"_85":20,"_86":26,"_34":196,"_40":22,"_89":113,"_91":197,"_65":48,"_93":-5,"_94":-7,"_74":198,"_96":199},"638ac228-027b-4994-8658-08df2fadcb7d","0aa6c482-6b6d-11f1-88a4-1607ee4eb77e",["D",1781825149938],"// NYC weather: fetch the 7-day forecast from /api/weather and render cards.\nconst grid = document.getElementById(\"weather-grid\");\nconst status = document.getElementById(\"weather-status\");\n\nfunction dayLabel(period) {\n // Use the actual date for a stable, short weekday label.\n const d = new Date(period.startTime);\n if (isNaN(d.getTime())) return period.name;\n return d.toLocaleDateString(undefined, { weekday: \"short\", month: \"short\", day: \"numeric\" });\n}\n\nfunction renderCard(period) {\n const card = document.createElement(\"div\");\n card.className = \"weather-card\";\n const img = period.icon\n ? ` $\"\"$ `\n : \"\";\n card.innerHTML = `\n

${dayLabel(period)}

\n ${img}\n

${period.temperature}°${period.temperatureUnit}

${period.shortForecast}

\n `;\n return card;\n}\n\nasync function loadWeather() {\n try {\n const res = await fetch(\"/api/weather\");\n const data = await res.json();\n if (!res.ok) throw new Error(data.error || \"Request failed\");\n\n // The NWS forecast alternates day/night periods. Keep daytime periods\n // (plus tonight if the first period is a night) for one card per day,\n // capped at 7.\n const all = data.days || [];\n let days = all.filter((p) => p.isDaytime);\n if (all.length && !all[0].isDaytime) days = [all[0], ...days];\n days = days.slice(0, 7);\n\n if (days.length === 0) {\n status.textContent = \"No forecast available right now.\";\n return;\n }\n\n grid.innerHTML = \"\";\n for (const period of days) grid.appendChild(renderCard(period));\n status.style.display = \"none\";\n } catch {\n status.textContent = \"Couldn't load the forecast right now.\";\n }\n}\n\nif (grid) loadWeather();\n",[192],"fb3eacf489ea49b4c25f86a7ac79b634b0d4a04b3be566bb9c4b0fc8971ebfd9","guestbook.ts",{"_32":202,"_13":200,"_81":203,"_83":-5,"_84":58,"_85":204,"_86":26,"_34":205,"_40":22,"_89":113,"_91":206,"_65":48,"_93":-5,"_94":-7,"_74":207,"_96":208},"af80600a-7c66-462b-8afd-a22958403c65","5624594e-6b6b-11f1-b61b-1607ee4eb77e",22,["D",1781824417599],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport interface GuestbookEntry {\n id: number;\n name: string;\n message: string;\n created_at: string;\n}\n\nconst MAX_NAME = 80;\nconst MAX_MESSAGE = 1000;\n\nasync function ensureTable() {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS guestbook_entries (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n message TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`);\n}\n\nexport async function listEntries(limit = 100): Promise {\n await ensureTable();\n const result = await sqlite.execute({\n sql: \"SELECT id, name, message, created_at FROM guestbook_entries ORDER BY id DESC LIMIT ?\",\n args: [limit],\n });\n return result.rows as unknown as GuestbookEntry[];\n}\n\nexport async function addEntry(\n rawName: string,\n rawMessage: string,\n): Promise<{ ok: true; entry: GuestbookEntry } | { ok: false; error: string }> {\n const name = (rawName ?? \"\").trim();\n const message = (rawMessage ?? \"\").trim();\n\n if (!name) return { ok: false, error: \"Please sign your name.\" };\n if (!message) return { ok: false, error: \"Please leave a message.\" };\n if (name.length > MAX_NAME) return { ok: false, error: `Name must be ${MAX_NAME} characters or fewer.` };\n if (message.length > MAX_MESSAGE) {\n return { ok: false, error: `Message must be ${MAX_MESSAGE} characters or fewer.` };\n }\n\n await ensureTable();\n const result = await sqlite.execute({\n sql: \"INSERT INTO guestbook_entries (name, message) VALUES (?, ?) RETURNING id, name, message, created_at\",\n args: [name, message],\n });\n return { ok: true, entry: result.rows[0] as unknown as GuestbookEntry };\n}\n\n// Route handler for /api/guestbook (GET to list, POST to sign)\nexport async function handleGuestbook(req: Request): Promise {\n if (req.method === \"GET\") {\n const entries = await listEntries();\n return Response.json({ entries });\n }\n\n if (req.method === \"POST\") {\n let body: { name?: string; message?: string };\n try {\n body = await req.json();\n } catch {\n return Response.json({ error: \"Invalid request body.\" }, { status: 400 });\n }\n const result = await addEntry(body.name ?? \"\", body.message ?? \"\");\n if (!result.ok) {\n return Response.json({ error: result.error }, { status: 400 });\n }\n return Response.json({ entry: result.entry }, { status: 201 });\n }\n\n return Response.json({ error: \"Method not allowed.\" }, { status: 405 });\n}\n",[200],"03dec4a99565cfeb37e3ea6ed6da999554883cc9c0d29e9e5779fa5614b77a48","guestbook-client.js",{"_32":211,"_13":209,"_81":212,"_83":-5,"_84":58,"_85":213,"_86":26,"_34":214,"_40":22,"_89":113,"_91":215,"_65":48,"_93":-5,"_94":-7,"_74":216,"_96":217},"cbd30d09-9155-4c7b-9752-bc61f9aae9bb","6454d822-6b6b-11f1-9845-1607ee4eb77e",24,["D",1781824441403],"// Guest book: load entries and handle sign-ins\nconst form = document.getElementById(\"guestbook-form\");\nconst list = document.getElementById(\"guestbook-entries\");\nconst status = document.getElementById(\"guestbook-status\");\nconst empty = document.getElementById(\"guestbook-empty\");\n\nfunction escapeHTML(str) {\n const div = document.createElement(\"div\");\n div.textContent = str;\n return div.innerHTML;\n}\n\nfunction formatDate(iso) {\n // stored as \"YYYY-MM-DD HH:MM:SS\" in UTC\n const d = new Date(iso.replace(\" \", \"T\") + \"Z\");\n if (isNaN(d.getTime())) return \"\";\n return d.toLocaleDateString(undefined, { year: \"numeric\", month: \"short\", day: \"numeric\" });\n}\n\nfunction renderEntry(entry) {\n const li = document.createElement(\"li\");\n li.className = \"guestbook-entry\";\n li.innerHTML = `\n

${escapeHTML(entry.message)}

— ${escapeHTML(entry.name)}${formatDate(entry.created_at)}

\n `;\n return li;\n}\n\nasync function loadEntries() {\n try {\n const res = await fetch(\"/api/guestbook\");\n const data = await res.json();\n const entries = data.entries || [];\n list.innerHTML = \"\";\n if (entries.length === 0) {\n empty.style.display = \"block\";\n } else {\n empty.style.display = \"none\";\n for (const entry of entries) list.appendChild(renderEntry(entry));\n }\n } catch {\n if (status) status.textContent = \"Couldn't load the guest book right now.\";\n }\n}\n\nif (form) {\n form.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n const name = form.elements.name.value;\n const message = form.elements.message.value;\n const btn = form.querySelector(\"button\");\n\n status.textContent = \"\";\n btn.disabled = true;\n\n try {\n const res = await fetch(\"/api/guestbook\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name, message }),\n });\n const data = await res.json();\n if (!res.ok) {\n status.textContent = data.error || \"Something went wrong.\";\n } else {\n empty.style.display = \"none\";\n list.prepend(renderEntry(data.entry));\n form.reset();\n status.textContent = \"Thanks for signing! 🙏\";\n }\n } catch {\n status.textContent = \"Couldn't submit right now. Please try again.\";\n } finally {\n btn.disabled = false;\n }\n });\n\n loadEntries();\n}\n",[209],"1230cfce840f50420aa9092ae7a6b485697bf466e91545b050493a23a8267a7d",["D",1781823135742],"legacyEnvVars","httpPrivacy","description","My personal portfolio site","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/1e130d76-f5f9-42d2-df67-91517700ff00/square512?exp=1789734562&sig=7b364bbde50270323c48208b27de80b49b5acb0626939029988e8be1d7438499","userId","0f77fbd9-dfb5-488d-a377-b1f4f8a799ed","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019edce8-232b-716b-8922-e3a825adb788","tursoName","841b500d381949c992b3b3c15cf0f264","tursoHostname","841b500d381949c992b3b3c15cf0f264-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789684858011],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_260":255},"org",{"_11":12,"_254":255,"_256":255,"_225":226,"_257":258,"_259":48},"branch","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":59,"_13":14,"_34":363,"_46":-5,"_219":48,"_49":50,"_220":50,"_221":222,"_223":224,"_225":226,"_227":129,"_228":26,"_229":-5,"_230":-5,"_231":22,"_53":232,"_233":234,"_235":236,"_237":364,"_239":-5,"_240":241,"_242":241,"_243":244,"_245":244,"_246":244,"_247":241,"_248":241,"_249":365,"_251":366,"_253":367,"_47":48},"tree",[332,333,334,335,336,337,338,339,340,341],"files",[332,333,334,335,336,337,338,339,340,341],"counts",{"_322":22,"_323":112,"_324":22,"_325":326,"_327":328},"contents",[288,289,290,291,292,293,294,295,296,297],"upstreamProject",{"_32":39,"_13":56,"_221":285,"_223":224,"_49":50,"_249":286},"upstreamBranch",{"_32":33,"_34":283,"_36":284,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1749070628054],["D",1779896149804],"Basic HTML starter template based on Glitch's starter",{"_11":52,"_260":287},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789734562&sig=9b86d5d061bd22d3daf3b1ca43150c3004602da2f0782c480d1a34a0c64613ff",{"_32":166,"_13":163,"_81":167,"_83":-5,"_84":58,"_85":88,"_86":26,"_34":320,"_40":112,"_89":90,"_91":169,"_65":48,"_93":-5,"_74":321},{"_32":314,"_13":315,"_81":316,"_83":-5,"_84":58,"_85":112,"_86":26,"_34":317,"_40":22,"_89":90,"_91":318,"_65":48,"_93":-5,"_74":319},{"_32":211,"_13":209,"_81":212,"_83":-5,"_84":58,"_85":213,"_86":26,"_34":312,"_40":22,"_89":113,"_91":215,"_65":48,"_93":-5,"_74":313},{"_32":202,"_13":200,"_81":203,"_83":-5,"_84":58,"_85":204,"_86":26,"_34":310,"_40":22,"_89":113,"_91":206,"_65":48,"_93":-5,"_74":311},{"_32":148,"_13":145,"_81":149,"_83":-5,"_84":58,"_85":150,"_86":26,"_34":308,"_40":152,"_89":90,"_91":153,"_65":48,"_93":-5,"_74":309},{"_32":128,"_13":125,"_81":129,"_83":-5,"_84":58,"_85":130,"_86":26,"_34":306,"_40":132,"_89":133,"_91":134,"_65":48,"_93":-5,"_74":307},{"_32":109,"_13":106,"_81":110,"_83":-5,"_84":58,"_85":102,"_86":26,"_34":304,"_40":112,"_89":113,"_91":114,"_65":48,"_93":-5,"_74":305},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":57,"_86":26,"_34":302,"_40":88,"_89":90,"_91":92,"_65":48,"_93":-5,"_74":303},{"_32":194,"_13":192,"_81":195,"_83":-5,"_84":58,"_85":20,"_86":26,"_34":300,"_40":22,"_89":113,"_91":197,"_65":48,"_93":-5,"_74":301},{"_32":185,"_13":183,"_81":186,"_83":-5,"_84":58,"_85":187,"_86":26,"_34":298,"_40":22,"_89":113,"_91":189,"_65":48,"_93":-5,"_74":299},["D",1781825120461],[183],["D",1781825149938],[192],["D",1781825153911],[75],["D",1781823185770],[106],["D",1781825125272],[125],["D",1781825139828],[145],["D",1781824417599],[200],["D",1781824441403],[209],"22b0a943-1904-4659-9783-7b8a712d25a7","favicon.svg","019edcef-605d-7711-a02f-5a114e220e81",["D",1781823135742],"",[315],["D",1781823204934],[163],"pulls","branches","forks","envVars",{"_329":22,"_331":22},"connections",{"_329":22,"_330":22},"count","unfilledCount","emptyCount",{"_32":166,"_13":163,"_81":167,"_83":-5,"_84":58,"_85":88,"_86":26,"_34":168,"_40":112,"_89":90,"_91":169,"_65":48,"_93":-5,"_94":361,"_74":362},{"_32":314,"_13":315,"_81":316,"_83":-5,"_84":58,"_85":112,"_86":26,"_34":358,"_40":22,"_89":90,"_91":318,"_65":48,"_93":-5,"_94":359,"_74":360},{"_32":211,"_13":209,"_81":212,"_83":-5,"_84":58,"_85":213,"_86":26,"_34":214,"_40":22,"_89":113,"_91":215,"_65":48,"_93":-5,"_94":356,"_74":357},{"_32":202,"_13":200,"_81":203,"_83":-5,"_84":58,"_85":204,"_86":26,"_34":205,"_40":22,"_89":113,"_91":206,"_65":48,"_93":-5,"_94":354,"_74":355},{"_32":148,"_13":145,"_81":149,"_83":-5,"_84":58,"_85":150,"_86":26,"_34":151,"_40":152,"_89":90,"_91":153,"_65":48,"_93":-5,"_94":352,"_74":353},{"_32":128,"_13":125,"_81":129,"_83":-5,"_84":58,"_85":130,"_86":26,"_34":131,"_40":132,"_89":133,"_91":134,"_65":48,"_93":-5,"_94":350,"_74":351},{"_32":109,"_13":106,"_81":110,"_83":-5,"_84":58,"_85":102,"_86":26,"_34":111,"_40":112,"_89":113,"_91":114,"_65":48,"_93":-5,"_94":348,"_74":349},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":57,"_86":26,"_34":87,"_40":88,"_89":90,"_91":92,"_65":48,"_93":-5,"_94":346,"_74":347},{"_32":194,"_13":192,"_81":195,"_83":-5,"_84":58,"_85":20,"_86":26,"_34":196,"_40":22,"_89":113,"_91":197,"_65":48,"_93":-5,"_94":344,"_74":345},{"_32":185,"_13":183,"_81":186,"_83":-5,"_84":58,"_85":187,"_86":26,"_34":188,"_40":22,"_89":113,"_91":189,"_65":48,"_93":-5,"_94":342,"_74":343},[],[183],[],[192],[],[75],[],[106],[],[125],[],[145],[],[200],[],[209],["D",1781823135742],[],[315],[],[163],["D",1781823135742],["D",1789684858011],{"_11":12,"_260":255},{"_11":12,"_254":255,"_256":255,"_225":226,"_257":258,"_259":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":41,"_60":50,"_61":39,"_62":54,"_55":14,"_51":12},"ctx",{"_249":-5,"_280":401,"_402":403,"_404":405,"_406":48,"_407":48,"_408":48,"_409":26,"_410":-5,"_411":-7,"_412":-7,"_413":22,"_414":48,"_415":48,"_416":-5,"_417":48,"_418":48,"_419":48,"_420":-5},"ENV",{"_372":373,"_374":375,"_376":16,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390,"_391":392,"_393":394,"_395":396,"_397":398,"_399":400},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

Compare

Mergeclaraloon/mainintotemplates/main

README.md+16-44

index.html+156-11

Hmain.tsx+43-2

script.js+3-6

style.css+372-7

guestbook-client.js+80-0

guestbook.ts+75-0

weather-client.js+54-0

weather.ts+85-0