Fran Martínez
ES

Tutorials

I define myself as a naturally curious person. Here I share what I keep learning, told from my own experience, so you can repeat it.

Portable OpenCode installation with OmniRoute and OpenRouter

Complete guide to install OpenCode on an external SSD fully portable, add OmniRoute with portable Node 22 for model gateway with automatic fallback, and configure OpenRouter as a free model provider (:free) with clear limits. Told from experience: decisions, problems (Node 20 crash, cmd.exe bug) and solutions.

4 parts · 8/5/2026

  • opencode
  • omniroute
  • openrouter
  • portable
  • ssd
  • fallback
  • free
  • windows
  1. 01Portable opencode installation on external SSDSet up opencode 100% portable on J: with direct binary and launchers that isolate config, data, and cache without touching the host.
  2. 02Portable OmniRoute + best-free-coding comboInstall OmniRoute on the SSD with portable Node 22, configure the OpenRouter key, and create the best-free-coding combo with 3 free models and automatic fallback.
  3. 03OpenRouter configuration in opencodeConnect OpenRouter as a :free model provider in opencode and OmniRoute, zero cost with clear limits.
  4. 04opencode rules for Windows and developmentWe create two rule files that guide opencode: one for PowerShell/Windows and one for the portable development environment on J:, with UTF-8 encoding, modules, and a Git workflow adapted to solo work.

Your personal website with Astro, GitHub Pages and Cloudflare

A step-by-step guide to build a static personal website, deploy it to GitHub Pages and connect a custom domain on Cloudflare. Told from experience: what we decided, what problems came up and how we solved them.

16 parts · 8/7/2026

  • astro
  • css
  • seo
  • git
  • github actions
  • github pages
  • cloudflare
  • gsap
  • i18n
  • dark mode
  • view transitions
  1. 01Goal and stack decisionsWhy Astro, GitHub Pages and Cloudflare, and what you need before starting.
  2. 02Preparing the environmentNode.js, Git and the GitHub repository ready before writing a single line of Astro.
  3. 03Astro project from scratchProject scaffold, folder structure, .gitignore and a configurable base.
  4. 04Visual identity with modern CSSPalette, typography and CSS variables: the design system from day one.
  5. 05Layout and componentsThe base layout with a reusable header, responsive navigation and footer.
  6. 06Keeping private data out of the repoEnvironment variables, .env, secrets and GitHub Actions variables: content visible on the site, invisible in the code.
  7. 07Projects with the GitHub APILoad the repositories live, cache them in the browser and handle loading and error states.
  8. 08On-page SEOMeta tags, Open Graph, sitemap, robots.txt and JSON-LD so the site shows up well in search engines and social networks.
  9. 09Deploying with GitHub Pages and GitHub ActionsA workflow that compiles the site and publishes it by itself, with every push to the main branch.
  10. 10Custom domain on CloudflareConnect your domain to GitHub Pages without changing the URL, and the two typical errors you'll run into.
  11. 11Content management and the Git workflowHow a static site gets updated without an admin panel, with Git as the only engine.
  12. 12Modern CSS and visual faceliftCSS layers, color-mix(), nesting, container queries, self-hosted variable fonts, glass header and SVG icons.
  13. 13Dark mode with toggle and page transitionsLight/dark theme with a persistent toggle, per-theme color tokens, avoiding the flash and adding View Transitions between pages.
  14. 14Scroll reveal and project filtersAnimate elements as they appear on scroll with IntersectionObserver and add technology and ordering filters to the project list.
  15. 15Modern animations with GSAPIntegrate GSAP in Astro: hero entrance with SplitText, parallax with ScrollTrigger, coexisting with the reveal and surviving the View Transitions.
  16. 16A bilingual site with i18nes/en routing with Astro, a typed dictionary, localized content, hreflang and parity guards so the languages never get out of sync.

LaLiga bot with football calendar

A serverless Python bot that scrapes the LaLiga calendar, sends alerts via Telegram and syncs the kickoff times with Google Calendar, automated with GitHub Actions.

4 parts · 8/9/2026

  • python
  • scraping
  • telegram
  • google calendar
  • github actions
  • cron
  • automation
  1. 01LaLiga bot: goal and calendar scrapingA serverless Python bot that scrapes the LaLiga calendar from El Mundo and extracts the matches of any configurable team.
  2. 02LaLiga bot: Telegram alertsCreating a bot with @BotFather, getting your chat_id and sending kickoff-change alerts with the Bot API.
  3. 03LaLiga bot: syncing with Google CalendarService account, dedicated calendar and the delta logic that creates, updates and alerts when a kickoff time changes.
  4. 04LaLiga bot: automating with GitHub ActionsThe cron workflow, repository secrets and local setup with .env so the bot runs on its own.

LeXi: an offline-first AAC communicator

Full series on how I built LeXi, an augmentative-communication PWA with sound cards, keyboard and TTS, on Cloudflare Pages, D1 and R2. Told from experience: decisions, problems (bindings, FKs, Service Worker, timezone) and solutions.

8 parts · 8/15/2026

  • astro
  • svelte
  • pwa
  • d1
  • r2
  • arasaac
  • aac
  • service worker
  • indexeddb
  1. 01LeXi: goal and architecture of an AAC communicatorWhy build an AAC communicator as an offline-first PWA on Cloudflare Pages, D1 and R2, and the stack we chose.
  2. 02LeXi: Astro + Svelte skeleton and the theme systemScaffolding the Astro project by hand, adding Svelte 5, Cloudflare Pages with wrangler.json and a theme switcher built with CSS custom properties.
  3. 03LeXi: D1 and R2, the Cloudflare bindingsThe SQL schema in D1, local and remote migrations, and the R2 audio endpoints with proxy upload.
  4. 04LeXi: the ARASAAC seed, a preloaded catalogDownloading ARASAAC pictograms, generating a manifest and an idempotent SQL, and detecting changes in CI.
  5. 05LeXi: card grid, Spanish keyboard and TTSThe picture-card board with sound, the Spanish keyboard, the TTS voice and the invite-code system with demo mode.
  6. 06LeXi: the card editor with custom voiceRecording the family's voice with MediaRecorder, long-press editing, offline audio cache and word-by-word playback.
  7. 07LeXi: offline-first sync and usage statsReconnect retry, the pending audio queue, a stats endpoint and the FK bug that broke sync in production.
  8. 08LeXi: the installable PWA and the custom domainiOS support, service-worker caching on a custom domain, the SW that never registered and the bot's timezone.