Skip to content
Gabriel Suter

Gabriel Suter

Frontend engineer with an eye for the interface

I build web products from the first sketch to production, and I write down why each decision was made. Right now that is Retake, a QA tool for AI-narrated audiobooks built on the ElevenLabs API, with a public decision log and a learning journal.

This site is built in Angular on purpose, as a second framework next to React. Its repository and decision log are private and open on request.

Available now, full time, remote from Switzerland

Get in touch E-MailLinkedIn(opens in a new tab)GitHub(opens in a new tab)CV(PDF download)

Projects

Six projects from nine months. One for a client, one live with users, one public as a code sample, three in progress.

  • Startseite des Webshops: Foto, Ort und Kaufweg.

    Gado Imkerei

    Website and shop for an apiary in Däniken, Switzerland: from the cart to the paid order.

    • React 19
    • TypeScript
    • Tailwind CSS v4
    • Supabase
    • Postgres
    • Row Level Security
    • Deno
    • Stripe
    • Resend
    • ASPSMS
    • Vercel
  • Trade-Journal mit Screenshot-Karten.

    Entrio

    AI-assisted trading journal: web app, native clients and four broker integrations in four runtimes.

    • React 18
    • TypeScript
    • Supabase
    • Postgres
    • Row Level Security
    • Deno
    • OpenAI
    • Stripe
    • MQL5
    • C#
    • Electron
    • Chrome MV3
  • Liste der Renditeobjekte mit Filterleiste.

    Renditeradar

    Aggregator for investment properties: from the messy raw row to a radius search over a spatial index.

    • Next.js 16
    • React 19
    • TypeScript
    • Tailwind CSS v4
    • PostgreSQL
    • PostGIS
    • Row Level Security
    • Supabase
    • Python 3.13
    • Leaflet
    • Vercel
    • GitHub Actions
  • Flächen auf dem swisstopo-Luftbild.

    Geobeet

    Garden planning on official Swiss geodata, from the aerial image to a to-scale printed plan.

    • Python 3.13
    • FastAPI
    • Pydantic
    • uvicorn
    • SQLite
    • Shapely
    • pyproj
    • Leaflet
    • swisstopo
    • WMTS
    • rough.js
  • Batch Review mit bewerteten Entwürfen.

    ExtensionReach

    Lead discovery and growth platform: four runtimes on one database, three AI agents with 31 tools.

    • React 18
    • TypeScript
    • Supabase
    • Deno
    • Chrome MV3
    • OpenAI
    • Claude auf AWS Bedrock
    • Vercel
    • GitHub Actions
  • Tagesring mit den verbleibenden Kalorien.

    Baseform

    Nutrition, training and recovery as a PWA: no server, no account, works offline.

    • React 18
    • Vite
    • PWA
    • ZXing
    • localStorage
    • SVG
    • Google Health API
    • OAuth 2.0
    • Anthropic Messages API

Method

Four years building applications in a company, since graduating my own products, in part AI-assisted. That is why six projects were finished in nine months, and it is also where fair questions come up. So this page does not say that I work carefully; it says where that can be checked.

  1. Discovery and requirements

    A conversation with the stakeholders before anything is built: what the project has to do, who works with it, what is fixed and what is negotiable. It ends with a scope both sides understand the same way.

    Backed byDECISIONS.md

  2. Mockup

    The interface is drafted before it is coded. An hour of mockup shows whether the requirement holds; the same insight after implementation costs days.

    Lives inEntrio-Repository, coach-dashboard-mockup.html

  3. Decision before code

    For everything structural, the context, the options considered, the choice and its consequence are written down before building. Later it is possible to say why something is the way it is, not only that it is.

    Backed byDECISIONS.md

  4. Rules and skills

    A project's conventions live in the project: folder layout, names, language, test strategy. Recurring procedures are written down, so the tenth run goes like the first.

    Lives inCLAUDE.md, dazu ~/.claude/skills

  5. Conventions from the installed version

    The tooling reads the versions that are actually installed and supplies the conventions for them. Otherwise the code follows a state older than the project itself.

    Backed by.mcp.json

  6. Implementation, AI-assisted

    The part that may be delegated. The result is checked against the decisions and rules before it, not against memory or habit.

    Backed bysrc/

  7. Check and commit

    Before every commit, formatting, static analysis and the project rules run over the changed files. The commit message explains the decision, not the lines.

    Backed by.husky/pre-commit

  8. Automated checks, then live

    On every change, static analysis, tests, the production build and checks in a real browser run through. One of the steps computes the contrast ratios from the colour tokens instead of estimating them. If one fails, nothing ships.

    Backed by.github/workflows/ci.yml

 The method in detail

Contact

For mandates, projects and questions. The more concrete the role, the period and the workload, the more concrete the answer.