\n \n \n \n",[18,97],"acd7c9c0-3410-4708-8309-6e00bdd3d0ab",["D",1781823194581],"\n",[18,91],"de694eb9-490c-4ac7-9b11-db0150cf9ecc",["D",1781823194581],[18,102],"pulls","branches","forks","envVars",{"_98":26,"_253":26},"connections",{"_98":26,"_252":26},"unfilledCount","emptyCount",{"_36":367,"_13":358,"_77":352,"_46":-5,"_38":39,"_219":362,"_220":24,"_40":368,"_42":26,"_80":103,"_222":-5,"_82":30,"_223":-5,"_278":369,"_17":370},{"_36":359,"_13":360,"_77":361,"_46":352,"_38":39,"_219":362,"_220":24,"_40":363,"_42":26,"_80":81,"_222":364,"_82":30,"_223":-5,"_278":365,"_17":366},{"_36":349,"_13":350,"_77":351,"_46":352,"_38":39,"_219":353,"_220":24,"_40":354,"_42":26,"_80":81,"_222":355,"_82":30,"_223":-5,"_278":356,"_17":357},{"_36":218,"_13":18,"_77":128,"_46":-5,"_38":39,"_219":43,"_220":24,"_40":346,"_42":26,"_80":103,"_222":-5,"_82":30,"_223":-5,"_278":347,"_17":348},{"_36":242,"_13":102,"_77":101,"_46":128,"_38":39,"_219":43,"_220":24,"_40":343,"_42":26,"_80":103,"_222":-5,"_82":30,"_223":-5,"_278":344,"_17":345},{"_36":336,"_13":337,"_77":338,"_46":101,"_38":39,"_219":235,"_220":24,"_40":339,"_42":26,"_80":81,"_222":340,"_82":30,"_223":-5,"_278":341,"_17":342},{"_36":329,"_13":330,"_77":331,"_46":101,"_38":39,"_219":168,"_220":24,"_40":332,"_42":274,"_80":81,"_222":333,"_82":30,"_223":-5,"_278":334,"_17":335},{"_36":321,"_13":322,"_77":323,"_46":101,"_38":39,"_219":324,"_220":24,"_40":325,"_42":26,"_80":81,"_222":326,"_82":30,"_223":-5,"_278":327,"_17":328},{"_36":313,"_13":314,"_77":315,"_46":101,"_38":39,"_219":316,"_220":24,"_40":317,"_42":99,"_80":81,"_222":318,"_82":30,"_223":-5,"_278":319,"_17":320},{"_36":306,"_13":307,"_77":308,"_46":101,"_38":39,"_219":99,"_220":24,"_40":309,"_42":26,"_80":81,"_222":310,"_82":30,"_223":-5,"_278":311,"_17":312},{"_36":298,"_13":299,"_77":300,"_46":101,"_38":39,"_219":301,"_220":24,"_40":302,"_42":26,"_80":81,"_222":303,"_82":30,"_223":-5,"_278":304,"_17":305},{"_36":238,"_13":91,"_77":90,"_46":128,"_38":39,"_219":43,"_220":24,"_40":295,"_42":26,"_80":21,"_222":240,"_82":30,"_223":-5,"_278":296,"_17":297},{"_36":233,"_13":97,"_77":96,"_46":128,"_38":39,"_219":122,"_220":24,"_40":292,"_42":235,"_80":21,"_222":236,"_82":30,"_223":-5,"_278":293,"_17":294},{"_36":229,"_13":79,"_77":78,"_46":128,"_38":39,"_219":43,"_220":24,"_40":289,"_42":26,"_80":81,"_222":231,"_82":30,"_223":-5,"_278":290,"_17":291},{"_36":281,"_13":282,"_77":283,"_46":-5,"_38":39,"_219":284,"_220":24,"_40":285,"_42":43,"_80":21,"_222":286,"_82":30,"_223":-5,"_278":287,"_17":288},{"_36":270,"_13":271,"_77":141,"_46":-5,"_38":39,"_219":272,"_220":24,"_40":273,"_42":274,"_80":275,"_222":276,"_82":30,"_223":277,"_278":279,"_17":280},"5328cccb-7254-4305-ab5f-cda661f973af","index.ts",25,["D",1781825162248],5,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { Hono } from \"npm:hono\";\nimport { addEntry, listEntries } from \"./backend/guestbook.ts\";\nimport { getNycForecast } from \"./backend/weather.ts\";\n\nconst app = new Hono();\n\n// Serve the headshot image from project-scoped blob storage\napp.get(\"/headshot.png\", async () => {\n const data = await blob.get(\"headshotsm.png\");\n if (!data) return new Response(\"Not found\", { status: 404 });\n return new Response(data.body, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Cache-Control\": \"public, max-age=86400\",\n },\n });\n});\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// NYC 7-day weather forecast (weather.gov)\napp.get(\"/api/weather\", async (c) => {\n try {\n const periods = await getNycForecast();\n return c.json(periods, 200, {\n \"Cache-Control\": \"public, max-age=1800\",\n });\n } catch (err) {\n return c.json({ error: (err as Error).message }, 502);\n }\n});\n\n// Guestbook API\napp.get(\"/api/guestbook\", async (c) => {\n return c.json(await listEntries());\n});\n\napp.post(\"/api/guestbook\", async (c) => {\n const { name, message } = await c.req.json().catch(() => ({}));\n if (typeof name !== \"string\" || typeof message !== \"string\") {\n return c.json({ error: \"Name and message are required.\" }, 400);\n }\n try {\n const entry = await addEntry(name, message);\n return c.json(entry, 201);\n } catch (err) {\n return c.json({ error: (err as Error).message }, 400);\n }\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","lunchparty","children",[],[271],"cbd256bd-bb09-49b4-9ef9-b8845d947943","README.md","019edcf0-4621-7206-b7be-b2312f5261a9",9,["D",1781823258704],"# Phil's Portfolio\n\nA personal portfolio page — header with a hero image, an about section, and a\nprojects showcase. Built with client-side React + Hono on Val Town, styled with\nTwind (Tailwind utility classes).\n\n## Where to edit your content\n\n| What you want to change | File |\n| --- | --- |\n| Name, tagline, hero image | `frontend/components/Header.tsx` |\n| Your bio + skill tags | `frontend/components/About.tsx` |\n| Your project cards (title, description, link) | `frontend/components/Projects.tsx` |\n| Overall layout + footer | `frontend/components/App.tsx` |\n\nThe hero \"stock photo\" is an inline SVG (a gradient mountain landscape) so it\nnever breaks. Swap the `
(Hono server)\"]\n Hono -->|serves| HTML[\"frontend/index.html\"]\n HTML -->|loads| Entry[\"frontend/index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App --> Header[\"Header.tsx\"]\n App --> About[\"About.tsx\"]\n App --> Projects[\"Projects.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + /source)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint\n favicon.svg ← App icon\n components/\n App.tsx ← Root layout + footer\n Header.tsx ← Hero image + name + tagline\n About.tsx ← Bio + skill tags\n Projects.tsx ← Project cards\n```\n",[],[282],["D",1781823194581],[],[18,79],["D",1781824104209],[],[18,97],["D",1781823194581],[],[18,91],"2cfa6b0f-9ba2-48f3-91cf-f644ceaf9de2","Weather.tsx","0e230c6a-6b6d-11f1-bf73-1607ee4eb77e",23,["D",1781825155790],"/** @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 windSpeed: string;\n windDirection: string;\n shortForecast: string;\n icon: string;\n};\n\n// weather.gov returns separate daytime + nighttime periods. We show the\n// daytime period for each of the next 7 days.\nfunction dayPeriods(periods: Period[]): Period[] {\n return periods.filter((p) => p.isDaytime).slice(0, 7);\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 if (!res.ok) throw new Error(\"Failed to load forecast\");\n setPeriods(await res.json());\n } catch (e) {\n setError((e as Error).message);\n } finally {\n setLoading(false);\n }\n })();\n }, []);\n\n const days = dayPeriods(periods);\n\n return (\n

