[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_209":210,"_211":212},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_108":90,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":59,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":31,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","index.tsx","latestPath","fileId","019cdcc1-687b-73e8-a526-d410d2c5adc7","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\n\n// ─── DATA ────────────────────────────────────────────────────────────────────\n\nconst skills = [\n { icon: \"🟩\", name: \"Node.js\" },\n { icon: \"⚛️\", name: \"React\" },\n { icon: \"🟦\", name: \"TypeScript\" },\n { icon: \"🐘\", name: \"PostgreSQL\" },\n { icon: \"🍃\", name: \"MongoDB\" },\n { icon: \"🐳\", name: \"Docker\" },\n { icon: \"☁️\", name: \"AWS\" },\n { icon: \"🔀\", name: \"Git\" },\n { icon: \"🚀\", name: \"REST APIs\" },\n { icon: \"🔗\", name: \"GraphQL\" },\n { icon: \"⚡\", name: \"Redis\" },\n { icon: \"🧪\", name: \"Jest\" },\n];\n\nconst projects = [\n {\n name: \"Dragonboat — Product Roadmap Platform\",\n desc: \"Building scalable backend services and React UIs for a leading product management platform used by thousands of product teams worldwide.\",\n tags: [\"Node.js\", \"React\", \"TypeScript\", \"PostgreSQL\"],\n link: \"https://dragonboat.io\",\n },\n {\n name: \"fbref Football Data Pipeline\",\n desc: \"Automated data ingestion and AI-enriched processing pipeline for football statistics — events, scheduled workers, and live scoring.\",\n tags: [\"TypeScript\", \"Val.town\", \"Cron\", \"AI\"],\n link: \"#\",\n },\n {\n name: \"Crypto & Real Estate Price Trackers\",\n desc: \"Lightweight scheduled monitors for crypto prices and Portuguese real estate listings, with change alerts.\",\n tags: [\"Node.js\", \"Val.town\", \"REST APIs\"],\n link: \"#\",\n },\n];\n\nconst posts = [\n {\n slug: \"orm-vs-raw-sql\",\n date: \"Mar 10, 2026\",\n title: \"Why I stopped using ORM and went back to raw SQL\",\n excerpt: \"After years of Sequelize and Prisma, I hit a wall with complex queries. Here's what I learned switching back to pg and writing SQL by hand.\",\n tags: [\"Node.js\", \"PostgreSQL\", \"Backend\"],\n readTime: \"6 min read\",\n content: `\n## The problem with ORMs at scale\n\nI've used Sequelize, TypeORM, and Prisma across different projects. For simple CRUD apps they're great — you get type safety, migrations, and a nice API out of the box. But once your queries grow beyond a few joins, things start to fall apart.\n\nThe turning point for me was a reporting query at Dragonboat. It involved multiple CTEs, window functions, and conditional aggregations. The Prisma version was a wall of \\`$queryRaw\\` with TypeScript fighting me every step. The raw SQL version was clean, readable, and 3x faster.\n\n## What I switched to\n\nI moved to **[postgres](https://github.com/porsager/postgres)** (the \\`sql\\` package by porsager). It gives you tagged template literals with automatic parameterisation, so SQL injection is still handled correctly:\n\n\\`\\`\\`ts\nconst users = await sql\\`\n SELECT id, name, email\n FROM users\n WHERE active = true\n AND created_at > \\${since}\n ORDER BY created_at DESC\n LIMIT \\${limit}\n\\`;\n\\`\\`\\`\n\nNo magic. No hidden N+1 queries. No wondering what SQL your ORM is actually generating.\n\n## Migrations\n\nThe one thing ORMs genuinely do well is migrations. I replaced that with **[db-migrate](https://db-migrate.readthedocs.io/)** for structured migrations and a simple \\`schema.sql\\` file as source of truth. Not glamorous, but it works.\n\n## When I'd still use an ORM\n\n- Greenfield CRUD-heavy apps where speed of development matters more than performance\n- Teams where not everyone is comfortable with SQL\n- Simple one-table queries where the ORM adds zero friction\n\nFor anything else? Write the SQL. You'll thank yourself later.\n `,\n },\n {\n slug: \"valtown-scratchpad\",\n date: \"Feb 22, 2026\",\n title: \"Val.town is the scratchpad I always wanted\",\n excerpt: \"Deploying a cron job used to take 20 minutes of boilerplate. Now it's 30 seconds. A quick tour of how I use Val.town for side projects.\",\n tags: [\"Val.town\", \"TypeScript\", \"Automation\"],\n readTime: \"4 min read\",\n content: `\n## The old way\n\nBefore Val.town, deploying a simple cron job meant: create a repo, write a Dockerfile or serverless config, set up CI, configure environment variables, deploy to AWS Lambda or a VPS, set up CloudWatch or cron-job.org to trigger it... You get the idea.\n\nFor side projects and experiments, that overhead kills momentum.\n\n## Enter Val.town\n\nVal.town flips this completely. A cron job is just a TypeScript function:\n\n\\`\\`\\`ts\nexport default async function() {\n const res = await fetch(\"https://api.example.com/prices\");\n const data = await res.json();\n if (data.price > 50000) {\n await email({ subject: \"BTC above 50k!\", text: \\`Price: \\${data.price}\\` });\n }\n}\n\\`\\`\\`\n\nSet the schedule, hit save. It runs. That's it.\n\n## What I've built on it\n\n- **Crypto price alerts** — pings me when BTC or ETH move more than 5% in an hour\n- **Imóveis tracker** — scrapes Portuguese real estate listings for specific search criteria\n- **Football data pipeline** — ingests fbref match data, enriches with AI, exposes a REST API\n- **This portfolio** — served as an HTTP val\n\n## The catch\n\nVal.town has limits — execution time, storage, and egress. For production workloads, it's not a replacement for proper infrastructure. But for the 80% of side project needs? It's unbeatable.\n\nIf you haven't tried it, spend 10 minutes on [val.town](https://val.town). Your weekend projects will thank you.\n `,\n },\n {\n slug: \"react-server-components-one-year-in\",\n date: \"Jan 15, 2026\",\n title: \"React Server Components — one year in\",\n excerpt: \"We migrated part of Dragonboat to RSC last year. What worked, what didn't, and whether I'd do it again.\",\n tags: [\"React\", \"Frontend\", \"Performance\"],\n readTime: \"8 min read\",\n content: `\n## Context\n\nAt Dragonboat we have a large React codebase. Most of it is a classic SPA — client-side routing, Redux, REST API calls from the browser. Last year we started migrating our public-facing pages and some dashboard sections to React Server Components.\n\nHere's my honest take after 12 months.\n\n## What worked well\n\n**Data fetching is genuinely simpler.** Being able to \\`await\\` directly in a component, close to where the data is used, removes a lot of the boilerplate around loading states and effects:\n\n\\`\\`\\`tsx\nasync function RoadmapList({ teamId }: { teamId: string }) {\n const roadmaps = await db.roadmaps.findMany({ where: { teamId } });\n return

)}

