\n \n \n \n",[],[157,212],"46a9e6ed-96f1-451b-9322-f879e46a77e1","favicon.svg","019edcf0-59c2-7688-b165-6b22fb5cd0ea",["D",1781823199584],"\n",[],[157,220],"2e565602-522e-4162-85d6-96eb9e964991","content.ts","8d3fa81e-6b68-11f1-87fe-1607ee4eb77e",16,["D",1781824307332],"// ─────────────────────────────────────────────────────────────────────────\n// ✏️ EDIT YOUR PORTFOLIO CONTENT HERE\n// This is the only file you need to touch to update your page.\n// ─────────────────────────────────────────────────────────────────────────\n\nexport const profile = {\n name: \"Wen\",\n tagline: \"Builder · Tinkerer · Lifelong learner\",\n // The big banner photo. Swap this for any image URL you like.\n heroImage: \"/headshot\",\n // Optional small avatar shown over the banner. Set to \"\" to hide.\n avatar: \"/headshot\",\n location: \"Earth 🌍\",\n};\n\n// A few short paragraphs about you. Add or remove items freely.\nexport const about: string[] = [\n \"Hi, I'm Wen! I love building things on the web and exploring new ideas. This page is a little corner of the internet that's all mine.\",\n \"When I'm not coding, you can find me reading, hiking, or chasing the next interesting problem to solve. I believe the best way to learn is to build something real.\",\n];\n\n// Quick facts / skills shown as little tags. Edit to taste.\nexport const skills: string[] = [\n \"TypeScript\",\n \"React\",\n \"Design\",\n \"Product\",\n \"Writing\",\n];\n\n// Your projects. Add as many as you want.\nexport type Project = {\n title: string;\n description: string;\n link?: string; // optional — omit if there's no link yet\n emoji: string; // a little icon for the card\n};\n\nexport const projects: Project[] = [\n {\n title: \"My First Project\",\n description:\n \"A short description of what this project does and why it matters. Replace this with your own work!\",\n link: \"https://example.com\",\n emoji: \"🚀\",\n },\n {\n title: \"Another Cool Thing\",\n description:\n \"Maybe a side project, an experiment, or something you're proud of. Tell the story in a sentence or two.\",\n emoji: \"✨\",\n },\n {\n title: \"Work In Progress\",\n description:\n \"Something you're building right now. No link yet — and that's okay!\",\n emoji: \"🛠️\",\n },\n];\n\n// Where people can reach you. Set any to \"\" to hide that link.\nexport const links = {\n email: \"wzhao0901@example.com\",\n github: \"https://github.com/yourname\",\n twitter: \"\",\n linkedin: \"\",\n};",[],[157,227],"c7ff20f6-e7ab-4776-bc46-73312130f5c5","Weather.tsx","06f384c4-6b6d-11f1-9d91-1607ee4eb77e","019edcf0-59c2-7688-b165-674cf9ac1276",23,["D",1781825143731],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype Period = {\n number: number;\n name: string;\n startTime: string;\n isDaytime: boolean;\n temperature: number;\n temperatureUnit: string;\n shortForecast: string;\n icon: string;\n};\n\n// Pick an emoji based on the forecast text — a friendly touch over the official icon.\nfunction forecastEmoji(text: string): string {\n const t = text.toLowerCase();\n if (t.includes(\"thunder\")) return \"⛈️\";\n if (t.includes(\"snow\") || t.includes(\"flurr\")) return \"❄️\";\n if (t.includes(\"rain\") || t.includes(\"shower\")) return \"🌧️\";\n if (t.includes(\"fog\")) return \"🌫️\";\n if (t.includes(\"mostly cloudy\") || t.includes(\"cloudy\")) return \"☁️\";\n if (t.includes(\"partly\") || t.includes(\"mostly sunny\")) return \"⛅\";\n if (t.includes(\"sunny\") || t.includes(\"clear\")) return \"☀️\";\n return \"🌡️\";\n}\n\nfunction dayLabel(iso: string): string {\n const d = new Date(iso);\n if (isNaN(d.getTime())) return \"\";\n return d.toLocaleDateString(undefined, { weekday: \"short\" });\n}\n\nexport function Weather() {\n const [periods, setPeriods] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n (async () => {\n try {\n const res = await fetch(\"/api/weather\");\n const data = await res.json();\n if (!res.ok) throw new Error(data.error ?? \"Failed to load weather.\");\n setPeriods(data.periods ?? []);\n } catch (err) {\n setError((err as Error).message);\n } finally {\n setLoading(false);\n }\n })();\n }, []);\n\n // weather.gov returns alternating day/night periods. Show the daytime ones\n // as the main daily card, limited to 7 days.\n const days = periods.filter((p) => p.isDaytime).slice(0, 7);\n\n return (\n

