# method64

> method64. Websites, software & AI integrations that make a difference. From the first line of code to production launch.

Located in South Tyrol, Italy. Websites, software, AI integrations, from South Tyrol, built to last.

## Services

- [All services overview](https://method64.com/en/leistungen): Frontend, software backends, AI pipelines, SaaS architecture. Deep in each of these disciplines, not skimming the surface anywhere. Which one you need is something to figure out in conversation. Four weeks of hypercare after every launch are standard.
- [Web development](https://method64.com/en/leistungen#webentwicklung): Pixel-perfect websites & web apps. Every site is built by hand. No page builders, no WordPress themes with 80 plugins — frontends with React, Next.
- [Software & APIs](https://method64.com/en/leistungen#software-apis): Backends, microservices, integrations. APIs that integrate other systems. Data pipelines that run reliably.
- [AI integrations](https://method64.com/en/leistungen#ki-integrationen): LLMs, RAG, embeddings, agents. AI isn't a marketing term here. method64 builds RAG pipelines that deliver genuinely relevant answers, agents with tool-use that take on real tasks, and embedding search that beats full-text.
- [SaaS development](https://method64.com/en/leistungen#saas-entwicklung): Multi-tenant, auth, billing, scale. Building SaaS isn't "web app with a login". It's multi-tenant data isolation, subscription lifecycle, auth with magic links and OAuth, observability across tenants, and onboarding that doesn't scare people off — built in right from day one, not retrofitted.

## Products

- [Climactra](https://method64.com/en/climactra): Climactra: multi-tenant SaaS for hotels — auditable CO₂ accounting per GHG Protocol, auto-check for 4 sustainability labels, prioritised measures. Now live.

## Studio

- [Process](https://method64.com/en/prozess): How we build — four phases from understanding to launch.
- [Principles](https://method64.com/en/prinzipien): What guides us — seven principles with concrete examples and honest trade-offs.
- [About me](https://method64.com/en/uber-mich): Who's behind method64 — Jacob Wieser, solo engineer from Jenesien near Bolzano. Brand story, background, what drives the building.
- [Tech Stack](https://method64.com/en/tech-stack): Full method64 toolkit across frontend, API, backend, AI and infra — curated, with rationale per tool.

## Contact

- [Start a project](https://method64.com/en/kontakt): Five short questions, then an answer. No discovery call, no long questionnaire. Just enough to know what it's about and how fast.
- Email: hello@method64.com
- Reply time: Answer usually within the same business day.

## How we build

- **01 Understand** (Discovery without theatre): Sit down together, clarify what it's actually about. No discovery workshop with 12 Post-It colours, no 60-bullet briefing PDF, focused conversations with the people who have the problem.
- **02 Architecture** (System design + API contracts before code): Before the first line of code is written, the system is on paper. Which services? Which data models? Which integrations? Decisions get made here: what is built, what is bought, what is left out.
- **03 Build** (2-week slices, deployable increments): Every two weeks a working slice ships, with a short status update at the end, what was built, what comes next, where it's stuck; weekly on request. What you see depends on the project: a live staging link for SaaS and web apps, screenshots for marketing sites, sample outputs and eval snapshots for AI integrations.
- **04 Launch + Iterate** (Deploy + hypercare + monitoring): Launch isn't the goal, the first day users actually work with the product is. Deployment runs via build gate + Docker, with a health check and a git-revert rollback path, not with "everyone cross your fingers".

## Principles

- **method64 builds its own software.** Not: "Selling white-label SaaS from the reseller catalog."
- **Whoever plans, builds.** Not: "Sales pitches, account manager mediates, then handover to devs."
- **No is also an answer.** Not: "Every contract is a good contract."
- **South Tyrol, not Silicon Valley.** Not: "As big as possible, as fast as possible, VC in the pitch."
- **Architecture before the first line of code.** Not: "Just start, refactor later."
- **Every week a result.** Not: "Six-month big-bang sprint, then demo on the deadline."
- **After launch, it really starts.** Not: "Hand-off to "the maintenance contract", then radio silence."

## Behind method64

- **Jacob Wieser** (Founder · Solo Engineer): One person, from the first conversation to the server that runs at night.
- Full story: https://method64.com/en/uber-mich

## Interactive Features per Page

What the site actually does. These capabilities are not visible in the prerendered HTML — they activate after browser hydration.

### Home (`/`)

- **LiveBuilder Hero**: 4-phase sequence (`init` → `reveal` → `complete`). Code panel types React/JSX line by line, preview panel renders the corresponding UI in sync. Variable typing speed for realism, cursor blinks and pauses.
- **WebGL Hero Background**: Fragment shader computes an organic colour field per frame in accent + violet + cyan. Reacts to mouse position. Not a video, loads nothing extra.
- **SitePipeline (this site, in 7 stations)**: Vertical scroll-driven SVG path with a pulsing tip. Anchor dots light up as the fill passes them. Cards flip on click and reveal tech-proof on the back. Stations 6 + 7 fetch live build stats from `/build-stats.json`.
- **Editorial Section**: Magazine layout with Source Serif drop-cap, sticky headline on the left, pulled-out italic blockquote.
- **AboutSolo Teaser**: Portrait + italic hook (Source Serif) + 4-fact strip. Click opens /uber-mich.
- **CTA Section**: Mouse-follow radial glow as background, large closing headline.
- **Echo**: Mini code loop, 4 snippets cycle with typed result outputs (build time, RAG query, deploy).
- **HeroQuickCTA**: Appears after LiveBuilder phase 4. Sticky until the user scrolls.

### Services (`/leistungen`)

- **IndexHero**: 4 service titles as oversized typography. Hover state dims non-hovered siblings via CSS sibling selectors. Click scrolls to subsection.
- **Subsection header as CTA**: Each of the 4 service titles is clickable, routes to `/kontakt?service=<id>`. Arrow appears on hover.
- **ComponentPlayground** (`#webentwicklung`): Real-wired button demo. Left column: props controls (variant, size, label, flags). Right column shows live-updated JSX. Top renders the real button. Pure React state, no eval, no iframe.
- **RequestSequence** (`#software-apis`): SVG topology Client → Gateway → Service → Postgres → Response. Animated dot loops the path. Hover on a hop shows header/body/latency detail. Mobile fallback: vertical card list with all details expanded.
- **MiniRAGDemo** (`#ki-integrationen`): 4-stage pipeline (embed → search → rerank → generate) with dot indicator. User types a question or clicks a sample chip; retrieval runs against 7 hand-written knowledge chunks via keyword overlap (TF-IDF-lite); answer streams char-by-char. Demo logic, not a live LLM. Easter egg: hovering "rag" spreads the letters.
- **StackedLayers** (`#saas-entwicklung`): Four 3D glass layers (Auth, Billing, Tenancy, Observability), stacked with `preserve-3d` + rotation. Hover moves one layer +90px forward, others dim to 35% opacity. Mobile: static vertical stack.
- **FAQ accordion**: 18 Q&As grouped by service. Inline JSON-LD `FAQPage` schema so LLMs can read without JS.

### Process (`/prozess`)

- **PageHero**: 4-phase stepper with pulsing dots, scroll-aware active state.
- **ProzessStudio**: Scroll-driven 780vh sequence with 4 stations. Each station is its own visual micro-world: **Pinnwand** (sticky notes with polaroid caption + mouse-tilt), **Blueprint** (technical diagram with API banner and zones), **Inventory** (method cards + tools with mouse tilt), **MissionControl** (live build metrics + status strip).
- **Free-explore endgame**: After station 4 a pan/zoom mode unlocks for the whole sequence. Drag to pan, wheel to zoom, keyboard shortcuts (arrows, +/-, R for reset).
- **MiniMap**: Floating overlay bottom-right shows the 4 stations to scale. Click teleports to a station.
- **ConnectionLines**: SVG connections between stations.
- **Mobile fallback** (`StudioMobile`): Vertical stack, each station its own page section. No free-explore.

### Principles (`/prinzipien`)

- **PillarCarousel**: 7 principles arranged in a 3D orbit. Scroll-driven tier scaling. Active principle moves forward, others shrink.
- **AntiVariantOverlay**: One "what we don't do" reveal per principle. Hover or scroll-in shows the anti-variant. SessionStorage `prinzipien_demo_seen` gates an auto-demo to once per session.
- **PrincipleSection**: Each principle gets its own narrative section with examples, trade-offs, and a real anecdote.
- **Mobile fallback**: Carousel becomes a vertical stack, all anti-variants directly visible.

### Tech-Stack (`/tech-stack`)

- **LayerSection × 5**: Frontend, API & Backend, Data, AI & ML, Infrastructure.
- **ToolCard**: Per tool: name, version, 1-sentence rationale. Hover triggers the ConnectionOverlay.
- **ConnectionOverlay**: Hovering a tool lights up related tools — connections are defined as a static graph map in `connections.ts`. Example: hovering "Docker" highlights Hetzner, nginx, Caddy, systemd, Postgres, Redis, Umami.
- **AntiPatterns**: 10 tools we deliberately don't use, with rationale.
- **Auto-demo**: On first visit (gated via SessionStorage `techstack_demo_seen`) one tool is programmatically "hovered" for 2 seconds to demonstrate the connection mechanic.

### Climactra (`/climactra`)

- **Hero dashboard preview**: Large screenshot of the Climactra dashboard. Click opens lightbox.
- **Highlights cards**: 4 cards (Multilingual, GHG-compliant, Label-ready, EU-hosted).
- **Demo carousel**: 5 product screenshots (Dashboard, Data entry, Certification auto-check, Measures, Reports) with narrative caption per screen. Drag-to-swipe, keyboard navigation.
- **Lightbox**: Click on screenshot opens full-screen preview with zoom + pan, keyboard navigation (arrows + Esc).
- **Story section**: 4 narrative blocks (Trigger, Status quo, Why hotels, What sets Climactra apart).
- **Tech-Stack block**: 9-layer stack overview specific to Climactra (~50 tools).
- **Pricing with countdown**: Founding-member €59/month (vs €89), locked in for good, until 2026-08-31. Countdown in days/hours/minutes/seconds, ticks every second. After deadline an automatic state switch to "Founding-member ended".
- **Launch CTA**: Primary button to the live app (climactra.com) + secondary mailto link for enquiries (prefilled subject + body, no server persistence).

### Contact (`/kontakt`)

- **ConversationFlow**: 5-step chat-style form: (1) service selection, (2) project description (min. 30 chars), (3) timing, (4) budget, (5) contact details. Auto-scroll to current step, back/next navigation.
- **Honeypot field**: Invisible field bots will fill, blocks submission.
- **Mount-time check**: Submissions under 3 seconds register as bot behaviour and are blocked.
- **ServerPulse animation**: On submit a pulse strip animates through: `request → encode → transmit · TLS → deliver · ionos-smtp → ack · received`.
- **Form backend**: `POST /api/contact` to our own Fastify backend on the same Hetzner server, same-origin.

### About me (`/uber-mich`)

- **NameWordmark**: SVG wordmark with a decorative layout.
- **MetaChips**: Mono chips for location (Jenesien, South Tyrol · DE/IT/EN) and degree (B.Sc. Informatics and Management of Digital Business).
- **NameStory**: Explanation of "method" + "64" for non-technical visitors.
- **4-section bio**: Studies → Automation → Usability → Aesthetics, each section with a section label.

### Site-wide

- **Custom cursor**: Two elements — small dot follows the mouse exactly, ring follows with 0.12 lerp. Magnetic attraction to elements with `data-magnet`. Hover state (scale 2.5×), click state (scale 0.5×). Disabled on touch devices.
- **Nav**: Fixed top, initially transparent, after 80px scroll switches to `backdrop-filter: blur(20px)`. Language switcher DE/IT/EN.
- **PageTransition**: Fade transition between routes.
- **Lenis smooth scroll**: Site-wide smooth scroll with `prefers-reduced-motion` respect.
- **Reveal**: Intersection-Observer wrapper for scroll reveals (60px rootMargin, 0.8s ease-out, fires once).
- **KineticText**: Per-word stagger animation, used in hero headline reveal.

### What the site explicitly does NOT do

- No cookies
- No 3rd-party tracking (no Google Analytics, no Vercel Analytics, no Pixel)
- No 3rd-party fonts (all self-hosted)
- No 3rd-party CDNs
- No cookie banner (not required, see privacy policy §8 + §10)
- Analytics: Umami self-hosted at `analytics.method64.com`, cookieless, hashed IP with daily-rotating salt

## Tech Stack

### 01 Frontend & UI — What runs in the browser

- **React (18 / 19.2)**: Component model that has held up for 12 years. The method64 site itself runs on React 18 with Vite, Climactra and client projects on Next.js with React 19.2, where Concurrent Features and the React Compiler actually pay off.
- **TypeScript (5.5)**: Strict mode everywhere, a whole class of runtime errors disappears as you type.
- **Next.js (16.1)**: Server Components, App Router, built-in routing + i18n. In use wherever SSR or multi-tenancy are required (Climactra), this site gets by with Vite + a prerenderer.
- **Vite (5.3)**: Dev server in under a second, production build in under ten. Webpack tried for five years to deliver this, Vite just did it.
- **React Router (6)**: When Vite is used instead of Next.js, React Router is the honest, independent routing, no hidden magic conventions.
- **Tailwind CSS (v4)**: Utility-first saves hundreds of custom CSS classes per project. The build output contains only what's actually used.
- **CSS Modules**: For component-specific styling outside the Tailwind world, no class collisions, no BEM bureaucracy.
- **shadcn/ui**: Components as source code, not as an npm package, changeable instead of fighting the API.
- **GSAP (3.15)**: For timeline-driven sequences with precise easing, where CSS transitions don't give enough control and JS animation libs have too much overhead.
- **Three.js (r170)**: WebGL without the boilerplate. Used when 3D really makes sense, otherwise it stays out, because it's a bundle heavyweight.
- **Lenis (1.3)**: Smooth scroll without the typical native bugs, and with `prefers-reduced-motion` respect out of the box.
- **Lucide React (0.577)**: Icon family that actually looks consistent. Imported individually, not the whole library bundle.
- **Webfonts (self-hosted)**: Plus Jakarta Sans, Inter, JetBrains Mono, Source Serif 4, self-hosted, woff2, font-display:swap. No Google tracking, no third DNS lookup.

### 02 API & Backend Services — What sits between browser and database

- **Node.js (≥18.17)**: Default runtime for everything JavaScript-side. LTS branch, no edge-cutting.
- **Python (3.12)**: When ML, data engineering or embeddings are involved, everything there has a better-maintained Python path than the JS counterpart.
- **Fastify (5)**: Schema-driven, fast, small. Express replacement, since validation and JSON schemas are written anyway.
- **Zod (4.3)**: One schema definition for validation, TypeScript types and JSON schema export, DRY without a generator pipeline.
- **Nodemailer (7.0)**: SMTP client that has worked precisely for 16 years. Standard SMTP means: changing providers is config, not a rewrite, no lock-in like with Resend or SendGrid and their proprietary HTTP APIs.
- **next-intl (4.8)**: i18n in Next.js apps with Server Components support, no separate provider layer in the tree.

### 03 Data, Auth & Payments — What ends up on disk, and who gets in

- **PostgreSQL (16)**: A relational DB that has been maturing for around 40 years. JSONB, full-text, pgvector, all in one engine.
- **Prisma (6.19)**: Schema as single source of truth, migrations versioned, types generated automatically. Simply the best DX in the Node ecosystem.
- **pgvector (0.8)**: Vector search directly in Postgres, no Pinecone pricing model, no second database.
- **Redis (7)**: In-memory caching and rate limiting, when Postgres gets too many writes for ephemeral data.
- **Auth.js (v5 (beta))**: Auth without a vendor account (formerly NextAuth.js). Self-hostable, OAuth-provider-flexible, no pricing cliff at MAU growth. v5 has been stable in the beta channel for months, good enough for production.
- **bcryptjs (3.0)**: Password hashing that doesn't depend on a C lib, runs everywhere, including serverless environments.
- **Stripe (2025-12)**: Payment layer with the best developer experience. Webhook-first architecture matches the one used here. For Italian customers the bridge to SdI goes via Aruba Fatturazione Elettronica, Stripe charges, Aruba issues the electronic invoice.
- **@react-pdf/renderer + ExcelJS**: PDF and Excel exports generated server-side, Climactra produces six print-ready climate reports and four certification-label exports with this. Templates live in code, not in a designer tool, the same diff-able versioning as the rest of the app.

### 04 AI & ML — What understands language and computes embeddings

- **Claude (Anthropic)**: Long-context, code-reasoning and tool-use at a level GPT will be chewing on for a while. Default for everything that needs accuracy over speed.
- **GPT (OpenAI)**: When latency and cost matter, e.g. bulk classification or simple generation in high volume.
- **OpenAI Embeddings (text-embedding-3-large)**: Best embedding quality for RAG, combined with pgvector as storage.
- **Cohere Rerank (3)**: Reranking stage between vector search and LLM. Measurably lifts RAG answer quality, about two dollars per thousand queries, negligible against the LLM costs behind it.
- **LangChain (0.3)**: Selectively for standard patterns like retrieval chains. Not as a framework wrap of all LLM calls.

### 05 Infrastructure, Observability & DevTools — Where it runs and how it gets watched

- **Docker + Compose**: Reproducible environments, no "runs on my machine" debates. Compose for local multi-service setups.
- **Hetzner Cloud**: Real VMs in German datacenters, half the price of AWS for comparable specs. No vendor lock-in.
- **nginx**: Reverse proxy, TLS termination, static hosting, one config, three jobs. Default for the method64 site and any setup where a classic web server is called for.
- **Caddy (2.8)**: Reverse proxy with auto-Let's-Encrypt in container setups. In Climactra it saves a config layer, same job as nginx, different trade-off.
- **systemd**: Service management without daemon soap opera. Auto-restart, logs in journald, standard on every Linux.
- **IONOS (SMTP+DNS)**: EU-hosted infrastructure for the own mailboxes and DNS records. Established enough that banks and authorities use it. For product volume (Climactra), Amazon SES in eu-central-1 is used depending on scale.
- **@sentry/nextjs (10.47)**: Errors with stack trace, source-map-resolved, problems surface before users report them.
- **Umami (self-hosted)**: Pageview statistics without cookies, without IP storage, GDPR-compliant. Self-hosted on the own Hetzner server.
- **Vitest (4.1)**: Test runner that inherits Vite configs, no double setup. Faster than Jest, same Jest API.
- **ESLint (9)**: Lint layer that automatically enforces project-wide code conventions, strict rules, no "warning" loopholes.
- **tsx (4.21)**: Run TypeScript files directly from Node, build scripts and migration tools work without a separate ts-compile step.

### WHAT'S NOT IN USE

- **WordPress**: Maintenance overhead for themes, plugins and security patches grows disproportionately with site complexity. For a marketing site that can be served as static prerendered HTML, it's over-dimensioned.
- **Bootstrap**: Tailwind has been the better tool for utility-oriented styling for years. Bootstrap class sets are rigid, the override effort for a distinctive design is disproportionate.
- **jQuery**: Browsers now have native APIs for DOM manipulation, event handling and HTTP requests. The ~30 kB footprint no longer pays off.
- **Webpack (directly configured)**: Configuration is involved and build times are noticeably slower than Vite. For new projects, Vite is the more pragmatic choice.
- **MongoDB**: The schemaless idea just shifts the schema burden from the database to the application layer. Postgres with JSONB columns delivers the same flexibility without the trade-off on transactions and joins.
- **Redux / Redux Toolkit**: Global state management is unnecessary in most apps. React state, Context and server-state libraries like TanStack Query solve the same with significantly less boilerplate.
- **Vercel (hosting)**: Very good DX, but edge function pricing scales quickly beyond what a dedicated server costs. Next.js gets deployed directly on own hardware.
- **AWS Amplify**: An additional abstraction over AWS services that creates more problems than it solves under real complexity. When AWS is the right call, going directly with the primitive services works better.
- **Page-Builders (Webflow / framer.com)**: Visual drag-and-drop tools make performance optimisation, custom logic and versioning harder. For non-trivial sites that hits limits a code-first approach doesn't have.
- **No-code backends (Supabase Auth)**: Useful for prototypes, but lock-in problems surface quickly in production. Auth logic belongs in own code so it stays auditable and migratable.

## FAQ

- **Which framework gets recommended for marketing sites vs web apps?** For marketing sites: Next.js with static generation or Vite + prerendering. Fast, SEO-strong, low maintenance. For complex web apps: Next.js App Router or a Vite SPA with React Query, depending on whether SSR makes sense or whether the app is fully client-rendered after login anyway. A tool gets recommended because it fits the use case, not out of preference.
- **Is design-only or development-only an option?** Both are possible. Design often happens in-house because it's one integrated craft, a site that looks good in Figma but falls apart in the browser isn't design. If you already have a design system or mockups, development gets handed over gladly and the design gets checked upfront for implementability + performance.
- **How fast does a site load?** Standard target: LCP under 1.5s on mid-range mobile, Lighthouse score 95+ across all categories. This site currently has LCP ≈ 1.2s and Lighthouse 100/98/100/100 (Performance / Accessibility / Best Practices / SEO), as a running example. Sites get built with hard performance budgets as a build gate: if a change pushes the bundle over the limit, the build fails.
- **What happens after launch?** A 4-week hypercare phase is included in the standard offer: same response time as before (usually the same business day), logs get read and issues get fixed as they come up. Afterwards pay-per-use or optionally a fixed hour budget, no minimum retainer. No "security update" packages for tools that were never built in to begin with.
- **How does scalability get built into a new service?** Before "scaling" comes "measuring". Services get built so that it's exactly visible when what gets expensive, structured logs, latency histograms, DB query profiling. Scaling itself then comes in stages: vertical scale → read replicas → caching → service sharding. No "10x scale" architecture for a product that doesn't have product-market fit yet.
- **Node.js or Python, when which?** Node.js for web backends, APIs with a high I/O share, real-time features, anything close to the frontend. Python for data pipelines, ML/AI workloads, scripts with numerical computation, anything where the ecosystem (NumPy, Pandas, scikit-learn, Hugging Face) makes the difference. Mixing is fine as long as every service has a clear language choice, not JS code in a Python service.
- **How do database migrations stay safe?** Migrations are versioned (Prisma, Alembic, or hand-written SQL depending on the stack), run in CI against a snapshot of the production DB, and are pre-run in staging. For large schemas: first add a new column (nullable), then switch code to read both, then backfill, then switch code to read new, then drop the old column. Four releases instead of one, but no downtime and no weekend deploy with emergency rollback.
- **Does DevOps come included or should I handle it?** Both possible. The service typically gets built so it can deploy on Hetzner, Fly.io, Railway, AWS or your own Kubernetes, your hosting stays your choice. If you want a complete setup: Hetzner + Docker + nginx or Fly.io end-to-end, including backups, monitoring, alerting.

See all 18 FAQs at https://method64.com/en/leistungen#faq

## Optional

- [Legal Notice](https://method64.com/en/impressum): Legal notice
- [Privacy Policy](https://method64.com/en/datenschutz): Privacy policy
- [Sitemap](https://method64.com/sitemap.xml)