;\n}\n\\`\\`\\`\n\n**Bundle size dropped.** Heavy dependencies (date libraries, markdown parsers, chart configs) that were previously shipped to the client are now server-only. Our initial JS bundle shrank by ~35%.\n\n**Waterfall requests are easier to reason about.** With client components you'd fire multiple \\`useEffect\\` fetches that cascade. RSC makes the data flow sequential and explicit.\n\n## What didn't work\n\n**The mental model is genuinely hard to teach.** The \"which components are server vs client\" question trips up everyone on the team. We've had bugs from accidentally importing server-only code into client components.\n\n**Interoperability with our existing state management is painful.** Redux and RSC don't mix naturally. We ended up with a hybrid approach that feels awkward.\n\n**Error boundaries and loading states feel more fragmented.** The Suspense + RSC combination works, but debugging a broken streaming boundary is not fun.\n\n## Would I do it again?\n\nYes — but only for the right parts of the app. RSC shines for read-heavy, data-driven pages. For interactive, stateful UIs, classic client components are still the right tool.\n\nThe migration isn't free, but the performance and DX wins on the right pages are real.\n `,\n },\n {\n slug: \"football-stats-pipeline\",\n date: \"Dec 5, 2025\",\n title: \"Building a real-time football stats pipeline with AI enrichment\",\n excerpt: \"How I wired fbref data → scheduled workers → GPT analysis → live API in a weekend, entirely on serverless infrastructure.\",\n tags: [\"AI\", \"TypeScript\", \"Data Engineering\"],\n readTime: \"10 min read\",\n content: `\n## The goal\n\nI wanted a personal API that could answer questions like: *\"Which midfielders in the Premier League have the best progressive pass ratio in the last 5 games?\"* — with fresh data, not a CSV from 2022.\n\nThe plan: scrape fbref → process and store → enrich with AI → serve via REST. All on Val.town, zero infrastructure to manage.\n\n## Architecture\n\n\\`\\`\\`\n[fbref scraper cron]\n ↓\n[raw events store (Val blob)]\n ↓\n[processing worker] ← runs every 15 min\n ↓\n[AI enrichment] ← GPT-4o summaries + tags\n ↓\n[HTTP API val] ← public REST endpoints\n\\`\\`\\`\n\n## The scraper\n\nfbref doesn't have an official API, so this involved parsing their HTML tables. The tricky part is rate limiting — scrape too fast and you get blocked. I settled on one request per 3 seconds with randomised jitter:\n\n\\`\\`\\`ts\nasync function fetchWithDelay(url: string, minMs = 2000, jitter = 1000) {\n const delay = minMs + Math.random() * jitter;\n await new Promise(r => setTimeout(r, delay));\n return fetch(url, { headers: { \"User-Agent\": \"personal-stats-bot/1.0\" } });\n}\n\\`\\`\\`\n\n## AI enrichment\n\nAfter storing raw stats, a separate worker calls the OpenAI API to generate:\n- A plain-English summary of a player's recent form\n- Automatic tags (e.g. \"in-form\", \"injury-return\", \"high-press-specialist\")\n- A form score (0–100)\n\nThe prompt is simple but the output is surprisingly useful for filtering.\n\n## Result\n\nThe API now serves ~50 endpoints with sub-100ms response times (mostly from Val blob cache). Total cost: ~$2/month in OpenAI credits. Total infrastructure managed: zero.\n\nThe code lives on Val.town at [val.town/u/nmsilva](https://www.val.town/u/nmsilva) — some vals are public if you want to poke around.\n `,\n },\n];\n\n// ─── STYLES ──────────────────────────────────────────────────────────────────\n\nconst baseStyles = `\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body { font-family: 'IBM Plex Sans', system-ui, sans-serif; background: #0f0f13; color: #e2e8f0; line-height: 1.6; }\n :root { --accent: #6366f1; --accent2: #8b5cf6; --card: #1a1a24; --border: #2d2d3d; }\n a { color: var(--accent); text-decoration: none; }\n a:hover { color: var(--accent2); }\n .container { max-width: 900px; margin: 0 auto; padding: 0 2rem; }\n\n /* NAV */\n nav { position: fixed; top: 0; width: 100%; background: rgba(15,15,19,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); z-index: 100; }\n nav .container { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; }\n nav .logo { font-weight: 800; font-size: 1.25rem; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n nav ul { list-style: none; display: flex; gap: 2rem; }\n nav ul a { color: #94a3b8; font-size: 0.9rem; transition: color 0.2s; }\n nav ul a:hover { color: #e2e8f0; }\n\n /* HERO */\n .hero { min-height: 100vh; display: flex; align-items: center; padding-top: 80px; }\n .hero-inner { display: flex; flex-direction: column; gap: 1.5rem; }\n .hero-tag { font-size: 0.8rem; color: var(--accent); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; }\n .hero h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.1; }\n .hero h1 .grad { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n .hero p { font-size: 1.15rem; color: #94a3b8; max-width: 540px; }\n .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }\n .btn { padding: 0.75rem 1.75rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.2s; border: none; display: inline-block; }\n .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: white; }\n .btn-primary:hover { opacity: 0.85; transform: translateY(-1px); }\n .btn-outline { background: transparent; color: #e2e8f0; border: 1.5px solid var(--border); }\n .btn-outline:hover { border-color: var(--accent); color: var(--accent); }\n\n /* SECTIONS */\n section { padding: 5rem 0; }\n .section-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 2.5rem; }\n .section-title::after { content: ''; display: block; width: 40px; height: 3px; background: linear-gradient(135deg, var(--accent), var(--accent2)); margin-top: 0.5rem; border-radius: 2px; }\n\n /* ABOUT */\n .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }\n .about-text p { color: #94a3b8; margin-bottom: 1rem; }\n .about-text strong { color: #e2e8f0; }\n .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; }\n .stat-card .num { font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n .stat-card .label { font-size: 0.82rem; color: #64748b; margin-top: 0.25rem; }\n\n /* SKILLS */\n .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; }\n .skill-chip { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; text-align: center; transition: all 0.2s; }\n .skill-chip:hover { border-color: var(--accent); transform: translateY(-2px); }\n .skill-chip .icon { font-size: 1.75rem; margin-bottom: 0.5rem; }\n .skill-chip .name { font-size: 0.82rem; color: #94a3b8; }\n\n /* PROJECTS */\n .projects-grid { display: grid; gap: 1.5rem; }\n .project-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.75rem; transition: all 0.2s; }\n .project-card:hover { border-color: var(--accent); transform: translateY(-2px); }\n .project-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }\n .project-card p { color: #64748b; font-size: 0.9rem; margin-bottom: 1.25rem; }\n .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }\n .tag { background: rgba(99,102,241,0.1); color: var(--accent); font-size: 0.72rem; padding: 0.25rem 0.7rem; border-radius: 20px; border: 1px solid rgba(99,102,241,0.2); }\n\n /* BLOG */\n .posts-grid { display: grid; gap: 1.25rem; }\n .post-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.75rem; transition: all 0.2s; display: flex; flex-direction: column; gap: 0.75rem; }\n .post-card:hover { border-color: var(--accent); transform: translateY(-2px); }\n .post-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.8rem; color: #475569; }\n .post-meta .dot { width: 3px; height: 3px; background: #475569; border-radius: 50%; display: inline-block; }\n .post-card h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.35; }\n .post-card h3 a { color: #e2e8f0; transition: color 0.2s; }\n .post-card h3 a:hover { color: var(--accent); }\n .post-card .excerpt { color: #64748b; font-size: 0.9rem; line-height: 1.6; }\n .read-more { font-size: 0.85rem; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; }\n .read-more:hover { color: var(--accent2); }\n\n /* CONTACT */\n .contact-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem; text-align: center; }\n .contact-card h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }\n .contact-card p { color: #94a3b8; margin-bottom: 2rem; }\n .contact-links { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }\n .contact-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; color: #94a3b8; font-size: 0.9rem; transition: all 0.2s; }\n .contact-link:hover { border-color: var(--accent); color: var(--accent); }\n\n /* FOOTER */\n footer { border-top: 1px solid var(--border); padding: 2rem 0; text-align: center; color: #334155; font-size: 0.85rem; }\n\n /* POST PAGE */\n .post-page { padding-top: 100px; padding-bottom: 5rem; }\n .post-page .back { display: inline-flex; align-items: center; gap: 0.5rem; color: #94a3b8; font-size: 0.9rem; margin-bottom: 2.5rem; transition: color 0.2s; }\n .post-page .back:hover { color: var(--accent); }\n .post-header { margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }\n .post-header h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.2; }\n .post-body { max-width: 680px; }\n .post-body h2 { font-size: 1.3rem; font-weight: 700; margin: 2.5rem 0 1rem; color: #e2e8f0; }\n .post-body p { color: #94a3b8; margin-bottom: 1.25rem; line-height: 1.75; }\n .post-body pre { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; margin: 1.5rem 0; overflow-x: auto; }\n .post-body code { font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; color: #a5b4fc; }\n .post-body pre code { color: #cbd5e1; }\n .post-body ul, .post-body ol { color: #94a3b8; padding-left: 1.5rem; margin-bottom: 1.25rem; }\n .post-body li { margin-bottom: 0.4rem; line-height: 1.7; }\n .post-body a { color: var(--accent); }\n .post-body strong { color: #e2e8f0; }\n\n @media (max-width: 640px) {\n .about-grid { grid-template-columns: 1fr; }\n nav ul { display: none; }\n }\n`;\n\n// ─── MARKDOWN-LITE RENDERER ───────────────────────────────────────────────────\n\nfunction renderMarkdown(md: string): string {\n return md\n .trim()\n .replace(/```(\\w*)\\n([\\s\\S]*?)```/g, (_, _lang, code) =>\n `

${code.replace(//g, \">\")}

`\n )\n .replace(/^## (.+)$/gm, \"

$1

\")\n .replace(/\\*\\*(.+?)\\*\\*/g, \"$1\")\n .replace(/\\[(.+?)\\]\$(.+?)\$/g, '$1')\n .replace(/`([^`]+)`/g, \"$1\")\n .replace(/\\n\\n/g, \"

\")\n .replace(/^(?!<[hup])(.+)/gm, (line) =>\n line.trim() && !line.startsWith(\"<\") ? line : line\n )\n .replace(/^

(|<\\/pre>|<\\/ul>|<\\/ol>)<\\/p>/g, \"$1\")\n .replace(/^(?!<)(.+)/gm, \"$1\")\n .split(\"\\n\\n\")\n .map((block) =>\n block.startsWith(\"<\") ? block : block ? `

${block}

` : \"\"\n )\n .join(\"\\n\");\n}\n\n// ─── SHARED LAYOUT ────────────────────────────────────────────────────────────\n\nfunction Layout({ title, children }: { title: string; children: any }) {\n return (\n \n \n \n \n {title}\n \n \n \n \n \n \n \n {children}\n \n \n \n );\n}\n\n// ─── HOME PAGE ────────────────────────────────────────────────────────────────\n\nfunction HomePage() {\n return (\n \n

\n Open to opportunities\n

\n Hi, I'm Nuno Silva\n
Full-Stack Developer\n

\n I build robust backends and polished UIs. Based in Portugal,\n shipping products that scale.\n

\n View my work\n Get in touch\n

\n\n

About

\n I'm a software developer based in Alcofra, Vouzela, Portugal.\n I specialise in Node.js backends and{\" \"}\n React frontends — I like systems that are\n fast, clean, and maintainable.\n

\n Currently at Dragonboat, where I work on\n product roadmap tooling for PMs and engineering teams across\n the globe.\n

\n Outside of work I tinker with data pipelines, sports\n analytics, and automation — usually on Val.town.\n

Years of experience

20+

Projects shipped

Core stacks

∞

Coffees consumed

\n\n

Skills

\n {skills.map((s) => (\n

{s.icon}

{s.name}

\n ))}\n

\n\n

Projects

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

{p.name}

{p.desc}

\n {p.tags.map((t) => (\n {t}\n ))}\n

\n ))}\n

\n\n

Writing

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

\n {p.date}\n \n {p.readTime}\n

{p.title}

{p.excerpt}

\n {p.tags.map((t) => (\n {t}\n ))}\n

\n Read more →\n

\n ))}\n

\n\n

Contact

Let's work together

Have a project in mind or just want to chat? Drop me a line.

\n \n ✉️ nuno4slb@gmail.com\n \n \n 🐙 github.com/nmsilva\n \n \n 🏔️ val.town/u/nmsilva\n \n

\n \n );\n}\n\n// ─── POST PAGE ────────────────────────────────────────────────────────────────\n\nfunction PostPage({ post }: { post: typeof posts[0] }) {\n return (\n \n

\n ← Back to writing\n

\n {post.date}\n \n {post.readTime}\n

{post.title}

\n {post.tags.map((t) => (\n {t}\n ))}\n

\n \n

\n \n );\n}\n\n// ─── ROUTER ───────────────────────────────────────────────────────────────────\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n // /posts/:slug\n const postMatch = path.match(/^\\/posts\\/([^/]+)$/);\n if (postMatch) {\n const slug = postMatch[1];\n const post = posts.find((p) => p.slug === slug);\n if (!post) {\n return new Response(\"Post not found\", { status: 404 });\n }\n const html = \"\" + renderToString();\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n }\n\n // home\n const html = \"\" + renderToString();\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\n\n// ─── DATA ────────────────────────────────────────────────────────────────────\n\nconst profile = {\n name: \"Nuno Silva\",\n initials: \"NS\",\n role: \"Full-Stack Developer\",\n location: \"Alcofra, Portugal\",\n bio: \"I build robust backends and polished UIs. Focused on Node.js and React — I like systems that are fast, clean, and maintainable.\",\n email: \"nuno4slb@gmail.com\",\n github: \"https://github.com/nmsilva\",\n valtown: \"https://www.val.town/u/nmsilva\",\n};\n\nconst skills = [\n { icon: \"🟩\", name: \"Node.js\" },\n { icon: \"⚛️\", name: \"React\" },\n { icon: \"🟦\", name: \"TypeScript\" },\n { icon: \"🐘\", name: \"PostgreSQL\" },\n { icon: \"🍃\", name: \"MongoDB\" },\n { icon: \"🐳\", name: \"Docker\" },\n { icon: \"☁️\", name: \"AWS\" },\n { icon: \"🔀\", name: \"Git\" },\n { icon: \"🚀\", name: \"REST APIs\" },\n { icon: \"🔗\", name: \"GraphQL\" },\n { icon: \"⚡\", name: \"Redis\" },\n { icon: \"🧪\", name: \"Jest\" },\n];\n\nconst projects = [\n {\n name: \"Dragonboat — Product Roadmap Platform\",\n desc: \"Building scalable backend services and React UIs for a leading product management platform used by thousands of product teams worldwide.\",\n tags: [\"Node.js\", \"React\", \"TypeScript\", \"PostgreSQL\"],\n link: \"https://dragonboat.io\",\n },\n {\n name: \"fbref Football Data Pipeline\",\n desc: \"Automated data ingestion and AI-enriched processing pipeline for football statistics — events, scheduled workers, and live scoring.\",\n tags: [\"TypeScript\", \"Val.town\", \"Cron\", \"AI\"],\n link: \"#\",\n },\n {\n name: \"Crypto & Real Estate Price Trackers\",\n desc: \"Lightweight scheduled monitors for crypto prices and Portuguese real estate listings, with change alerts.\",\n tags: [\"Node.js\", \"Val.town\", \"REST APIs\"],\n link: \"#\",\n },\n];\n\nconst posts = [\n {\n slug: \"orm-vs-raw-sql\",\n date: \"Mar 10, 2026\",\n title: \"Why I stopped using ORM and went back to raw SQL\",\n excerpt: \"After years of Sequelize and Prisma, I hit a wall with complex queries. Here's what I learned switching back to pg and writing SQL by hand.\",\n tags: [\"Node.js\", \"PostgreSQL\", \"Backend\"],\n readTime: \"6 min read\",\n content: `\n## The problem with ORMs at scale\n\nI've used Sequelize, TypeORM, and Prisma across different projects. For simple CRUD apps they're great — you get type safety, migrations, and a nice API out of the box. But once your queries grow beyond a few joins, things start to fall apart.\n\nThe turning point for me was a reporting query at Dragonboat. It involved multiple CTEs, window functions, and conditional aggregations. The Prisma version was a wall of \\`$queryRaw\\` with TypeScript fighting me every step. The raw SQL version was clean, readable, and 3x faster.\n\n## What I switched to\n\nI moved to **[postgres](https://github.com/porsager/postgres)** (the \\`sql\\` package by porsager). It gives you tagged template literals with automatic parameterisation, so SQL injection is still handled correctly:\n\n\\`\\`\\`ts\nconst users = await sql\\`\n SELECT id, name, email\n FROM users\n WHERE active = true\n AND created_at > \\${since}\n ORDER BY created_at DESC\n LIMIT \\${limit}\n\\`;\n\\`\\`\\`\n\nNo magic. No hidden N+1 queries. No wondering what SQL your ORM is actually generating.\n\n## Migrations\n\nThe one thing ORMs genuinely do well is migrations. I replaced that with **[db-migrate](https://db-migrate.readthedocs.io/)** for structured migrations and a simple \\`schema.sql\\` file as source of truth. Not glamorous, but it works.\n\n## When I'd still use an ORM\n\n- Greenfield CRUD-heavy apps where speed of development matters more than performance\n- Teams where not everyone is comfortable with SQL\n- Simple one-table queries where the ORM adds zero friction\n\nFor anything else? Write the SQL. You'll thank yourself later.\n `,\n },\n {\n slug: \"valtown-scratchpad\",\n date: \"Feb 22, 2026\",\n title: \"Val.town is the scratchpad I always wanted\",\n excerpt: \"Deploying a cron job used to take 20 minutes of boilerplate. Now it's 30 seconds. A quick tour of how I use Val.town for side projects.\",\n tags: [\"Val.town\", \"TypeScript\", \"Automation\"],\n readTime: \"4 min read\",\n content: `\n## The old way\n\nBefore Val.town, deploying a simple cron job meant: create a repo, write a Dockerfile or serverless config, set up CI, configure environment variables, deploy to AWS Lambda or a VPS, set up CloudWatch or cron-job.org to trigger it... You get the idea.\n\nFor side projects and experiments, that overhead kills momentum.\n\n## Enter Val.town\n\nVal.town flips this completely. A cron job is just a TypeScript function:\n\n\\`\\`\\`ts\nexport default async function() {\n const res = await fetch(\"https://api.example.com/prices\");\n const data = await res.json();\n if (data.price > 50000) {\n await email({ subject: \"BTC above 50k!\", text: \\`Price: \\${data.price}\\` });\n }\n}\n\\`\\`\\`\n\nSet the schedule, hit save. It runs. That's it.\n\n## What I've built on it\n\n- **Crypto price alerts** — pings me when BTC or ETH move more than 5% in an hour\n- **Imóveis tracker** — scrapes Portuguese real estate listings for specific search criteria\n- **Football data pipeline** — ingests fbref match data, enriches with AI, exposes a REST API\n- **This portfolio** — served as an HTTP val\n\n## The catch\n\nVal.town has limits — execution time, storage, and egress. For production workloads, it's not a replacement for proper infrastructure. But for the 80% of side project needs? It's unbeatable.\n\nIf you haven't tried it, spend 10 minutes on [val.town](https://val.town). Your weekend projects will thank you.\n `,\n },\n {\n slug: \"react-server-components-one-year-in\",\n date: \"Jan 15, 2026\",\n title: \"React Server Components — one year in\",\n excerpt: \"We migrated part of Dragonboat to RSC last year. What worked, what didn't, and whether I'd do it again.\",\n tags: [\"React\", \"Frontend\", \"Performance\"],\n readTime: \"8 min read\",\n content: `\n## Context\n\nAt Dragonboat we have a large React codebase. Most of it is a classic SPA — client-side routing, Redux, REST API calls from the browser. Last year we started migrating our public-facing pages and some dashboard sections to React Server Components.\n\nHere's my honest take after 12 months.\n\n## What worked well\n\n**Data fetching is genuinely simpler.** Being able to \\`await\\` directly in a component, close to where the data is used, removes a lot of the boilerplate around loading states and effects:\n\n\\`\\`\\`tsx\nasync function RoadmapList({ teamId }: { teamId: string }) {\n const roadmaps = await db.roadmaps.findMany({ where: { teamId } });\n return

)}

${code.replace(//g, \">\")}

`\n )\n .replace(/^## (.+)$/gm, \"

$1

\")\n .replace(/\\*\\*(.+?)\\*\\*/g, \"$1\")\n .replace(/\\[(.+?)\\]\$(.+?)\$/g, '$1')\n .replace(/`([^`]+)`/g, \"$1\")\n .split(\"\\n\\n\")\n .map((block) =>\n block.startsWith(\"<\") ? block : block.trim() ? `

${block}

` : \"\"\n )\n .join(\"\\n\");\n}\n\n// ─── STYLES ──────────────────────────────────────────────────────────────────\n\nconst css = `\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n html { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; }\n\n body {\n background-color: #fafafa;\n color: #18181b;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n line-height: 1.6;\n }\n\n /* ── Spotlight glow ── */\n .glow {\n position: fixed;\n top: -20rem;\n left: 50%;\n transform: translateX(-50%);\n width: 80rem;\n height: 40rem;\n border-radius: 9999px;\n background: radial-gradient(ellipse at center, rgba(99,102,241,0.07) 0%, rgba(139,92,246,0.04) 40%, transparent 70%);\n pointer-events: none;\n z-index: -1;\n }\n\n /* ── Page shell ── */\n .page {\n max-width: 72rem;\n margin: 0 auto;\n padding: 5rem 1.5rem;\n display: flex;\n gap: 0;\n align-items: flex-start;\n }\n\n /* ── Sidebar ── */\n .sidebar {\n width: 22rem;\n flex-shrink: 0;\n position: sticky;\n top: 4rem;\n padding-right: 4rem;\n }\n\n .avatar {\n width: 4.5rem;\n height: 4.5rem;\n border-radius: 9999px;\n background: linear-gradient(135deg, #e4e4e7 0%, #a1a1aa 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n font-weight: 700;\n color: #52525b;\n margin-bottom: 1.25rem;\n border: 2px solid #e4e4e7;\n }\n\n .sidebar-name {\n font-size: 1.5rem;\n font-weight: 700;\n color: #18181b;\n letter-spacing: -0.03em;\n line-height: 1.2;\n margin-bottom: 0.25rem;\n }\n\n .sidebar-role {\n font-size: 0.875rem;\n font-weight: 500;\n color: #71717a;\n margin-bottom: 1rem;\n }\n\n .sidebar-bio {\n font-size: 0.875rem;\n color: #52525b;\n line-height: 1.65;\n margin-bottom: 1.75rem;\n }\n\n /* Sidebar nav */\n .sidebar-nav {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n margin-bottom: 1.75rem;\n }\n\n .sidebar-nav a {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n padding: 0.375rem 0.75rem;\n border-radius: 0.5rem;\n text-decoration: none;\n font-size: 0.875rem;\n font-weight: 500;\n color: #52525b;\n transition: background 0.15s, color 0.15s;\n }\n .sidebar-nav a:hover {\n background: #f4f4f5;\n color: #18181b;\n }\n .sidebar-nav a .nav-dot {\n width: 0.375rem;\n height: 0.375rem;\n border-radius: 9999px;\n background: #d4d4d8;\n flex-shrink: 0;\n transition: background 0.15s;\n }\n .sidebar-nav a:hover .nav-dot { background: #6366f1; }\n\n /* Sidebar socials */\n .sidebar-socials {\n display: flex;\n gap: 0.875rem;\n align-items: center;\n }\n .sidebar-socials a {\n color: #a1a1aa;\n text-decoration: none;\n font-size: 0.8rem;\n font-weight: 500;\n transition: color 0.15s;\n display: flex;\n align-items: center;\n gap: 0.3rem;\n }\n .sidebar-socials a:hover { color: #18181b; }\n\n /* ── Main content ── */\n .main { flex: 1; min-width: 0; }\n\n /* Mobile header (hidden on desktop) */\n .mobile-header { display: none; }\n\n /* ── Section ── */\n .section { margin-bottom: 3.5rem; }\n\n .section-label {\n font-size: 0.6875rem;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: #a1a1aa;\n margin-bottom: 1.25rem;\n }\n\n .section-title {\n font-size: 1.25rem;\n font-weight: 700;\n color: #18181b;\n letter-spacing: -0.025em;\n margin-bottom: 1.25rem;\n }\n\n /* ── Hero / intro ── */\n .intro-text {\n font-size: 1.0625rem;\n color: #3f3f46;\n line-height: 1.75;\n margin-bottom: 2rem;\n }\n .intro-text strong { color: #18181b; font-weight: 600; }\n .intro-text a { color: #18181b; font-weight: 600; text-decoration: underline; text-decoration-color: #d4d4d8; }\n .intro-text a:hover { text-decoration-color: #6366f1; }\n\n /* ── Divider ── */\n hr { border: none; border-top: 1px solid #f4f4f5; margin: 2.5rem 0; }\n\n /* ── Project cards ── */\n .project-card {\n padding: 1.25rem 0;\n border-bottom: 1px solid #f4f4f5;\n display: flex;\n gap: 1.25rem;\n align-items: flex-start;\n transition: background 0.15s;\n }\n .project-card:last-child { border-bottom: none; }\n\n .project-icon {\n width: 2.5rem;\n height: 2.5rem;\n border-radius: 0.5rem;\n background: linear-gradient(135deg, #f4f4f5, #e4e4e7);\n border: 1px solid #e4e4e7;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n flex-shrink: 0;\n }\n\n .project-info { flex: 1; min-width: 0; }\n\n .project-title {\n font-size: 0.9375rem;\n font-weight: 600;\n color: #18181b;\n text-decoration: none;\n line-height: 1.4;\n display: flex;\n align-items: center;\n gap: 0.375rem;\n }\n .project-title:hover { color: #6366f1; }\n .project-title .arrow { font-size: 0.75rem; color: #a1a1aa; }\n\n .project-desc {\n font-size: 0.875rem;\n color: #71717a;\n line-height: 1.55;\n margin-top: 0.25rem;\n margin-bottom: 0.75rem;\n }\n\n /* ── Tags ── */\n .tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }\n .tag {\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.5rem;\n border-radius: 9999px;\n background: #f4f4f5;\n color: #71717a;\n font-size: 0.6875rem;\n font-weight: 500;\n border: 1px solid #e4e4e7;\n letter-spacing: 0.01em;\n }\n\n /* ── Post cards ── */\n .post-card {\n padding: 1.5rem;\n border: 1px solid #f4f4f5;\n border-radius: 0.75rem;\n background: white;\n margin-bottom: 1rem;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n .post-card:hover {\n border-color: #e4e4e7;\n box-shadow: 0 4px 12px -2px rgba(0,0,0,0.05);\n }\n\n .post-meta {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n font-size: 0.75rem;\n color: #a1a1aa;\n margin-bottom: 0.5rem;\n font-variant-numeric: tabular-nums;\n }\n .post-meta .sep { color: #d4d4d8; }\n\n .post-title {\n font-size: 0.9375rem;\n font-weight: 600;\n color: #18181b;\n text-decoration: none;\n line-height: 1.45;\n display: block;\n margin-bottom: 0.375rem;\n }\n .post-title:hover { color: #6366f1; }\n\n .post-excerpt {\n font-size: 0.875rem;\n color: #71717a;\n line-height: 1.6;\n margin-bottom: 0.75rem;\n }\n\n .read-link {\n font-size: 0.8125rem;\n font-weight: 500;\n color: #52525b;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n margin-top: 0.625rem;\n }\n .read-link:hover { color: #6366f1; }\n\n /* ── Skills grid ── */\n .skills-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }\n .skill-chip {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.375rem 0.75rem;\n border-radius: 9999px;\n background: white;\n border: 1px solid #e4e4e7;\n font-size: 0.8125rem;\n font-weight: 500;\n color: #3f3f46;\n transition: border-color 0.15s, color 0.15s;\n }\n .skill-chip:hover { border-color: #a1a1aa; color: #18181b; }\n .skill-icon { font-size: 0.875rem; }\n\n /* ── Contact ── */\n .contact-row {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n .contact-item {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 0.875rem;\n color: #52525b;\n text-decoration: none;\n padding: 0.75rem 1rem;\n border: 1px solid #f4f4f5;\n border-radius: 0.625rem;\n background: white;\n transition: border-color 0.15s, color 0.15s;\n }\n .contact-item:hover { border-color: #d4d4d8; color: #18181b; }\n .contact-item .icon { font-size: 1rem; flex-shrink: 0; }\n\n /* ── Footer ── */\n footer {\n border-top: 1px solid #f4f4f5;\n padding-top: 1.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-top: 1rem;\n }\n footer p { font-size: 0.75rem; color: #a1a1aa; }\n footer .foot-links { display: flex; gap: 1.25rem; }\n footer .foot-links a { font-size: 0.75rem; color: #a1a1aa; text-decoration: none; }\n footer .foot-links a:hover { color: #71717a; }\n\n /* ── Post page ── */\n .post-page { max-width: 44rem; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }\n .back-link {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n font-size: 0.875rem;\n font-weight: 500;\n color: #71717a;\n text-decoration: none;\n margin-bottom: 2.5rem;\n transition: color 0.15s;\n }\n .back-link:hover { color: #18181b; }\n\n .post-header { margin-bottom: 2.5rem; }\n .post-header h1 { font-size: clamp(1.5rem, 3.5vw, 2.125rem); font-weight: 700; color: #18181b; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 0.75rem; }\n\n .post-body { color: #3f3f46; line-height: 1.75; }\n .post-body h2 { font-size: 1.1875rem; font-weight: 700; color: #18181b; margin: 2.25rem 0 0.875rem; letter-spacing: -0.025em; }\n .post-body p { margin-bottom: 1.25rem; }\n .post-body a { color: #6366f1; }\n .post-body strong { color: #18181b; font-weight: 600; }\n .post-body code { font-family: 'ui-monospace', 'SFMono-Regular', monospace; font-size: 0.875em; background: #f4f4f5; padding: 0.125rem 0.375rem; border-radius: 0.25rem; color: #52525b; }\n .post-body pre { background: #18181b; border-radius: 0.625rem; padding: 1.25rem; margin: 1.5rem 0; overflow-x: auto; }\n .post-body pre code { background: none; padding: 0; color: #d4d4d8; font-size: 0.8125rem; }\n .post-body ul { padding-left: 1.375rem; margin-bottom: 1.25rem; }\n .post-body ul li { margin-bottom: 0.375rem; }\n\n /* ── Responsive ── */\n @media (max-width: 1024px) {\n .sidebar { display: none; }\n .mobile-header { display: block; margin-bottom: 2.5rem; }\n .page { padding: 2.5rem 1.25rem; }\n }\n @media (max-width: 640px) {\n .page { padding: 1.75rem 1rem; }\n .post-page { padding: 2rem 1rem 3.5rem; }\n }\n`;\n\n// ─── SIDEBAR COMPONENT ────────────────────────────────────────────────────────\n\nfunction Sidebar() {\n return (\n \n );\n}\n\nfunction MobileHeader() {\n return (\n

\n {profile.initials}\n

{profile.name}

{profile.role}

{profile.bio}

\n {[\n { href: \"#intro\", label: \"About\" },\n { href: \"#projects\", label: \"Projects\" },\n { href: \"#writing\", label: \"Writing\" },\n { href: \"#skills\", label: \"Skills\" },\n { href: \"#contact\", label: \"Contact\" },\n ].map(({ href, label }) => (\n {label}\n ))}\n

\n );\n}\n\n// ─── HOME PAGE ────────────────────────────────────────────────────────────────\n\nfunction HomePage() {\n return (\n \n \n \n \n \n {profile.name} — {profile.role}\n \n \n \n

$1

\n Hi, I'm Nuno Silva\n Full-Stack Developer\n

About

Skills

Projects

{p.name}

Writing

{p.title}

Contact

Let's work together

{post.title}

$1

\n Hi, I'm Nuno Silva\n
Full-Stack Developer\n

Diff · v7