\n 🌤️ NYC Weather\n

\n\n {loading\n ?

Loading forecast…

\n : error\n ?

{error}

\n : (\n

\n {days.map((p) => (\n \n \n {dayLabel(p.startTime)}\n \n \n {forecastEmoji(p.shortForecast)}\n \n \n {p.temperature}°{p.temperatureUnit}\n \n \n {p.shortForecast}\n \n

\n ))}\n \n )}\n\n

\n Forecast from{\" \"}\n \n weather.gov\n {\" \"}\n · National Weather Service\n

\n );\n}\n",[],[157,243,235],"components","f716d686-eef5-42b4-a9cb-7f6137a502c8","Projects.tsx","99cd6954-6b68-11f1-bc9d-1607ee4eb77e",6,["D",1781823242623],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type Project, projects } from \"../content.ts\";\n\nfunction ProjectCard({ project }: { project: Project }) {\n const inner = (\n

{project.emoji}

\n {project.title}\n {project.link ? ↗ : null}\n

\n {project.description}\n

\n );\n\n if (project.link) {\n return (\n \n {inner}\n \n );\n }\n return inner;\n}\n\nexport function Projects() {\n return (\n

\n 💼 Projects\n

\n {projects.map((project) => (\n \n ))}\n

\n );\n}\n",[],[157,243,245],"88f9d34e-dfda-47fd-801f-2327941a4045","Hero.tsx","930db8a8-6b68-11f1-bc9d-1607ee4eb77e",15,["D",1781824063209],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { profile } from \"../content.ts\";\n\nexport function Hero() {\n return (\n \n {/* Dark overlay so text stays readable over the cat photo */}\n

\n {/* Headshot as a circular icon */}\n {profile.avatar\n ? (\n \n )\n : null}\n\n

\n {profile.name}\n

\n {profile.tagline}\n

\n {profile.location\n ?

📍 {profile.location}

\n : null}\n

\n \n );\n}\n",[],[157,243,253],"3c40c07d-d8d6-4e64-ac08-9bf86291f721","Guestbook.tsx","9442756c-6b6b-11f1-934c-1607ee4eb77e",19,["D",1781824521813],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype Entry = {\n id: number;\n name: string;\n message: string;\n created_at: string;\n};\n\nfunction formatDate(iso: string): string {\n // SQLite datetime('now') is UTC like \"2026-06-18 23:15:03\"\n const d = new Date(iso.replace(\" \", \"T\") + \"Z\");\n if (isNaN(d.getTime())) return iso;\n return d.toLocaleDateString(undefined, {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n });\n}\n\nexport function Guestbook() {\n const [entries, setEntries] = useState([]);\n const [name, setName] = useState(\"\");\n const [message, setMessage] = useState(\"\");\n const [loading, setLoading] = useState(true);\n const [submitting, setSubmitting] = useState(false);\n const [error, setError] = useState(null);\n\n async function load() {\n try {\n const res = await fetch(\"/api/guestbook\");\n const data = await res.json();\n setEntries(data.entries ?? []);\n } catch {\n setError(\"Couldn't load the guestbook.\");\n } finally {\n setLoading(false);\n }\n }\n\n useEffect(() => {\n load();\n }, []);\n\n async function handleSubmit(e: { preventDefault: () => void }) {\n e.preventDefault();\n setError(null);\n if (!name.trim() || !message.trim()) {\n setError(\"Please add your name and a message.\");\n return;\n }\n setSubmitting(true);\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 setError(data.error ?? \"Something went wrong.\");\n return;\n }\n setEntries((prev) => [data.entry, ...prev]);\n setName(\"\");\n setMessage(\"\");\n } catch {\n setError(\"Network error — please try again.\");\n } finally {\n setSubmitting(false);\n }\n }\n\n return (\n

