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

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_318":319,"_320":321},"routes/_app.x.$handle.$name",{"_98":97,"_31":42,"_106":88,"_26":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":24,"_121":122,"_123":57,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":52,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":24},"version",34,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","now.md","latestPath","fileId","19754d44-212b-11f1-8d05-42dde27851f2","name","fileType","content","---\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","createdAt",["D",1773660441954],"branchVersion","branchId","5680e34e-1d41-11f1-9a2e-42dde27851f2","id","5679b0d8-1d41-11f1-9a2e-42dde27851f2","my-portfolio",["D",1773230188571],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template for a markdown blog","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/44a31e5c-3e8a-48a8-d067-5785c0b08200/square512?exp=1789531199&sig=ffa3a7f41ab58c371a3e4ada2c2dd2a964bb5a2c2c9bd138d1b304a6042b8ba5","1e4d2157-cdd6-42c8-a0ed-7d707498307a","pinnedFileId","019cdcc1-687b-73e8-a526-d410d2c5adc7","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","eec31d76-5f30-4859-9ad3-ead49204cdd9","tursoName","5679b0d81d4111f19a2e42dde27851f2","tursoHostname","5679b0d81d4111f19a2e42dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789521041830],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":53,"_102":103,"_104":24},"branch",{"_13":87,"_31":88,"_40":39,"_89":41,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":42,"_96":97},"isOwned",47,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","nmsilva","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZlNYVHdvT3FqSExKd0Y5Qmx5WllLWVR6UjMifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":313,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":52,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":314,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":315,"_82":316,"_84":317,"_86":24},"tree",[184,191,198,199,200,201],"files",[184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201],"counts",{"_174":61,"_175":151,"_176":61,"_177":178,"_179":180},"contents",[128,129,130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_40":168,"_31":169,"_29":170,"_135":-5,"_38":39,"_37":171,"_136":57,"_35":172,"_13":61,"_32":166,"_33":-5,"_23":24,"_138":-5,"_26":173},{"_40":162,"_31":163,"_29":164,"_135":-5,"_38":39,"_37":151,"_136":57,"_35":165,"_13":61,"_32":166,"_33":-5,"_23":24,"_138":-5,"_26":167},{"_40":155,"_31":156,"_29":157,"_135":-5,"_38":39,"_37":151,"_136":57,"_35":158,"_13":61,"_32":159,"_33":160,"_23":24,"_138":-5,"_26":161},{"_40":148,"_31":149,"_29":150,"_135":-5,"_38":39,"_37":151,"_136":57,"_35":152,"_13":61,"_32":20,"_33":153,"_23":24,"_138":-5,"_26":154},{"_40":140,"_31":141,"_29":55,"_135":-5,"_38":39,"_37":142,"_136":24,"_35":143,"_13":144,"_32":145,"_33":146,"_23":24,"_138":-5,"_26":147},{"_40":134,"_31":27,"_29":30,"_135":-5,"_38":39,"_37":14,"_136":57,"_35":137,"_13":61,"_32":20,"_33":34,"_23":24,"_138":-5,"_26":139},"19754c7c-212b-11f1-8d05-42dde27851f2","parentId","latest",["D",1773660441954],"label",[27],"372250ea-212a-11f1-9260-42dde27851f2","index.tsx",33,["D",1773660062232],15,"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\";\n\n// Load post markdown files at startup (cached per cold start)\nconst BASE_URL = \"https://esm.town/v/nmsilva/my-portfolio/posts\";\nconst [ormVsRawSqlMd, valtownScratchpadMd, reactServerComponentsMd, footballStatsPipelineMd] =\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 ]);\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: \"I build robust backends and polished UIs. Focused on Node.js and React — I like systems that are fast, clean, and maintainable.\",\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 Alcofra, Portugal, currently at Dragonboat where I build product roadmap tooling for engineering and PM teams worldwide.\",\n intro_2: \"My stack is Node.js + TypeScript on the backend and React on the frontend. Outside of work I tinker with data pipelines, sports analytics, and automation — mostly on Val.town.\",\n contact_title: \"Contact\",\n contact_email_label: \"Email\",\n contact_github_label: \"GitHub\",\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 },\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: \"Construo backends robustos e interfaces cuidadas. Focado em Node.js e React — gosto de sistemas que sejam rápidos, limpos e fáceis de manter.\",\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 Alcofra, Portugal, atualmente na Dragonboat onde construo ferramentas de roadmap de produto para equipas de engenharia e produto em todo o mundo.\",\n intro_2: \"O meu stack é Node.js + TypeScript no backend e React no frontend. Fora do trabalho, experimento pipelines de dados, análise desportiva e automação — principalmente no Val.town.\",\n contact_title: \"Contacto\",\n contact_email_label: \"Email\",\n contact_github_label: \"GitHub\",\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 },\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 — 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 year: \"2023\",\n category: \"work\",\n icon: \"🚀\",\n preview: \"linear-gradient(135deg, #1e1b4b 0%, #3730a3 60%, #6366f1 100%)\",\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 year: \"2024\",\n category: \"side-project\",\n icon: \"⚽\",\n preview: \"linear-gradient(135deg, #064e3b 0%, #065f46 60%, #10b981 100%)\",\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 year: \"2024\",\n category: \"automation\",\n icon: \"📊\",\n preview: \"linear-gradient(135deg, #431407 0%, #9a3412 60%, #f97316 100%)\",\n },\n ],\n pt: [\n {\n name: \"Dragonboat — Plataforma de Roadmap\",\n desc: \"Construção de serviços backend escaláveis e UIs React para uma plataforma líder de gestão de produto utilizada por milhares de equipas em todo o mundo.\",\n tags: [\"Node.js\", \"React\", \"TypeScript\", \"PostgreSQL\"],\n link: \"https://dragonboat.io\",\n year: \"2023\",\n category: \"work\",\n icon: \"🚀\",\n preview: \"linear-gradient(135deg, #1e1b4b 0%, #3730a3 60%, #6366f1 100%)\",\n },\n {\n name: \"Pipeline de Dados de Futebol (fbref)\",\n desc: \"Pipeline automatizado de ingestão de dados e processamento enriquecido com IA para estatísticas de futebol — eventos, workers e resultados em direto.\",\n tags: [\"TypeScript\", \"Val.town\", \"Cron\", \"AI\"],\n link: \"#\",\n year: \"2024\",\n category: \"side-project\",\n icon: \"⚽\",\n preview: \"linear-gradient(135deg, #064e3b 0%, #065f46 60%, #10b981 100%)\",\n },\n {\n name: \"Monitores de Preços de Cripto e Imobiliário\",\n desc: \"Monitores agendados para preços de criptomoedas e listagens de imóveis em Portugal, com alertas de variação.\",\n tags: [\"Node.js\", \"Val.town\", \"REST APIs\"],\n link: \"#\",\n year: \"2024\",\n category: \"automation\",\n icon: \"📊\",\n preview: \"linear-gradient(135deg, #431407 0%, #9a3412 60%, #f97316 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\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 profile = {\n name: \"Nuno Silva\",\n initials: \"NS\",\n location: { en: \"Alcofra, Portugal\", pt: \"Alcofra, Portugal\" },\n email: \"nuno4slb@gmail.com\",\n github: \"https://github.com/nmsilva\",\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 }\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 /* ── 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// ─── COMPONENTS ──────────────────────────────────────────────────────────────\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 }: { lang: string; t: (k: string) => string; basePath: string }) {\n return (\n \n );\n}\n\nfunction MobileHeader({ lang, t, basePath }: { lang: string; t: (k: string) => string; basePath: string }) {\n return (\n

\n {profile.initials}\n

{profile.name}

{t(\"role\")}

\n \n

{t(\"bio\")}

\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

\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 {p.icon}\n {p.name}\n

\n\n {/* Card content */}\n

{p.icon}

\n \n {p.name}\n {p.link !== \"#\" && ↗}\n \n

{p.desc}

\n {p.tags.map((tag, j) => {tag})}\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 {year}\n

\n {grouped[year].map((p, i) => (\n \n ))}\n

\n ))}\n

\n );\n}\n\n// ─── HOME PAGE ────────────────────────────────────────────────────────────────\n\nfunction HomePage({ lang, basePath }: { lang: string; basePath: string }) {\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

Diff · v34