\n 🌤️ NYC Weather\n

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

\n\n

\n {loading\n ?

Loading forecast…

\n : error\n ?

{error}

\n : days.length === 0\n ?

No forecast available right now.

\n : (\n

\n {days.map((p) => (\n \n \n {p.name}\n \n {p.icon && (\n \n )}\n \n {p.temperature}°{p.temperatureUnit}\n \n \n {p.shortForecast}\n \n \n {p.windDirection} {p.windSpeed}\n \n

\n ))}\n

\n )}\n \n

\n );\n}\n",[],[18,102,299],"fc987eca-e527-4467-8cee-e38b2ac20e27","Projects.tsx","8d4cd480-6b68-11f1-8f0c-1607ee4eb77e",["D",1781823221649],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ntype Project = {\n title: string;\n description: string;\n emoji: string;\n link?: string;\n};\n\n// Edit this list to showcase your own projects.\nconst projects: Project[] = [\n {\n emoji: \"🚀\",\n title: \"Project One\",\n description:\n \"A short description of what this project is and why it's awesome. Add a link to a demo or repo.\",\n link: \"#\",\n },\n {\n emoji: \"🛠️\",\n title: \"Project Two\",\n description:\n \"Another thing I built. Describe the problem it solves and the tech behind it.\",\n link: \"#\",\n },\n {\n emoji: \"✨\",\n title: \"Project Three\",\n description:\n \"Something I'm especially proud of. Swap in your real work here.\",\n link: \"#\",\n },\n];\n\nexport function Projects() {\n return (\n