\n 📖 Guestbook\n

\n\n {/* Sign form */}\n \n setName((e.target as HTMLInputElement).value)}\n placeholder=\"Your name\"\n maxLength={60}\n class=\"w-full px-3 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n setMessage((e.target as HTMLTextAreaElement).value)}\n placeholder=\"Leave a comment…\"\n maxLength={500}\n rows={3}\n class=\"mt-3 w-full px-3 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 resize-y\"\n />\n {error ?

{error}

: null}\n

\n \n {submitting ? \"Signing…\" : \"Sign guestbook\"}\n \n

\n \n\n {/* Entries */}\n

\n {loading\n ?

Loading…

\n : entries.length === 0\n ? (\n

\n No entries yet — be the first to sign!\n

\n )\n : (\n entries.map((entry) => (\n \n

\n {entry.message}\n

\n — {entry.name}\n {\" · \"}\n {formatDate(entry.created_at)}\n

\n ))\n )}\n

\n \n );\n}\n",[],[157,243,261],"49d8a11b-b07b-4cb6-a876-98c480bf1cdc","Footer.tsx","9c886e78-6b68-11f1-9f41-1607ee4eb77e",7,["D",1781823247197],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { links } from \"../content.ts\";\n\nexport function Footer() {\n const items = [\n links.email ? { label: \"Email\", href: `mailto:${links.email}` } : null,\n links.github ? { label: \"GitHub\", href: links.github } : null,\n links.twitter ? { label: \"Twitter\", href: links.twitter } : null,\n links.linkedin ? { label: \"LinkedIn\", href: links.linkedin } : null,\n ].filter(Boolean) as { label: string; href: string }[];\n\n return (\n \n );\n}\n",[],[157,243,269],"1617ebdb-ef22-4acd-98bd-d4542e25f97d","App.tsx","019edcf0-59c2-7688-b165-5e9cc35c4d71",["D",1781825148828],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Hero } from \"./Hero.tsx\";\nimport { About } from \"./About.tsx\";\nimport { Weather } from \"./Weather.tsx\";\nimport { Projects } from \"./Projects.tsx\";\nimport { Guestbook } from \"./Guestbook.tsx\";\nimport { Footer } from \"./Footer.tsx\";\n\nexport function App() {\n return (\n

\n \n

\n \n \n \n \n

\n );\n}\n",[],[157,243,277],"89bfd3a3-0486-450e-98b1-daddc52fb30d","About.tsx","94fbb73c-6b68-11f1-9a67-1607ee4eb77e",5,["D",1781823234537],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { about, skills } from \"../content.ts\";\n\nexport function About() {\n return (\n

\n 👋 About me\n

\n {about.map((paragraph, i) =>

{paragraph}

)}\n

\n\n {skills.length > 0\n ? (\n

\n {skills.map((skill) => (\n \n {skill}\n \n ))}\n

\n )\n : null}\n

