Hello, I'm

Lizzie Renck

Builder, tinkerer, and lifelong learner.

\n\n

\n \n

About Me

\n Write a few sentences about who you are here. What you do, what\n you're curious about, and what you're working toward.\n

\n This is space for a longer paragraph — your background, the kinds of\n problems you like solving, hobbies, or anything you'd want a visitor\n to know. Edit index.html to make it yours.\n

\n\n \n

Projects

Project One

A short description of what this project is and your role in it.

\n View →\n

Project Two

A short description of what this project is and your role in it.

\n View →\n

Project Three

A short description of what this project is and your role in it.

\n View →\n

\n\n \n

Guest Book

Stopping by? Leave your mark below.

\n \n

Loading signatures…

\n\n \n

Get in Touch

\n The best way to reach me is at\n you@example.com. Swap in your\n real links below.\n

\n LinkedIn\n GitHub\n Twitter\n

\n\n \n \n\n","label",[18],"pulls","branches","forks","envVars",{"_204":26,"_206":26},"connections",{"_204":26,"_205":26},"count","unfilledCount","emptyCount",{"_35":258,"_13":259,"_68":260,"_45":-5,"_37":38,"_189":42,"_190":113,"_39":261,"_41":26,"_70":21,"_193":262,"_71":24,"_195":-5,"_219":263,"_17":264},{"_35":251,"_13":252,"_68":253,"_45":-5,"_37":38,"_189":42,"_190":113,"_39":254,"_41":26,"_70":21,"_193":255,"_71":24,"_195":-5,"_219":256,"_17":257},{"_35":243,"_13":244,"_68":245,"_45":-5,"_37":38,"_189":246,"_190":113,"_39":247,"_41":26,"_70":227,"_193":248,"_71":24,"_195":-5,"_219":249,"_17":250},{"_35":188,"_13":18,"_68":69,"_45":-5,"_37":38,"_189":94,"_190":113,"_39":240,"_41":192,"_70":21,"_193":194,"_71":24,"_195":-5,"_219":241,"_17":242},{"_35":231,"_13":232,"_68":111,"_45":-5,"_37":38,"_189":233,"_190":113,"_39":234,"_41":235,"_70":236,"_193":237,"_71":24,"_195":-5,"_219":238,"_17":239},{"_35":222,"_13":223,"_68":224,"_45":-5,"_37":38,"_189":225,"_190":113,"_39":226,"_41":77,"_70":227,"_193":228,"_71":24,"_195":-5,"_219":229,"_17":230},{"_35":214,"_13":215,"_68":216,"_45":-5,"_37":38,"_189":139,"_190":113,"_39":217,"_41":192,"_70":21,"_193":218,"_71":24,"_195":-5,"_219":220,"_17":221},"4f721aa1-d204-4350-9a42-566c27a59fb1","style.css","019edcf7-40ee-77df-a477-147b1183284a",["D",1781824434990],":root {\n --bg: #faf9f6;\n --ink: #1f2421;\n --muted: #6b716c;\n --accent: #3a5a40;\n --accent-2: #a3b18a;\n --card: #ffffff;\n --line: #e7e5df;\n --maxw: 920px;\n}\n\n* { box-sizing: border-box; }\n\nbody {\n margin: 0;\n font-family: \"Inter\", system-ui, sans-serif;\n color: var(--ink);\n background: var(--bg);\n line-height: 1.6;\n}\n\n.wrap {\n max-width: var(--maxw);\n margin: 0 auto;\n padding: 0 1.25rem;\n}\n\na { color: var(--accent); }\n\n/* Header */\n.site-header {\n position: sticky;\n top: 0;\n z-index: 10;\n background: rgba(250, 249, 246, 0.85);\n backdrop-filter: blur(8px);\n border-bottom: 1px solid var(--line);\n}\n.header-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 64px;\n}\n.logo {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: 1.3rem;\n letter-spacing: 0.04em;\n text-decoration: none;\n color: var(--ink);\n}\n.nav a {\n margin-left: 1.5rem;\n text-decoration: none;\n color: var(--muted);\n font-size: 0.95rem;\n font-weight: 500;\n}\n.nav a:hover { color: var(--ink); }\n\n/* Hero */\n.hero {\n position: relative;\n min-height: 60vh;\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n}\n.hero-photo {\n position: absolute;\n inset: 0;\n background-image: url(\"/headshot\");\n background-size: cover;\n background-position: center;\n transform: scale(1.02);\n}\n.hero-overlay {\n position: relative;\n width: 100%;\n padding: 3.5rem 0;\n background: linear-gradient(to top, rgba(20, 26, 22, 0.78), rgba(20, 26, 22, 0.15));\n color: #fff;\n}\n.eyebrow {\n text-transform: uppercase;\n letter-spacing: 0.18em;\n font-size: 0.8rem;\n margin: 0 0 0.4rem;\n color: var(--accent-2);\n}\n.hero-overlay h1 {\n font-family: \"Fraunces\", serif;\n font-weight: 600;\n font-size: clamp(2.4rem, 7vw, 4rem);\n margin: 0;\n line-height: 1.05;\n}\n.tagline {\n margin: 0.6rem 0 0;\n font-size: 1.15rem;\n color: #e8eae6;\n}\n\n/* Sections */\n.section {\n padding: 3.5rem 0;\n border-bottom: 1px solid var(--line);\n}\n.section:last-of-type { border-bottom: none; }\n.section h2 {\n font-family: \"Fraunces\", serif;\n font-size: 1.8rem;\n margin: 0 0 1.25rem;\n}\n.lead {\n font-size: 1.2rem;\n color: var(--ink);\n}\n.section p { color: var(--muted); max-width: 60ch; }\ncode {\n background: #eef0ea;\n padding: 0.1em 0.4em;\n border-radius: 4px;\n font-size: 0.9em;\n}\n\n/* Project cards */\n.cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 1.25rem;\n}\n.card {\n background: var(--card);\n border: 1px solid var(--line);\n border-radius: 14px;\n padding: 1.5rem;\n transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n.card:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(31, 36, 33, 0.08);\n}\n.card h3 {\n font-family: \"Fraunces\", serif;\n margin: 0 0 0.5rem;\n font-size: 1.2rem;\n}\n.card p { margin: 0 0 1rem; }\n.card-link {\n text-decoration: none;\n font-weight: 600;\n font-size: 0.95rem;\n}\n\n/* Contact links */\n.links { display: flex; gap: 1.25rem; margin-top: 1rem; }\n.links a {\n text-decoration: none;\n font-weight: 600;\n border-bottom: 2px solid transparent;\n}\n.links a:hover { border-bottom-color: var(--accent-2); }\n\n/* Footer */\n.site-footer {\n border-top: 1px solid var(--line);\n padding: 1.75rem 0;\n color: var(--muted);\n font-size: 0.9rem;\n}\n.site-footer .wrap {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n/* Guest book */\n.gb-form { margin: 1.25rem 0 2rem; max-width: 520px; }\n.gb-row { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; }\n.gb-form input[type=\"text\"] {\n width: 100%;\n padding: 0.65rem 0.85rem;\n border: 1px solid var(--line);\n border-radius: 10px;\n font: inherit;\n background: #fff;\n}\n.gb-form input:focus {\n outline: none;\n border-color: var(--accent-2);\n box-shadow: 0 0 0 3px rgba(163, 177, 138, 0.25);\n}\n.gb-form button {\n flex: 0 0 auto;\n padding: 0.65rem 1.3rem;\n border: none;\n border-radius: 10px;\n background: var(--accent);\n color: #fff;\n font: inherit;\n font-weight: 600;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n.gb-form button:hover { background: #2f4a35; }\n.gb-form button:disabled { opacity: 0.6; cursor: default; }\n.gb-error { color: #b3261e; margin: 0.4rem 0 0; font-size: 0.9rem; }\n\n.gb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }\n.gb-entry {\n background: var(--card);\n border: 1px solid var(--line);\n border-radius: 12px;\n padding: 0.9rem 1.1rem;\n}\n.gb-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }\n.gb-name { font-weight: 600; color: var(--ink); }\n.gb-date { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }\n.gb-message { margin: 0.35rem 0 0; color: var(--muted); }\n.gb-empty { color: var(--muted); font-style: italic; }\n","children",[],[215],"29e89b55-d7ea-436d-8136-cf7eb1dbb10b","script.js","019edcf7-40ee-77df-a477-128d19506c27",14,["D",1781824428468],"script","// Fill in the current year in the footer.\nconst yearEl = document.getElementById(\"year\");\nif (yearEl) yearEl.textContent = new Date().getFullYear();\n\n// If the hero stock photo fails to load, fall back to a soft gradient\n// so the header never looks broken.\nconst hero = document.querySelector(\".hero-photo\");\nif (hero) {\n const url = getComputedStyle(hero)\n .backgroundImage.match(/url\$[\"']?([^\"')]+)[\"']?\$/);\n if (url && url[1]) {\n const img = new Image();\n img.onerror = () => {\n hero.style.backgroundImage =\n \"linear-gradient(135deg, #3a5a40, #a3b18a)\";\n };\n img.src = url[1];\n }\n}\n\n// ---- Guest book ----\nconst gbForm = document.getElementById(\"gb-form\");\nconst gbList = document.getElementById(\"gb-list\");\nconst gbError = document.getElementById(\"gb-error\");\n\nfunction escapeHtml(str) {\n return String(str).replace(/[&<>\"']/g, (c) => ({\n \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\", \"'\": \"'\",\n }[c]));\n}\n\nfunction formatDate(iso) {\n const d = new Date(iso.replace(\" \", \"T\") + \"Z\");\n if (isNaN(d)) return \"\";\n return d.toLocaleDateString(undefined, { year: \"numeric\", month: \"short\", day: \"numeric\" });\n}\n\nfunction renderEntries(entries) {\n if (!entries.length) {\n gbList.innerHTML = '

No signatures yet — be the first!

';\n return;\n }\n gbList.innerHTML = entries.map((e) => `\n

\n ${escapeHtml(e.name)}\n ${formatDate(e.created_at)}\n

\n ${e.message ? `

${escapeHtml(e.message)}

` : \"\"}\n

`).join(\"\");\n}\n\nasync function loadEntries() {\n try {\n const res = await fetch(\"/guestbook\");\n renderEntries(await res.json());\n } catch {\n gbList.innerHTML = '

Could not load the guest book.

';\n }\n}\n\nif (gbForm) {\n gbForm.addEventListener(\"submit\", async (ev) => {\n ev.preventDefault();\n gbError.hidden = true;\n const name = document.getElementById(\"gb-name\").value;\n const message = document.getElementById(\"gb-message\").value;\n const btn = gbForm.querySelector(\"button\");\n btn.disabled = true;\n try {\n const res = await fetch(\"/guestbook\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name, message }),\n });\n if (!res.ok) {\n const data = await res.json().catch(() => ({}));\n throw new Error(data.error || \"Something went wrong\");\n }\n gbForm.reset();\n await loadEntries();\n } catch (err) {\n gbError.textContent = err.message;\n gbError.hidden = false;\n } finally {\n btn.disabled = false;\n }\n });\n loadEntries();\n}\n",[],[223],"6da78078-6231-4393-9afe-4f856704c47f","main.tsx",11,["D",1781824408516],5,"http","import { parseVal, staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { addEntry, listEntries } from \"./guestbook.ts\";\n\nconst serve = staticHTTPServer();\n\nconst HEADSHOT_KEY = \"Screenshot 2026-06-08 at 11.32.46 AM.png\";\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n\n // Let visitors view & remix the source.\n if (url.pathname === \"/source\") {\n return new Response(null, {\n status: 302,\n headers: { Location: parseVal().links.self.val },\n });\n }\n\n // Serve the headshot stored in blob storage.\n if (url.pathname === \"/headshot\") {\n try {\n const res = await blob.get(HEADSHOT_KEY);\n return new Response(res.body, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Cache-Control\": \"public, max-age=3600\",\n },\n });\n } catch {\n return new Response(\"Not found\", { status: 404 });\n }\n }\n\n // Guest book API.\n if (url.pathname === \"/guestbook\") {\n if (req.method === \"GET\") {\n const entries = await listEntries();\n return Response.json(entries);\n }\n if (req.method === \"POST\") {\n try {\n const body = await req.json();\n const entry = await addEntry(String(body.name ?? \"\"), String(body.message ?? \"\"));\n return Response.json(entry, { status: 201 });\n } catch (err) {\n return Response.json(\n { error: err instanceof Error ? err.message : \"Invalid request\" },\n { status: 400 },\n );\n }\n }\n return new Response(\"Method not allowed\", { status: 405 });\n }\n\n return serve(req);\n}\n",[],[232],["D",1781824417231],[],[18],"aedab585-cc92-4c4a-844a-045b0b4e3299","guestbook.ts","4c6b6780-6b6b-11f1-b61b-1607ee4eb77e",9,["D",1781824401279],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst TABLE = \"guestbook_entries\";\n\nlet ready: Promise | null = null;\nfunction init() {\n ready ??= sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n message TEXT,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`).then(() => {});\n return ready;\n}\n\nexport interface Entry {\n id: number;\n name: string;\n message: string | null;\n created_at: string;\n}\n\nexport async function listEntries(limit = 100): Promise {\n await init();\n const res = await sqlite.execute({\n sql: `SELECT id, name, message, created_at FROM ${TABLE}\n ORDER BY id DESC LIMIT ?`,\n args: [limit],\n });\n return res.rows as unknown as Entry[];\n}\n\nexport async function addEntry(name: string, message: string): Promise {\n await init();\n const cleanName = name.trim().slice(0, 80);\n const cleanMessage = message.trim().slice(0, 280);\n if (!cleanName) throw new Error(\"Name is required\");\n\n const res = await sqlite.execute({\n sql: `INSERT INTO ${TABLE} (name, message) VALUES (?, ?)\n RETURNING id, name, message, created_at`,\n args: [cleanName, cleanMessage || null],\n });\n return res.rows[0] as unknown as Entry;\n}\n",[],[244],"60b16900-ce90-4883-9c04-2ac47813263b","favicon.svg","019edcf7-40ee-77df-a477-0706ef47c8dc",["D",1781823652019],"",[],[252],"42f1cda0-bcb5-4db0-824a-a18096bf4a53","README.md","019edcf7-40ee-77df-a477-00b2c7fcf222",["D",1781823652019],"# Welcome to Val Town\n\nVal Town is the simplest way to get code running in the cloud.\n\nThis is a basic HTML starter template.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| **[`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter)** *(you're here)* | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| [`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter) | Client-side React SPA with a Hono API backend. |\n\n## Getting started\n\n1. Click `Remix` on this val to get a copy of it\n2. Click `main.tsx` to view the website\n3. Saves to any file will instantly deploy\n\n### ← main.tsx\n\nThis HTTP server hosts all of the other files in this val.\n\nTo view your site in a new tab, click on the `...` menu of `main.tsx` to copy\nyour live HTTP endpoint.\n\n### ← README.md\n\nThat's this file, where you can tell people what your cool website does and how\nyou built it.\n\n### ← index.html\n\nWhere you'll write the content of your website.\n\n### ← style.css\n\nCSS files add styling rules to your content.\n\n### ← script.js\n\nIf you're feeling fancy you can add interactivity to your site with JavaScript.\n\n### ← favicon.svg\n\nThe icon that shows up in the brower tab. Tip: AIs are pretty good at writing\nSVG favicons.\n\n---\n\nThis template was inspired by https://glitch.new/blank.\n",[],[259],["D",1781823652019],["D",1789678880410],{"_11":12,"_154":74},{"_11":12,"_150":74,"_73":74,"_30":72,"_151":152,"_153":24},{"_41":139,"_13":16,"_35":38,"_140":100,"_141":65,"_142":66,"_143":104,"_144":145,"_146":147,"_148":14,"_149":12},"ctx",{"_54":-5,"_175":303,"_304":305,"_306":307,"_308":24,"_309":24,"_310":24,"_311":113,"_312":-5,"_313":-7,"_314":-7,"_315":26,"_316":24,"_317":24,"_318":-5,"_319":24,"_320":24,"_321":24,"_322":-5},"ENV",{"_274":275,"_276":277,"_278":16,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302},"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"]

History · index.html