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

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_266":267,"_268":269},"routes/_app.x.$handle.$name",{"_106":105,"_32":50,"_114":96,"_27":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_21":-5,"_126":-5,"_127":-5,"_128":25,"_129":130,"_131":65,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_48":49,"_32":50,"_37":51,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":58,"_59":60,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":25},"version",17,"changes",[19,20],"aiChatInfo","userId",{"_21":42,"_23":-7,"_24":25,"_26":25,"_27":43,"_29":43},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":-5,"_37":38,"_39":14,"_40":41,"_24":25},"previous","deleted",false,"deletedHere","path","docs/ideas","latestPath","fileId","65f8fa00-e562-450e-ac1a-657c25feda53","name","ideas","fileType","directory","content","createdAt",["D",1773424658391],"branchVersion","branchId","5680e34e-1d41-11f1-9a2e-42dde27851f2",{"_30":44,"_32":45,"_34":21,"_36":46,"_37":47,"_39":14,"_40":41,"_24":25},"docs/ideas/features.md","1f81093e-1f06-11f1-9061-42dde27851f2","features.md","# Ideias de Funcionalidades\n\n## Conteúdo & Apresentação\n\n### Portfolio Interactivo\n- Cards de projecto com preview (screenshot ao hover)\n- Filtros por tecnologia / categoria\n- Timeline visual de projectos\n\n### Página \"Now\" (nownownow.com)\n- `/now` — o que estou a fazer agora\n- Actualização manual, humaniza o portfolio\n\n### Case Studies\n- Página dedicada por projecto: Problema → Solução → Resultado\n- Stack, screenshots, links\n\n### Status de Disponibilidade\n- Badge no header: \"✅ Available\" / \"🔴 Fully booked\"\n- Actualizado manualmente\n\n---\n\n## Blog & Escrita\n\n### Série de Posts\n- Agrupar posts relacionados em séries\n- Navegação entre posts da mesma série\n\n### Tempo de Leitura\n- \"5 min read\" calculado por post\n\n### Comentários Simples\n- Via email (reply envia email ao autor)\n- Ou giscus (GitHub Discussions)\n\n### Posts Relacionados\n- 2-3 posts sugeridos no final por tags\n\n---\n\n## Interacção\n\n### Reactions nos Posts\n- Emoji reactions (👍 ❤️ 🔥) guardadas em SQLite\n- Sem login necessário\n\n### Chat → Telegram\n- Widget de contacto que notifica via Telegram bot\n\n### Contador Público com Gráfico\n- Histórico de visitas (last 7 days) em SVG simples\n\n### API Pública\n- `/api/projects` retorna JSON com projectos\n- Permite embeds noutros sites\n\n---\n\n## Técnico\n\n### QR Code Dinâmico\n- `/qr` gera QR code com link do portfolio\n- Útil para cartões de visita digitais\n\n### Modo Apresentação\n- `/slides` — versão simplificada para reuniões\n- Navegação por teclado\n\n### Webhook GitHub\n- Push no repo → portfolio actualiza automaticamente\n",["D",1773424658391],"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",{"_106":105,"_113":109},"org",{"_106":105,"_107":-5,"_108":109,"_18":61,"_110":111,"_112":25},"branch",{"_13":95,"_32":96,"_48":41,"_97":49,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":50,"_104":105},"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",{"_48":49,"_32":50,"_37":261,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":58,"_59":60,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":262,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":263,"_90":264,"_92":265,"_94":25},"tree",[187,193,196,197,198],"files",[187,188,189,190,191,192,193,194,195,196,197,198],"counts",{"_177":69,"_178":155,"_179":69,"_180":181,"_182":183},"contents",[136,137,138,139,140],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":171,"_32":172,"_30":173,"_143":-5,"_40":41,"_39":174,"_145":65,"_37":175,"_13":69,"_34":35,"_36":-5,"_24":25,"_150":-5,"_27":176},{"_48":166,"_32":167,"_30":168,"_143":-5,"_40":41,"_39":155,"_145":65,"_37":169,"_13":69,"_34":35,"_36":-5,"_24":25,"_150":-5,"_27":170},{"_48":159,"_32":160,"_30":161,"_143":-5,"_40":41,"_39":155,"_145":65,"_37":162,"_13":69,"_34":163,"_36":164,"_24":25,"_150":-5,"_27":165},{"_48":152,"_32":153,"_30":154,"_143":-5,"_40":41,"_39":155,"_145":65,"_37":156,"_13":69,"_34":21,"_36":157,"_24":25,"_150":-5,"_27":158},{"_48":141,"_32":142,"_30":63,"_143":-5,"_40":41,"_39":144,"_145":25,"_37":146,"_13":147,"_34":148,"_36":149,"_24":25,"_150":-5,"_27":151},"efba7f18-1efc-11f1-b3bf-42dde27851f2","index.tsx","parentId",11,"latest",["D",1773420712759],10,"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// ─── I18N ────────────────────────────────────────────────────────────────────\n\nconst i18n = rosetta({\n en: {\n // Nav\n about: \"About\",\n projects: \"Projects\",\n writing: \"Writing\",\n skills: \"Skills\",\n contact: \"Contact\",\n\n // Sidebar\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\n // Section labels\n label_about: \"About\",\n label_work: \"Work\",\n label_blog: \"Blog\",\n label_toolbox: \"Toolbox\",\n label_contact: \"Get in touch\",\n\n // Intro paragraphs\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\n // Contact section\n contact_title: \"Contact\",\n contact_email_label: \"Email\",\n contact_github_label: \"GitHub\",\n contact_valtown_label: \"Val.town\",\n\n // Post page\n back: \"← Back to home\",\n read_article: \"Read article →\",\n\n // Footer\n built_with: \"Built with Val.town\",\n },\n pt: {\n // Nav\n about: \"Sobre\",\n projects: \"Projetos\",\n writing: \"Artigos\",\n skills: \"Competências\",\n contact: \"Contacto\",\n\n // Sidebar\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\n // Section labels\n label_about: \"Sobre\",\n label_work: \"Trabalho\",\n label_blog: \"Blog\",\n label_toolbox: \"Ferramentas\",\n label_contact: \"Fala comigo\",\n\n // Intro paragraphs\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\n // Contact section\n contact_title: \"Contacto\",\n contact_email_label: \"Email\",\n contact_github_label: \"GitHub\",\n contact_valtown_label: \"Val.town\",\n\n // Post page\n back: \"← Voltar ao início\",\n read_article: \"Ler artigo →\",\n\n // Footer\n built_with: \"Feito com Val.town\",\n },\n});\n\n// ─── TRANSLATED DATA ─────────────────────────────────────────────────────────\n\nconst projects = {\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 },\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 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 },\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 },\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 },\n ],\n};\n\n// Posts keep their content in English only (technical writing is usually in EN)\n// but titles/excerpts are translated\nconst posts = [\n {\n slug: \"orm-vs-raw-sql\",\n date: \"Mar 10, 2026\",\n readTime: { en: \"6 min read\", pt: \"6 min leitura\" },\n title: {\n en: \"Why I stopped using ORM and went back to raw SQL\",\n pt: \"Por que deixei de usar ORM e voltei ao SQL direto\",\n },\n excerpt: {\n en: \"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 pt: \"Depois de anos com Sequelize e Prisma, cheguei a um limite com queries complexas. O que aprendi ao voltar ao pg e escrever SQL à mão.\",\n },\n tags: [\"Node.js\", \"PostgreSQL\", \"Backend\"],\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 readTime: { en: \"4 min read\", pt: \"4 min leitura\" },\n title: {\n en: \"Val.town is the scratchpad I always wanted\",\n pt: \"Val.town é o bloco de notas que sempre quis\",\n },\n excerpt: {\n en: \"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 pt: \"Deploy de um cron job costumava levar 20 minutos de boilerplate. Agora são 30 segundos. Uma visita rápida ao meu uso do Val.town.\",\n },\n tags: [\"Val.town\", \"TypeScript\", \"Automation\"],\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 readTime: { en: \"8 min read\", pt: \"8 min leitura\" },\n title: {\n en: \"React Server Components — one year in\",\n pt: \"React Server Components — um ano depois\",\n },\n excerpt: {\n en: \"We migrated part of Dragonboat to RSC last year. What worked, what didn't, and whether I'd do it again.\",\n pt: \"Migrámos parte do Dragonboat para RSC no ano passado. O que funcionou, o que não funcionou, e se voltaria a fazê-lo.\",\n },\n tags: [\"React\", \"Frontend\", \"Performance\"],\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 readTime: { en: \"10 min read\", pt: \"10 min leitura\" },\n title: {\n en: \"Building a real-time football stats pipeline with AI enrichment\",\n pt: \"Pipeline de estatísticas de futebol em tempo real com IA\",\n },\n excerpt: {\n en: \"How I wired fbref data → scheduled workers → GPT analysis → live API in a weekend, entirely on serverless infrastructure.\",\n pt: \"Como liguei dados do fbref → workers agendados → análise GPT → API em direto num fim de semana, tudo em infraestrutura serverless.\",\n },\n tags: [\"AI\", \"TypeScript\", \"Data Engineering\"],\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\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 /* ── Projects ── */\n .project-card { padding: 1.25rem 0; border-bottom: 1px solid #f4f4f5; display: flex; gap: 1.25rem; align-items: flex-start; }\n .project-card:last-child { border-bottom: none; }\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 }\n`;\n\n// ─── COMPONENTS ──────────────────────────────────────────────────────────────\n\nfunction LangToggle({ lang, basePath }: { lang: string; basePath: string }) {\n return (\n

\n \n EN\n \n /\n \n PT\n \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// ─── 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 · v17