\n 📦 Projects\n

\n {projects.map((p) => (\n \n

{p.emoji}

{p.title}

{p.description}

\n \n ))}\n

\n );\n}\n",[],[18,102,307],"2b7e3d38-4e46-4c61-b9ea-b00ed336bd5b","Header.tsx","85b24d9a-6b68-11f1-a1cd-1607ee4eb77e",15,["D",1781824325963],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function Header() {\n return (\n

\n {/* Circular profile photo, served from blob storage via /headshot.png */}\n \n\n

\n Phil the Obviously Super Awesome!!!\n

\n Builder of things · Solver of problems · Destroyer of worlds\n

\n );\n}",[],[18,102,314],"0318fd82-9c5f-4d40-8807-cfaed0ce84d0","Guestbook.tsx","54cea28e-6b6b-11f1-bb1c-1607ee4eb77e",17,["D",1781824415356],"/** @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 createdAt: string;\n};\n\nfunction formatDate(iso: string): string {\n // SQLite datetime('now') returns \"YYYY-MM-DD HH:MM:SS\" in UTC\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 if (!res.ok) throw new Error(\"Failed to load entries\");\n setEntries(await res.json());\n } catch (e) {\n setError((e as Error).message);\n } finally {\n setLoading(false);\n }\n }\n\n useEffect(() => {\n load();\n }, []);\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n if (!name.trim() || !message.trim()) return;\n setSubmitting(true);\n setError(null);\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 if (!res.ok) {\n const body = await res.json().catch(() => ({}));\n throw new Error(body.error ?? \"Failed to sign the guestbook\");\n }\n const entry: Entry = await res.json();\n setEntries((prev) => [entry, ...prev]);\n setMessage(\"\");\n } catch (e) {\n setError((e as Error).message);\n } finally {\n setSubmitting(false);\n }\n }\n\n return (\n

\n 📖 Guestbook\n

\n Leave a comment and sign your name — say hi!\n

\n\n \n setName((e.target as HTMLInputElement).value)}\n placeholder=\"Your name\"\n maxLength={80}\n required\n class=\"w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500\"\n />\n setMessage((e.target as HTMLTextAreaElement).value)}\n placeholder=\"Leave a message…\"\n rows={3}\n maxLength={500}\n required\n class=\"mt-3 w-full resize-y rounded-lg border border-gray-300 px-3 py-2 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500\"\n />\n

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

\n \n\n

\n {loading\n ?

Loading messages…

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

No messages yet — be the first!

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

{entry.message}

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

\n ))}\n \n

\n );\n}\n",[],[18,102,322],"21a00356-42a0-4d9a-bf62-8865e7b259e3","App.tsx","019edcf0-4621-7206-b7be-95742c96bb41",["D",1781825164526],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Header } from \"./Header.tsx\";\nimport { About } from \"./About.tsx\";\nimport { Weather } from \"./Weather.tsx\";\nimport { Projects } from \"./Projects.tsx\";\nimport { Guestbook } from \"./Guestbook.tsx\";\n\nexport function App() {\n return (\n

\n \n \n \n \n\n \n

\n );\n}\n",[],[18,102,330],"4ff235ad-cd4d-4a53-a657-53ef3c02d949","About.tsx","88dccf40-6b68-11f1-a5d9-1607ee4eb77e",["D",1781823214203],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function About() {\n return (\n

\n 👋 About Me\n

\n Hi, I'm Phil. This is where I write a little something about myself —\n who I am, what I care about, and the kinds of problems I love working\n on. Replace this text with your own story whenever you're ready.\n

\n When I'm not building, you'll find me exploring new ideas, tinkering\n with side projects, and learning whatever catches my curiosity next.\n

\n\n

\n {[\"TypeScript\", \"React\", \"Design\", \"Coffee ☕\", \"Tinkering\"].map((tag) => (\n \n {tag}\n \n ))}\n

\n );\n}\n",[],[18,102,337],["D",1781823194581],[259,260,261,262,263,264],[18,102],["D",1781823194581],[258,265,266,267],[18],"5d406ece-1197-404a-8353-e61076cd3296","weather.ts","07ef7586-6b6d-11f1-ad49-1607ee4eb77e","81089561-bf35-419c-bad0-23885cb03bfe",22,["D",1781825145385],"// Fetches a multi-day forecast for New York City from the U.S. National\n// Weather Service (weather.gov) API.\n//\n// The API is a two-step flow:\n// 1. GET /points/{lat},{lon} -> returns the URL of the gridpoint forecast\n// 2. GET that forecast URL -> returns the actual periods\n//\n// weather.gov requires a descriptive User-Agent header on every request.\n\nconst NYC = { lat: 40.7128, lon: -74.006 };\nconst USER_AGENT = \"phil-portfolio (val.town; contact via portfolio guestbook)\";\n\nexport type ForecastPeriod = {\n number: number;\n name: string;\n startTime: string;\n isDaytime: boolean;\n temperature: number;\n temperatureUnit: string;\n windSpeed: string;\n windDirection: string;\n shortForecast: string;\n icon: string;\n};\n\nasync function wfetch(url: string): Promise {\n const res = await fetch(url, {\n headers: { \"User-Agent\": USER_AGENT, Accept: \"application/geo+json\" },\n });\n if (!res.ok) {\n throw new Error(`weather.gov request failed (${res.status}) for ${url}`);\n }\n return res.json();\n}\n\nexport async function getNycForecast(): Promise {\n // Step 1: resolve the gridpoint for NYC's coordinates.\n const points = await wfetch(\n `https://api.weather.gov/points/${NYC.lat},${NYC.lon}`,\n );\n const forecastUrl: string | undefined = points?.properties?.forecast;\n if (!forecastUrl) {\n throw new Error(\"Could not resolve NYC forecast URL from weather.gov\");\n }\n\n // Step 2: fetch the forecast periods.\n const forecast = await wfetch(forecastUrl);\n const periods: ForecastPeriod[] = forecast?.properties?.periods ?? [];\n return periods;\n}\n",[],[358,350],"backend","e383df1f-b790-4d23-a321-ee4126a124b3","guestbook.ts","4bd95912-6b6b-11f1-bb1c-1607ee4eb77e",16,["D",1781824400322],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst TABLE = \"guestbook_entries\";\n\nexport type GuestbookEntry = {\n id: number;\n name: string;\n message: string;\n createdAt: string;\n};\n\nlet initialized = false;\nasync function ensureTable() {\n if (initialized) return;\n await 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 createdAt TEXT NOT NULL DEFAULT (datetime('now'))\n )`);\n initialized = true;\n}\n\nexport async function listEntries(): Promise {\n await ensureTable();\n const result = await sqlite.execute(\n `SELECT id, name, message, createdAt FROM ${TABLE} ORDER BY id DESC LIMIT 200`,\n );\n return result.rows as unknown as GuestbookEntry[];\n}\n\nexport async function addEntry(\n name: string,\n message: string,\n): Promise {\n await ensureTable();\n const cleanName = name.trim().slice(0, 80);\n const cleanMessage = message.trim().slice(0, 500);\n if (!cleanName || !cleanMessage) {\n throw new Error(\"Both a name and a message are required.\");\n }\n const result = await sqlite.execute({\n sql:\n `INSERT INTO ${TABLE} (name, message) VALUES (?, ?) RETURNING id, name, message, createdAt`,\n args: [cleanName, cleanMessage],\n });\n return result.rows[0] as unknown as GuestbookEntry;\n}\n",[],[358,360],"20f99851-7a3a-489c-80f4-9152f09fa35d",["D",1781824400322],[255,256],[358],["D",1781823194581],["D",1789678880410],{"_11":12,"_185":85},{"_11":12,"_180":181,"_84":85,"_31":83,"_182":183,"_184":30},{"_42":168,"_13":16,"_36":39,"_169":130,"_170":74,"_171":172,"_173":134,"_174":175,"_176":177,"_178":14,"_179":12},"ctx",{"_55":-5,"_206":409,"_410":411,"_412":413,"_414":30,"_415":30,"_416":30,"_417":24,"_418":-5,"_419":-7,"_420":-7,"_421":26,"_422":30,"_423":30,"_424":-5,"_425":30,"_426":30,"_427":30,"_428":-5},"ENV",{"_380":381,"_382":383,"_384":16,"_385":386,"_387":388,"_389":390,"_391":392,"_393":394,"_395":396,"_397":398,"_399":400,"_401":402,"_403":404,"_405":406,"_407":408},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]

History · frontend