\n );\n}\n",[],[157,243,284],"bb4c7943-1d79-4fb1-92d0-821fcba94ac2",["D",1781823199584],[183,184,185,186,187,188,189],[157,243],["D",1781823199584],[182,190,191,192,193],[157],"e5cec1a3-f601-4b70-9f04-9b75657cc9bd","weather.ts","f8cc998a-6b6c-11f1-9d91-1607ee4eb77e",21,["D",1781825119989],"import { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\nexport const weather = new Hono();\n\n// NYC (Central Park-ish) coordinates\nconst NYC_LAT = 40.7128;\nconst NYC_LON = -74.006;\n\n// weather.gov requires a User-Agent identifying your app\nconst USER_AGENT = \"wzhao0901-portfolio (https://www.val.town/x/wzhao0901/portfolio)\";\n\nconst CACHE_KEY = \"weather-nyc.json\";\nconst CACHE_TTL_MS = 30 * 60 * 1000; // 30 minutes\n\ntype Period = {\n number: number;\n name: string;\n startTime: string;\n isDaytime: boolean;\n temperature: number;\n temperatureUnit: string;\n shortForecast: string;\n icon: string;\n};\n\nasync function fetchForecast(): Promise {\n const headers = { \"User-Agent\": USER_AGENT, \"Accept\": \"application/geo+json\" };\n\n // Step 1: resolve the forecast endpoint for the point\n const pointsRes = await fetch(\n `https://api.weather.gov/points/${NYC_LAT},${NYC_LON}`,\n { headers },\n );\n if (!pointsRes.ok) {\n throw new Error(`weather.gov points lookup failed: ${pointsRes.status}`);\n }\n const points = await pointsRes.json();\n const forecastUrl: string = points.properties.forecast;\n\n // Step 2: fetch the actual forecast\n const forecastRes = await fetch(forecastUrl, { headers });\n if (!forecastRes.ok) {\n throw new Error(`weather.gov forecast failed: ${forecastRes.status}`);\n }\n const forecast = await forecastRes.json();\n return forecast.properties.periods as Period[];\n}\n\nweather.get(\"/\", async (c) => {\n try {\n // Serve from cache if fresh\n const cached = await blob.getJSON(CACHE_KEY).catch(() => null) as\n | { fetchedAt: number; periods: Period[] }\n | null;\n if (cached && Date.now() - cached.fetchedAt < CACHE_TTL_MS) {\n return c.json({ periods: cached.periods, cached: true });\n }\n\n const periods = await fetchForecast();\n await blob.setJSON(CACHE_KEY, { fetchedAt: Date.now(), periods });\n return c.json({ periods, cached: false });\n } catch (err) {\n // Fall back to stale cache if the API is temporarily down\n const stale = await blob.getJSON(CACHE_KEY).catch(() => null) as\n | { periods: Period[] }\n | null;\n if (stale) return c.json({ periods: stale.periods, cached: true, stale: true });\n return c.json({ error: (err as Error).message }, 502);\n }\n});\n",[],[163,299],"cfa9c0ea-b404-483c-ab52-bfe226aa50fe","guestbook.ts","81eb611c-6b6b-11f1-800b-1607ee4eb77e",["D",1781824491038],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst TABLE = \"guestbook_entries\";\n\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE} (\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\nexport type GuestbookEntry = {\n id: number;\n name: string;\n message: string;\n created_at: string;\n};\n\nexport const guestbook = new Hono();\n\n// List entries, newest first\nguestbook.get(\"/\", async (c) => {\n const result = await sqlite.execute(\n `SELECT id, name, message, created_at FROM ${TABLE} ORDER BY id DESC LIMIT 200`,\n );\n return c.json({ entries: result.rows as unknown as GuestbookEntry[] });\n});\n\n// Add a new entry\nguestbook.post(\"/\", async (c) => {\n let body: { name?: unknown; message?: unknown };\n try {\n body = await c.req.json();\n } catch {\n return c.json({ error: \"Invalid JSON body\" }, 400);\n }\n\n const name = typeof body.name === \"string\" ? body.name.trim() : \"\";\n const message = typeof body.message === \"string\" ? body.message.trim() : \"\";\n\n if (!name || !message) {\n return c.json({ error: \"Name and message are required.\" }, 400);\n }\n if (name.length > 60) {\n return c.json({ error: \"Name must be 60 characters or fewer.\" }, 400);\n }\n if (message.length > 500) {\n return c.json({ error: \"Message must be 500 characters or fewer.\" }, 400);\n }\n\n const inserted = await sqlite.execute({\n sql:\n `INSERT INTO ${TABLE} (name, message) VALUES (?, ?) RETURNING id, name, message, created_at`,\n args: [name, message],\n });\n\n return c.json({ entry: inserted.rows[0] as unknown as GuestbookEntry }, 201);\n});\n",[],[163,307],["D",1781824491038],[179,180],[163],["D",1781823199584],["D",1789679475208],{"_16":17,"_91":86},{"_16":17,"_85":86,"_87":86,"_34":35,"_88":89,"_90":26},{"_69":70,"_20":71,"_18":72,"_73":19,"_74":75,"_76":77,"_78":28,"_79":80,"_81":82,"_83":21,"_84":17},"ctx",{"_62":-5,"_113":354,"_355":356,"_357":358,"_359":26,"_360":26,"_361":26,"_362":39,"_363":-5,"_364":-7,"_365":-7,"_366":43,"_367":26,"_368":26,"_369":-5,"_370":26,"_371":26,"_372":26,"_373":-5},"ENV",{"_325":326,"_327":328,"_329":71,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353},"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"]

Search