{profile.name} — {t(\"role\")}

`\n- `## headings` → ``\n- `**bold**` → ``\n- `[link](url)` → ``\n- Backtick inline code → ``\n- Parágrafos automáticos\n\n---\n\n## Outros Ficheiros do Projecto\n\n| Ficheiro | Tipo | Descrição |\n|----------|------|-----------|\n| `Layout.tsx` | script | Layout component básico (classless.css) — não usado pelo index.tsx principal |\n| `posts/001-first-post.md` | - | Post exemplo (não usado pelo index.tsx) |\n| `posts/002-second-post.md` | - | Post exemplo (não usado pelo index.tsx) |\n| `README.md` | - | README do projecto (template original) |\n\n---\n\n## URL de Produção\n\nhttps://nmsilva--019cdcc1687b73e8a526d410d2c5adc7.web.val.run\n\n---\n\n## Limitações Actuais\n\n- Sem hit counter (foi removido vs. versão antiga)\n- Markdown renderer básico (não usa `marked`)\n- Posts hardcoded no `index.tsx` (não lê ficheiros `.md` do projecto)\n- Sem favicon\n- Sem meta tags Open Graph\n- Sem RSS feed\n",[19,61],"7061242e-1f06-11f1-b393-42dde27851f2","README.md","b7f2de8c-1f05-11f1-8f3d-42dde27851f2",20,["D",1773424794077],3,"# Portfolio Documentation\n\nDocumentação do projecto `nmsilva/my-portfolio`.\n\n## Estrutura\n\n```\ndocs/\n  README.md              → Este ficheiro (índice)\n  implementation.md      → O que está implementado actualmente\n  improvements.md        → Lista de melhorias prioritárias\n  ideas/\n    features.md          → Ideias de novas funcionalidades\n    business.md          → Estratégias de negócio e monetização\n```\n\n## Links\n\n- **Portfolio live:** https://nmsilva--019cdcc1687b73e8a526d410d2c5adc7.web.val.run\n- **Código fonte:** https://www.val.town/x/nmsilva/my-portfolio/code/index.tsx\n\n## Stack\n\n- **Runtime:** Deno (Val Town HTTP val)\n- **UI:** React 18.2 SSR (`renderToString`)\n- **i18n:** Rosetta (EN + PT)\n- **Styling:** CSS inline custom\n- **Markdown:** Renderer próprio (regex)\n",[19,69],"1f8143cc-1f06-11f1-9061-42dde27851f2","ideas","65f8fa00-e562-450e-ac1a-657c25feda53",17,["D",1773424658391],"directory",[19,77],"b7f2fc14-1f05-11f1-8f3d-42dde27851f2",12,["D",1773424484647],[19],{"_37":83,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":84,"_48":49,"_50":220,"_17":52,"_53":81,"_54":-5,"_56":57,"_58":-5,"_103":221,"_18":222},{"_37":162,"_13":163,"_40":164,"_42":-5,"_44":45,"_46":65,"_48":49,"_50":165,"_17":52,"_53":81,"_54":-5,"_56":57,"_58":-5,"_103":166,"_18":167},{"_37":154,"_13":155,"_40":156,"_42":-5,"_44":45,"_46":157,"_48":49,"_50":158,"_17":52,"_53":24,"_54":159,"_56":57,"_58":-5,"_103":160,"_18":161},{"_37":146,"_13":147,"_40":148,"_42":-5,"_44":45,"_46":149,"_48":49,"_50":150,"_17":52,"_53":24,"_54":151,"_56":57,"_58":-5,"_103":152,"_18":153},{"_37":139,"_13":140,"_40":141,"_42":-5,"_44":45,"_46":65,"_48":49,"_50":142,"_17":52,"_53":121,"_54":143,"_56":57,"_58":-5,"_103":144,"_18":145},{"_37":133,"_13":69,"_40":134,"_42":-5,"_44":45,"_46":65,"_48":49,"_50":135,"_17":52,"_53":24,"_54":136,"_56":57,"_58":-5,"_103":137,"_18":138},{"_37":125,"_13":126,"_40":127,"_42":-5,"_44":45,"_46":128,"_48":49,"_50":129,"_17":52,"_53":24,"_54":130,"_56":57,"_58":-5,"_103":131,"_18":132},{"_37":116,"_13":117,"_40":118,"_42":-5,"_44":45,"_46":119,"_48":49,"_50":120,"_17":52,"_53":121,"_54":122,"_56":57,"_58":-5,"_103":123,"_18":124},{"_37":106,"_13":107,"_40":108,"_42":-5,"_44":45,"_46":109,"_48":49,"_50":110,"_17":111,"_53":112,"_54":113,"_56":57,"_58":-5,"_103":114,"_18":115},{"_37":97,"_13":98,"_40":99,"_42":-5,"_44":45,"_46":100,"_48":49,"_50":101,"_17":52,"_53":24,"_54":102,"_56":57,"_58":-5,"_103":104,"_18":105},"19754c7c-212b-11f1-8d05-42dde27851f2","now.md","19754d44-212b-11f1-8d05-42dde27851f2",34,["D",1773660441954],"---\nupdated: March 2026\n---\n\n## Working on\n\nAt **[Dragonboat](https://dragonboat.io)** — building permissions and UI for SR status categories. Lots of TypeScript and React.\n\nOn the side — adding interactive features to this portfolio on **[Val.town](https://val.town/u/nmsilva)**. It's a fun platform to build and ship fast.\n\n## Learning\n\nGoing deeper into **Val.town** as a runtime for lightweight apps. Also revisiting CSS — turns out there's always something new to learn.\n\n## Side projects\n\n- Football data pipeline with stats from fbref\n- ESP32 sensors at home\n\n## Based in\n\nAlcofra, Vouzela · **Portugal** 🇵🇹\n\n---pt---\n\n## A trabalhar em\n\nNa **[Dragonboat](https://dragonboat.io)** — a construir permissões e UI para categorias de estado. Muito TypeScript e React.\n\nComo side project — a adicionar features interactivas a este portfolio no **[Val.town](https://val.town/u/nmsilva)**. É uma plataforma boa para construir e lançar rápido.\n\n## A aprender\n\nA explorar melhor o **Val.town** como runtime para apps ligeiras. Também a rever CSS — há sempre algo novo.\n\n## Projectos pessoais\n\n- Pipeline de dados de futebol com estatísticas do fbref\n- Sensores ESP32 em casa\n\n## Baseado em\n\nAlcofra, Vouzela · **Portugal** 🇵🇹\n","children",[],[98],"4c0f2aaa-3f34-11f1-97fb-42b51c65c3df","index.tsx","019cdcc1-687b-73e8-a526-d410d2c5adc7",47,["D",1776962927156],24,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport rosetta from \"https://esm.sh/rosetta@1.1.0\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite?v=6\";\n\n// Load post markdown files at startup (cached per cold start)\nconst BASE_URL = \"https://esm.town/v/nmsilva/my-portfolio/posts\";\nconst ROOT_URL = \"https://esm.town/v/nmsilva/my-portfolio\";\nconst [ormVsRawSqlMd, valtownScratchpadMd, reactServerComponentsMd, footballStatsPipelineMd, nowMd] =\n  await Promise.all([\n    fetch(`${BASE_URL}/orm-vs-raw-sql.md`).then((r) => r.text()),\n    fetch(`${BASE_URL}/valtown-scratchpad.md`).then((r) => r.text()),\n    fetch(`${BASE_URL}/react-server-components-one-year-in.md`).then((r) => r.text()),\n    fetch(`${BASE_URL}/football-stats-pipeline.md`).then((r) => r.text()),\n    fetch(`${ROOT_URL}/now.md`).then((r) => r.text()),\n  ]);\n\n// ─── I18N ────────────────────────────────────────────────────────────────────\n\nconst i18n = rosetta({\n  en: {\n    about: \"About\",\n    projects: \"Projects\",\n    writing: \"Writing\",\n    skills: \"Skills\",\n    contact: \"Contact\",\n    role: \"Full-Stack Developer\",\n    bio: \"Full-stack developer with experience building web products across Node.js, React, TypeScript, Python, and PostgreSQL. I like ambitious projects and practical solutions to hard problems.\",\n    label_about: \"About\",\n    label_work: \"Work\",\n    label_blog: \"Blog\",\n    label_toolbox: \"Toolbox\",\n    label_contact: \"Get in touch\",\n    intro_1: \"I'm a full-stack developer based in Viseu, Portugal, currently working at Dragonboat on roadmap management software for product teams.\",\n    intro_2: \"My recent work is centered on Node.js / Express, React / Redux, and PostgreSQL. Earlier in my career I also built web applications with Python / Django and PHP.\",\n    contact_title: \"Contact\",\n    contact_email_label: \"Email\",\n    contact_github_label: \"GitHub\",\n    contact_linkedin_label: \"LinkedIn\",\n    contact_valtown_label: \"Val.town\",\n    back: \"← Back to home\",\n    read_article: \"Read article →\",\n    built_with: \"Built with Val.town\",\n    filter_all: \"All\",\n    // Now page\n    now_nav: \"/now\",\n    now_label: \"Now\",\n    now_updated: \"Last updated\",\n    now_back: \"← Back\",\n    now_blurb: \"A /now page tells you what I'm focused on at this point in my life. Updated manually.\",\n    now_credit: \"What is a now page?\",\n  },\n  pt: {\n    about: \"Sobre\",\n    projects: \"Projetos\",\n    writing: \"Artigos\",\n    skills: \"Competências\",\n    contact: \"Contacto\",\n    role: \"Programador Full-Stack\",\n    bio: \"Programador full-stack com experiência a construir produtos web com Node.js, React, TypeScript, Python e PostgreSQL. Gosto de projetos ambiciosos e de soluções práticas para problemas difíceis.\",\n    label_about: \"Sobre\",\n    label_work: \"Trabalho\",\n    label_blog: \"Blog\",\n    label_toolbox: \"Ferramentas\",\n    label_contact: \"Fala comigo\",\n    intro_1: \"Sou um programador full-stack de Viseu, Portugal, atualmente a trabalhar na Dragonboat em software de gestão de roadmap para equipas de produto.\",\n    intro_2: \"O meu trabalho mais recente centra-se em Node.js / Express, React / Redux e PostgreSQL. Numa fase anterior da carreira também desenvolvi aplicações web com Python / Django e PHP.\",\n    contact_title: \"Contacto\",\n    contact_email_label: \"Email\",\n    contact_github_label: \"GitHub\",\n    contact_linkedin_label: \"LinkedIn\",\n    contact_valtown_label: \"Val.town\",\n    back: \"← Voltar ao início\",\n    read_article: \"Ler artigo →\",\n    built_with: \"Feito com Val.town\",\n    filter_all: \"Todos\",\n    // Now page\n    now_nav: \"/now\",\n    now_label: \"Agora\",\n    now_updated: \"Última actualização\",\n    now_back: \"← Voltar\",\n    now_blurb: \"Uma página /now mostra no que estou focado neste momento. Actualizada manualmente.\",\n    now_credit: \"O que é uma página now?\",\n  },\n});\n\n// ─── TRANSLATED DATA ─────────────────────────────────────────────────────────\n\ntype Project = {\n  name: string;\n  desc: string;\n  tags: string[];\n  link: string;\n  year: string;\n  category: \"work\" | \"side-project\" | \"automation\";\n  icon: string;\n  preview: string;\n};\n\nconst projects: { en: Project[]; pt: Project[] } = {\n  en: [\n    {\n      name: \"Dragonboat — Full Stack Developer\",\n      desc: \"Since 2018, building new features, fixing bugs, and writing unit tests for a roadmap management product. Main stack: Node.js, Express, React, Redux, PostgreSQL, and Sequelize.\",\n      tags: [\"Node.js\", \"Express\", \"React\", \"Redux\", \"PostgreSQL\"],\n      link: \"https://dragonboat.io\",\n      year: \"2018\",\n      category: \"work\",\n      icon: \"🚀\",\n      preview: \"linear-gradient(135deg, #1e1b4b 0%, #3730a3 60%, #6366f1 100%)\",\n    },\n    {\n      name: \"Ubiwhere — Software Developer\",\n      desc: \"Worked on support and feature development for web applications in Django, Python, HTML5, and CSS3, including outsourcing projects for Bikeemotion and Altice Labs.\",\n      tags: [\"Python\", \"Django\", \"HTML5\", \"CSS3\"],\n      link: \"#\",\n      year: \"2013\",\n      category: \"work\",\n      icon: \"🛠️\",\n      preview: \"linear-gradient(135deg, #14532d 0%, #166534 60%, #22c55e 100%)\",\n    },\n    {\n      name: \"Digitalforce — Software Developer\",\n      desc: \"Built an ecommerce website in native PHP and gained hands-on experience with HTML, CSS, JavaScript, jQuery, MySQL, and integrations such as Facebook APIs and PayPal payments.\",\n      tags: [\"PHP\", \"JavaScript\", \"jQuery\", \"MySQL\"],\n      link: \"#\",\n      year: \"2011\",\n      category: \"work\",\n      icon: \"🛒\",\n      preview: \"linear-gradient(135deg, #7c2d12 0%, #c2410c 60%, #fb923c 100%)\",\n    },\n  ],\n  pt: [\n    {\n      name: \"Dragonboat — Programador Full Stack\",\n      desc: \"Desde 2018, a desenvolver novas funcionalidades, corrigir bugs e escrever testes unitários num produto de gestão de roadmap. Stack principal: Node.js, Express, React, Redux, PostgreSQL e Sequelize.\",\n      tags: [\"Node.js\", \"Express\", \"React\", \"Redux\", \"PostgreSQL\"],\n      link: \"https://dragonboat.io\",\n      year: \"2018\",\n      category: \"work\",\n      icon: \"🚀\",\n      preview: \"linear-gradient(135deg, #1e1b4b 0%, #3730a3 60%, #6366f1 100%)\",\n    },\n    {\n      name: \"Ubiwhere — Programador de Software\",\n      desc: \"Trabalhei em suporte e desenvolvimento de novas funcionalidades para aplicações web em Django, Python, HTML5 e CSS3, incluindo projetos em outsourcing para a Bikeemotion e a Altice Labs.\",\n      tags: [\"Python\", \"Django\", \"HTML5\", \"CSS3\"],\n      link: \"#\",\n      year: \"2013\",\n      category: \"work\",\n      icon: \"🛠️\",\n      preview: \"linear-gradient(135deg, #14532d 0%, #166534 60%, #22c55e 100%)\",\n    },\n    {\n      name: \"Digitalforce — Programador de Software\",\n      desc: \"Desenvolvi um website de ecommerce em PHP nativo e ganhei experiência prática com HTML, CSS, JavaScript, jQuery, MySQL e integrações como APIs do Facebook e pagamentos PayPal.\",\n      tags: [\"PHP\", \"JavaScript\", \"jQuery\", \"MySQL\"],\n      link: \"#\",\n      year: \"2011\",\n      category: \"work\",\n      icon: \"🛒\",\n      preview: \"linear-gradient(135deg, #7c2d12 0%, #c2410c 60%, #fb923c 100%)\",\n    },\n  ],\n};\n\n// Posts keep their content in English only (technical writing is usually in EN)\n// ─── POST LOADER ─────────────────────────────────────────────────────────────\n\nfunction parseFrontmatter(raw: string): { data: Record; content: string } {\n  const match = raw.match(/^---\\n([\\s\\S]*?)\\n---\\n([\\s\\S]*)$/);\n  if (!match) return { data: {}, content: raw };\n  const data: Record = {};\n  for (const line of match[1].split(\"\\n\")) {\n    const i = line.indexOf(\":\");\n    if (i === -1) continue;\n    data[line.slice(0, i).trim()] = line.slice(i + 1).trim();\n  }\n  return { data, content: match[2].trim() };\n}\n\nfunction parsePost(raw: string) {\n  const { data, content } = parseFrontmatter(raw);\n  const parts = content.split(\"\\n---pt---\\n\");\n  return {\n    slug: data.slug,\n    date: data.date,\n    readTime: { en: data.readTime_en, pt: data.readTime_pt },\n    title: { en: data.title_en, pt: data.title_pt },\n    excerpt: { en: data.excerpt_en, pt: data.excerpt_pt },\n    tags: data.tags.split(\",\").map((t: string) => t.trim()),\n    content: { en: parts[0].trim(), pt: (parts[1] ?? parts[0]).trim() },\n  };\n}\n\nconst posts = [\n  ormVsRawSqlMd,\n  valtownScratchpadMd,\n  reactServerComponentsMd,\n  footballStatsPipelineMd,\n].map(parsePost);\n\n// ─── NOW PAGE DATA ────────────────────────────────────────────────────────────\n\nfunction parseNow(raw: string): { updated: string; content: { en: string; pt: string } } {\n  const { data, content } = parseFrontmatter(raw);\n  const parts = content.split(\"\\n---pt---\\n\");\n  return {\n    updated: data.updated ?? \"\",\n    content: { en: parts[0].trim(), pt: (parts[1] ?? parts[0]).trim() },\n  };\n}\n\nconst nowData = parseNow(nowMd);\n\n\nconst skills = [\n  { icon: \"🟩\", name: \"Node.js\" },\n  { icon: \"⚛️\", name: \"React\" },\n  { icon: \"🟨\", name: \"JavaScript\" },\n  { icon: \"🟦\", name: \"TypeScript\" },\n  { icon: \"🧭\", name: \"Redux\" },\n  { icon: \"🎨\", name: \"CSS\" },\n  { icon: \"🚏\", name: \"Express\" },\n  { icon: \"🐍\", name: \"Python\" },\n  { icon: \"🌿\", name: \"Django\" },\n  { icon: \"🐘\", name: \"PostgreSQL\" },\n  { icon: \"🍃\", name: \"MongoDB\" },\n  { icon: \"🐳\", name: \"Docker\" },\n  { icon: \"🔀\", name: \"Git\" },\n  { icon: \"⚡\", name: \"Redis\" },\n  { icon: \"🐘\", name: \"PHP\" },\n  { icon: \"💠\", name: \"jQuery\" },\n];\n\nconst profile = {\n  name: \"Nuno Silva\",\n  initials: \"NS\",\n  photo: \"/avatar.jpg\",\n  location: { en: \"Viseu, Portugal\", pt: \"Viseu, Portugal\" },\n  email: \"nmsilva90s@gmail.com\",\n  github: \"https://github.com/nmsilva\",\n  linkedin: \"https://www.linkedin.com/in/nuno-silva-25530a27\",\n  valtown: \"https://www.val.town/u/nmsilva\",\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    .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  html { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; }\n  body { background-color: #fafafa; color: #18181b; -webkit-font-smoothing: antialiased; line-height: 1.6; }\n\n  .glow {\n    position: fixed; top: -20rem; left: 50%; transform: translateX(-50%);\n    width: 80rem; height: 40rem; border-radius: 9999px; pointer-events: none; z-index: -1;\n    background: radial-gradient(ellipse at center, rgba(99,102,241,0.07) 0%, rgba(139,92,246,0.04) 40%, transparent 70%);\n  }\n\n  .page { max-width: 72rem; margin: 0 auto; padding: 5rem 1.5rem; display: flex; gap: 0; align-items: flex-start; }\n\n  /* ── Sidebar ── */\n  .sidebar { width: 22rem; flex-shrink: 0; position: sticky; top: 4rem; padding-right: 4rem; }\n  .avatar {\n    width: 4.5rem; height: 4.5rem; border-radius: 9999px;\n    background: linear-gradient(135deg, #e4e4e7 0%, #a1a1aa 100%);\n    display: flex; align-items: center; justify-content: center;\n    font-size: 1.5rem; font-weight: 700; color: #52525b;\n    margin-bottom: 1.25rem; border: 2px solid #e4e4e7;\n    overflow: hidden; flex-shrink: 0;\n  }\n  .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }\n  .sidebar-name { font-size: 1.5rem; font-weight: 700; color: #18181b; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 0.25rem; }\n  .sidebar-role { font-size: 0.875rem; font-weight: 500; color: #71717a; margin-bottom: 1rem; }\n  .sidebar-bio { font-size: 0.875rem; color: #52525b; line-height: 1.65; margin-bottom: 1.75rem; }\n\n  .sidebar-nav { list-style: none; display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 1.75rem; }\n  .sidebar-nav a {\n    display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.75rem;\n    border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: 500;\n    color: #52525b; transition: background 0.15s, color 0.15s;\n  }\n  .sidebar-nav a:hover { background: #f4f4f5; color: #18181b; }\n  .sidebar-nav a .nav-dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: #d4d4d8; flex-shrink: 0; transition: background 0.15s; }\n  .sidebar-nav a:hover .nav-dot { background: #6366f1; }\n\n  .sidebar-socials { display: flex; gap: 0.875rem; align-items: center; margin-bottom: 1.25rem; }\n  .sidebar-socials a { color: #a1a1aa; text-decoration: none; font-size: 0.8rem; font-weight: 500; transition: color 0.15s; }\n  .sidebar-socials a:hover { color: #18181b; }\n\n  /* ── Lang toggle ── */\n  .lang-toggle { display: flex; align-items: center; gap: 0.25rem; }\n  .lang-btn {\n    padding: 0.2rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600;\n    text-decoration: none; color: #a1a1aa; transition: background 0.15s, color 0.15s; letter-spacing: 0.03em;\n  }\n  .lang-btn:hover { color: #52525b; }\n  .lang-btn.active { background: #f4f4f5; color: #18181b; }\n  .lang-sep { color: #d4d4d8; font-size: 0.75rem; }\n\n  /* ── Main ── */\n  .main { flex: 1; min-width: 0; }\n  .mobile-header { display: none; }\n\n  /* ── Sections ── */\n  .section { margin-bottom: 3.5rem; }\n  .section-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #a1a1aa; margin-bottom: 1.25rem; }\n  .section-title { font-size: 1.25rem; font-weight: 700; color: #18181b; letter-spacing: -0.025em; margin-bottom: 1.25rem; }\n  hr { border: none; border-top: 1px solid #f4f4f5; margin: 2.5rem 0; }\n\n  .intro-text { font-size: 1.0625rem; color: #3f3f46; line-height: 1.75; margin-bottom: 1.25rem; }\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  .intro-text:last-child { margin-bottom: 0; }\n\n  /* ── Filter Bar ── */\n  .filter-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.75rem; }\n  .filter-btn {\n    padding: 0.3125rem 0.875rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 500;\n    border: 1px solid #e4e4e7; background: white; color: #71717a; cursor: pointer;\n    transition: background 0.15s, border-color 0.15s, color 0.15s; font-family: inherit; line-height: 1.5;\n  }\n  .filter-btn:hover { border-color: #a1a1aa; color: #18181b; }\n  .filter-btn.active { background: #18181b; border-color: #18181b; color: white; }\n\n  /* ── Timeline ── */\n  .timeline { padding-left: 1.75rem; position: relative; }\n  .timeline::before {\n    content: ''; position: absolute; left: 0.5rem; top: 0.5rem; bottom: 1rem;\n    width: 1.5px; background: linear-gradient(to bottom, #e4e4e7 0%, transparent 100%);\n  }\n  .timeline-group { margin-bottom: 0.25rem; }\n  .timeline-year-marker {\n    display: flex; align-items: center; gap: 0.625rem;\n    margin-bottom: 0.75rem; position: relative; left: -1.75rem;\n  }\n  .timeline-year-dot {\n    width: 0.625rem; height: 0.625rem; border-radius: 9999px;\n    background: white; border: 2px solid #6366f1; flex-shrink: 0;\n  }\n  .timeline-year-label { font-size: 0.6875rem; font-weight: 700; color: #6366f1; letter-spacing: 0.08em; text-transform: uppercase; }\n\n  /* ── Project cards ── */\n  .project-card {\n    padding: 1.125rem 0; border-bottom: 1px solid #f4f4f5;\n    display: flex; gap: 1.25rem; align-items: flex-start;\n    position: relative;\n  }\n  .project-card:last-child { border-bottom: none; }\n\n  /* ── Hover preview ── */\n  .project-preview {\n    position: absolute; bottom: calc(100% + 0.625rem); left: 0; right: 0;\n    border-radius: 0.75rem; overflow: hidden; z-index: 20;\n    box-shadow: 0 20px 48px -8px rgba(0,0,0,0.18), 0 4px 16px -4px rgba(0,0,0,0.1);\n    opacity: 0; transform: translateY(0.5rem); pointer-events: none;\n    transition: opacity 0.18s ease, transform 0.18s ease;\n  }\n  .project-card:hover .project-preview { opacity: 1; transform: translateY(0); }\n  .preview-chrome {\n    background: #1c1c2e; height: 1.75rem; display: flex; align-items: center;\n    padding: 0 0.75rem; gap: 0.375rem; flex-shrink: 0;\n  }\n  .preview-chrome-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; }\n  .preview-body {\n    height: 6.5rem; display: flex; align-items: center; justify-content: center;\n    flex-direction: column; gap: 0.5rem;\n    font-size: 2.25rem; position: relative; overflow: hidden;\n  }\n  .preview-body::after {\n    content: ''; position: absolute; inset: 0;\n    background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 60%);\n  }\n  .preview-title {\n    position: absolute; bottom: 0.75rem; left: 0; right: 0;\n    text-align: center; font-size: 0.75rem; font-weight: 600;\n    color: rgba(255,255,255,0.85); padding: 0 1rem;\n    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    z-index: 1;\n  }\n\n  .project-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: linear-gradient(135deg, #f4f4f5, #e4e4e7); border: 1px solid #e4e4e7; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }\n  .project-info { flex: 1; min-width: 0; }\n  .project-title { font-size: 0.9375rem; font-weight: 600; color: #18181b; text-decoration: none; line-height: 1.4; display: flex; align-items: center; gap: 0.375rem; }\n  .project-title:hover { color: #6366f1; }\n  .project-title .arrow { font-size: 0.75rem; color: #a1a1aa; }\n  .project-desc { font-size: 0.875rem; color: #71717a; line-height: 1.55; margin-top: 0.25rem; margin-bottom: 0.75rem; }\n\n  /* ── Tags ── */\n  .tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }\n  .tag { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; background: #f4f4f5; color: #71717a; font-size: 0.6875rem; font-weight: 500; border: 1px solid #e4e4e7; letter-spacing: 0.01em; }\n\n  /* ── Post cards ── */\n  .post-card { padding: 1.5rem; border: 1px solid #f4f4f5; border-radius: 0.75rem; background: white; margin-bottom: 1rem; transition: border-color 0.15s, box-shadow 0.15s; }\n  .post-card:hover { border-color: #e4e4e7; box-shadow: 0 4px 12px -2px rgba(0,0,0,0.05); }\n  .post-meta { display: flex; align-items: center; gap: 0.625rem; font-size: 0.75rem; color: #a1a1aa; margin-bottom: 0.5rem; }\n  .post-meta .sep { color: #d4d4d8; }\n  .post-title { font-size: 0.9375rem; font-weight: 600; color: #18181b; text-decoration: none; line-height: 1.45; display: block; margin-bottom: 0.375rem; }\n  .post-title:hover { color: #6366f1; }\n  .post-excerpt { font-size: 0.875rem; color: #71717a; line-height: 1.6; margin-bottom: 0.75rem; }\n  .read-link { font-size: 0.8125rem; font-weight: 500; color: #52525b; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.625rem; }\n  .read-link:hover { color: #6366f1; }\n\n  /* ── Skills ── */\n  .skills-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }\n  .skill-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 9999px; background: white; border: 1px solid #e4e4e7; font-size: 0.8125rem; font-weight: 500; color: #3f3f46; transition: border-color 0.15s, color 0.15s; }\n  .skill-chip:hover { border-color: #a1a1aa; color: #18181b; }\n  .skill-icon { font-size: 0.875rem; }\n\n  /* ── Contact ── */\n  .contact-row { display: flex; flex-direction: column; gap: 0.75rem; }\n  .contact-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: #52525b; text-decoration: none; padding: 0.75rem 1rem; border: 1px solid #f4f4f5; border-radius: 0.625rem; background: white; transition: border-color 0.15s, color 0.15s; }\n  .contact-item:hover { border-color: #d4d4d8; color: #18181b; }\n  .contact-item .icon { font-size: 1rem; flex-shrink: 0; }\n  .contact-detail { font-weight: 600; color: #18181b; font-size: 0.875rem; }\n  .contact-sub { color: #a1a1aa; font-size: 0.8125rem; }\n\n  /* ── Footer ── */\n  footer { border-top: 1px solid #f4f4f5; padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }\n  footer p { font-size: 0.75rem; color: #a1a1aa; }\n  .foot-links { display: flex; gap: 1.25rem; }\n  .foot-links a { font-size: 0.75rem; color: #a1a1aa; text-decoration: none; }\n  .foot-links a:hover { color: #71717a; }\n\n  /* ── Now page ── */\n  .now-page { max-width: 40rem; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }\n  .now-header { margin-bottom: 2.5rem; }\n  .now-title { font-size: 2.5rem; font-weight: 800; color: #18181b; letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.75rem; }\n  .now-updated { font-size: 0.8125rem; color: #a1a1aa; font-weight: 500; }\n  .now-updated span { color: #71717a; }\n  .now-blurb { font-size: 0.875rem; color: #a1a1aa; line-height: 1.6; margin-top: 1.25rem; padding: 1rem 1.25rem; border: 1px solid #f4f4f5; border-radius: 0.625rem; background: #fafafa; }\n  .now-blurb a { color: #6366f1; text-decoration: none; }\n  .now-blurb a:hover { text-decoration: underline; }\n  .now-body { color: #3f3f46; line-height: 1.8; }\n  .now-body h2 { font-size: 1rem; font-weight: 700; color: #18181b; margin: 2rem 0 0.625rem; letter-spacing: -0.02em; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.1em; color: #a1a1aa; }\n  .now-body p { margin-bottom: 1rem; font-size: 1rem; }\n  .now-body a { color: #18181b; font-weight: 600; text-decoration: underline; text-decoration-color: #d4d4d8; }\n  .now-body a:hover { text-decoration-color: #6366f1; }\n  .now-body strong { color: #18181b; font-weight: 600; }\n  .now-body ul { padding-left: 1.25rem; margin-bottom: 1rem; }\n  .now-body ul li { margin-bottom: 0.25rem; font-size: 1rem; color: #52525b; }\n  .now-nav-hint { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #f4f4f5; display: flex; justify-content: space-between; align-items: center; }\n\n  /* ── Post page ── */\n  .post-page { max-width: 44rem; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }\n  .back-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; color: #71717a; text-decoration: none; margin-bottom: 2.5rem; transition: color 0.15s; }\n  .back-link:hover { color: #18181b; }\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  .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    .project-preview { display: none; }\n  }\n`;\n\n// ─── FILTER + PROJECTS JS ─────────────────────────────────────────────────────\n\nconst filterScript = `\n(function () {\n  var btns = document.querySelectorAll('.filter-btn');\n  var cards = document.querySelectorAll('.project-card[data-tags]');\n  var groups = document.querySelectorAll('.timeline-group');\n\n  btns.forEach(function (btn) {\n    btn.addEventListener('click', function () {\n      var filter = this.dataset.filter;\n      btns.forEach(function (b) { b.classList.remove('active'); });\n      this.classList.add('active');\n\n      cards.forEach(function (card) {\n        var tags = card.dataset.tags.split(',');\n        var show = filter === 'all' || tags.indexOf(filter) !== -1;\n        card.style.display = show ? '' : 'none';\n      });\n\n      groups.forEach(function (group) {\n        var hasVisible = Array.from(group.querySelectorAll('.project-card')).some(function (c) {\n          return c.style.display !== 'none';\n        });\n        group.style.display = hasVisible ? '' : 'none';\n      });\n    });\n  });\n})();\n`;\n\n// ─── AVAILABILITY ────────────────────────────────────────────────────────────\n\nasync function getAvailabilityStatus(): Promise<\"available\" | \"booked\"> {\n  await sqlite.batch([\n    `CREATE TABLE IF NOT EXISTS portfolio_availability (\n      id INTEGER PRIMARY KEY CHECK (id = 1),\n      status TEXT NOT NULL DEFAULT 'available',\n      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )`,\n    `INSERT OR IGNORE INTO portfolio_availability (id, status) VALUES (1, 'available')`,\n  ]);\n  const { rows } = await sqlite.execute(\n    \"SELECT status FROM portfolio_availability WHERE id = 1\"\n  );\n  const s = rows.length > 0 ? (rows[0][0] as string) : \"available\";\n  return s === \"booked\" ? \"booked\" : \"available\";\n}\n\n// ─── COMPONENTS ──────────────────────────────────────────────────────────────\n\nfunction AvailabilityBadge({ status }: { status: \"available\" | \"booked\" }) {\n  const isAvailable = status === \"available\";\n  return (\n    \n      {isAvailable ? \"✅ Available\" : \"🔴 Fully booked\"}\n    \n  );\n}\n\nfunction LangToggle({ lang, basePath }: { lang: string; basePath: string }) {\n  return (\n    \n      EN\n      /\n      PT\n    
\n  );\n}\n\nfunction Sidebar({ lang, t, basePath, availability }: { lang: string; t: (k: string) => string; basePath: string; availability: \"available\" | \"booked\" }) {\n  return (\n    \n      \n        \n      
\n      {profile.name}
\n      {t(\"role\")} · {profile.location[lang as \"en\" | \"pt\"]}
\n      \n        \n      
\n      {t(\"bio\")}
\n      \n        {[\n          { href: \"#intro\", key: \"about\" },\n          { href: \"#projects\", key: \"projects\" },\n          { href: \"#writing\", key: \"writing\" },\n          { href: \"#skills\", key: \"skills\" },\n          { href: \"#contact\", key: \"contact\" },\n        ].map(({ href, key }) => (\n          \n            \n              \n              {t(key)}\n            \n          
\n        ))}\n        \n          \n            \n            {t(\"now_label\")} ↗\n          \n        
\n      
\n      \n        ✉ Email\n        GitHub\n        LinkedIn\n        Val.town\n      
\n      \n    
\n  );\n}\n\nfunction MobileHeader({ lang, t, basePath, availability }: { lang: string; t: (k: string) => string; basePath: string; availability: \"available\" | \"booked\" }) {\n  return (\n    \n      \n        \n          \n            \n          
\n          \n            {profile.name}
\n            {t(\"role\")}
\n          
\n        
\n        \n      
\n      \n        \n      
\n      {t(\"bio\")}
\n      \n        {[\n          { href: \"#intro\", key: \"about\" },\n          { href: \"#projects\", key: \"projects\" },\n          { href: \"#writing\", key: \"writing\" },\n          { href: \"#skills\", key: \"skills\" },\n          { href: \"#contact\", key: \"contact\" },\n        ].map(({ href, key }) => (\n          {t(key)}\n        ))}\n        {t(\"now_label\")}\n      
\n      
\n    
\n  );\n}\n\n// Collect all unique tags from all projects (for the filter bar)\nfunction getAllTags(proj: Project[]): string[] {\n  const set = new Set();\n  proj.forEach((p) => p.tags.forEach((t) => set.add(t)));\n  return Array.from(set).sort();\n}\n\nfunction ProjectCard({ p, lang }: { p: Project; lang: string }) {\n  return (\n    \n      {/* Hover preview */}\n      \n        \n          \n          \n          \n        
\n        \n          {p.icon}\n          {p.name}\n        
\n      
\n\n      {/* Card content */}\n      {p.icon}
\n      \n        \n          {p.name}\n          {p.link !== \"#\" && ↗}\n        \n        {p.desc}
\n        \n          {p.tags.map((tag, j) => {tag})}\n        
\n      
\n    
\n  );\n}\n\nfunction ProjectsTimeline({ proj, lang, filterAll }: { proj: Project[]; lang: string; filterAll: string }) {\n  // Collect unique tags for filter bar\n  const allTags = getAllTags(proj);\n\n  // Group by year (descending)\n  const grouped: Record = {};\n  for (const p of proj) {\n    if (!grouped[p.year]) grouped[p.year] = [];\n    grouped[p.year].push(p);\n  }\n  const years = Object.keys(grouped).sort((a, b) => Number(b) - Number(a));\n\n  return (\n    \n      {/* Filter Bar */}\n      \n        \n        {allTags.map((tag) => (\n          \n        ))}\n      
\n\n      {/* Timeline */}\n      \n        {years.map((year) => (\n          \n            \n              \n              {year}\n            
\n            {grouped[year].map((p, i) => (\n              \n            ))}\n          
\n        ))}\n      
\n    
\n  );\n}\n\n// ─── HOME PAGE ────────────────────────────────────────────────────────────────\n\nfunction HomePage({ lang, basePath, availability }: { lang: string; basePath: string; availability: \"available\" | \"booked\" }) {\n  i18n.locale(lang);\n  const t = (key: string) => i18n.t(key) as string;\n  const proj = projects[lang as \"en\" | \"pt\"];\n\n  return (\n    \n      \n        \n        \n        \n        {profile.name} — {t(\"role\")}\n        \n        \n        \n